HTML

With Wrapper, you can use any well-formed xhtml (html that is valid xml). The basic idea is that every tag ( <tag /> ) that is open must be closed properly. You can do this in one line <tag /> or you can have tags inside of each other like this...

<tag>
       <tag />
</tag>

Here is your basic setup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       <head>
              <meta http-equiv="content-type" content="text/html" charset="utf-8" />
              <title>Title</title>
              <link rel="stylesheet" href="myStyleSheet.css" type="text/css" />
              <script type="text/javascript" src="http://0in1.com/wrapper_assets/wrapper.js"></script>
       </head>
       <body onload="wrapper();">
              <div id="content">
                     <div id="upgrade"><a href="http://www.adobe.com/go/getflashplayer"><h1>Please upgrade your Flash Player by clicking here.</h1></a></div>
                     <div id="flash">
                            <!--  Everything inside of this node will be rendered in Wrapper  -->
                     </div>
              </div>
       </body>
</html>

As long as you are using a valid style sheet, and have loaded the Wrapper base files, you can use the above example to build any project. In this sample document there is nothing to see at the moment but lets talk about the visual elements later.

Which tags can be used? Most html tags and events are supported, but Wrapper sometimes implements their functionality in a slightly different way. While respecting the importance of sticking as closely to existing standards as possible, Wrapper simplifies the process of making beautiful, accessible and cross-browser compatible websites. At this time, these are Wrapper's supported html tags.

div: Div tags are the main building block of any page. Think of them as generic visual elements that can be styled or placed anywhere. img: The image tag can load jpgs, pngs, gifs and swfs with the src attribute, Example: <img src="myimage.jpg" />

embed: The embed tag is used to embed and load swf files (no other type of file can be embedded into Wrapper). <embed src="myswf.swf" /> Wrapper also supports the deprecated object tag.

form: To send information to the server you can use form tags. The form's action attribute is used to specify the server's location and the target attribute is used to define where the result or response from the server is sent. Target can be _self, which means this page, _blank which means a new page, or a path to a element on the page starting with the word this which is a reference to the element that you are on currently. From there, using this, you can drill into child or parent elements with the tag ids, or the word parent. Example: this.parent.mySiblingsName input: To submit information inside of a form to a server you must use input tags. Wrapper supports text input fields. These text fields can have name and value attributes. Name is the identification of the text field and value is the contents of the text field. You can also use hidden fields with name attributes and submit buttons. More input things are coming but we are trying to keep Wrapper's size, itself, small.

link: Link tags in the document head can load CSS stylesheets, JSON object files and complied SWF plugins. The rel attribute is used to define what type of file is being linked to and the href is the path to the file. Link type identification is recommended but not required in Wrapper. PlugIn link tags can have a variable called scopeInit which sends scope of all functions and elements within Wrapper to the plugin when it is initialized, you can leave it out if it is not needed (i.e., nothing is sent).

<link rel="plugin" href="/plugins/papervision3d.swf" type="application/x-shockwave-flash" scopeInit="true" />
<link rel="objects" href="/json/objects.json" type="application/json" />

Other Nodes: Any other node is thought of as a text node. This means that nodes inside do not have any more control then what is available in a flash textField with a stylesheet, you can read more about that here. http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html In the works: tables (tr, td, th), A tags without text, more inputs

ID's Classes and Styles:

All tags can have id and class attributes added to them. Id's are used to identify elements so that you can access them later (to style them, for instance). IDs should only be used once per document to uniquely distinguish one element from another. Class attributes are meant to apply common style to multiple elements, also, multiple classes can be applied to each element which can come in handy. ie <div id="myBigBlueBox" class="large blue" /> In this example, "large" is a style that has defined size and "blue" is a style that has defined color, this makes for great reuse of styles. The class styles are added in order, with any later duplicate styles overriding earlier ones. Styling applied with the id attribute also overrides stying done via the class attribute. At this time, inline styles are not supported.

The load process of a Wrapper page: After the html page is loaded into the browser, Wrapper is called and checks for browser plugins. If you have the Flash player Wrapper takes over the rendering. Wrapper first reads the head and loads the links. After all links are loaded the css parsed and saved here, in document.css Then the html body is rendered with the loaded styles and positions and then events are applied, the html is saved here, in document.html and the elements are all drawn relative to an object that Wrapper creates for you called main. Wrapper displays your page and listens for any defined events (described next) that you may add.

Events:

All of the events, listed below, can be added to any tag like this <div onclick="" /> If you write a standard function within the event attribute javascript will be called (but with no control over return values at this time). If you would like to call a method or a plugin inside an event attribute within Wrapper, itself, you can write a json(); method. Either write the JSON objects inline, or, just give the name of a JSON object and Wrapper will look for it in your loaded JSON files. You can read more about this in the JSON documentation.

onclick
ondblclick
onmousedown
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onmousewheel
onrollout
onrollover
onkeydown
onkeyup
onkeypress
onaddedtostage
oncomplete
onenterframe
onfocus
onblur
onfullscreen
onprogress
onremoved
onresize
onscroll
onselect
onsocketdata
onsync
ontabindexchange
ontextinput
onunload
onsubmit

Comment by james.setaro, Dec 12, 2008

So what is the ExternalInterface? used for? Is this control dependent on the browser to render or parse the DOM?

Comment by SimonNicol, Feb 20, 2009

Good work talltyler! This is exactly what I was planning to develop, but before I decided to go ahead, I thought I'd see if anyone had done this - and you have!

This is for a highly searchable, wordpress layout, database driven, good looking, flash displayed website.

I don't really know word press as I've only ever done Flash sites, but I recon this is a smart piece of work.

Thank you Tyler!

Comment by alejandromicheloud, Mar 10, 2009

Hi Tyler! I can use htmlwrapper from a swf movie?, without wrapper JavaScript?. Like http://code.google.com/p/htmlsprite/

I try use Html class directly, but without success.

Comment by geek.tutorials, Mar 26, 2009

Correct me if I am wrong, it seem to me that currently the wrapper do not support rendering of HTML table tags. The wrapper is excellent, it got almost 95% of what exactly I needed to solve the problem I currently facing. I need to send part of my HTML content to printer, I manage to extend few function into your library and make the wrapper act as a printer container that dynamically load HTML source(load part of the document's dom with javascript and send the dom into invisible flex that contain wrapper) and render it to printer. But the only thing missing at the moment is the HTML table is not being render. which got me back to zero and have to look for other library and try again.

Do you have plan to make the wrapper support rendering of HTML table tags? (or did I miss something and the wrapper did support it?)

Thanks for your great work.