Building for the Multi-Device Enterprise using Sencha

ubiquitousstrumpetΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 5 χρόνια και 2 μέρες)

425 εμφανίσεις

Building for the Multi-Device
Enterprise using Sencha
JAM 44
Abraham Elias and Shikhir Singh
May 14-16, 2013
About Sencha
Leader in Commercial Grade
HTML5 Development Technology
Worldwide
Footprint
Enterprise
Customers
2M +
Developers
One of the largest OS
Development Communities
The Industry Standard
10,000+
Architecture Shift
New Mobile Architecture Is the Driver
Fat Server with
Application
Logic
Thin Client
Touch Based
Fat Client with
Application
Logic
Thin Cloud with
Integration
Online
Offline
HTML4 HTML5
New
Infrastructure
Requirements
• Developer Tools
• Cloud Services
• Runtimes
SERVER
CLIENT
Driving New Business Demands
• Rapid Cross-Platform Development
• API End Point Integration
• Multiple Device Testing
Runtime
Management
• App Deployment
• Policy Enforcement
• Security
• Synchronization
• Offline Encryption
• Authentication
Cloud
Management
Development
Management
Our Differentiation: HTML5
Native
• 5+ Native Mobile Platforms
• Short Lived API’s
• Fragmentation
• Volatile Market share

• Low Fidelity
• Layout Complexity
• Limited API Coverage

History of Failures

HTML5
Platform for the
Multi-Device World
• Write Once… Go Anywhere
• Standards Based
• Only Future Proof Path
• Decades of Success

Cross-Compilation
High Performance Engineering
Sencha
HTML5
Facebook
Hybrid App
List scrolling
Payload
State
Retention
http://fb.html5isready.com
15 fps 60 fps
20 kb 2 kb
None Full
BlackBerry Z10 HTML5 Scorecard
getUserMedia

requestAnimationFrame

indexDB

File API

WebGL!




Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko)
Version/10.0.10.822 Mobile Safari/537.10+
485 Points
Sencha Mobile Product Offering
Sencha Mobile
Bundle
Sencha
Cloud
Sencha
Packager
• Leading Touch Framework
• Powerful Visual Design Tool
• Cross-Platform Fidelity
• Enterprise-Grade Support
• Focused Mobile App Services
• Integrated to Sencha Touch
• Turnkey Approach for Devs
• Command and Control for IT
• Runtime for HTML5 Apps
• Desktop and Mobile
• Deploy HTML5 Applications in
Legacy Environments
Let’s Build an Enterprise App
9
The Application
Order Fulfillment
BlackBerry
Look and Feel
Charting Cross-Cut
Menu
And more…
Getting Started - Theming
11
Theming your Application
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Blackberry"
};
</script>
<script src="touch/sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="touch/resources/css/bb10.css">
<link rel="stylesheet" href=”/path/to/custom.css">
Sencha Architect
Getting Started
Getting Started - Data
15
Defining a Model
Ext.define(‘Fulfill.model.Item’, {
extend: ‘Ext.data.Model’,
config: {
idProperty: ‘lineItemId’,
fields: [{name: ‘lineItemId’},
{name: ‘name’},
....
]}
});

