Example Applications

PG Mobile 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:

 

 

 

 

Main Tab Panel in the app.js

 

Contacts Data Source

For this project, we chose to use the P&G Investor Website as our basic data source: http://www.pginvestor.com/


We will describe the working of P&G Mobile as separate flows of execution for the different features

 

 

 

1. List Contacts and their details:

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

  1. Connect to the http://convertigo.i-cubed.com:8080/pgdirectory/index.html
  2. Extract the list of contacts to be displayed.
  3. Display the list of contacts
  4. Send the list of employees back as an JSON response to the Sencha framework


 

 

 

Step 1.1: Connect to the Target

We connect to the target website in the following way

 

Use Convertigo to directly go to http://convertigo.i-cubed.com:8080/pgdirectory/index.html:

 

 

 

Step 1.2: Extract the List of Contacts

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

 

 

 

Step 1.3: Extract 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

 

 

 

 

Step 1.4: 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.

 

 

 

 

Models & Stores: directoryDisplay.js

The diagrams below detail the Model and Store object created to handle the response data from Convertigo for the contacts directory and details.

 

 

 

 

 

Show Convertigo Data: directoryDisplay.js

Create a new Panel (app.init.push({ name: 'panelDir', init: function () : {.. 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 panelDirDetails = new Panel()).

 

 

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

 

 

 

 

Sales Tab Data Source

For the Sales tab, we chose to use the P&G Investor Website as our basic data source: http://www.pg.com/annualreport2011/financials/index.shtml

 

 

 

Display sales data and other charts:

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

  1. Connect to the http://www.pg.com/annualreport2011/financials/index.shtml
  2. Extract the chart data.
  3. Display the chart data
  4. Send the data back as an JSON response to the Sencha framework

 

 

 

Sales Tab

Sales option on the TabBar at the bottom

  • Display top brands
  • Chart displaying financials overlay with interactive options which dynamically update the graph
  • Pie chart displaying grouping by business segment
  • Bar chart displaying Net Sales in Billions

 

 

 

 

Models & Stores: chartDisplay.js

The diagrams below detail the Data, Fields and Store object created to handle the response data from Convertigo for chart data (Eg: Pie Chart data).

 

 

 

 

Show Convertigo Data: chartsDisplay.js

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

 

 

Create a new Panel var panelBrands = new Ext.Panel({…}), below are some of the key attributes:

 

 

Create a new Panel var pieChartPanel = new Ext.chart.Panel({…}), below are some of the key attributes:

 

 

Create a new Panel var columnChartPanel = new Ext.chart.Panel({…}), below are some of the key attributes:

 

 

Create a new Panel var areaChartPanel = new Ext.chart.Panel({…}), below are some of the key attributes:

 

 

 

 

Stocks Data Source

For the Stocks Tab, we chose to use the P&G Investor Website as our basic data source: http://www.pginvestor.com/

 

 

 

Display Stocks Data:

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

  1. Connect to the http://www.pginvestor.com/
  2. Extract the stock data.
  3. Display the stock data.
  4. Send the data back as an JSON response to the Sencha framework

 

 

 

 

Step 3.1: Connect to the Target

We connect to the target website in the following way
Use Convertigo to directly go to http://www.pg.com/annualreport2011/financials/index.shtml :

 

 

 

Step 3.2: Display the Stock Data

The internal Convertigo virtual browser will now be directed to the stock data screen:

 

 

 

 

Step 3.3: Extract Data

A Screen Class (StockInfoScreen) was created for the stock info. It contained fields like : Name, Val1, Val2, Val3

 

 

 

 

Step 3.4: 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.

 

 

 

 

Models & Stores: chartDisplay.js

The diagrams below detail the Data, Fields and Store object created to handle the response data from Convertigo for stock data (Eg: Stock Info).

 

 

 

 

Show Convertigo Data: stockDisplay.js

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

 

 

Create a new Panel var panelStockInfoContainer = new Ext.Carousel({…}), below are some of the key attributes:

 

 

Create a new Panel var panelStockInfo = new Ext.Panel({…}), below are some of the key attributes:

 

 

Create a new Panel var stockChartsPanel= new Ext.chart.Panel({…}), below are some of the key attributes:

 

 

Create a new Panel var panelPGStockChart = new Ext.Panel({…}), below are some of the key attributes:

 

 

 

 

Utilities Feature

This provides two main features:

  • Quick Notes – Save/View notes
  • Search for Rental Cars using Google maps

 

 

 

Utilities Tab

 

 

 

Show Convertigo Data: leadsDisplay.js

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

 

 

 

 

Show Convertigo Data: quickNotes.js

Create a new Panel var quickNotes= new Ext.Panel({…}), below are some of the key attributes:

 

 

 

 

QuickNotes: topToolbar.js

We create a new toolbar as Ext.apply(app,{ toolbarNotes : {…}}) for Quick Notes which has the functionalities to Save and View Notes typed in the form.

 

  • To save and view the data, we use localStorage object and use
    • localStorage.setItem( key,value ) to save the data
    • localStorage.getItem( key ) to view the data
  • Notes are stored on a per-user basis.

 

 

 

Create Map Panel: googleMap.js

Create a new Form Panel (var map= new Ext.Panel({…}), , below are some of the key attributes:

 

 

**Note - The map panel is created using Google's JavaScript Map API:
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

 

 

 

Map: topToolbar.js

We create a new toolbar as Ext.apply(app,{ toolbarMap : {…}}) for Map which has the functionalities to search for the car rentals