Javascript Web Application with just Javascript, no HTML, no CSS - PART 1 2011

1. web applications & RIA
with JUST JavaScript
code: NO HTML
var base = {
NO CSS
layout: ‘Vertical‘,
and cross browser
newChildren: {
header: {height:25, percentWidth: 100},
wrapper: {
layout: ‘Horizontal’,
newChildren: {
left: {width: 250, percentHeight: 100},
right: {percentWidth: 100, percentHeight: 100}
}
}
};
cross browser,
resize aware,
minWidth, minHeight,
performance using validation/invalidation
pattern
output:
part 1 - 03.02.2011

2. How it works?

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;

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

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;