with JUST JavaScriptNO HTMLNO CSSvar base = {

layout: ‘Vertical‘, newChildren: { header: {height:25, percentWidth: 100}, wrapper: { layout: ‘Horizontal’, newChildren: { left: {width: 250, percentHeight: 100}, right: {percentWidth: 100, percentHeight: 100} } }};

output:

cross browser,resize aware,minWidth, minHeight,performance using validation/invalidation pattern

web applications & RIA

code:

and cross browser

part 1 - 03.02.2011

How it works?

Low levelEvery application has a stage and only one, that manages things about the framework; The stage is created by default in the body tag and looks like this: <div style=”position: absolute, top: 0, right: 0, bottom: 0, left: 0”></div>

When you have the stage you can add children like this:stage.addChild({...child options...}), but you will not do that;

The difference in adding children is that it looks like flash!A DisplayObject with x: 0, y: 0, width: 100, height: 100 will create a div with top: 0px, left: 0px, width: 100px, height: 100px;

The DisplayObject is the very basic element of this framework;

the glue between HTML+CSS and jS

high levelEvery application also contains an Application object;

The application can only contain UIComponents;

The UIComponents are build on the DisplayObjects, but have extra features like positioning and sizeing. You might use these property to define the size and position of the UIComponent: x, y, top, right, bottom, left, width, height, percentWidth, percentHeight, minWidth, minHeight, maxWidth, maxHeight, verticalAlign, horizontalA-lign;

The UIContainers can contain other UIComponents; These con-tainers have their own layout by default you will get some basic: horizontal, vertical, absolute and tile Layout; and virtualization;

is built ON the low level

In other words... ...is flex for javascript

CustomizationYou can create your own UIComponents or composite ones ex-tending the UIContainer;

You might add new low level elements; You will define the raw html tag in javascript; Then if you want to use in an application you will make it a UIComponent;

Mixins will be allowed; add features to an object like drag/drop;

Themes are supported; custom layouts too;

Every UIComponent have a view, that manages it’s visual layout; the view have a skin that manages the colors and images;

ThanksMore will come in part 2 (application workflow);

If you want to support this, you can send an email to webdesignporto@gmail.com

I’m Totty;