Design meeting

2007-02-21, Matti, Marc, Joonas

Structure of the HTML page

Example with two applications on one page

	<head> ... all CSS at the same time ... </head>
	<body>
		<div id="my-app-window"></div>
		<div id="my-app2-window"></div>
		<script type="text/javascript">
		itmtk.ApplicationClient.create(
			"my-app-window",
			"http://toolkit.itmill.com/demo/features/",
			itmill.themes.Demo
		);
		itmtk.ApplicationClient.create(
			"my-app2-window",
			"http://toolkit.itmill.com/demo/features2/",
			itmill.themes.Demo
		);
		</script>
	</body>

One app on one page

ApplicationServlet? generates the main page

Two apps using the same IT Mill Toolkit on one page

See example above. The main page is written by hand

Portal

All applications are put inside IFRAMEs

Custom layouts

new CustomLayout?("foo") AJAX

  • Loads from WEB-INF/themes/teemannnimi/layout/foo.html

foo.html example 

whatever stuff such as html and links to css
<customlayout>
	<img src=././mylogo.jpg />
	<div location="leftbar"> this text is also discarded </div>
	<div location="rightbar"></div>
</customlayout>
more whatever stuff

In example mylogo.jpg is loaded from WEB-INF/themes/teemannnimi/layout/mylogo.jpg

Client replaces the following cases with URL to themes layouts directory

  • '././'
  • /src=["|'][(https:|http:|/)]/i
  • /url([(https:|http:|/)]/i

Globals

  • client -> itmtk.client[i] (where i in 0,1,2,.. )
  • itmtk.themes.Demo (extends itmtk.Class; pysyy samana)
  • Try to remove any accidentally made globals (like i, j, ...)
  • Node ... Try to remove it and ensure that it still works with IE6 onwards
  • itmtk.themes.Demo.prototype.myOwnEventHandler
  • In the end, we should only have one global: itmtk

Paintables

  • itmtk.client[clientid].paintable[paintableid] = reference to paintable div
    • clientid in 0,1,2,...
    • paintable id in 0,1,2,3, ... == the same as in UIDL
  • ID for div is of form: itmtk1.2178 (where 1 == clientid and 2178 == paintableid)
    • These are only used for elements where absolutely needed
    • Will be deprecated in future
  • In debug mode paintableDiv.uidl = original UIDL used for rendering
  • New properties can be added to paintableDiv in createPaintable.. method if needed
    • varMap
    • uidl (always in debug mode, might be used sometimes)

Method signatures

Rendering methods

Now: renderButton : function(renderer,uidl,target,layoutInfo) Should be: renderButton : function(uidl,target)

  • renderer -> removed alltogether
  • layoutInfo -> target.layoutInfo (when needed)

So the render function should look like this: 

renderMyFancyComponent(uidl,target) {
 var weAcceptRecycledPaintables = true;
 var paintable = createPaintableElement(uidl,target,weAcceptRecycledPaintables); 
 :
}

Render local UI components: button, checkbox

Drafting ideas by examples: 

var newButtonDiv = createButton("Caption",clickHandler, description, icon, error);
var variableId = getVariableId(uidl,...);
var myButton2 = createButton("Test", itmtk.themes.Base.prototype.createButtonClickHandler(variableId));
myButton2.setCaption("New captions");
var button3 = createCheckBox(...);

Public helper method naming conventions

  • Any method not named as
    • render*
    • _*

Private method naming conventions

  • Methods starting with _ should newer be called outside from the Theme

When should we use helpers?

In general, there are too many helpers:

  • Performance
  • Added complexity

Theme MUST be a good reason for helper to be public.

Hidden inputs

  • Each paintableDiv has varMap
    • varMap[variableId]=variableObject
    • varMap[variableName]=variableObject
  • variableObject
    • id
    • name
    • value
  • createVariablesFromUIDL(uidl,paintable)
    • Should creates all variables from given component UIDL

Event handlers should be assigned as follows: 

renderButton(..) {
  ...
  this.client.addEventListener(buttonDiv, "click",
  		_createButtonClickHandler(clientId,paintableId,immediate));	
}

_createButtonClickHandler = function(clientId,paintableId,immediate) {
	return new function() {
		var variable = this.client.paintable[paintableId].varMap['pressed'];
		variable.value=true;
		this.client.updateVariable(variable,immediate);	
	}
}

Windowing

createWindow(

z-index

  • Z-Index regions
    • 0-11999 Free main window
    • 12000-19999 Windows: 100 indexes / window
      • 12000 Window shadow
      • 12001 Iframe (blocker)
      • 12002 Window border and content divs (content overflow: auto|hidden)
      • 12050- Reserved
    • 20000 Modality curtain
    • 20001 Modal window
    • 30000 Popuping thingys (descriptions, contextual menus, ...),

Modality

  • What about dual modals? Not supported.
  • Server side api needed for window

Native window support

  • Native windows are kept, but not as default

Frames

  • Div frames

Borders

  • BORDER_DEFAULT "Div" window with controls (titlebar, move, close, resize,...)
  • BORDER_MINIMAL == BORDER_DEFAULT
  • BORDER_NONE "Div" window with no titlebar, small border (closable, resize, move?)
  • BORDER_NATIVE Browser native windows as well as we can

Events

Add listeners, getters and setters for:

  • Resize
  • Close
  • Position
  • Positioning base
  • Z-index changes listener

Both server and javascript sides

Misc

  • itmtk.ApplicationClient?.prototype.applicationId gets the same value as indexes of itmtk.client
  • itmtk.themes.Base.prototype.client gets the registered client for this theme instance
  • Test that component hiddening really works inside form