DENG is back!

The DENG Modular XML Browser project finally has a new home. Over the last two years, i switched hostings twice (don’t ask), and DENG was scattered all over the internets, and many things got lost.

I finally sat down to clean up the mess and everything is in one place again. The project homepage features a small news section, the feature matrix, examples (i’ll add more every now and then, so be sure to check back), downloads (includes examples on how to integrate DENG into your Flash projects and HTML pages as well as the source code of course) and support (you can support us by donating via PayPal now, and we can support you via our forum and mailinglist, and we offer individual support too).

Nothing terribly new there, but i thought i let you know.

I’m working on DENG 2.0 (Actionscript 3 implementation) whenever i find some free time, so stay tuned. May take a while yet though until i have something halfway meaningful to show.

http://deng.com.br/

Innovation, or the lack thereof… W3C, anyone?

I originally posted this on the OSFlash mailinglist, but i thought it would make a good blog post, so here it is:

My vision of a next generation web application framework.

(or: Innovation, or the lack thereof… W3C, anyone?)

There’s a sh*tload of XML dialects for GUIs either available or being developed at the moment. Just to name a very few: Adobes MXML, Microsofts XAML, Laszlos LZX, Netscapes XUL, and from the OSFlash camp ActionSteps ASML (or Renaissance) and ASWings AWML.

All of them are proprietary formats (plus most of them are direct projections of the underlying, proprietary APIs), and all of them require some decent amount of script code to be written in order to actually make the UIs work. Problems: to author sophisticated applications i need extensive knowledge of the XML dialect itself, of the API and the scripting language, and probably of the underlying platform API too. For most ‘next gen’ RIA platforms much of this is proprietary stuff, so i better choose wisely what technology to dive into for the next months/years. I also better be able to think ‘code’ in order to make my RIA a successful reality.

Wouldn’t it be nice to develop web applications using open, standardized technologies that everyone is already very familiar with? Let me introduce you to the W3C, and please try to forget about browsers in general and men with white beards wearing birkenstocks in particular for a moment.

Contrary to popular belief, the W3C is working on really cool stuff. Some of it you’re already very familiar with: (X)HTML and CSS. The *real* cool stuff though are W3C technologies that haven’t made it into the mainstream yet (because they aren’t supported by mainstream clients, or because they’re being worked on yet). I pick two of those technologies, XFrames and XForms, and briefly introduce them here, as i think that together with XHTML (2) and CSS (3), they pretty much cover everything a RIA framework needs.

XFrames
The technology that is supposed to supersede HTML Frames. XFrames of course is going to support framesets as we know (and hate) them today, but there’s so much more. Using CSS, frames can be styled to appear as floating windows or tabbed panes for example, and using a new URI scheme it will be possible to easily link not only a frameset but also it’s content, example: http://example.org/index.xframes#frames(id1=uri1,id2=uri2,...).

XForms
The technology that is supposed to supersede HTML Forms. XForms is going to significantly change the way we author forms. Basically, it separates the model from view and controller, as you can now have multiple data instances (usually XML, both inline or external) that you can use as data provider for controls and widgets (controls can be bound to data provided by instances using XPath). Validation is handled in a purely declarative way via XML Schema datatypes. But again, there’s much more, for example: <switch> and <case> to show/suppress parts of the UI (to be used for e.g. wizards, tabbed interfaces or dynamic forms), or <repeat> (to be used for e.g. filling tables with rows, or datagrids, or just about anything UI that repeats itself). Of course everything is styleable by CSS and can be bound to data instances. Sounds familiar? It sure is. And did you know that the latest ColdFusion uses XForms under the hood? Yes it does.

I recommend the W3C articles “XForms for HTML Authors” (Part 1 and Part 2) and Micah Dubinkos XForms Institute (hey look, he’s using DENG!) for a leightweight introduction to XForms (The XForms Institute also links a free online version of the O’Reilly book “XForms Essentials” in case you’d like to dive in further)

If you mix all those technologies mentioned above, and throw in some more, like SVG, SMIL, and maybe even XUL, that’ll be my vision of a sane platform for Web 2.0 [sm][tm](c)… ok, Web 3.0 it is then. A sane platform to develop RIAs on. Don’t even get me started ranting about the current state of the web as too many people see it. What the web needs is innovation, not hyped acronyms for old crap, or yet another proprietary markup language.

Of course such a framework needs to be developed yet. With the Flash Player 9 in our hands, the great performance boost compared to version 8 and a way better API (minus native text rendering.. still sucks), i’m sure it’s absolutely doable. If only somebody with some angel $$ would share my views, or if only everybody would work together with open minds instead of cooking their own soup…

