Quick Start
From FHTML
Contents |
1 How Do I Use FluidHtml?
- Working with FluidHtml means that you are working with html, css and javascript. Sound familiar?
- That said, FluidHtml has extra features not present in standard Html. These are covered in this wiki. In each section there are "What's the same?" and "What's Extra?" headings.
- FluidHtml also pointedly does not do some things that Html does, as we've determined that these things sometimes cause pain. The most important of these are covered in the Layout section.
2 How Does It Work?
- Client-side Interpreter — FluidHtml is a markup language that renders Flash dynamically. It uses a client side interpreter to render markup. When it sees a tag it recognizes, it creates the corresponding object. For example, the
<video/>tag will cause FluidHtml to create an instance of the Video object. - Layout Engine — Like HTML, FluidHtml has a layout engine. The layout of a page is described by a set of tags.
- Style Engine — Like HTML, FluidHtml has a style engine. For example, when you say
<div class="myStyle"/>, FluidHtml will map the properties of the myStyle class to that div. FluidHtml supports complex CSS selectors. - Scripting Engine — Like HTML, FluidHtml supports scripting using standard javascript or AS3 syntax.
- Animation Engine — Unlike HTML, FluidHtml also has an animation engine that allows you easily to create animations and map them to user interactions.
- No Server-side Dependencies — FluidHtml has no server-side dependencies. Further, it never creates new swf files and it never compiles anything unless you ask it to.
- Box Source In Addition to Page Source — Any FluidHtml object can load new layouts at any time, either from the server or a script. Multiple objects on a page can each have their own source, retrieved from a path (
something.html) or script. You can choose to store these paths automatically in the address bar to allow for deep-linking. This allows for more comprehensive saving of state in the address bar than is possible in standard html - Workflow — Developing in FluidHtml is just like developing in HTML. There are no files to compile, no server dependencies, no nonsense. You can output FluidHtml from your content management system just like you output HTML.
3 Before You Start
- Install the latest Flash debug player so you can view debug output (not required, but helpful). If you don't install a Debug Player, you can still work with FluidHtml, of course, but you won't be able to see traces and debug messages.
- Get Flashbug, which is a Firebug extension. Then you'll be able to do this:
<sequence name="yo" >
<frame>
<action script="trace('I am animating')" />
</frame>
</sequence>
<frame>
<action script="trace('I am animating')" />
</frame>
</sequence>
or this:
<div onclick="trace('howdy')" />
and see your traces in the browser.
You'll also be able to see information that tells you FluidHtml is running, layouts have loaded, etc.
- Edit your Flash Player security settings. You only need to edit your Flash Player Security Settings if you're working locally without a webserver.
4 Basic Start Page
Every FluidHtml page requires certain elements, such as the "fhtml" div and some JavaScript functions.
The following code shows the elements of a working FluidHtml page. Note the javascript that puts Fhtml on the page in the first place and tells us what div will contain the markup that Fhtml should render.
<html>
<head>
<style type="text/css">
div {
background:yellow;
border:solid green 10px;
}
</style>
</head>
<body>
<div id="myFhtmlDiv">
<div />
</div>
<script type="text/javascript">
new FluidHtml({divID:'myFhtmlDiv'});
</script>
</body>
</html>
<head>
<style type="text/css">
div {
background:yellow;
border:solid green 10px;
}
</style>
</head>
<body>
<div id="myFhtmlDiv">
<div />
</div>
<script type="text/javascript">
new FluidHtml({divID:'myFhtmlDiv'});
</script>
</body>
</html>
The following puts two fhtml instances on the page.
<script type="text/javascript">
new FluidHtml({divID:'fhtml1', deeplinks:'false'});
new FluidHtml({divID:'fhtml2', deeplinks:'false'});
</script>
new FluidHtml({divID:'fhtml1', deeplinks:'false'});
new FluidHtml({divID:'fhtml2', deeplinks:'false'});
</script>
- Using this methodology, you can put as many FluidHtml instances as you like on a page.
- If you don’t specify
divID, fhtml will look for a div with the id 'fhtml.' - When using multiple instances, it's probably important to specify
deeplinks:'false', else each instance will attempt to preserve state using the address bar, causing potential conflicts.