Build CA Plex Web/Mobile App

Build CA Plex Web/Mobile App

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

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

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

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

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

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

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 https://yourserver.com/hsyncrest/api/v1/supplier/cm1 { "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

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

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

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

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

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

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

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

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

Generator UI Set properties for generation Start generation process

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

HSync Templates Template Output

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

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

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

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

Sencha Touch Themes automatically adapt to deployment platform

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

HSync Services Using Action Diagram to validate

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