By Al Mannarino, Embarcadero Technologies, Inc.
1. Create a new Client Web Application
Do: Home > NEW > HTML5 Builder Projects > Client Web Application
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.
3. Import a Web Template (use Import Template icon) or Import default HTML template.
Import Template
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.
Click OPEN.
4. SAVE unit1.js
You will be asked to save unit.js. Create a new folder, such as ClientWebAppLiveView
5. The HTML template and the LiveView will be displayed, like this:
6. Toggle the Dev Tools on/off with the toolbar icon. This will or can be used for debugging of your JavaScript code.
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.
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).
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" />
12. Hit enter, and you will see the Button in your Template through the Live Preview. Very cool!
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)
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.
Connect with Us