DEC 2013 My HTML5 Builder Questions

Embarcadero are at YOW Brisbane.
I will corner them with a few questions.

1. Does the user interface have a zoom function.
Can I zoom in to look at some of my screen design in finer detail?

2. Demo - What file opens why
 start>Programs>HTML5 Builder>Demos>
This opens a directory
C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\ComboBox
Once again I face an issue / concern.
Logically I would have thought that double clicking on the project file would open the project but all it opens is the readme file.

So I try double clicking on index.php  and that opens the project
This seems odd?

3

HTML Tables with a css chaser

The basic table

<style type="text/css">
/* This is a style sheet */
/* Comments */
/* the dot '.' at the start of a line declare a class name */
.class1
{
     background-color: #CCCCff;
     margin: 0px;
      padding: 0px;
}
</STYLE>
<TABLE border=0>
<TR>
<TD> Hello </TD>
<TD> This is column 2</TD>
<TD>This is column 3</TD>
</TR>
<TR BGCOLOR='BFBFFF'>

<TD> Note the </TD>
<TD>White space</TD>
<TD>between columns</TD>
</TR>
<TD class='class1' colspan='100%'>Spans the whole table</TD>
</TR>
<TR>
<TD STYLE='border-bottom: 1px solid #000000' >Hello again  </TD>
<TD STYLE='border-bottom: 1px solid #000000' >Note the white space</TD>
<TD STYLE='border-bottom: 1px solid #000000' >the line is not continuous</TD>
</TR>
</TABLE>

Hello	This is column 2	This is column 3
Note the	White space	between columns
Spans the whole table
Hello again	Note the white space	the line is not continuous

To get rid of the space between the cells
<TABLE border=0 cellpadding=0 cellspacing=0>

Hello	This is column 2	This is column 3
Note the	White space	between columns
Spans the whole table
Hello again	Note the white space	the line is now continuous

HTML INPUT Tag and PHP

Nothing really to do with the Embarcadero HTML5Builder but this blog is also a convenient place to put my notes.

Basic <INPUT> tags                                                                      (Note no </input> closing tag)
<INPUT type=hidden name='xyz' value='123'>
<INPUT type=text      name='xyz' value='123'>

Array Example 1
The name can look like an array and when the $_POST array is examined, all the variables that are related are grouped together.
So in this example, we have an array called 'a' and it in turn is broken into arrays called 8904 and 8905.  Incidentally 8904 and 8905 are the id field values where the data can be inserted into the destination database table.   Obviously some obfuscating can be used to make it hard to inject dodgy data.


<INPUT TYPE=CHECKBOX NAME='Check_Edit[]' Value='8904'>
<INPUT type=text size=5 name='a[8904][invoice_line]' value='1'>
<INPUT type=text size=20 name='a[8904][our_pn]' value='0147'>
<INPUT type=text size=4 name='a[8904][invoice_quantity]' value='1'>
<INPUT type=text size=4 name='a[8904][invoice_unit_price]' value='1900.00'>

<INPUT TYPE=CHECKBOX NAME='Check_Edit[]' Value='8905'>
<INPUT type=text size=5 name='a[8905][invoice_line]' value='2'>
<INPUT type=text size=20 name='a[8905][our_pn]' value='54-NBB400'>
<INPUT type=text size=4 name='a[8905][invoice_quantity]' value='2'>
<INPUT type=text size=4 name='a[8905][invoice_unit_price]' value='14.50'>

And $_POST looks like:

a	Array 8904 Array invoice_line 1 our_pn 0147 invoice_quantity 1 invoice_unit_price 1900.00 8905 Array invoice_line 2 our_pn 54-NBB400 invoice_quantity 2 invoice_unit_price 14.50

Array Example 2
In PHP
 // print the data
 echo "\n";
 echo "\n<INPUT type=hidden name='$urn"."[quantity]'    value='$quantity'  >";
 echo "\n<INPUT type=hidden name='$urn"."[description]' value='$description' >";
 echo "\n<INPUT type=hidden name='$urn"."[sell_price]'  value='$sell_price' >";

Note in the echo statement, we have $urn then a double quote and a dot and then another double quote "."    - This is to separate the open quare bracket from the $urn variable otherwise PHP interprets $urn as an array which of course it isn't.

The HTML looks like:


<INPUT TYPE=CHECKBOX NAME='UnplannedCheckBox[]' Value='137138'>

<INPUT type=hidden name='137138[quantity]'    value='-2'  >
<INPUT type=hidden name='137138[description]' value='Connector' >
<INPUT type=hidden name='137138[sell_price]'  value='0' >

 <INPUT TYPE=CHECKBOX NAME='UnplannedCheckBox[]' Value='137307'></TD>

<INPUT type=hidden name='137307[quantity]'    value='-3'  >
<INPUT type=hidden name='137307[description]' value='Banana Plug' >
<INPUT type=hidden name='137307[sell_price]'  value='0' >

And $_POST looks like:

137138	Array quantity -2 description Connector sell_price 0
137307	Array quantity -3 description Banana Plug sell_price 0

PHP to injest the data
// Obviously some filtering for security has to occur ....elsewhere.
$table_name = "invoice_lines";

if (isset($req_data['UnplannedCheckBox']))
    {
    foreach($req_data['UnplannedCheckBox'] as $value)
        {
        echo "\n<BR> Unplanned Issue = $value";
        $temp = $req_data[$value];
        echo "\n  temp $temp";
        print_array_recursive($req_data[$value]);
      
        $vars['invoice_number'] = $invoice_number;
        $vars['invoice_quantity'] = $req_data[$value]['quantity'];
        $vars['invoice_line_text'] = $req_data[$value]['description'];

        print_array_recursive($vars);
        add_record_to_table($table_name,$vars);  
        };
          
    };

Demo-Combobox

1
 start>Programs>HTML5 Builder>Demos>
This opens a directory
C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\ComboBox

Once again I face an issue / concern.
Logically I would have thought that double clicking on the project file would open the project but all it opens is the readme file.

So I try double clicking on index.php

This looks hopeful

It Works!



=====================================================


So now l will have a go at reverse engineering it.  A pity that there is no info as far as I can see on HOW this works.

1
Create a new blank project
New > Server Web Application
OK So far.
2
On the right hand side, expand the +Standard section
Find the Combobox
drag and drop two of them onto the canvas.
Also drag and drop two labels

 3

 Single click each label in turn.
In the obect inspector (bottom left of your screen), scroll down and find 'Caption'.
Change the Caption to "Combo1"
Note also that the label has a 'Name' =  "Label1" - Leave that as Label1

Similarly change the Caption of label2 to "Combo2"

So now we have two labels:
Name: Label1      Caption: "Combo1"
Name: Label2      Caption: "Combo2"








4
 Prepopulate ComboBox1 with some data
In the object Inspector, scroll down until you find the "Items" key.
Click on it and look at the right. Click on the three ... in white.
The "Value List Editor Opens.

5

In my newly created screen, when I single click on the combo box and then go to the Object inspector
the OnChange thing is blank.

In the demo
Object Inspector for ComboBox1 >>Onchange Sows ComboBox1JSC
Drop down and also see Combobox1Click













On the left I show the code from the embarcadero demo.
On the right I show the code from the screen as entered above.
The differences are in RED.
On the left at line 17, we note that we jump out pf php with a ?> and back into PHP again at line 39 <?PHP.

So the questions I have for myself are:
"Do I have to write the function ComboBox1JSChange($sender, $params)?"
and
"How do I know HOW to do this?"
WHY
is some of it jumped out of PHP?

Trackbar example

Time to have another go at getting my head around Embarcadero HTML5 Builder.  Going to have a go a few of the tutorials.  Will try a nice simple one.

Trackbar

This first part is my recreating the demo as a tutorial example
Further down is my blog record of the initial issue of not having it work.

1. GOTCHA AWARENESS
The trackbar demo does not work on firefox or ie9.
There is a wiki entry that says what browser supports what
http://docwiki.embarcadero.com/HTML5_Builder/XE3/en/Browser_Support#Advanced

2
New>Server Web Application

3
In the design view,
Expand the "+Advanced" section.
Drag and drop a Track Bar
From the "+Standard" section, drag and drop a Button and a label







4
Double click the button item -> opens code window with function Button1Click($sender, $params)
Interestingly I first double clicked the trackbar and it made a copy of the trackbar and did not open the code window.  However, after I had double clicked the  button and the label then I tried again and this time I did get some php code.
The result was:  
function Button1Click($sender, $params)
    {
       
    }
    function Label1Click($sender, $params)
    {
       
    }
    function TrackBar1AfterShow($sender, $params)
    {
       
    }

Which does not do a lot for me.

Now I go an have a look at the existing code
Hmmm

4
Try
new  > Client Web Application
But the code has no php code so I conclude that the example was a server web application.

5
OK go back to trying to understand the code.
First note
The example has
   public $lbSubmitted = null;     <- These two lines are extra
   public $btnSubmit = null;
   public $Label1 = null;
   public $TrackBar1 = null;
and my new recreated version has automatically created
    public $TrackBar1 = null;
    public $Label1 = null;
    public $Button1 = null;    <- This is Extra
What does this mean?    (Will ignore for now)

Sticking with the new recreated code, but based on the code on the demo.
Retrieve the position of the trackbar and assign it to the label.
function Button1Click($sender, $params)
   {
       $this->Label1->Caption = $this->TrackBar1->Position;
    }

It works.... sort of.
When I click Button1, The label gets updated as expected and this indicates to me that the code just above is moving data around just like it shoud

BUT
the screen is redrawn just like a traditional non ajax web page.
Hmm more thinking

















---------------------------------------------------------------------------------------------
22-OCT-2012 NOW UNDERSTOOD AND WORKING
-FIX is that trackbar does not work on Firefox nor IE9.
This comes from a very timely response to my forum posting below.

