By: Al Mannarino
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.
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.
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:
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.
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.
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) Hide image
Do: CLOSE ALL.
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
Click here to download a free 30-day trial of HTML5 Builder, part of RAD Studio XE6>
@RADtools on Twitter
Server Response from: ETNASC03