1 / 43

App SDK 2.0

App SDK 2.0. RallyOn !. Hour 1 Agenda. Welcome, Overview, & How We Got Here (Mark ) Write an App in 5 Minutes or Less (Kyle) Component List & Help (Mark) Components in Detail ( Charles ). Hour 2 Agenda. Data Interaction (Kyle) Examples & Guides (Mark) Rake File (Charles)

alanna
Download Presentation

App SDK 2.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. App SDK 2.0 RallyOn!

  2. Hour 1 Agenda • Welcome, Overview, & How We Got Here (Mark) • Write an App in 5 Minutes or Less (Kyle) • Component List & Help (Mark) • Components in Detail (Charles)

  3. Hour 2 Agenda • Data Interaction (Kyle) • Examples & Guides (Mark) • Rake File (Charles) • Ext Details (Kyle)

  4. Platform A "platform" is a system that can be programmed and therefore customized by outside developers -- users -- and in that way, adapted to countless needs and niches that the platform's original developers could not have possibly contemplated, much less had time to accommodate. - Marc Andreessen

  5. Rally’s App Platform: What is it? • The Rally App Platform enables the ‘occasional developer’ to enhance, customize, and extend the Rally product.

  6. App Story: Who Closed Defects?

  7. App Story: Personal Burndown Chart

  8. App Story: Epic Stories by Status

  9. App Story: Epic Progress

  10. App Story: Planning Board for Very, Very Large Chip Maker

  11. Apps Version 1.0 Uptake 1.O Release

  12. Past, Present & Future Rally UI Rally UI & App SDK 2.0 App SDK 1.0

  13. Portfolio Item Kanban

  14. Write an Appin 5 Minutes or Less

  15. Anatomy of an App

  16. Rally.createApp • Rally.createApp(name, definition) • Name should be unique • Definition should contain launch() • Created as a subclass of the App Base Class • launch() called when all dependencies loaded • JS • CSS • Rendered to body

  17. App Base Class • Rally.app.App • Extends from Ext.Container • launch() • getContext() • Rally.app.Context • getWorkspace() • getProject() • getDataContext()

  18. Hello World Rally.createApp(‘Rally.app.HelloWorld’, { launch: function() { this.add({ xtype: ‘component’, html: ‘Hello World’ }); } });

  19. Hello Context Rally.createApp(‘Rally.app.HelloContext’, { items: [ { xtype: ‘component’, itemId: ‘project’ } ] launch: function() { var context = this.getContext(); this.down(‘#project’) .update(‘Project: ‘ + context.getProject().ObjectID); } });

  20. Component List & Help System Overview

  21. Landing Page

  22. Component List

  23. Components – in Detail

  24. Data Interaction Models, Records & Stores (Oh My)

  25. Models • Specify a WSAPI object type • Defect, HierarchicalRequirement, etc. • Specify fields • ScheduleState • Type = String • AllowedValues = [‘Defined’, …, ‘Accepted’] • Rally.data.ModelFactory • getModel, getModels • Built dynamically from TypeDefinition • Cached per workspace

  26. Records • Instance of a Model • Provide simple CRUD operations

  27. Stores • Collection of Records • Batch read • Sorting, Filtering, Paging • Data provided to all UI components via stores • Rally.data.WsapiDataStore

  28. Rake File

  29. Guides & Examples

  30. Guides

  31. Examples

  32. ExtJS Library Details

  33. Class System • Ext.define(name, definition) • extend • mixins • constructor: function(config) { } • callParent(args) • Ext.create(name, config) • http://docs.sencha.com/ext-js/4-0/#!/guide/class_system

  34. Class System Ext.define(‘My.cool.Container’, { extend: ‘Ext.container’, constructor: function(config) { //Do something cool this.callParent(arguments); } }); varcoolContainer = Ext.create(‘My.cool.Container’, { level: 99 });

  35. Components • Ext.Base • Ext.AbstractComponent • Ext.Component • initComponent() • destroy() • http://docs.sencha.com/ext-js/4-0/#!/guide/components

  36. Containers • Ext.Component • Ext.container.AbstractContainer • Ext.container.Container • Layouts • auto • hbox, vbox, etc. • add() • http://docs.sencha.com/ext-js/4-0/ - !/guide/layouts_and_containers

  37. Event Model • Ext.util.Observable • Common event signatures: • function(sender, arg1, arg2…) • Registration • listeners config • on(eventName, handler, scope) • Cleanup • un(eventName, handler, scope)

  38. Events: listeners config Ext.create(‘Rally.data.WsapiDataStore’, { model: ‘Defect’, listeners: { load: function(store, records) { } } });

  39. Events: on var store = Ext.create(‘Rally.data.WsapiDataStore’, { model: ‘Defect’ }); store.on(‘load’, function(store, records) { });

  40. Xtypes • Unique shorthand name • Ext.Container • container • Rally.ui.cardboard.CardBoard • rallycardboard • Allow lazy instantiation of components

  41. Xtypes: declarative layout { xtype: ‘container’, items: [ { xtype: ‘component’, cls: ‘header’, itemId: ‘header’ }, { xtype: ‘component’, cls: ‘body’, itemId: ‘body’ }, { xtype: ‘component’, cls: ‘footer’, itemId: ‘footer’ } ] }

  42. Xtypes: Dynamic layout var container = Ext.widget(‘container’); container.add({ xtype: ‘component’, itemId: ‘iterations’ }); container.down(‘#iterations’).add({ xtype: ‘rallyiterationcombobox’ });

  43. Thank You! If you want to build a ship don't herd people together to collect wood and don't assign them tasks and work, but rather teach them to long for the endless immensity of the sea. Antoine-Marie-Roger de Saint-Exupery

More Related