Build CA Plex Web/Mobile App

Transcription

1 Build CA Plex Web/Mobile App

2 Mobile Application Workshop Create two mobile applications Offline with CM WebClient HSync Online with CM WebClient Mobile Workshop files available on USB Flash if not downloaded CM WebClient HSync Workshop Introduction, Demo, Hands-on exercises CM WebClient Mobile Introduction, Demo, Hands-on exercises CM First Group. Confidential & Do Not Distribute 2

3 CM WebClient Family Developed by CM First Group CM WebClient Desktop experience in a browser CM WebClient Mobile Full business logic with a mobile UI CM WebClient HSync Standalone mobile application CM First Group. Confidential & Do Not Distribute 3

4 HSync The power of templates HSync interprets template files, inserts values from your Plex model and generates output files. Templates HSync Template Generator [Generated from your CA Plex Model] Output Files CM First Group. Confidential & Do Not Distribute 4

5 HSync Templates /(foreach.application.entity) Entity: /(entity.name:unscoped) /(foreach.view.attribute:fetch).../(attribute.name) (/(attribute.type)) /(end.view.attribute) /(end.application.entity) Entity: Product...ProductID (Character)...ProductDescription (Character)...ProductPrice (Numeric)...ProductImage (Character)...SupplierID (Character)...SupplierName (Character) Entity: Order...OrderNumber (Numeric)...OrderStatus (Character)...OrderDate (Date)...CustomerID (Character) etc CM First Group. Confidential & Do Not Distribute 5

6 Template Files Application templates ( *.atp) Generate once per application Template file: index.html.atp Output file: index.html Entity templates (*.etp) Generate once per entity Template file: Grid.js.etp Output file: CustomerGrid.js CM First Group. Confidential & Do Not Distribute 6

7 Generating Solutions HSync can generate any type of text file, some examples: JavaScript HTML XML Java Current HSync Solution templates Full-featured offline mobile application RESTful API servlet (proof of concept) CM First Group. Confidential & Do Not Distribute 7

8 RESTful API Servlet (In development) Template creates Java code Will support List, Retrieve, Replace, Create and Delete operations Can control which operations and which attributes visible per entity Provide entity data via URL for authenticated users Returns JSON format { "SuppID" : "CM1", "SuppName" : "CM First(Main Office)", "AddrLine1" : "7000 North Mopac Expressway Plaza 7000", "AddrLine2" : "SUITE 325", "City" : "Austin", "State" : "TX" } CM First Group. Confidential & Do Not Distribute 8

9 Offline Mobile Application Generates a stand-alone Sencha Touch application from CA Plex model definitions. Full data-entry with validation and referential integrity. Data stored on the device. Provides HSync services to allow the mobile application to synchronize data via your CA Plex functions. CM First Group. Confidential & Do Not Distribute 9

10 HSync Offline Application Fetch Synchronize HSync Services Web Server Plex Runtime Update Insert Delete Validate Device Local Storage Plex Server functions Main Database CM First Group. Confidential & Do Not Distribute 10

11 Why do we need an offline mobile app? 100% availability Can t guarantee an internet connection Need to record information in remote locations, e.g. Building Sites Farms Traveling Salespersons Equipment Inspectors Drivers

12 What makes an offline mobile app? Sencha Touch JavaScript framework Designed for mobile applications Can be integrated with Cordova Runs on all platforms HSync Templates Maximum flexibility Conditional Generation CA Plex Meta-code Retrieve values from CA Plex model to populate templates Web Services Servlet provides ability to call CA Plex functions when online

13 HSync Components HSync group model Your CA Plex model Template files HSync Services Servlet Eclipse Workspace

14 HSync Group Model HSync/OfflineApplication HSync/TemplateGeneratorEntity HSync/Ability HSync/Generator Utilities

15 Setting up your CA Plex model Designed for minimum impact Create an Application Entity to inherit from the OfflineApplication entity Inherit from TemplateGeneratorEntity for each entity you want to include Add Application ENT comprises ENT triples Inherit from Ability entities to control behavior

16 Setting up your CA Plex model Generate TemplateGeneration function for each entity being used Uses meta-code to query model details Creates a UI function to control application generation

17 Generator UI Set properties for generation Start generation process

18 HSync Templates Use tags to control how output is generated Values, e.g. /(entity.name) Loops, e.g. /(foreach.application.entity) Conditions, e.g. /(if:/(attribute.iskey)==y) Modifiers, e.g. /(entity.name:upper) :upper ORDER DETAIL :varname Order_Detail :camel - OrderDetail

19 HSync Templates Template Output

20 Abilities Control behavior with Abilities Inherit from Ability entities & fields, e.g. Ability.Delete, Ability.ReadOnly Can add your own Abilities Templates conditionally generate code based on inheritance

21 HSync Offline Mobile Application Features Simple constructs allow for advanced features Mandatory field validation Default values Referential integrity Virtual Attributes Selector panels Restricted parent/child Menus Edit Grids Filtered Grids Grid formatting Data Synchronization Add your own custom JavaScript Derived calculated fields Calculated totals Upgrading templates preserves customizations Auto-sequence keys

22 Sencha Touch JavaScript framework designed to work with touch screens Based on Ext JS library Build panels from Components Uses MVC structure Can be packaged as mobile app with Cordova/Phonegap

23 Sencha Touch HSync creates complete Sencha Touch application Sencha Cmd Tool Compiles JavaScript for performance Apply themes for mobile platforms Native packaging Upgrade Sencha Framework

24 Sencha Touch Themes automatically adapt to deployment platform

25 HSync Services Provides ability to call Plex functions over HTTP/HTTPS Can be called from JavaScript app using AJAX Function interfaces available via templates Allows Fetch & Update functions to be called Used for Synchronization process Can use action diagram validation and processing Ensure data fits business rules

26 HSync Services Using Action Diagram to validate

27 HSync Offline Mobile Application Demonstration and Workshop CM First Group. Confidential & Do Not Distribute 27