Watch, Follow, &
Connect with Us

Juan Antonio Ruzafa



Archives:



Changes in Quality Portal component’s list and some hints

Recently we’ve made a little change in Embarcadero’s Quality Portal to improve the way you may report issues for Rad Studio.

 CreateIssue

In the past, we received a lot of bugs for generic "Libraries and Frameworks", but those bugs were actually for VCL, Firemonkey, RTL,…  this situation required some extra time to process all that "generic" bugs. 

We’ve decided to update the component’s list so you can target better where your issue is located. Having better reports will improve our QA process. Current list is:

  • Install
  • FireMonkey
  • VCL
  • C++ Compiler
  • C++ RTL
  • Delphi Compiler
  • Delphi RTL
  • Linker
  • Database
  • Debugger
  • IDE (Development Environment)
  • Help and Doc
  • Demos

Hints and tips for bug reporting

Give your reports a short and descriptive summary

A good summary helps to quickly identify what’s going on and help to reduce duplicated issues.

Avoid describing generic problems in the summary. You should never use:

  • I have an issue with XYZ
  • XYZ doesn’t work 

A few examples of poor summaries and their good equivalents:

  • Poor: Access violation in the IDE
    • Better!: Opening an empty .pas file raises an access violation
  • Poor: Push notification bug
    • Better!: Push notification count adds one extra notification

 Description should contain all information generated by the issue

If available, include in your description:

  • Full error message.
  • Full call stack.
  • Info about your environment (e.g. Android version or Windows locale settings).
  • Screenshots are very helpful.
  • If relevant add device logs, like logcat output for Android.
  • For error messages or call stacks use either {code} or {quote} tags.
  • If you base your report on an external source of info (e.g. MSDN page for an API call), include a link.
  • If your bug report contains code, either attach it to the project or add it to the Steps section. Hint!: Use {code} tags.
  • Keep the size of the attachment to the minimum. Only use ZIP format. Never include binaries that are generated by compiling them.

Steps: the recipe to reproduce a bug

Describe the steps as a recipe to reproduce your bug. Keep steps simple and try to achieve the objective with the minimum number of steps.

Expected and Actual Results

At the end of your step-by-step description, you must describe what is the expected result and what actually happens.

Example:

  • Expected: Application shows up the XYZ menu
  • Actual: Application raises an access violation (see attached stack-trace)

One bug. One report

This is a golden rule: don’t include more than one issue into one report.

Report issues separately, and link each other if needed:link

 

 

 

Posted by Juan Antonio Ruzafa on October 1st, 2015 under Uncategorized | Comment now »


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