This document provides an overview of building mobile applications using CM WebClient HSync and CM WebClient Mobile. It summarizes a workshop that will demonstrate creating two mobile apps - one offline using CM WebClient HSync and one online using CM WebClient Mobile. It then provides details on CM WebClient HSync, the standalone mobile app it generates, how it uses templates to generate output files, and its ability to synchronize data with a backend CA Plex model when online.
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.
CM First Group. Confidential & Do Not Distribute 4
HSync Template
Generator
Templates Output Files
[Generated from your
CA Plex Model]
5. HSync Templates
CM First Group. Confidential & Do Not Distribute 5
/(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…
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
• 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
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
CM First Group. Confidential & Do Not Distribute 10
Device Local
Storage
HSync
Services
Web Server
Synchronize
Plex
Runtime
Fetch
Update
Insert
Delete
Validate
Plex Server
functions
Main
Database
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
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
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
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