We even have a proof of concept, anybody remember DENG? That was Flash Player 6. I’m also writing all this because i think most people misunderstood DENG and see it as a better HTML-enabled TextField or something, or worse, as a HTML browser. It was supposed to be the beginning of an application framework. Of course it’s missing A LOT yet to really become one (and of course Flash Player 6 was way too slow to do such stuff), but again, with Flash Player 9 and some likeminded developers, this could become quite a blast.

Thanks for listening :)

Addendum: Some good and valid remarks and questions i got in the OSFlash mailinglist:

This is, in my mind, a brilliant idea especially when you throw in Haxe‘s planned ability to render to different (and future) runtimes (I assume that you would use Haxe to do this).

One of the most frequent issues on the Haxe list is the lack of a component written for Haxe. I think that a project like this would solve that issue for Haxe.

I’ve looked into Haxe. It sure looks promising, and It’d be a major plus that a framework written in Haxe potentially wouldn’t have to be tied exclusively to the Flash Player. The first thing i would do if i would start to develop such a framework in Haxe is write a compliant DOM3 Core implementation that works exactly the same in Flash 6, 7, 8 and 9 and in all mainstream browsers. That alone would already kick some serious bottom.

I glanced through the XForms documents on w3c and was wondering if it would be possible to leverage one of the existing component sets (specifically ActionStep or ASWing) to complete this task? To me, it would seem like a much smaller job if we used an existing framework.

But could we imagine to bind a standard Flash XFrames/XForms/CSS parser with any/a few GUI toolkits? That would actually be great, but is it possible to achieve?

I have been asked this question many times already. Theoretically, this is possible. However, if i would develop such a framework, i would surely want to implement CSS3 which features styling and skinning mechanisms that imho beat those implemented in all current GUI toolkits together, and integrates perfectly into all mentioned W3C technologies. So depending on what toolkit you use, you probably can only implement a subset of CSS3. I also think that it wouldn’t be very easy to integrate custom component sets, or rather, i think it wouldn’t be worth the pain.

DENG and OpenLaszlo

Inspired by a user i wrote a proof of concept DENG proxy today, to be used in OpenLaszlo applications.

Follow these steps:

  1. Download and install OpenLaszlo
  2. Create a folder “deng” in your my-apps folder ([openlaszlo]/Server/lps-3.1.1/my-apps)
  3. Download the DENG test application for OpenLaszlo and extract it into the folder you just created
  4. Point your browser to http://localhost:8080/lps-3.1.1/my-apps/deng/deng.lzx

You should get a minimal application with buttons to load two test documents and to set the size of the rendered documents:

OpenLaszlo & DENG test application

I must admit i’m a OpenLaszlo newbie (installed it today for the first time), and the solution smells a bit like a hack (it certainly is). I also have no idea yet how to send events from DENG to the OpenLaszlo app. Any pointers highly apprechiated!

Flash Player 8.5 – SPEED!

You heard the news already, Macromedia launched their Labs site today, along with public alphas of Flash Player 8.5, Flex Builder 2 and the Flex Framework 2.

Among the first things i did with those alpha goodies was porting the DENG CSS 3 parser to Actionscript 3.

Results of first benchmark (Parsing a 20kb CSS file into an object DOM):

  • AS2, Flash Player 8: around 1000ms
  • AS3, Flash Player 8.5: around 80ms

That’s a 12.5x performance boost, without FP8.5 specific optimizations.
Flash is fun again!

I’m going to prepare a live demo of the parser in the next days for you to play with it.

XFrames: New Working Draft published today

The W3C published a new working draft of their XFrames specification today, an XML application designed to replace HTML Frames.

XFrames solves most usability problems known from HTML Frames (Back button, bookmarking, page reloads, search engine woes, etc) by introducing a new URI reference notation:

http://example.org/home.xframes#frames(id1=uri1,id2=uri2,...)

In addition to vertically and horizontally tiled frames, XFrames introduces two new composition modes “single” (one frame visible at a time, navigation through tabs, for example) and “free” (movable, overlapping windows), making it an extremely simple but powerful tool for web application development.

DENG 1.0 already features an experimental XFrames implementation, and even better support for the latest spec is one of the priorities for DENG 2.0.

DENG 2.0 Roadmap (first draft)

Macromedia announced the Flash Player 8.5 today, featuring a completely new virtual machine (AVM2), E4X, RegExp, Binary Sockets and W3C DOM Events.

Flash Player 8.5 (along with the Flex 2 Framework and Flex Builder 2) will be released as public alpha on October 17th.

This marks the beginning of the development of DENG 2.0, a completely refactored DENG version targeted for Flash Player 8.5 and above.

