Using Theme Roller and building a liquid design with HTML5 Builder

Posted by on in Blogs
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
About
Gold User, Rank: 88, Points: 7
Quality Assurance management at Rad Studio

Comments

  • Guest
    Mostafa El-Hashash Tuesday, 12 February 2013

    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

  • Guest
    Juan Antonio Ruzafa Wednesday, 20 February 2013

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

  • Guest
    Mostafa El-Hashash Wednesday, 20 February 2013

    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

  • Guest
    Mostafa El-Hashash Sunday, 24 February 2013

    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

  • Guest
    Juan Antonio Ruzafa Monday, 25 February 2013

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

    Regards

  • Guest
    Mostafa El-Hashash Tuesday, 26 February 2013

    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

  • Guest
    Mostafa El-Hashash Tuesday, 26 February 2013

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

  • Guest
    Mostafa El-Hashash Tuesday, 26 February 2013

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

  • Guest
    Mostafa El-Hashash Tuesday, 26 February 2013

    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

  • Guest
    Sang Rubenzer Wednesday, 27 February 2013

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

  • Guest
    Juan Antonio Ruzafa Thursday, 28 February 2013

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

    Let me know your progress.

  • Guest
    Mostafa El-Hashash Thursday, 28 February 2013

    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

  • Guest
    Mostafa El-Hashash Thursday, 28 February 2013

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

  • Guest
    Juan Antonio Ruzafa Thursday, 28 February 2013

    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
    }

  • Guest
    Mostafa El-Hashash Friday, 01 March 2013

    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

  • Please login first in order for you to submit comments
  • Page :
  • 1