andrew leggett & abram darnutzer - how to 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


HSync – The power of templates

HSync interprets template files, inserts values from your Plex model and

generates output files.


HSync Template Generator

Templates Output Files

[Generated from your CA Plex Model]

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…

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


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)


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"

}


https://yourserver.com/HSyncREST/api/v1/supplier/CM1

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.


HSync Offline Application


Device Local Storage

HSync Services

Web ServerSynchronize

Plex Runtime

Fetch

Update

Insert

Delete

Validate

Plex Server functions

Main Database

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


Demonstrationand

Workshop

andrew leggett & abram darnutzer - how to build ca plex web & mobile app

Technology