Watch, Follow, &
Connect with Us

Juan Antonio Ruzafa

Using Theme Roller and building a liquid design with HTML5 Builder

On a previous post I showed you how to build a mobile shopping list. So, let’s customize it with cool colors and make your design to be "liquid" so it can be dinamically adjusted to any screen size.

You’ll need Simple Shopping List For HTML5 Builder Update 1 source code to follow this tutorial.

Open the project and select New->Files->Mobile Theme to launch ThemeRoller, an amazing tool to customize your mobile applications look & feel.

To select what color each control would be,  just drag and drop the color you want from the color palette over the control. You can also customize other options from the left handside menu such: text font, gradients, borders, …

I’ve created a theme using a mix of Embarcadero’s logo colors :)

You must connect this theme with your application using the MobileTheme control:

Place it on your Page and configure MobileTheme this way:

  • Name: ShoppingTheme
  • ColorVariation: cvCustom
  • CutomColorVariation: a -> You can have several color variations with theme roller (a,b,c,…), I’ve just created one.
  • CustomTheme: shoppingtheme.css -> CSS file where the ThemeRoller has saved your theme
  • Theme: thCustom
Connecting MobileTheme with controls is easy. Select each control’s Theme property and assign it to your ShoppingTheme control:

You must do this for each control and page you want to be "themed". Shopping List Main and Edit page will look like :

Let it flow!

One issue with this approach is that the application will only be displayed properly on the device we had in mind when we designed it. We can avoid this issue by having the elements automatically fit the width of the screen, in other words making the controls become "liquid".

First of all you have to adjust Edit and Button controls on Edit and Delete pages to fit the page width:

You need to use jQuery to modify some CSS properties to do the magic. This can be achieved at Javascript OnCreate event. These are the changes you have to do.

MainPage class (index.php):

Set ShoppingList->Autosize = true

function MainPageJSPageCreate($sender, $params)

{
  ?>
  //begin js
  //Makes MList liquid
  $('#ShoppingList_outer').css('width', '100%');
  //Makes Entry MEdit liquid leaving a gap to fit the "Add" button
  $('#Entry').css({width:'100%'});
  $('#Entry_outer').css({'margin-right':'105px', width:'auto', position:'relative'} );
  //places Add MButton at right border
  $('#Add_outer').css({right: '0', left: 'auto', position: 'absolute'});
  //Centers Title MLabel
  $('#lbltitle_outer').css({left:'50%'  ,'margin-left': '-65px'});
  //Change background color to avoid seeing a black background when device screen is resized (i.e. changing orientation)
  $('body').css({'background-color':'#CCCCCC'});
  //end
  <?php
}

ModifyPage class (modify.php):

Set:

  • Page->Layout->Type=REL_XY_LAYOUT
  • Page, Buttons and Edit -> Autosize=true

function ModifyPageJSPageCreate($sender, $params)
{
  ?>
  //begin js
  $('#lbltitlemodify_outer').css({left:'50%'  ,'margin-left': '-65px'});
  $('body').css({'background-color':'#CCCCCC'});
  //end
  <?php
}

- DeletePage class (delete.php):

Set:

  • Page->Layout->Type=REL_XY_LAYOUT
  • Page, Buttons and Edit -> Autosize=true
function DeletePageJSPageCreate($sender, $params)
{
  ?>
  //begin js
  $('#lbltitledelete_outer').css({left:'50%'  ,'margin-left': '-65px'});
  $('body').css({'background-color':'#CCCCCC'});
  //end
  <?php
}

That’s all! Now you have a "liquid" design that automatically adapts to all devices, even if you rotate your device to landscape or portrait.

Download full source code: Themed Shopping List with liquid design

Posted by Juan Antonio Ruzafa on November 23rd, 2012 under Android, HTML5, HTML5 Builder, iOS | 15 Comments »


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

Posted by Juan Antonio Ruzafa on November 9th, 2012 under Android, HTML5, HTML5 Builder, ednfront, iOS | 32 Comments »




Server Response from: BLOGS2