Example Applications

US 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:

 

 

Nb: This project has been written from the Salesforce 'demo_usDirectory' project. Some ScreenClasses, Transactions etc. still have names they inherited from the initial project.

 

 

 

Convertigo Data Source

For this project, we have used the USDirectory web site as our data source at: http://www.usdirectory.com

 

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

  1. Connect to the USDirectory web page
  2. Input the business, City and State fields
  3. Display the list of businesses
  4. Extract the list of businesses
  5. Send the list of businesses 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 C8O to directly go to http://www.usdirectory.com:

 

 

 

Step 2: Input the business

Here, we have a business default value prefilled in the demo:
The business variable:

 

 

 

Step 3: Input the city

Here, we have a city default value prefilled in the demo:
The city variable:

 

 

 

Step 4: Input the state

Here, we have a state default value prefilled in the demo:
The state variable:

 

 

Create a Convertigo object to dire ctly go to: http://www.usdirectory.com

 

 

Step 5: Businesses List

The internal Convertigo virtual browser will now be directed to the list of Businesses in the UsDirectory web site:

 

 

 

Extract Phone List

A Screen Class (ResultFoundScreen) was created for the list of businesses from the US Directory web site. A Table Extraction Rule was created for this Screen (results) to extract the name, address

 

 

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. (excerpt below)

 

 

 

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.

 

 

 

Show Convertigo Data: listDisplay.js

Create a new Panel (return new Ext.Panel), below are some of the key attributes:

 

 

Use the newly created list Object's onItemDisclosure attribute to call Convertigo to get the listing details and show the details Panel (var listDetails = new Panel()).

 

 

 

Show The Details: listDisplay.js

After touching the ItemDisclosure icon, show the googleMap Panel. Create a new Panel (return new Ext.Panel), below are some of the key attributes: