web applications & RIA      with JUST JavaScriptcode:       NO HTMLvar base = {            NO CSS       layout: ‘Vertical‘...
How it works?
Low level                             the glue between HTML+CSS and jSEvery application has a stage and only one, that man...
high level       is built ON the low levelEvery application also contains an Application object;The application can only c...
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...
ThanksMore will come in part 2 (application workflow);If you want to support this, you can send an email towebdesignporto@...
Upcoming SlideShare
Loading in …5
×

Javascript: Web Applications & RIA with just Javascript, no HTML, no CSS - 2011

1,813 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,813
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Javascript: Web Applications & RIA with just Javascript, no HTML, no CSS - 2011

  1. 1. web applications & RIA with JUST JavaScriptcode: NO HTMLvar 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. 2. How it works?
  3. 3. Low level the glue between HTML+CSS and jSEvery application has a stage and only one, that manages thingsabout 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 adiv with top: 0px, left: 0px, width: 100px, height: 100px;The DisplayObject is the very basic element of this framework;
  4. 4. high level is built ON the low levelEvery application also contains an Application object;The application can only contain UIComponents;The UIComponents are build on the DisplayObjects, but haveextra features like positioning and sizeing. You might use theseproperty 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. 5. In other words......is flex for javascript
  6. 6. CustomizationYou can create your own UIComponents or composite ones ex-tending the UIContainer;You might add new low level elements; You will define the rawhtml tag in javascript; Then if you want to use in an applicationyou 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. 7. ThanksMore will come in part 2 (application workflow);If you want to support this, you can send an email towebdesignporto@gmail.comI’m Totty;

×