HTML5 Builder – HTML5 Client Web Application / Live View Tutorial

By: Al Mannarino

Abstract: This tutorial shows you how to use HTML5 Builder to write your own HTML and JavaScript code or a use an existing template. You will see your code changes live and get a Live Preview of your project. You can design and customize existing HTML5 Builder UI components through CSS3 property and animation editors and embed them in your client page with Live Preview.

By Al Mannarino, Embarcadero Technologies, Inc.

    Introduction

This tutorial shows you how to use HTML5 Builder to write your own HTML and JavaScript code or a use an existing template. You will see your code changes live and get a Live Preview of your project. You can design and customize existing HTML5 Builder UI components through CSS3 property and animation editors and embed them in your client page with Live Preview.

    Steps:

1. Create a new Client Web Application

Do: Home > NEW > HTML5 Builder Projects > Client Web Application

Hide image

A Client Web Application is a web application based on client-side web technologies.

Unlike server web applications, client web application do not have to rely on a web server to work, and you can open them in a web browser anywhere, without the need of an Internet connection.

You can still deploy them to a web server, as any other web application, for distribution purposes.

2. Select the Template tab.

Hide image

3. Import a Web Template (use Import Template icon) or Import default HTML template.

Hide image
Import Template Hide image
Import default HTML template.

For this example, we will use the Shinra web template: Shinra is an HTML5 template perfect for corporate, product and services sites. Includes portfolio page layouts. You can download the template from here: http://www.csstemplatesfree.org/shinra.html

We'll use the contact.html web template.

Hide image
Click to see full-sized image

Hide image

Click OPEN.

4. SAVE unit1.js

You will be asked to save unit.js. Create a new folder, such as ClientWebAppLiveView

Hide image

Hide image

5. The HTML template and the LiveView will be displayed, like this:

Hide image
Click to see full-sized image

6. Toggle the Dev Tools on/off with the toolbar icon. This will or can be used for debugging of your JavaScript code.

Hide image

Hide image
Click to see full-sized image

7. For any template you use (mytemplate.zip), extract the files to a folder on your machine, i.e. Desktop and make sure to save all HTML5 Builder project files to the root of that directory.

Hide image
Click to see full-sized image

8. Go to the Design tab and place a Button onto the form, apply some CSS3 properties and animations, and a JavaScript On-Click event (see the "HTML5 Builder – HTML5 CSS3 Animations Tutorial" on how to do this).

Hide image

Hide image
Click to see full-sized image

9. Save your Button unit1.js as myUnit1.js to the root of the project directory.

10. Go to your Template code (from Template tab), and select the area in your <body> for your web page navigation., where you want to insert your CSS3 Button.

<!DOCTYPE html>

<html>

<head>

<title>Document Title</title>

</head>

<body>

</body>

</html>

11. Start typing <B… your Button1 component will appear in the list through HTML Code Insight.

<h5b:Button id="Button1" />

Hide image

12. Hit enter, and you will see the Button in your Template through the Live Preview. Very cool!

Hide image

13. Save All.


14. Let’s run the web app, and of your browser supports all the animations, border styles and On-Click events, you'll see them working in the Live Preview or when you run the app.

Do: Run (F9) Hide image

Hide image

Do: CLOSE ALL.

This ends this tutorial. We saw how to use HTML5 Builder to write your own HTML and JavaScript code or a use an existing template. We see our code changes live and get a Live Preview of the project. We designed and customized HTML5 Builder UI components through the CSS3 property and animation editors and embed them in our client page with Live Preview.

    Concluding Remarks

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder

Server Response from: ETNASC01