• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Community Code: Pega Mobile
 

Community Code: Pega Mobile

on

  • 3,747 views

Lessons from the Dynamic Enterprise Pega Mobile App This session explains why we chose Sencha Touch over other frameworks and how we implemented a very dynamic and configurable enterprise mobile app. ...

Lessons from the Dynamic Enterprise Pega Mobile App This session explains why we chose Sencha Touch over other frameworks and how we implemented a very dynamic and configurable enterprise mobile app. After briefly presenting the results of our prototypes in other frameworks, we will focus on the programming techniques used in our app. We explain how we architected and implemented JSON data, navigation, pinned toolbar, UI that redresses to phone and tablet (multi-device implementation techniques), and error handling - all using the Sencha MVC architecture. For achieving extreme configurability, we created the “UI JSON” for screens on the server using xtypes in Sencha Touch. Finally, we will cover some of the Sencha Touch 2 considerations and migration issues.

Ashvin Radiya is the President and CTO of AvantSoft Inc, a premiere Sencha Partner. He is the organizer of meetup.com/MobileCloud in Bay Area, CA. His current focus is on delivering high quality HTML5, hybrid, and native mobile apps on phones and tablets. For the last 15 years, he has been an entrepreneur starting Avantsoft, EclipseUniversity, EZPrintTool, and ConnectSpan. He has developed partnerships with high profile companies such as IBM, Freescale, Corporate Express, HP, BEA, and Sencha. He has worked at IBM. He has expertise in Mobile and Cloud Applications, Ext JS, Sencha Touch, Eclipse Plugins, and Java. He studied at IIT, Mumbai and Syracuse Universities.

Steve has over 12 years of experience in the software business focusing on large-scale enterprise deployments of browser-based technology. He is currently the Director of Product Management at Pegasystems, a Cambridge, Massachusetts based provider of Business Process Management (BPM) software. Steve is holds a bachelor’s degree in Electrical Engineering from Bucknell University and currently resides in Essex, MA with his wife and three children.

Statistics

Views

Total Views
3,747
Views on SlideShare
3,423
Embed Views
324

Actions

Likes
2
Downloads
108
Comments
2

4 Embeds 324

