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 Responses to “Using Theme Roller and building a liquid design with HTML5 Builder”

  1. Mostafa El-Hashash Says:

    when i try applying this tutorial but with using ajax
    when i navigate to a page and return back i found the layout gone (the page should refresh to see the effects of the css property)
    could you help me with that
    Regards

  2. Juan Antonio Ruzafa Says:

    Hi Mostafa, could you please attach some source code? I couldn’t reproduce your issue.

  3. Mostafa El-Hashash Says:

    Thanks Juan,
    I realized that i should make a unique name for each component
    i already knew that but i didn’t know that for example if i have a label in one page called MLabel1 and if a label in another page have the same name it will not work. so i changed the name for components in different pages. Thanks very very much for being carefull. i am still waiting for the native mobile application example which really i need it
    Thanks
    Regards

  4. Mostafa El-Hashash Says:

    Hi Juan
    ok about the layout problem

    i have mlist in a page1.php have items and i set an extrabutton as a delete button to delete the item from the list (this list is filled with cookie)

    for($i = 0; $i MList1->Items = $items;
    on the page create java script event i set the css for the coponents
    $("#MList1_outer").css("position", "absolute");
    $("#MList1_outer").css({"width": ( $(window).width())*0.94 + "px",
    "left" : ($(window).width()-$(window).width()*0.94)/2 +"px"});

    and on the delete.php on pagecreate event i make some processing to delete this item from the cookie (which is the source of the MList1)
    and then use redirect("page1.php"); to return to the first page when i return i found the layout gone as i am not setting the css property for the MList1 and the url remain pointing to delete.php?id=(no.)
    Hope u can help me,, many Thanks
    Regards

  5. Juan Antonio Ruzafa Says:

    Are you calling delete page with an Ajax request? or is it a link?
    Could you paste your code?

    Regards

  6. Mostafa El-Hashash Says:

    Hi Juan,
    i wrote the code but it was trimmed, any way i am calling delete page using the extra button for the MList1 and i set the link property for the extrabutton as follows :
    for($i = 0; $i MList1->Items = $items;

    i am setting the ajax for the pages to True
    Regards

  7. Mostafa El-Hashash Says:

    the code again is :
    for($i = 0; $i MList1->Items = $items;

  8. Mostafa El-Hashash Says:

    $items[$i]['Icon'] = ’siDelete’;
    $items[$i]['Link'] = ‘#’;
    $items[$i]['ExtraButtonLink'] =
    ‘deletecart.php?id=’ . $i;

  9. Mostafa El-Hashash Says:

    the code keeped trimmed so i hope u can understand i make a for loop to set the extrabutton link for each item in the Mlist to delete.php?id=. $i
    and i am setting the ajax for the pages to True

  10. Sang Rubenzer Says:

    But a smiling visitor here to share the love (:, btw great layout.

  11. Juan Antonio Ruzafa Says:

    Hi Mostafa, your code looks good, but you must set the UseAjax property to FALSE.

    Let me know your progress.

  12. Mostafa El-Hashash Says:

    Hi Juan , many thanks for you
    I set it to true to deploy it to a native mobile application
    if u have any solution tell me.
    Regards

  13. Mostafa El-Hashash Says:

    also i set useAjax to false and the problem stay the same.
    after redirect the url remain delete.php?id = (no.)
    not page1.php

  14. Juan Antonio Ruzafa Says:

    Hi Mostafa, you can do that on your javascript PageShow event of your delete page:

    function DeletePageJSPageShow($sender, $params)
    {
    ?>
    //begin js
    window.location = ‘index.php’;
    //end
    <?php
    }

  15. Mostafa El-Hashash Says:

    Thanks Juan,
    i replaced the redirect in php code with your suggestion in JS code and it works now with setting UseAjax property to TRUE also :D ,, Thanks very very much.
    if you don’t mind what about the native mobile app you tutorial that u told me about, when will it be ready and how can i know that you published it.
    Again thank you , you are a helpful and thank you for being so patient.
    Regards

Leave a Comment



Server Response from: BLOGS2