andrew leggett & abram darnutzer - how to build ca plex web & mobile app
TRANSCRIPT
![Page 1: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/1.jpg)
Build CA Plex Web/Mobile App
![Page 2: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/2.jpg)
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
![Page 3: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/3.jpg)
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
![Page 4: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/4.jpg)
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]
![Page 5: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/5.jpg)
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…
![Page 6: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/6.jpg)
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
![Page 7: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/7.jpg)
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
![Page 8: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/8.jpg)
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
![Page 9: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/9.jpg)
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
![Page 10: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/10.jpg)
HSync Offline Application
CM First Group. Confidential & Do Not Distribute 10
Device Local Storage
HSync Services
Web ServerSynchronize
Plex Runtime
Fetch
Update
Insert
Delete
Validate
Plex Server functions
Main Database
![Page 11: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/11.jpg)
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
![Page 12: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/12.jpg)
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
![Page 13: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/13.jpg)
HSync Components
• HSync group model
• Your CA Plex model
• Template files
• HSync Services Servlet
• Eclipse Workspace
![Page 14: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/14.jpg)
HSync Group Model
• HSync/OfflineApplication
• HSync/TemplateGeneratorEntity
• HSync/Ability
• HSync/Generator Utilities
![Page 15: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/15.jpg)
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
![Page 16: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/16.jpg)
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
![Page 17: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/17.jpg)
Generator UI
• Set properties for generation
• Start generation process
![Page 18: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/18.jpg)
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
![Page 19: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/19.jpg)
HSync Templates
Template
Output
![Page 20: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/20.jpg)
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
![Page 21: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/21.jpg)
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
![Page 22: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/22.jpg)
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
![Page 23: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/23.jpg)
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
![Page 24: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/24.jpg)
Sencha Touch
• Themes automatically adapt to deployment platform
![Page 25: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/25.jpg)
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
![Page 26: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/26.jpg)
HSync Services
• Using Action Diagram to validate
![Page 27: Andrew leggett & Abram Darnutzer - How to build CA Plex Web & mobile app](https://reader030.vdocument.in/reader030/viewer/2022020301/587561111a28ab00528b7361/html5/thumbnails/27.jpg)
HSync Offline Mobile Application
CM First Group. Confidential & Do Not Distribute 27
Demonstrationand
Workshop