A simple mobile shopping list with HTML5 Builder

Juan Antonio Ruzafa » A simple mobile shopping list with HTML5 Builder

Hi, I’m Juan Antonio Ruzafa and I work as HTML5 Builder QA Engineer at Embarcadero Technologies.

In my first post I’ll teach you how to build a simple mobile application that connects to a MySQL database. I’ve named it as “The Shopping List”.

UPDATED: There are some differences on how MList component will behave on the next HTML5 Builder Update 1. I will notice those differences on this post.

First of all you must create a New “Server Mobile Application” and select your target device:

For this example I’ve chosen Iphone – vertical:

Database

For this example I’ve used a MySql database with a table:

CREATE DATABASE shopping
USE shopping;
CREATE TABLE items (  ID int(11) NOT NULL AUTO_INCREMENT,
item varchar(100) NOT NULL,
`timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,  PRIMARY KEY (ID));

Connecting HTML5 Builder with MySQL

The Data Explorer window will do all the work for you, you must only  fill up your own database configuration, and it’ll take care of all. So, right-click on MYSQLCONNECTION and select “Modify connection”.

When you’re done, drag and drop the “items” table. You can safely delete DBRepeater component since you will use an MList to show the items.

Mobile components

As shown on the image, create a MPage with:

  • MButton:
    • ButtonType: btNormal
    • Name: Add
    • Caption: Add
  • MEdit:
    • Name: Entry
  • MList:
    • DataSource: dsitems1 (selecting this will automatically fill up all needed values)
    • Name: ShoppingList
    • DataMapping
      • Caption: item
      • ExtraButtonLink: ID
      • IdField: ID
      • IsIcon: false
      • Link: ID

Adding Items

Let’s start the fun! Adding a new item is as easy as appeding a register to table and posting your values. You’ll do that on the Click event at the “Add” button. So, double click on “Add” button and HTML5 Builder will create and assign a Click event to your button:

function AddClick($sender, $params)
{
  $this->tbitems1->Active = true;
  $this->tbitems1->Append(); //create a new register
  try
  {
    $this->tbitems1->item = $this->Entry->Text; //assign value
    $this->Entry->Text = ""; //clear field
    $this->tbitems1->Post(); //that's all!
    $this->ShoppingList->init(); //NOT NEEDED ON HTML5 BUILDER UPDATE 1
  }
  catch(Exception$e)
  {
    //You should handle errors here...
    var_dump($e);
  }
}

Modifying items

You have to set up a link for each item, so it knows where to go when it’s clicked. You have to modify its Link property:

function ShoppingListShow($sender, $params) //On HTML5 Builder Update 1
function ShoppingListBeforeShow($sender, $params) //On HTML5 Builder
{
  $items = $this->ShoppingList->Items;
  for($i = 0; $i < count($items); $i++)
  {
    $items[$i]['Link'] = 'modify.php?id='. $items[$i]['Link'] ;
  }
  $this->ShoppingList->Items = $items;
}

Then, you create a modify.php page with:

  • Database: just drag and drop the “items” table from Data Explorer and you’re done! I named components as:
    • dbsshopping1
    • tbItemsEdit
    • dsItemsEdit
  • MEdit:
    • Name: EntryBox
    • DataSource: dsItemsEdit
    • DataField: item
  • MButton:
    • Name: Save
    • ButtonType: btNormal
  • MButton:
    • Name: Cancel
    • ButtonType: btNormal
  • MPage
    • Name: ModifyPage

Code:
You can filter which record is being edited on the “Create” event. This will populate the MEdit field with the proper value.
function ModifyPageCreate($sender, $params)
{
  if( !empty($_GET['id']))
  {
    $this->tbItemsEdit->close();
    $this->tbItemsEdit->filter = "ID=" . $_GET['id'];
    $this->tbItemsEdit->open();
  }
}
To save the changes, you just add the OnClick event to the “Save” button:
function SaveClick($sender, $params)
{
  $this->tbItemsEdit->Active = true;
  try
  {
    $this->tbItemsEdit->item = $this->EntryBox->Text;
    $this->tbItemsEdit->Post();
    redirect("index.php"); //return to main page
  }
  catch(Exception$e)
  {
   var_dump($e);
  }
}
The “Cancel” button just returns to the main page.
function CancelClick($sender, $params)
{
  redirect("index.php");
}

Deleting items

I’m going to add a “delete” icon on the right of each item that points to a delete.php page. This can be achieved on ShoppingList’s “Show” event

function ShoppingListShow($sender, $params)
{
  $items = $this->ShoppingList->Items;
  for($i = 0; $i < count($items); $i++)
  {
    $items[$i]['Icon'] = 'siDelete';
    $items[$i]['ExtraButtonLink'] =  'delete.php?id='. $items[$i]['Link'] ;
    $items[$i]['Link'] =  'modify.php?id='. $items[$i]['Link'] ;
  }
  $this->ShoppingList->Items = $items;
}

Create a delete.php mobile page with:

  • Database: (same configuration as modify.php)
    • dbsshopping1
    • tbItems1
    • dsItems1
  • MEdit:
    • Name: EntryBox
    • DataSource: dsItemsEdit
    • DataField: item
    • Enabled: false
  • MButton:
    • Name: Delete
    • ButtonType: btNormal
  • MButton:
    • Name: Cancel
    • ButtonType: btNormal
  • MPage
    • Name: DeletePage

Code for the delete.php page will look like the modify.php page, except for the delete() method:
function DeletePageCreate($sender, $params)
{
  if( ! empty($_GET['id']))
  {
    $this->tbitems1->close();
    $this->tbitems1->filter = "ID=" . $_GET['id'];
    $this->tbitems1->open();
  }
}
function DeleteClick($sender, $params)
{
  $this->tbitems1->Active = true;
  try
  {
    $this->tbitems1->delete();
    $this->tbitems1->close();
    redirect("index.php");
  }
  catch(Exception$e)
  {
    var_dump($e);
  }
}
function CancelClick($sender, $params)
{
  redirect("index.php");
}

With this, we’re done!