Defining a Store
Ext.define('Fulfill.store.ItemsStore', {
extend: 'Ext.data.Store’,
requires: [
'Fulfill.model.Item'
],
config: {
model: 'Fulfill.model.Item',
storeId: 'itemsStore',
...

Data Proxies
proxy: {
type: ‘odata’,
url: “http://p326.coil.sap.com:8000/sap/
opu/sdata/sap/MMSC13/zmmsc_matmvt2Collection”,
withCredentials: true,
username: ‘proen’,
password: ‘invent1’
}

Multiple Data Retrieval Options
Defining a Store
Ext.define('Fulfill.store.ItemsStore', {
extend: 'Ext.data.Store’,
requires: ['Fulfill.model.Item’],
config: {
model: 'Fulfill.model.Item’,
proxy: {
type: 'direct',
directFn:
Fulfill.CustomerActions.getItems,
reader: {type: 'json’}
},
...


Ext Direct - Java
@DirectAction(action="CustomerActions")
public class CustomerActions {
@DirectMethod
public List<ItemDetailView> getItems() {
EntityManager em = DatabaseMgr.begin();
try {
List<Item> items = DatabaseMgr.getItems(em);
Itemsiew cv = new ItemsView(items);
List<ItemDetailView> result = cv.items;
DatabaseMgr.commit(em);
return result;
}
catch( RuntimeException ex ) {
DatabaseMgr.ensureRollback(em);
throw ex;
}
}


Getting Started - Views
21
Defining a View
Ext.define('Fulfill.view.Dashboard', {
extend: 'Ext.Panel’,
requires: [
'Fulfill.view.PieBreakdown',
'Fulfill.view.SalesHistoryChart'
],
config: {
layout: {type: 'vbox’},
items: [{xtype: 'pieBreakdown',
id: 'pieChart',
flex: 1},
{xtype: 'saleshistorychart',
flex: 1}]}});
Adding a Cross-Cut Menu
onTabpanelActiveItemChange: function(container, value, oldValue, eOpts) {
if (value) {
var itemId = value.getItemId();
if (itemId === 'crosscutplaceholder') {
if (!this.crosscut) {
this.crosscut = Ext.create('Fulfill.view.CrossCutSheet');
Ext.Viewport.add(this.crosscut);
}
this.crosscut.show();
return false;
}
}
}

Using Templates
tpl: [
'<div class="order-detail orderId">',
' <div class="text">
' {state}{orderId}
’ </div>',
'</div>',
'',
'<div class="order-detail orderDate">',
' <div class="text">',
' {orderDate:date(\'m/d/Y\')} ’,
' </div>',
'</div>’
]


Using Templates
itemTpl: '<tpl if="!packDate">',
' <span class="qntu">{quantityInStock}</span>',
'</tpl>',
'<tpl if="quantityOrdered &gt; quantityInStock">',
' <span class="qntz">’,
' {[values.quantityOrdered -
values.quantityInStock]}’,
' more needed’,
' </span>',
'</tpl>',
'{[this.makeIcon(values)]}',
{makeIcon: function(values) {…}}

Firing a Custom Event
items: [ {xtype: 'button',
itemId: 'confirmBtn',
ui: 'confirm',
text: 'Confirm Shipment’}],

listeners: [{fn: 'onConfirmTap',
event: 'tap',
delegate: '#confirmBtn’}],

onConfirmTap: function(button, e, eOpts) {
//Do something or fireEvent
this.fireEvent('confirmtap');
}


Getting Started - Charting
27
Pie Chart
Ext.define('Fulfill.view.PieBreakdown', {
extend: 'Ext.chart.PolarChart',
alias: 'widget.pieBreakdown',
config: {
store: 'pieChartDataStore',
colors: ['#115fa6’,'#94ae0a’,'#a61120’,'#ff8809’],
series: [{
type: 'pie',
labelField: 'category',
xField: 'total'
}],
interactions: [{type: 'rotate’}]}});

Getting Started - Controllers
29
Controlling a View
control: {
"orderconfirm": {
confirmtap: 'onConfirmTap'
}
},
onConfirmTap: function(eventOptions) {
// DO SOMETHING
}

Completed App
31
Code Complete
Packaging Your App
33
Lets Package





BlackBerry Enterprise Platform
Deploying your Application
35
BlackBerry Enterprise Platform Services
 Create secure reliable
enterprise application
 BlackBerry provides
infrastructure to support the
enterprise
 Security is built in from the
ground up not bolted onto
the platform
 Notifications reduce mobile
hardware resources and
extend battery life

Enterprise
App
Notification
Deployment
Connectivity
Container
Application
Code
Security
For More Information…
 Rapid Cross-Platform Development
 API End Point Integration
 Multiple Device Testing
 Synchronization
 Offline Encryption
 Authentication

WWW.SENCHA.COM
July 16-19, 2013
Walt Disney World Resort, Orlando, FL

60+ Sessions ~ 4+ Parties ~ 1 All-day Hackathon
1,000 developers learning, coding & having fun
THANK YOU
JAM 44
Abraham Elias and Shikhir Singh
May 14-16, 2013