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!