Example Applications

I-Cubed Directory Application Project Walk-through

Prerequisites

To get the most out of this Convertigo Mobile Project Walk-through, there should be a general understanding of the following:

 

 

 

 

Convertigo Data Source

For this project, we have used I-Cubed's employee directory as our data source at: http://www.i-cubed.com/erp-employee-directory.php


Below are basic steps to extract the relative data using Convertigo:

 

  1. Connect to the I-Cubed directory web page
  2. Input the password to access the directory
  3. Display the list of employees
  4. Extract the list of employees
  5. Send the list of employees back as an JSON response to the Sencha framework

 

 

Step 1: Connect to the Target

We connect to the target website in the following way:
Use Convertigo to directly go to http://www.i-cubed.com/erp-employee-directory.php:

 

 

 

Step 2: Input the Password

Here, we have the password prefilled for us in the demo:

The password variable:

 

Create a Convertigo object to directly go to:
http://www.i-cubed.com/erp-employee-directory.php

 

 

Step 3: List Employees

The internal Convertigo virtual browser will now be directed to the list of Employees in the I-Cubed employee resource portal:

 

 

 

Step 4: Extract Data

Employee

A Screen Class (EmployeeDirectory) was created for the list of employees from the employee directory. 1 Table Extraction Rule was created for this Screen (EmployeeDetailsTable) to extract the EmployeeName, Title, Email, Image

 

Extract Phone List

A Screen Class (PhoneListScreen) was created for the phone list in another project Internal. 1 Table Extraction Rule was created for this Screen (PhoneListTable) to extract the Employee, User, Phone, CellNumber and Department

 

 

Step 5: Send the Response

The extracted employee directory data is sent back to the caller (Javascript in this case) as a JSON response which is handled by the caller as a XML file.

 

 

Main Tab Panel in the app.js

 

 

Models & Stores: listDisplay.js

The diagrams below detail the Model and Store object created to handle the response data from Convertigo based on the employee list structure.

 

The diagrams below detail the Model and Store object created to handle the response data from Convertigo based on the employee list structure.

 

 

Show Convertigo Data: listDisplay.js

Create a new Panel app.init.push({ name: 'cPanel', init: function () : {.. return new Ext.Panel} , … ), below are some of the key attributes:

 

 

 

 

Show The Details: listDisplay.js

After touching the ItemDisclosure icon, show the details Panel. Create a new Panel (var listDetails = new Ext.Panel), below are some of the key attributes: