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)• 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