Rich User Interfaces with Thinlet

by Koen Roevens

#whoami

Software engineer - Ardatis nv
2000 - Fulltime Java/J2EE
2001 - Struts
2004 - Tapestry, JSF
2004 - Thinlet, http://thinclet.sourceforge.net/
My cup of tea/Java:
Spring, Hibernate, iBatis, ...
Simplicity, Productivity, Maintainability, ...

Rich Client >< Thin Client

Source of illustration: Building Smart Client using .NET

Thinlet -> Smart client?
- Characteristics
- API
Ready for real world app's or just a toy?
- Missing features?
- Extensibility
- Risc
- Maintainability

Thin Client - Poor User Experience

UI-state kept at server -> frequent roundtrips (example Tree)
Unintelligent caching (example Form submit)
Back button problem
Double post problem
A very basic set of widgets
No enforcement of a decent logout - Session time out

Thinlet's Charateristics

Size - 38 kb
"Eclipse RCP - The runtime alone is 6.7 MB (about 137 times the size of Thinlet). - Wolf Paulus' Blog"
Java™ 1.1 to 1.4, Personal Java™, and Personal (Basis) Profile™
GUI layout described in XML
Build upon AWT using it's own widgets.
LGPL-licensed
Created by Robért Bájzát

Midp

Patched version of Thinlet for MIDP
http://vehera.
symbiandevelopersjournal.com/
- Thinlet Midlet Demo Jad/Jar
- Thinlet Midlet Eclipse Workspace
  (Eclipse 3.01/EclipseME 0.75)

Thinlet - Usage poll

Thinlet's Demo Application

Thinlet's Drafts Application

Resizable columns, images

The Calculator - Thinlet's Hello World

calculator.xml


	  <panel gap="4" top="4" left="4">

        <textfield name="number1" columns="4"/>

        <label text="+"/>

        <textfield name="number2" columns="4"/>

        <button text="=" action="calculate(number1.text, number2.text, result)"/>

        <textfield name="result" editable="false"/>

      </panel>

The Calculator - Thinlet's Hello World

XCalculator.java - The parsing

... public class XCalculator { private XKit x; public XCalculator(XKit x) throws IOException { this.x = x; parse(); } private void parse() throws IOException { InputStream stream = getClass().getResourceAsStream("calculator.xml"); x.add(x.parse(stream,this)); } ... }

Java2html

Program to interfaces, not an implementation. - GoF
Constructor dependency injection

The Calculator - Thinlet's Hello World

XCalculator.java - The listener method

... public class XCalculator { ... public void calculate(String number1, String number2, Object result) { try { int i1 = Integer.parseInt(number1); int i2 = Integer.parseInt(number2); x.setString(result, "text", String.valueOf(i1 + i2)); } catch (NumberFormatException nfe) { x.setString(result, "text", "error"); } } ... }

A loosely typed world

Widget Tree

Object[]
Thinlet's missing Classes

API - Getters/Setters for Widget Properties

Standard

public boolean getBoolean(Object component, String key); public String getChoice(Object component, String key); public Object getIconObject(Object component, String key); public int getInteger(Object component, String key); public int getSelectedIndex(Object component); public Object getSelectedItem(Object component); public Object[] getSelectedItems(Object component); public String getString(Object component, String key); public void setBoolean(Object component, String key, boolean value); public void setChoice(Object component, String key, String value); public void setColor(Object component, String key, Object color); public void setFont(Object component, String key, Object font); public void setIcon(Object component, String key, Object icon); public void setInteger(Object component, String key, int value); public void setKeystroke(Object component, String key, String value); public void setString(Object component, String key, String value);

API - Getters/Setters for Widget Properties

Standard

public String getClassName(Object component); public Object getParent(Object component); public void setMethod(Object component, String key, String value, Object root, Object handler) throws IllegalArgumentException;

Custom

public Object getProperty(Object component, Object key); public void putProperty(Object component, Object key, Object value);

BeanWidget's AWTComponent

public Object getComponentObject(Object component, String key); public void setComponent(Object component, String key, Object bean);

The Calculator - Thinlet's Hello World

XCalculator.java - Register the XKit implementation

