Example Applications

Rental 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 demo project, we chose to use the Apartment Finder Website as our data source: http://www.apartmentfinder.com/


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


  1. Connect to the Apartment Finder website
  2. Pass in a Zip Code to Search for Apartments
  3. Display the list of Aparmtents
  4. Extract the list of Apartments
  5. Select an Apartment Listing and display its details)

 

 

Step 1: Connect to the Target

There are 2 ways we can approach connecting to the target site
(we chose approach 2):


Use C8O to go directly to http://www.apartmentfinder.com, enter the Zip code, then click Search

 

 

Shortcut: the Apartment Finder site allows you to put the Zip Code directly in the URL like so: http://www.apartmentfinder.com/Zip-Codes/27606-Apartments


Step 2: Search By Zip Code

In order to pass in the Zip Code to the Convertigo and ultimately append it to our URL string, we must do the following:

 

Create a zip code variable:

 

 

Create a Convertigo Navigation Object to go to the URL like so: 'http://www.apartmentfinder.com/Zip-Codes/' + zipcode + '-Apartments'

 


Step 3: List Apartments

The internal C8O virtual browser will now be directed to the list of Apartments associated with the Zip Code provided like so:

 

 

 

Step 4: Extract Apartments

A Screen Class (SearchResultsScreen) was created for the Searched results of Apartments. 1 Table Extraction Rule was created for this Screen (SearchResultsTable) to extract the Name, Price, Phone, Image of each listing.

 

 

 

Step 5: Display Details

For each Apartment Listing, our application should display additional details about the selected listing. Assuming the associated phone number is unique, use it to provide Convertigo with the Xpath to our selected listing:

 

 

For each Apartment Listing, our application should display additional details about the selected listing. We have chosen to use the associated phone number to provide Convertigo with the Xpath to our selected listing:

 

 

 

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 rental listing search results.

 

 

 

Show Convertigo Data: listDisplay.js

Create a new Panel (app.init.push({ name: 'list', 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.

 

 

 

Create Search Panel: searchForm.js

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

 

 

 

Create Map Panel: googleMap.js

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

 

 

 

Create Map Panel: topToolbar.js

Launch the Google Map when the user clicks the Map button in the Details Panel's top toolbar. See toolbarDetails' handler function: