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!