Home Blogs Juan Antonio RuzafaA simple mobile shopping list with HTML5 Builder

A simple mobile shopping list with HTML5 Builder

Posted by Juan Antonio Ruzafa on Thursday, 8 November 2012 in Blogs

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

    $this->tbitems1->Refresh();

  }

  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: dsItems1
- 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!

On a next release I'll show you how to create a theme to have cool colors on your application.

You can download full source code:

Simple Shopping List For HTML5 Builder

Simple Shopping List For HTML5 Builder Update 1

About Juan Antonio Ruzafa

Gold User, Rank: 87, Points: 7

Quality Assurance management at Rad Studio

Comments

Thomas Oestergaard Sunday, 11 November 2012

This is a very good and usefull guide. I have been through the entire process by hand and also sownloaded the project. In both cases do I get a "error loading page" when cliking on an element in the MList control. Each page ie. modify.php is working fine by loading independently. The "eror loading page" is happening for both the delete and the edit link.

Regards
Thomas
jaruzafa Sunday, 11 November 2012

Hi Thomas, I've updated the post since there are slight differences on how MList will work on upcoming release of HTML5 Builder.
Please, check it again and let me know if you have any problems.
Thomas Oestergaard Monday, 12 November 2012

Hi Juan

Thanks for the quick reply. It is now working perfect. Looking forward for your next update.

Regards
Thomas
David Monday, 12 November 2012

Thanks for you good demo.
The problem I meet is the "empty($_GET['id'])" is always null.

I think I don't understand the meaning of '$items[$i]['Link']'.
jaruzafa Monday, 12 November 2012

Hi David,

> The problem I meet is the "empty($_GET['id'])" is always null.

Are you trying this code: http://sourceforge.net/projects/rpcl/files/samples/shopping_h5b.zip/download ?
How your URL looks like when you click on an item?

> I think I don’t understand the meaning of $items[$i]['Link']

$items[$i]['Link'] contains current item ID (look at ShoppingList->DataMapping->Link property on Object Inspector).
What I've done is to modify this link to point to modify.php?id=ITEM__ID page.

BTW, I've edited the post to show MList->DataMapping config.
A simple mobile shopping list with HTML5 Builder | Deep Ocean, Wide Sky Tuesday, 13 November 2012

[...] Juan Antonio Ruzafa » A simple mobile shopping list with HTML5 Builder [...]
David Wednesday, 14 November 2012

Hi Jaruzafa. Thanks for your replay。
I removed the MList, and dragged a new one, reset the datasource and DataMapping, then it works.
winge Friday, 16 November 2012

Thanks for good demo...
Tom Reijnders Thursday, 22 November 2012

Is HTML 5 Builder update 1 already available?

I cannot find it.
jaruzafa Thursday, 22 November 2012

Hi Tom,
You can find info about how to get HTML5 Builder Update 1 here: http://edn.embarcadero.com/article/42728
Tom Reijnders Saturday, 24 November 2012

Thank you.

I wanted to use this example to do something similar myself. It doesn;t work for me, so I tried the sample (update 1).

The example works, as is. That's all fine. But I want to use Ajax, so I toggled UseAjax on all three the MPages. For now, I didn't fill in the UseAjaxUri, because I want to test in the browser first.

Then, it doesn't work.
1. I can add items, fien :-)
2. If I press one of the buttons (I would expect the modify page to appear) nothing happens, i.e. I see the wait cursor animation for a short time, and than the index page remains. The ststus bar shows the link I would expect.
3. If I press a delete button, the delete page is shown, but after pressing 'Delete' or 'Cancel' I get a 'Error Loading Page' popup.

This is the exact same behviour as in my own app.

How do you use MList and MList links in a Ajax enabled Server Mobile Application?
jaruzafa Sunday, 25 November 2012

Hi Tom,

This example's purpose was not showing the UseAjax feature, it is not meant to work with Ajax.
If you are still willing to use UseAjax, you must change redirect(..) calls to mobileRedirect(..), and patch MList with: $('a[data-ajax]').attr('data-ajax',false);

Please, notice that if you are intending to use PhoneGap to run this example as a native application you should try another approach (see PhoneGap sample applications bundled with HTML5 Builder).

