430 likes | 579 Vues
Dive into Rally's App SDK 2.0 and learn how to build applications in minutes! This comprehensive session outlines an engaging agenda that covers the platform's offerings, including the architecture, data interaction, and component details. Discover how the Rally App Platform empowers developers to customize and enhance products. Explore real-world examples, guides, and helpful resources to maximize your development experience. Whether you're a beginner or experienced developer, this guide sheds light on creating efficient apps effortlessly.
E N D
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) • Ext Details (Kyle)
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
Rally’s App Platform: What is it? • The Rally App Platform enables the ‘occasional developer’ to enhance, customize, and extend the Rally product.
Apps Version 1.0 Uptake 1.O Release
Past, Present & Future Rally UI Rally UI & App SDK 2.0 App SDK 1.0
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
App Base Class • Rally.app.App • Extends from Ext.Container • launch() • getContext() • Rally.app.Context • getWorkspace() • getProject() • getDataContext()
Hello World Rally.createApp(‘Rally.app.HelloWorld’, { launch: function() { this.add({ xtype: ‘component’, html: ‘Hello World’ }); } });
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); } });
Data Interaction Models, Records & Stores (Oh My)
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
Records • Instance of a Model • Provide simple CRUD operations
Stores • Collection of Records • Batch read • Sorting, Filtering, Paging • Data provided to all UI components via stores • Rally.data.WsapiDataStore
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
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 });
Components • Ext.Base • Ext.AbstractComponent • Ext.Component • initComponent() • destroy() • http://docs.sencha.com/ext-js/4-0/#!/guide/components
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
Event Model • Ext.util.Observable • Common event signatures: • function(sender, arg1, arg2…) • Registration • listeners config • on(eventName, handler, scope) • Cleanup • un(eventName, handler, scope)
Events: listeners config Ext.create(‘Rally.data.WsapiDataStore’, { model: ‘Defect’, listeners: { load: function(store, records) { } } });
Events: on var store = Ext.create(‘Rally.data.WsapiDataStore’, { model: ‘Defect’ }); store.on(‘load’, function(store, records) { });
Xtypes • Unique shorthand name • Ext.Container • container • Rally.ui.cardboard.CardBoard • rallycardboard • Allow lazy instantiation of components
Xtypes: declarative layout { xtype: ‘container’, items: [ { xtype: ‘component’, cls: ‘header’, itemId: ‘header’ }, { xtype: ‘component’, cls: ‘body’, itemId: ‘body’ }, { xtype: ‘component’, cls: ‘footer’, itemId: ‘footer’ } ] }
Xtypes: Dynamic layout var container = Ext.widget(‘container’); container.add({ xtype: ‘component’, itemId: ‘iterations’ }); container.down(‘#iterations’).add({ xtype: ‘rallyiterationcombobox’ });
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