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.
App Story: Who Closed Defects?
App Story: Personal Burndown
Chart
App Story: Epic Stories by Status
App Story: Epic Progress
App Story: Planning Board for Very,
Very Large Chip Maker
Apps Version 1.0 Uptake
1.O Release
Past, Present & Future
Rally UI
Rally UI &
App SDK 2.0
App SDK 1.0
Portfolio Item Kanban
Write an App
in 5 Minutes or Less
Anatomy of an App
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);
}
});
Component List & Help
System Overview
Landing Page
Component List
Components – in Detail
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
Rake File
Guides & Examples
Guides
Examples
ExtJS Library Details
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);
}
});
var coolContainer = 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