View
46
Download
0
Category
Preview:
DESCRIPTION
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) - PowerPoint PPT Presentation
Citation preview
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
App SDK 1.0
Rally UI
Rally UI & App SDK 2.0
Portfolio Item Kanban
Write an Appin 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 woodand 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
Recommended