Main Page

From Frontal Wiki

Preface

This section will help you create rich media websites and applications using Frontal. Frontal is a specially formatted text document that presents text, images, video and other rich media in a web browser. Frontal is to rich media applications as HTML and JavaScript are to a standard web page. In fact, as you learn more, you'll be struck by the similarity between Frontal and HTML/JS. For example, here's some Frontal code (whenever you see a code sample like the one below, just click the "Run" button below it to see it in action):

   <div style="color: blue;" onClick="document.write ( 'You clicked me!' );">
       Hello, world.
   </div>

The similarity to HTML is no coincidence -- to make Frontal easy to use, we've adopted familiar concepts and standards. But we haven't been slavish to them. When we felt an alternative approach would add power and clarity (from a rich media perspective), we happily took it.

The one key difference is that while HTML/JavaScript is rendered by web browsers, Frontal is rendered by Flash. So the Frontal browser in this analogy is actually a simple Flash movie that knows how to read, interpret, and draw Frontal documents. This movie, called the Frontal SWF or renderer, can reside in any web page, and works in any browser that has the Flash plug-in (99% of all browsers according to Adobe).

The beauty of this approach is that not only does it allow you to easily harness the power and interactivity of Flash, it also allows your rich media to be fully indexable by search engines, seamlessly integrated with HTML & JavaScript, shareable via deep linking, and measurable via standard analytics applications. And, because Flash is the renderer, you only have to write it once -- there's no need to develop multiple code versions to account for the idiosyncrasies of various browsers.

And just like HTML/JS, all Frontal processing and rendering is done at "run time". So no compilation or publishing process is needed when you make a change in your Frontal code. This enables us to have an online editor (check out the Workspace link in the upper right) that lets you write Frontal code, and then see the results with the push of a button. In addition, this approach allows a Frontal developer to edit their Frontal document (their code) on their web server, and see the result by simply refreshing their browser.

So that's it for the introduction. If you ever get stuck on something, please visit Forums -- someone will be happy help. To look at how other people have solved problems in Frontal, just right-click ('ctrl' click on Macs) on Frontal content, and choose "View Frontal Source..." to see what's going on.

Frontal Coding Tips

In addition to the Workspace, you can use any text editor to write and edit Frontal code. This is sometimes more convenient than working directly in the Workspace. In Windows, something as simple as NotePad will do the trick. And on the Mac, try TextEdit using plain text format. But because Frontal is based on XML (meaning that like HTML, it uses tags to organize the document), having a text editor that understands XML can be very helpful -- they usually add color highlighting and show syntax errors as you type. A free editor that we use is jEdit.

Technology Credits

The Frontal language is built on the backs of several web native technologies. Thanks and respect to all of you.

• Adobe Flash implements the Frontal Rendering Engine.
• SWFObject integrates Frontal into HTML pages.
• SWFAddress provides deep-linking capabilities.
• mod_perl integrates the Frontal SEO Module with Apache web servers.
• Tamarin allows us to run the Frontal library in non-graphical environments such as on a web server.
• Red Tamarin provides stubbed ActionScript classes to allow the Frontal library to compile and run outside of the Adobe Flash IDE.
• As3Crypto provides cryptographic functions that Frontal uses.
• SWFMacMouseWheel enables OSX users to use their mouse wheels to scroll in Frontal.
• CSS3 provides a standard for Frontal to follow in its style sheet definitions.
• ECMA-262 provides a standard for the Frontal scripting language.