http://www.sencha.com 321
http://sencha.site 1
http://www.pega.com 1
http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via SlideShare as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi, all Sencha Touch Dev
    recently i have meet the difficult problem that i have ajax to load data from server it success full but i can not tack the data respone out of ajax function. i have meet an Error is Undefind ………here is my code;

    $.ajax({
    type: ‘GET’,
    url: ‘http://townhub.bmsolution.biz/Mobile/example.php?callback=callback’,
    async: false,
    jsonpCallback: ‘callback’,
    contentType: “application/json”,
    dataType: ‘jsonp’,
    success: function(data){
    /*————————————————-I want use DynamicDetail Varaibale out of this ajax——————
    //return data.myrootf[id].overview;
    DynamicDetail=data.myrootf[id].overview;
    alert(”Detail_info= “+DynamicDetail);
    },
    error: function(e){
    console.log(e.message);
    }
    });

    alert(”Detail_info= “+DynamicDetail);it Error DynamicDetail undefind

    any help or idea i allway waitting for respone ………..thank u for advance ………
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Chris Herdt,
    thank u for ur reply me but i try to update it, but it still got error that I have meet one problem that need u again help me, I want to get Json Data format from web url http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php , but i have got error invalid label
    [Break On This Error] “data”: [
    here is my code:
    index.html

    Getting Started

    app.js
    // JavaScript Document
    Ext.application({
    name: 'Sencha',
    launch: function() {
    Ext.create('Ext.DataView', {
    fullscreen: true,
    store: {
    autoLoad: true,
    //i have update fields like this
    //fields: ['from_user', 'text', 'profile_image_url'],
    /*—i have change to */
    fields:['id','cust_firstname','cust_lastname','cust_email'],

    proxy: {
    type: ‘jsonp’,
    //url: ‘http://search.twitter.com/search.json?q=Sencha Touch’,
    //url: ‘http://search.twitter.com/search.json?q=fakecriterions&callback=myCallbackFunction’,
    url:’http://townhub.bmsolution.biz/mysql2json-2010-11-07/example.php’,
    reader: {
    type: ‘json’,
    root: ‘data’
    }
    }

    },
    });

    }
    });
    Sorry Chris Herdt and all Dev Pls check it again for me cos i realy need for find solution for my project that nearly Dateline

    I have got en Error from fire bug like this sms:invalid label
    [Break On This Error] “data”: [
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Community Code: Pega Mobile Community Code: Pega Mobile Presentation Transcript

    • SenchaCon 2011 Lessons from the Dynamic Enterprise Pega Ashvin Radiya Stephen Bixby  2011 Pegasystems Inc. 1Wednesday, November 2, 11
    • Who is Pegasystems? SenchaCon 2011 Software provider specializing in Business Process Management (BPM) Browser-based, model-driven development tool for designing, building and deploying dynamic enterprise business applications without writing code Publicly held (NASDAQ: PEGA) Named the leader in BPM and Case Management by Gartner and Forrester Based in Cambridge, MA with regional offices across North America, Europe, India and Asia Pacific By the Numbers Revenues for 2010 of $337 million Pega technology is used by 8 of the top 10 global banks Pega technology is used by 4 of the top 5 U.S. health insurance payers Pega technology is used by 7 of the top 10 North American insurance companies Pega technology is used by 7 of the top 10 North American credit card issuers Pega technology supports 60% of the world’s payment investigations Pega technology supports healthcare plans covering more than 125 million lives  2011 Pegasystems Inc. 2Wednesday, November 2, 11
    • Pega at a glance SenchaCon 2011  2011 Pegasystems Inc. 3Wednesday, November 2, 11
    • Pega Process Designer SenchaCon 2011  2011 Pegasystems Inc. 4Wednesday, November 2, 11
    • Pega UI Designer SenchaCon 2011  2011 Pegasystems Inc. 5Wednesday, November 2, 11
    • SenchaCon 2011  2011 Pegasystems Inc. 6Wednesday, November 2, 11
    • SenchaCon 2011  2011 Pegasystems Inc. 7Wednesday, November 2, 11
    • SenchaCon 2011  2011 Pegasystems Inc. 8Wednesday, November 2, 11
    • Mobile Approaches: Evaluations & SenchaCon 2011 Traditional desktop browser UI via mobile device Native iOS app dev – Dynamic with native and webview Outsourced native app build separately for each platform Code-based cross-platform native deployment (Titanium) Configuration-based cross-platform native deployment (Pyxis) HTML5 mobile web app (JQM, SenchaTouch, Dojo Mobile) HTML5 mobile web app deployed as native app (PhoneGap, SenchaTouch 2)  2011 Pegasystems Inc. 9Wednesday, November 2, 11
    • POC Screenshots SenchaCon 2011  2011 Pegasystems Inc. 10Wednesday, November 2, 11
    • POC Screenshots SenchaCon 2011  2011 Pegasystems Inc. 11Wednesday, November 2, 11
    • Why SenchaTouch? SenchaCon 2011 HTML, JS, CSS competency in house Component based architecture Robust control library Object-oriented, reusable, extensible Theming Standardized MVC architecture Top-notch documentation and support community (Forums) A true “framework” A company to partner with  2011 Pegasystems Inc. 12Wednesday, November 2, 11
    • Overall Architecture SenchaCon 2011 Oracle/SQLServer/DB2/UDB Desktop Browser Pega Designer Studio Pega Configuration DB Websphere/Weblogic/Tomcat/JBoss XML Pega Server/Engine assembles and generates Sencha JSON from XML (Executes as a dynamically compiled and loaded Java class at runtime) HTML JSON Desktop Browser Mobile Browser  2011 Pegasystems Inc. 13Wednesday, November 2, 11
    • Dynamic UI SenchaCon 2011 Model-driven, dynamic mobile interfaces  2011 Pegasystems Inc. 14Wednesday, November 2, 11
    • Live Demo SenchaCon 2011  2011 Pegasystems Inc. 15Wednesday, November 2, 11
    • Typical Sencha Touch Expert SenchaCon 2011 Participate in Application design – Sencha capabilities, budget, timeline Architect JSONs – Information on the screen + Navigation Focus is on the front end, client knows the backend POC, Productization Client team building, knowledge transfer  2011 Pegasystems Inc. 16Wednesday, November 2, 11
    • Elements of Enterprise Mobile SenchaCon 2011 Large scale app (MVC) Web access, Home screen App, Restart – Do not make users start at the beginning (deep linking) Configurable, dynamic UI – Dynamic JSON UI data Authentication Data driven – Cache data, reload strategy, cached views Multi-device and form factors (Phone/tablet, orientation) Miscellaneous – Error handling, Data modeling, Id, KISS my App!  2011 Pegasystems Inc. 17Wednesday, November 2, 11
    • Large scale app (MVC) SenchaCon 2011  2011 Pegasystems Inc. 18Wednesday, November 2, 11
    • Web access, Home screen App, SenchaCon 2011 URL patterns Routes and matching action in controller defaultUrl http://m.pega.com http://m.pega.com/pyGetAssignmentList http://m.pega.com/pyGetAssignmentList/urgent http://m.pega.com/pyGetAssignmentList/urgent/customer routes.js controller.js app.js  2011 Pegasystems Inc. 19Wednesday, November 2, 11
    • Calling actions from the code SenchaCon 2011 Ext.redirect, Ext.dispatch – Ext.redirect - Only string params (same as browser URL) – Ext.dispatch – additionally pass objects – Every point of the app is not accessible through a direct URL Passing information from one view to controller to another view // dynamic action after login Ext.redirect(loginJSON.NextActionURL);  2011 Pegasystems Inc. 20Wednesday, November 2, 11
    • Elements of Enterprise Mobile SenchaCon 2011 Large scale app (MVC) Web access, Home screen App, Restart – Do not make users start at the beginning (deep linking) Configurable, dynamic UI – Dynamic JSON UI data Authentication Data driven – Cache data, reload strategy, cached views Multi-device and form factors (Phone/tablet, orientation) Miscellaneous – Error handling, Data modeling, Id, KISS my App!  2011 Pegasystems Inc. 21Wednesday, November 2, 11
    • Dynamic UI (Recall) SenchaCon 2011 Model-driven, dynamic mobile interfaces  2011 Pegasystems Inc. 22Wednesday, November 2, 11
    • Configurable, Dynamic UI SenchaCon 2011 For achieving extreme configurability – “UI JSON” for screens are generated on the server using xtypes in Sencha Touch JSON responses for screens UI, errors, forms, forms with errors One of the biggest benefit of xtype for dynamic systems – Define UI as pure JSON objects (without behavior)  2011 Pegasystems Inc. 23Wednesday, November 2, 11
    • Server Dynamically generates UI SenchaCon 2011  2011 Pegasystems Inc. 24Wednesday, November 2, 11
    • Client code to work with UI SenchaCon 2011  2011 Pegasystems Inc. 25Wednesday, November 2, 11
    • Elements of Enterprise Mobile SenchaCon 2011 Large scale app (MVC) Web access, Home screen App, Restart – Do not make users start at the beginning (deep linking) Configurable, dynamic UI – Dynamic JSON UI data Authentication Data driven – Cache data, reload strategy, cached views Multi-device and form factors (Phone/tablet, orientation) Miscellaneous – Error handling, Data modeling, Id, KISS my App!  2011 Pegasystems Inc. 26Wednesday, November 2, 11
    • Authentication SenchaCon 2011 Set defaultURL in app.js Empty Login Form! Request server for even the login form!  2011 Pegasystems Inc. 27Wednesday, November 2, 11
    • Elements of Enterprise Mobile SenchaCon 2011 Large scale app (MVC) Web access, Home screen App, Restart – Do not make users start at the beginning (deep linking) Configurable, dynamic UI – Dynamic JSON UI data Authentication Data driven – Cache data, reload strategy, cached views Multi-device and form factors (Phone/tablet, orientation) Miscellaneous – Error handling, Data modeling, Id, KISS my App!  2011 Pegasystems Inc. 28Wednesday, November 2, 11
    • Cached views SenchaCon 2011 controller.js  2011 Pegasystems Inc. 29Wednesday, November 2, 11
    • View actions configure toolbar SenchaCon 2011  2011 Pegasystems Inc. 30Wednesday, November 2, 11
    • Elements of Enterprise Mobile SenchaCon 2011 Large scale app (MVC) Web access, Home screen App, Restart – Do not make users start at the beginning (deep linking) Configurable, dynamic UI – Dynamic JSON UI data Authentication Data driven – Cache data, reload strategy, cached views Multi-device and form factors (Phone/tablet, orientation) Miscellaneous – Error handling, Data modeling, Id, KISS my App!  2011 Pegasystems Inc. 31Wednesday, November 2, 11
    • Multi-device strategy SenchaCon 2011 Different UI for tablets and phone using the same code  2011 Pegasystems Inc. 32Wednesday, November 2, 11
    • Multi-Device (form factors) SenchaCon 2011 Out of the box support for iOS, Android, … Drill-down approach for phones versus Left Nav Panel for Tablets Implementation techniques – Define profiles – Each view can define its own logic in setProfile(…) • Framework automatically calls setProfile  2011 Pegasystems Inc. 33Wednesday, November 2, 11
    • Setting profiles in your code SenchaCon 2011  2011 Pegasystems Inc. 34Wednesday, November 2, 11
    • Logic based on profiles in code SenchaCon 2011 Make one time set up decisions in initComponent()  2011 Pegasystems Inc. 35Wednesday, November 2, 11
    • Logic based on profiles in code - SenchaCon 2011 Make orientation change decisions in setProfile()  2011 Pegasystems Inc. 36Wednesday, November 2, 11
    • Elements of Enterprise Mobile SenchaCon 2011 Large scale app (MVC) Web access, Home screen App, Restart – Do not make users start at the beginning (deep linking) Configurable, dynamic UI – Dynamic JSON UI data Authentication Data driven – Cache data, reload strategy, cached views Multi-device and form factors (Phone/tablet, orientation) Miscellaneous – Error handling, Data modeling, Id, KISS my App!  2011 Pegasystems Inc. 37Wednesday, November 2, 11
    • Error Handling SenchaCon 2011 Server returns SUCCESS or ERRORS JSON  2011 Pegasystems Inc. 38Wednesday, November 2, 11
    • Pure concepts are good for app SenchaCon 2011 Strongly recommend to stick to this structure Same model for multiple stores (static data for local testing VS dynamic data)  2011 Pegasystems Inc. 39Wednesday, November 2, 11
    • Omnipotent “id”, use it with care SenchaCon 2011 Very powerful – easy to access a component from anywhere – Declare – {xtype: ‘panel’, id: ‘coolPanel’, … } – Access – Ext.getCmp(‘coolPanel) Any other declaration of “id: coolPanel” will create a conflict at the run time – UI may not render, unpredicted behavior Makes it difficult to create new abstractions – Instance to class, left id in there, created subtle bug Supply id while instance creation and not in the class definition unless you are sure to create singleton, need to exercise discipline for creating instances, or provide a factory (global function)  2011 Pegasystems Inc. 40Wednesday, November 2, 11
    • KISS my app! SenchaCon 2011 One of my mantras - focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But its worth it in the end because once you get there, you can move mountains - Steve Jobs In POC – Lot of navigation, back and fort – Drill down mechanisms In productizing, changed design to – Modal approach (full screen overlays with zoom in effect) – In each screen, the user should see only what they need – Reduced Navigation  2011 Pegasystems Inc. 41Wednesday, November 2, 11
    • Notes from Sencha Touch 2 SenchaCon 2011 Big conceptual change – ST 1: dispatch actions from the handlers in views – ST 2: Associate actions (listeners, handlers) with events in controller class – More event driven, loosely coupled solutions, component queries Many Cosmetic changes – Index.html – no need to refer to all js files, recompile your CSS – Strict directory names (app, control, model, view, store) – Explicit dependency declaration (models, views, controllers) – No docketItem! – View definition • Use Ext.define, initialize() and not initComponent() • Separate config property – remember to put all config options  2011 Pegasystems Inc. under it 42Wednesday, November 2, 11
    • Summary of our key lessons SenchaCon 2011 Use MVC, deep linking Dynamic UI screens from server based on xtype Declarative instantiations using xtype – Avoid new myClass(…) as much as possible – Instantiates only when needed (performance) Cache views and data Use profiles to create experience based on the form factor Avoid using “id”, use itemId and getComponent() KISS my app Go Sencha Touch 2 – Make your code more loosely coupled, event driven  2011 Pegasystems Inc. 43Wednesday, November 2, 11
    • AvantSoft SenchaCon 2011 Official Sencha Partner Web, Hybrid, Native mobile app development Sencha Touch 2 migration and app dev services – Sencha Touch POC, productization, Maintenance Ext JS Apps, migration from 3 to 4 QA, Testing Design services – App design, wireframes, graphical assets, styling (CSS, SASS) Training, consulting, development services – Eclipse Plugins, Java, Sencha, iOS, Android, Cloud, Social www.avantsoft.com, ashvin@avantsoft.com  2011 Pegasystems Inc. 44Wednesday, November 2, 11
    • Questions? SenchaCon 2011 ashvin@avantsoft.com, 408-230-8816, San Jose, CA stephen.bixby@pega.com  2011 Pegasystems Inc. 45Wednesday, November 2, 11