Rich Client (HTML+JS+Native code based) Apps

In this section, we will show you how to generate a sample rich client crm application from scratch. This assumes that the web service for the application is already available and ITAnyplace plugin is installed in Eclipse. This sample ships with ITAnyplace.

Follow the following steps:

• File -> New -> Other. Select Offline HTML + Javascript(iPhone, Android, Palm WebOS etc.) under the field ITAnyplace Project

• Enter project name 'offlineBrowser' and click Next

• Edit any Java settings and click Finish

• This creates a new project with the following hierarchy

• Select the project and then click New --> Other --> ITAnyplace Model Creation Wizard. Select ITAnylace Workflow and click Next

• Enter model file name and click Next

• Pick a web service WSDL file from local file system (eg. SyncablePort.wsdl) and click Finish

• Tool will parse the wsdl and generate the following model

• Click on the 'Semi Connected Workflow', the model appears with all the methods of the wsdl. Enter name (crmcdc), App Server (http://localhost), App Server port (8080) and select Notification (If user wants notification support click on yes) .

• Add 'index' node to Semi Connected Workflow. Semi Connected Workflow --> Select new child -->Semi Connected Node

• Add 'Add' Link to Semi Connected Node. Semi Connected Node --> Select new child --> Link

• Add 'View' Link to Semi Connected Node. Semi Connected Node --> Select new child --> Link

• Add 'Update' Link to Semi Connected Node. Semi Connected Node --> Select new child --> Link

• Add 'Delete' Link to Semi Connected Node. Semi Connected Node --> Select new child --> Link

• Add 'Sync' Link to Semi Connected Node. Semi Connected Node --> Select new child --> Link

Index node looks as shown below:

• Add 'Add' node to Semi Connected Workflow. Semi Connected Workflow --> Select new child -->Semi Connected Node

After save, Insert node looks as shown below:

      Since this is Add operation, only Upload is enabled.

Attachment node looks as shown below:

• Add 'View' node to Semi Connected Workflow. Semi Connected Workflow --> Select new child -->Semi Connected Node

• Add 'accountName' Semi Connected Outport Port to Semi Connected Node. Semi Connected Node --> Select new child -->Semi Connected Outport Port

View node looks as shown below:

• Add  'Update' node to Semi Connected Workflow. Semi Connected Workflow --> Select new child -->Semi Connected Node

• Add 'accountName' Semi Connected Outport Port to Semi Connected Node. Semi Connected Node --> Select new child -->Semi Connected Outport Port

Update node looks as shown below:

• Add 'Delete' node to Semi Connected Workflow. Semi Connected Workflow --> Select new child -->Semi Connected Node

• Add 'accoutName' Semi Connected Outport Port to Semi Connected Node. Semi Connected Node --> Select new child -->Semi Connected Outport Port

Delete node looks as shown below:

• Add 'accountName' Semi Connected Outport Port to Semi Connected Node. Semi Connected Node --> Select new child -->Semi Connected Outport Port

• Add 'Sync' node to Semi Connected Workflow. Semi Connected Workflow --> Select new child -->Semi Connected Node

• Add 'accountName' Semi Connected Outport Port to Semi Connected Node. Semi Connected Node --> Select new child -->Semi Connected Outport Port

• Add 'accountNo' primary key to Semi Connected Node. Semi Connected Node --> Select new child -->Primary Key

Sync node looks as shown below:

After Generating the model, its time to generate the code for the model.

• Right Click on My.Model and go to itanyplace Generate Code. This will generate the classes under crmcdc folder (same as the Semi Connected workflow name) for each node

Directory Structure is shown below:

Open Browser to test the app.
The browser will look like as in image below:

To deploy the apps, copy the generated files to appropriate client from itanyplacerichclient.zip and then copy the client project to appropriate SDK (Android or XCode). Follow the instructions in the SDK to deploy the app on the device.