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.
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.
Let’s place a Button on the designer and double click it to see what happens:
Now, let’s place some code inside the event handler, something like
So when the button is clicked, it will show an alert message with that string.
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.
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.
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.
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
- 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.