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.
