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 are not available for public users. Please login first to view / add comments.