Features i plan for DENG 2.0 (incomplete, vague, and subject to change, just to give you a rough overview):

  • Improved performance
  • Flex 2.0 Integration, targeted for AVM2
  • 100% compliant CSS 3 parser
  • Compliant implementations of SVG-T, XForms 1.1
  • Better support for XHTML, SMIL, XFrames etc.
  • Support for subsets of XUL
  • Support for W3C DOM
  • Better CSS box model implementation (DENG currently doesn’t support absolute/relative positioning and inline-boxes, the tables implementation is not perfect, etc.)
  • Better CSS line box model implementation (DENG uses the native TextField object of the Flash Player to render inline text. This won’t change, but improvements in the Flash Player since version 6 allow some more sophisticated features (e.g. a:hover, left/right floats).
  • GIF, PNG and SVG images (DENG currently supports JPEG only), background images

CSS 3 modules and envisioned compliance:

  • Syntax/Grammar (full)
  • Selectors (full)
  • Values and Units (full)
  • Value Assignment, Cascade, Inheritance (full)
  • Box Model, Vertical (as full as possible)
  • Positioning (as full as possible)
  • Color, Gamma, Color Profiles (partial)
  • Colors and Backgrounds (full)
  • Line Box Model (partial)
  • Text (partial)
  • Fonts (partial)
  • Ruby (none)
  • Generated Content, Markers (as full as possible)
  • Replaced Content (as full as possible)
  • Paged media (as full as possible)
  • User interface (as full as possible)
  • WebFonts (partial)
  • ACSS (none)
  • SMIL (as full as possible)
  • Tables (partial)
  • Columns (partial)
  • SVG (as full as possible)
  • Math (partial)
  • BECSS (none)
  • Media queries (as full as possible)

Stay tuned.

New DENG Build: 1.0.43

[update: New DENG Build: 1.0.44]

I just published a new DENG build, that fixes some bugs and adds some minor features:

  • fixed: Memory leaks. Some object cross references prevented the DENG component from unloading.
  • fixed: Whitespace as first character in a block element with “white-space: normal” applied. Leading whitespace is now removed.
  • fixed: _level0 references and callbacks in deng.swf made it difficult to load DENG into custom Flash projects.
  • added: Support for <ul />. Unordered lists now display a bullet as marker.
  • added: Support for <br />. The line break tag now defaults to “display: block”.

As we are slowly moving to a different hosting, the sources are currently not available from CVS.

DENG 1.0.43 sources: http://deng.com.br/deng_1_0_43_src.rar

I also published a demo showing how to use DENG with Flash projects compiled with Flash MX 2004, Flash 8 or MTASC, and how to use a standard vertical scrollbar (here: UIScrollBar v2 component) with DENG.

Demo: http://deng.com.br/mx2004/
Download: http://deng.com.br/mx2004/deng.zip

By the way, the DENG support forum moved:
http://deng.com.br/forum/

Enjoy.

Display SVG in 97% of all Web Browsers

Inspired by a blog post by John Dowdell, who was raising the question if it would be possible to trigger a SVG rendering SWF to do the work in case the user’s browser is not SVG enabled, i sat down last night to figure out if this could be solved using mod_rewrite on the serverside in combination with DENG.

It actually is possible, with a few constraints. Check out these SVGs (and make sure you have at least the Flash Player 6 installed and enabled):

You should notice that although the SVGs are physically located in /stuff/svg/ on my server, your browser loads the DENG engine (75kb, and only the first time, as then it is cached), which then loads the original SVG and renders it.

To get the SVG without the redirect, append ?raw to the URLs above.

I am using mod_rewrite to redirect requests for SVGs to DENG:

<ifmodule mod_rewrite.c>
RewriteEngine On
Options FollowSymLinks
RewriteBase /stuff/svg/
RewriteCond %{QUERY_STRING} !(raw) [NC]
RewriteCond %{HTTP_ACCEPT} !(image/svg\+xml) [NC]
RewriteRule ([A-Za-z0-9-]+).svg$ deng/index.php?filename=/stuff/svg/$1.svg.orig [L,T=text/html]
RewriteRule ([A-Za-z0-9-]+).svg.orig$ $1.svg?raw [L]
</ifmodule>

I am in no way a mod_rewrite/Apache/whatever expert, so the rules may be simplified yet, i don’t know. Comments on that are welcome.

The constraints are:

  • I am checking the HTTP_ACCEPT header field for image/svg+xml and do not redirect in case it is set. Unfortunately, neither Opera 8 nor IE6 with the Adobe SVG control set this mime type, that’s why DENG is always triggered in those browsers. I don’t know how Firefox 1.1 is going to behave, but my guess is that this is actually going to work in Firefox.
  • This method obviously does not work if you want to embed SVG inline (like via <img src="flashenabled.svg"> or <object>
  • DENG1 is still somewhat limited, so if you want to have full SVG-T compliance, you’d have to wait for DENG2