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 App SDK 1.0

Rally UI & App SDK 2.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