----------------------------------------------------------------------------------------------
20-OCT-2012 DOES NOT WORK.
Posing question in the Embarcadero help forums
https://forums.embarcadero.com/thread.jspa?threadID=78464&tstart=0
----------------------------------------------------------------------------------------------

1
 start>Programs>HTML5 Builder>Demos>
This opens a directory
C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\TrackBarDemo

I see a file TrackBarDemo.h5bprj
I figure double click on that to load the project.
But it doesn't.
All I get is the readme.txt file

2
So I try double clicking on uSlider.php
This looks moe hopeful.

This is good,
It looks like a trackbar.





Press F9 to RUN

But I do not see a track bar.  Only an input box.

Tried it ie 9.  Same problem.
Blast.






3
Go back to the demo directory
C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\TrackBarDemo
double click  uSlider.xml.php
Pressed F9 to RUN

got an error

Parse error: syntax error, unexpected '<' in C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\TrackBarDemo\uSlider.xml.php on line 2

So I am stuck.  This simple demo does not work.
How can this be called a Rapid Application Development Environment when it takes so long to get anything to work!

Demo Ajax Database

The objective of this post is to replicate the demo that is provided with HTML5Builder called
Demos>Ajax>Database
On my computer it is here
C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\Ajax\Database
It is accessible via the "start" menu (What do you call it in Windows 7?)
Start>Programs>Embarcadero HTML5 Builder>Demos

So I double click on ajaxdatabase.php and it opens in HTML5Builder.
I click the button to run it and IO get an error

The jist of the error is

Application raised an exception class EDatabaseError with message  

'Can't connect, PDO Exception: SQLSTATE[28000] [1045] 

Access denied for user 'user'@'localhost' (using password: YES)'

The first problem I have is that I do not know what database this example is trying to access - some internal one like the PHP that is installed with HTML5Builder or the one that is a part of my development machine.

Switch off WAMP server
Re run the demo and the error is different

Warning: PDO::__construct(): [2002] No connection could be made because the target machine actively (trying to connect via tcp://127.0.0.1:3306) in C:\Program Files (x86)\Embarcadero\HTML5 Builder\5.0\rpcl\dbpdo.inc.php on line 199

Application raised an exception class EDatabaseError with message 
'Can't connect, PDO Exception: SQLSTATE[HY000] [2002] 
No connection could be made because the target machine actively refused it.
'

Restarted WAMP server and got the original message.  So this says to me that the example is trying to use the external ie WAMP server.

I look at the icons and see that there is one called dBProducts
Host is localhost
DatabaseName is oscommerce
Username is user
UserPassword is ******
I suspect I need to
a) Get hold of oscommerce from womewhere
b) Change username to root and UserPassword to my mysql root password.

I find on the wiki here
http://docwiki.embarcadero.com/HTML5_Builder/en/Sample_Applications
This

There are sample applications that require a database management system to work. For those you are going to need to load the sample databases included in the sample applications folder into the target DBMS.

MySQL

For MySQL-based applications, there is an SQL script called oscommerce.sql, which you need to run on your MySQL server.

Note: The file contains non-ASCII characters, so pasting the content in an open MySQL console in an MSDOS window won’t work. Use the source oscommerce.sql command instead.

WAMP Server

This is a work in progress

For the non compuer vegies amongst us, WAMP that stands for Windows Apache Mysql PHP.

Apache is a web server program.
Mysql is a database program
PHP is a programming language that effectively is the glue between the data in the database (mysql) andweb page that the user sees on their browser served out by the web server program (Apache).

Normally I install each of these separately but on this occasion I have used a prepacaged installer interestingly called WAMP.  There are many such installers and I chose this one for no particular reason.

After it was installed, PHPMYADMIN reported that Mysql was configured with no root password.
Fixed -> See below.
Then I get a error with PDO - as at 18-SEP-2012- NOT fixed

To change this, open a Mysql console.  This can be done via the WAMP icon on the task bar.

At the Mysql> prompt you can type set password
 then type this

set password for 'root'@'localhost' = password('newpasswordgoeshere');
and it shoud respond:
Query OK, 0 rows affected (0.00 sec)

Now we have to tell PHPMyAdmin that Mysql has a password.
Use a text editor to change these lines in the PhpMyAdmin congiguration file:

C:\wamp\apps\phpmyadmin3.5.1\config.inc.php
//$cfg['Servers'][$i]['password'] = '';  //none &lt;- comment out
$cfg['Servers'][$i]['password'] = ''newpasswordgoeshere';  //&lt;-Add

Restart everything and it all worked.
----------------------------
PDO PROBLEM
I get this error when running an example from "agiletoolkit.org" and I get a similar error when trying the ajax database example from HTML5builder

PDO error: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES)

Here is the screen shot 18-SEP-2012

PDO stands for PHP Data Objects.  It is enabled in the WAMP server.
This picture seems to show that PDO is included and checking php.ini seems to confirm that.
I assume that PDO does not know the root password for mysql and I do not know how it finds that out.