3. Low level
the glue between HTML+CSS and jS
Every 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;
4. high level is built ON the low level
Every 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;
6. Customization
You 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;
7. Thanks
More 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;