One of the new features of HTML5 Builder, is named Client Pages. You have two types of Client Pages, one for web applications, and another one, for mobile applications.
Let’s focus on the Client Page, as the Client Mobile Page is very similar. Switch to the HTML5 Builder Projects category and create a new Client Web Application, you will get a new project created with a Client Page.
When you create a new Client Page, you are presented with a new module called “unit1.js”, note the extension is .js, that means that now, the language you have to use to write your code should be Javascript. No PHP knowledge is required to use this type of modules.
Also, the Object Inspector only shows two tabs, Properties and Events, no more Javascript tab, because in a Client Page, the events are always Javascript events.
And finally, on the context switcher, you get a new context, called Template.
Apart from that, the module looks very similar to a Server Page.
Design
Let’s place a Button on the designer and double click it to see what happens:
What you get is an event handler, written in Javascript, offering you the opportunity to write Javascript code to be executed when the Button is clicked.
Code
Now, let’s place some code inside the event handler, something like
alert(‘Hello, client!!’);
So when the button is clicked, it will show an alert message with that string.
Running
If you run your project now, using F9 or using the toolbar buttons, you will get the following:
You get the Button you placed, where you placed it, and if you click on it and you will get the alert message. As you can see, no PHP code is shown anywhere, but the URL contains a .php extension instead the .js of your module. What is being done behind the scenes, is to make PHP to generate all the client code you need, you don’t need to deploy any PHP code to your server, I will explain this below, regarding deployment of client pages.
Template
Another great benefit of Client Pages, apart from hiding the PHP code from the user, is to allow you use a template to specify where your dynamic components are going to be placed. Switch now to the Template context and you will see a two-pane screen, on the left pane, an empty code editor, and on the right pane, a browser showing the execution of your client page module. Actually, you can click on your button and you will see your javascript code executed.
The left pane is where you can place the contents of your template, that is, the HTML code to make up the layout of your page. If it’s empty, means no template should be used at all.
To add content, you can just simply write the HTML code you want, but there are some helpers for that, you have two buttons on the toolbar:
- Import template: Which opens a dialog to allow you select an .html file and import the contents of that file
- Import default template: Which overwrites the template contents with a default HTML5 template
Let’s just click on Import default template, and you get an empty HTML5 document, and the right preview pane, now it’s cleared, as it reflects the result of applying the template to your page.
H5B tags
Now it’s time for you to place into the template, wherever you want, the tags that will be used to place your dynamic components. Place the cursor inside the <body> tag, and press Ctrl+Space. When the drop down list is shown, begin typing “Button1″, and the list will be filtered. Select the item “component Button1″ and press enter.
The code editor will place the following tag into your code:
<h5b:Button id=”Button1″ />
And now, the preview will be refreshed, showing your button on the top left of the browser, as there is no layout. That tag is built by the h5b qualifier, the name of the component class, and the name of the component as the id attribute.
This way, you can generate a complex HTML5 template, and place the h5b tags wherever you want the components to be placed.
Deployment
To deploy a client page module, use the Client Deployment option, found on the Home context, this is a very simple wizard that will ask you for a folder where to put the generated files.
Once you run the wizard, you will get the following files:
- unitXX.css – The css that may be generated by the components
- unitXX.html – The resulting HTML code of applying your template and inserting the dynamic components, this is the file you have to open in your browser
- unitXX.js – The Javascript code you have written
- unitXX_php.js – The Javascript code generated by the components
- rpcl-bin folder – This folder contains the jQuery libraries needed to run the page
As you can see, everything is client technology you can leverage anywhere, no need for PHP or any other server technology.
Pingback: Fernando Rizzato : Delphi for Enterprise
I made an example with a button and alert, tried on the computer and the smartphone. No telling browsers not given.
Hi jose,
I dont see any grid component, what’s this missing??
Hi Jose,
maybe you could help me.
Running from Blackberry or from Android a client mobile application that attempts to use REST for connecting to a DataSnap server written in DelphiX3 I get this error:
“local:///unit1.php Resource does not exists”
The app just execute this code:
function MButton1Click(event) {
var risposta = TServerMethods1_instance.ReverseString(‘ciao’);
alert(JSON.stringifty(risposta));
}
The DelphiX3 DataSnap server is the default server created by the wizard, with “echo” and “reverse” functions..
All works perfectly when I run the application from the HTML5 Builder ide, but not on Blackberry.
The deployement is done without errors. The application starts correctly, but when I press the button I get the error in the subject instead that the message with the result…
I have created an HTML5 Builder a Client Mobile Application and I have added a DataSnap REST Client Module that “imported” correctly the functions from the REST server, creating a ClientClassUnit1.js
In the unit1.js form I have inserted just a DSJavaScriptClient component, setting the property ClientClassUnit as “ClientClassUnit1.js” and a MButton.
Any idea ?
TYA
Francesco
I have found the solution: change the default btSubmit property of MButton to btNormal…
Now the client doesn’t attempt to find more the Unit1.php page: the only problem is that the connection to the REST server contine to not work
Why should I use the Template where I must enter the html tags manually? What is the designer for then? Why doesn’t the designer generate the HTML?
When I design my app (page) I use the designer… I am satisfied with the way it looks… and then… I go to the template and mess it all up again? What is the point?
1:
So after I select a New Mobile project, I can see a unit with js extension (unit1.js). Then when I select New Mobile Page… I get a new unit with js extension (unit2.js)
So all my units/pages in Mobile project seem to be javascript.
But in all your demos (videos) for mobile projects, the units you work on all have php extension while looking like mobile pages. So what am I missing? Also all the demos in the demo folder under Mobile Projects consist of php files…
2:
How can I jump from one page to another page in mobile project? I mean, on page one I will place a button (“Go to page2″) and I want to tell the app to show me the unit2.js page. How can that be achieved? What is the syntax? I did not find documentation about this anywhere. Help and documentation is almost nonexistent. Or at least I cannot find it.