You can find more information about how to use AJAX at: http://docwiki.embarcadero.com/RadPHP/XE3/en/Server_Page_AJAX
and sample applications bundled with HTML5 Builder in "Ajax" folder.

Embarcadero HTML5 Builder forums are a great help resource: https://forums.embarcadero.com/category.jspa?categoryID=101
Michel Bouchard Monday, 26 November 2012

Bonjour Juan,

Very instructive and "eye opening" simple example for me (a newby in HTML5). I followed the description and it worked fine in my setup.

michel
Tom Reijnders Wednesday, 28 November 2012

Hi Juan,

I am already using the forums thank you!

Thank you for your answer. I can understand how to do that in your example, however my own example doesn't have any data-ajax attributes. My MList is not filled with a DB comonent but by php code directly. Futhermore, the ExtraLinks don't have a data-ajax attribute either.

You also suggest not to use MList for PhoneGap applicatons. So wthat is the alternative?

My main objective is a 'native' PhoneGap client (so the possibillity to use the hardware) but this specific MList is filled by a database on a webserver.

Thank you for this example and the time you take to try and answer my questions.

I'll try to move this request to the forums.
Mitchell Hu Tuesday, 4 December 2012

Hi!
on Deleting items part.
MEdit:
Name: EntryBox
DataSource: dsItemsEdit <-- Is this correct？
DataField: item
Enabled: fals

the database setting is:
Database: (same configuration as modify.php) <--- same？
dbsshopping1
tbItems1
dsItems1 DataSouce should be dsItems1.

Confuse me....(I'm not English speaker)

BTW, In this case only one filed need to add/modify , how a about more the one filed？ Could you show us another example.

thanks

P.S: your example is very useful for beginner ( like me ).
jaruzafa Tuesday, 4 December 2012

Hi Mitchell,

You're right, on delete.php:
DataSource: dsItemsEdit BTW, In this case only one filed need to add/modify , how a about more the one filed？ Could you show us another example.

It's easy. Just add another MEdit control and map its value to the table column you want. I.e. on modify.php:

To load its value, add an MEdit with:
Name: OtherFieldEntryBox
DataSource: dsItemsEdit
DataField: otherField

To modify:
function SaveClick($sender, $params)
{
$this->tbItemsEdit->Active = true;
try
{
$this->tbItemsEdit->item = $this->EntryBox->Text;
$this->tbItemsEdit->otherField = $this->OtherFieldEntryBox->Text;
$this->tbItemsEdit->Post();
redirect("index.php"); //return to main page
}
catch(Exception $e)
{
var_dump($e);
}
}
Mitchell Hu Thursday, 6 December 2012

Hi Jaruzafa:
Did you ever deploy this example to a real Android device？
I download source code, then modify db connecting parameters and test it on web fine.
and I deploy it on my HTC Sensation XL smart phone.
After launching it, it shows many records, looks fine.
But I try to add a new item, it brings a err message!
Application Error:
network error occurs ( file:///index.php)

Could you teach me how to solve this problem.

Tanks

Mitchell HU
jaruzafa Sunday, 9 December 2012

Hi Mitchell, this example is not meant to work as a native application (which is that deploy to mobile does).

To make it work as a native application, you should change php functions to javascript/ajax calls to a web service that handles mysql connections. This example can also be changed to use local storage, so you can avoid calling web services.
Kelvin Chua Monday, 17 December 2012

Hi jaruzafa,
I had been hunting high and low, googled the entire web, but failed to locate any tutorials that shows that the HTML5 Builder could handle the database in the native mobile application. As you had mentioned, in order to make your example work as a native application, we should change php functions to javascript/ajax calls to a web service that handles mysql connections. Or can also be changed to use local storage, so you can avoid calling web services.

But... how? Is there anyone in all the experts capable of constructing a working example that can be exported as a native mobile application?

I am utterly disappointed. I have so much hope on this software that I purchased. In the end, it can only display images in the native mobile application.

Have anyone successfully accessed the database within a native mobile application and is willing to share?

Thanks
jaruzafa Monday, 17 December 2012

Hi Kelvin,
HTML5 Builder has a sample mobile application using an MList and local storage as a native application.
It's located within: Demos/Features/ClientStorage/SimpleList

Hope it helps!
Please login first in order for you to submit comments