... public class XCalculator { static { try { Class clazz = Class.forName("xthinlet.XThinlet"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } ... }

Wiring of the collaborators in static blocks

The Calculator - Thinlet's Hello World

XCalculator.java - Main method

... public class XCalculator { ... public static void main(String[] args) { Box box = StaticBox.getTheBox(); try { new XCalculator(box.getXKit()); box.launch("Calculator - XThinlet"); } catch (IOException e) { e.printStackTrace(); } } }

IOC-box

The Calculator - Thinlet's Hello World

XCalculator as an applet

 <applet 
              code="xapplet.XApplet"

                archive="jars/xkit.jar,jars/xthinlet.jar,jars/thinlet.jar"

                width="190" height="30">

                <param name="class" 
              value="xthinlet.demo.XCalculator"></param>

              </applet>

The Tab Creator - Dynamic Thinlet

tabs.xml

 <panel 
                    columns="1">

                      <panel gap="4" 
                    top="4" left="4" 
                    bottom="4" right="4">

                        <textfield 
                    name="tab" columns="4"/>

                        <button 
                    name="add" icon="/icon/add.gif" 
                    tooltip="Add new item"

                                action="addTab(tab.text,tabs,status)"/>

                        <button 
                    name="delete" icon="/icon/delete.gif" 
                    tooltip="Delete item"

                                action="deleteTab(tabs,status)"/>

                      </panel>

                      <tabbedpane name="tabs" 
                    placement="top" weightx="1" 
                    weighty="1">

                      </tabbedpane>

                      <label name="status"/>

                    </panel>

The Tab Creator - Dynamic Thinlet

Listener addTab

public void addTab(String nameOfTab, Object tabs, Object status) { if (nameOfTab != null && !nameOfTab.trim().equals("")) { if (!itemExist(nameOfTab, tabs)) { x.setString(status,"text","Item " + nameOfTab + " added."); Object newTab = createTab(nameOfTab); x.add(tabs, newTab); x.setInteger(tabs,"selected",getIndexOfTab(tabs, newTab)); } else { x.setString(status,"text","Item " + nameOfTab + " exists already."); } } else { x.setString(status,"text",""); } } private boolean itemExist(String nameOfTab, Object tabs) { return (x.find(tabs,nameOfTab)!= null); }

The Tab Creator - Dynamic Thinlet

Listener addTab

private Object createTab(String nameOfTab) { Object newTab = x.createWidget("tab"); x.setString(newTab, "name", nameOfTab); x.setString(newTab, "text", nameOfTab); createContentTab(newTab, nameOfTab); return newTab; } protected void createContentTab(Object parent, String nameOfTab) { x.add(parent, createArea(nameOfTab)); } private Object createArea(String nameOfTab) { Object newArea = x.createWidget("textarea"); x.setString(newArea, "text", "The content of " + nameOfTab + "."); return newArea; }

The Tab Creator - Dynamic Thinlet

Listener addTab

private int getIndexOfTab(Object tabs, Object newTab) { Object[] items = x.getItems(tabs); for (int i=0; i < items.length; i++) { if (items[i] == newTab) { return i; } } return 0; }

The Tab Creator - Dynamic Thinlet

Listener deleteTab

public void deleteTab(Object tabs, Object status) { Object item2delete = x.getSelectedItem(tabs); if (item2delete != null) { deleteContentTab(item2delete, x.getString(item2delete,"name")); x.setString(status,"text", "Item " + x.getString(item2delete,"text") +" deleted."); x.removeAll(item2delete); if (x.getItems(tabs) != null) { x.setInteger(tabs,"selected",0); } } else { x.setString(status,"text",null); } } protected void deleteContentTab(Object parent, String nameOfTab) { }

API - Managing the tree of Widgets

Create

public Object createWidget(String classname);

Add

public void add(Object component); public void add(Object parent, Object component); public void add(Object parent, Object component, int index);

Search

public Object getDesktop(); public Object find(String name); public Object find(Object component, String name);

Delete

public void remove(Object component); public void removeAll(Object component);

API - Managing the tree of Widgets

Parent/Children

public Object getParent(Object component); public int getCount(Object component); public Object[] getItems(Object component); public Object getItem(Object component, int index); public Object getSelectedItem(Object component); public Object[] getSelectedItems(Object component);

API - Parsing

Parsing the GUI

public Object parse(InputStream inputstream, Object handler) throws IOException; public Object parse(String path, Object handler) throws IOException;

SAX-like parser

The Form - Extensible Thinlet

Pure GUI-toolkit
Do one thing and do it well.
Communication
- HTTP/HTTPS: Hessian/Burlap ,XML-RPC ,SOAP , ...
Databinding
Conversion/Validation
- Jakarta Commons Validator framework, ...

The Form - Extensible Thinlet

Testcase: Thinlet <=> XML-RPC <=> iBatis
iBatis Persistence layer:
- Externalised configuration
- Mapping from RDBMS to HashMap
- Configurable cache
XML-RPC Transportation layer:
- RemoteProcedureCall
- Registry of service handlers
- Primitives: int, boolean, String, double, Date, byte[]
- Compounds: Vector, Hashtable
Thinlet GUI

The Task Form - Extensible Thinlet

O/R mapping - task.xml

 <?xml version="1.0" 
              encoding="UTF-8"?>

              <!DOCTYPE sqlMap PUBLIC "-//iBATIS.com//DTD SQL Map 2.0//EN"

              "http://www.ibatis.com/dtd/sql-map-2.dtd">

                <sqlMap namespace="task">

                <parameterMap id="taskParam" class="java.util.HashMap">

                  <parameter property="title"/>

                  <parameter property="priorityCode"/>

                  <parameter property="completed"/>

                  <parameter property="createDate" 
              jdbcType="DATE" javaType="java.util.Date"/>

                  <parameter property="dueDate" 
              jdbcType="DATE" javaType="java.util.Date"/>

                  <parameter property="description"/>

                  <parameter property="id"/>

                </parameterMap>

                ...

              </sqlMap>

The Task Form - Extensible Thinlet

O/R mapping - task.xml

 <?xml version="1.0" 
              encoding="UTF-8"?>

              <!DOCTYPE sqlMap PUBLIC "-//iBATIS.com//DTD SQL Map 2.0//EN"

              "http://www.ibatis.com/dtd/sql-map-2.dtd">

                ...

                <update id ="updateTask" parameterMap="taskParam">

                  update task

                    set title = ?,

                    priority_cd = ?,

                    completed = ?,

                    create_date = ?, 

                    due_date = ?, 

                    description = ?

                      where task_sk=?

                </update>

                ...

              </sqlMap>

The Task Form - Extensible Thinlet

GUI - task.xml

 <?xml version="1.0" 
              encoding="ISO-8859-1"?>

                <panel name="form" columns="6" 
              ... property="binding=task" 

                    init="registerForm(form)">

                <label ... colspan="6" text="Task" 
              .../>

                <label text="Task :" ... />

                <textfield name="title" colspan="3"

                           property="binding=title;validator=required"/>

                <label text="Priority:" ... />

                <combobox name="priority" selected="-1" 
              editable="false" 

                           property="binding=priorityCode;list=priority"/>

                <label text="CreateDate:" />

                <textfield name="createDate" 

                           property="binding=createDate;converter=date"/>

                ...

                <button text="Ok" action="save()"/>

              </panel>

The Task Form - Extensible Thinlet

GUI - TaskForm.java

... public class TaskForm { static { try { // Build the wired-context Class.forName("xthinlet.XThinlet"); Class.forName("xrpc.server.xmlrpc.LocalServer"); //Class.forName("xrc.server.xmlrpc.ProxyServer"); Class.forName("xrpc.model.validator.RequiredValidator"); } catch (ClassNotFoundException e) { e.printStackTrace(); } } ... }

The Task Form - Extensible Thinlet

GUI - TaskForm.java

... public class TaskForm { ... public static void main(String[] args) { Box box = StaticBox.getTheBox(); try { Class clazz = TaskForm.class; InputStream stream = clazz.getResourceAsStream("taskform.xml"); XKit x = box.getXKit(); FormHandler handler = new FormHandler(x,stream); handler.load(new Integer(1)); ... box.launch("Planner - XKit - Thinlet",475,310); } catch (IOException e) { e.printStackTrace(); } } }

The Form Mini Framework

The update flow - save() listener - FormHandler.java

... public class FormHandler { ... public void save() { (id != null) ? update() : create(); } public void update() { Hashtable table = marshal2table(); Vector vector = new Vector(); vector.addElement(getBinding(form)); vector.addElement(table); try { getServer().execute("crud","update",vector); } catch (Exception e) {...} } ... }

The Form Mini Framework

The update flow - save() listener - FormHandler.java

public class FormHandler { ... public Hashtable marshal2table() { Hashtable table = new Hashtable(); if (id != null) { table.put("id",id); } try { Object[] formWidgets = x.getItems(form); for (int i=0; i<formWidgets.length; i++) { if (hasBinding(formWidgets[i])) { table.put(getBinding(formWidgets[i]), getValue(formWidgets[i])); } } } catch (Exception e) {...} return table; } ... }

The Form Mini Framework

The update flow - save() listener - FormHandler.java

... public class FormHandler { ... public Object getBinding(Object widget) { return x.getProperty(widget,"binding"); } ... protected RPCServer getServer() { if (this.server == null) { Box box = StaticBox.getTheBox(); try { this.server = (RPCServer)box.lookUp("server"); } catch (Exception e) {...} } return this.server; } }

The Form Mini Framework

The update flow - save() listener - FormHandler.java

... public class FormHandler { ... public Object getValue(Object widget) { Object converter = x.getProperty(widget,"converter"); if (converter != null && converter.equals("date")) {...} else { String classname = x.getClassName(widget); if (classname.equals("checkbox")) { return new Boolean(x.getBoolean(widget, "selected")); }else if (classname.equals("combobox")){... } else { return x.getString(widget, "text"); } } } ... }

The Form Mini Framework

The update flow - execute(...) - ProxyServer.java

public class ProxyServer implements RPCServer { ... public Object execute(String module, String function, List params) throws Exception { try { ... // Specify the server XmlRpcClient client = new XmlRpcClient("http://" + config.getHostname() + ":" + config.getPortNumber() + "/"); if (params instanceof Vector) { return client.execute(module + "." + function, (Vector)params); } else {...} } catch (Exception e) {...} return null; } ... }

The Form Mini Framework -Serverside

xmlrpchandlers.properties

... # CRUD Handler: crud=xrpc.server.xmlrpc.handler.CRUDServiceHandler ...

CRUDServiceHandler.java

... public class CRUDServiceHandler { private CRUDService service; ... public int update(String beanType, Hashtable beanMap) { return this.service.update(beanType, table2map(beanMap)); } ... }

The Form Mini Framework -Serverside

CRUDServiceIBatisImpl.java

... public class CRUDServiceIBatisImpl implements CRUDService { public final static String UPDATE = "update"; ... public int update(String beanType, Map beanMap) { try { getSqlMap().startTransaction(); int count = getSqlMap().update(UPDATE + beanType.substring(0,1).toUpperCase() + beanType.substring(1) , beanMap ); getSqlMap().commitTransaction(); return count; } catch (SQLException e) {...} } ... }

Thinlet's strengths

Easy to learn
Fast to develop
Java
- Develop in one JVM
- Reuse of common components: Validator, ...
- Avoid double work for offline capable applications
- One language to learn
Thin
Fast to run
Easy to deploy

Thinlet's flaws

Missing features
- Drag & drop
- Editable tables
- Swing components
Risc
- Program to interfaces, not an implementation - XKit
Create your own glue code for enterprise features
One Class - approach
- Componentize your GUI code - http://thinclet.sf.net/

Thinlet - Ready for prime time

GUI for command line utilities or simple apps
Web applications with a Thinlet adminstrator's GUI
Web applications with a Thinlet GUI for power users
PDA enabling of applications
Smartphone enabling of applications

Rich User Interfaces with Java Workshop organised by BeJUG on 22/3/05

Rich User Interfaces with Thinlet

#whoami

Rich Client >< Thin Client

Thin Client - Poor User Experience

Thinlet's Charateristics

Midp

Thinlet - Usage poll

Thinlet's Demo Application

Thinlet's Drafts Application

Resizable columns, images

The Calculator - Thinlet's Hello World

The Calculator - Thinlet's Hello World

The Calculator - Thinlet's Hello World

Widget Tree

API - Getters/Setters for Widget Properties

API - Getters/Setters for Widget Properties

The Calculator - Thinlet's Hello World

The Calculator - Thinlet's Hello World

The Calculator - Thinlet's Hello World

The Tab Creator - Dynamic Thinlet

The Tab Creator - Dynamic Thinlet

The Tab Creator - Dynamic Thinlet

The Tab Creator - Dynamic Thinlet

The Tab Creator - Dynamic Thinlet

API - Managing the tree of Widgets

API - Managing the tree of Widgets

API - Parsing

The Form - Extensible Thinlet

The Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Task Form - Extensible Thinlet

The Form Mini Framework

The Form Mini Framework

The Form Mini Framework

The Form Mini Framework

The Form Mini Framework

The Form Mini Framework -Serverside

The Form Mini Framework -Serverside

Thinlet's strengths

Thinlet's flaws

Thinlet - Ready for prime time

Q & A

Links

Rich User Interfaces with Java
Workshop organised by BeJUG on 22/3/05