Tipi - Building Rich User Interfaces

1

donderdag 9 juli 2009

OVERVIEW

1. Introducing Tipi

2. Tipi XML Basics

3. Working with Tipi

4. Managing a Tipi project

5. Extending Tipi

6. Customizing appearance

7. How it all ties up

2

» introducing tipi


1. INTRODUCING TIPI

About Tipi — Building applications with Tipi

Tipi fundamentals — what are the main building blocks of a Tipi application?

3

» about tipi


ABOUT TIPI

Tipi — a universal user interface layer used for defining user interfaces

Easy to learn XML-based language

Separates form and representation: Tipi defines how a UI is structured and how you can click through it, not what it actually looks like

Built on top of a data abstraction layer which we commonly call Navajo services

» tipi fundamentals

4


TIPI FUNDAMENTALS

UI elements — a user interface is built up of different type of elements such as windows, panels, menus etc.

UI logic — the flow through a user interface defines how elements interact with each other and with the data they represent

Navajo data structure — a dedicated UI language needs an elegant way of retrieving and incorporating data. Where applicable, business rules should be implemented on the service layer and not in the user interface

» ui elements

5


UI ELEMENTS

UI elements are the building blocks of an application. They define what the user sees; what he or she can click on

When thinking of UI elements, think windows, panels, menus, buttons, tables, text fields, labels, sliders, toolbars, dialogs, images, tabs, …

» ui logic

6


UI LOGIC

UI logic represents the flow through an application. Typically users can click on things, after which things happen, screens are opened, data is loaded, the user is given some feedback, …

Implementation of UI logic breaks down in actions, events and event listeners

Actions do stuff — e.g. instantiate a window

Events are fired — e.g. a value is changed, a mouse is clicked, a window opened

Event Listeners — can be defined to actually trigger when certain events occur. E.g.: onLoad, onInstantiate, …

» actions

7


ACTIONS

Actions can manipulate data, fire user interface events, display messages, …

Different types of UI elements support different types of actions: e.g. dialogs can be opened, questions answered, tables browsed, etc.

Actions are placed within event listeners, to define what should happen when a certain event occurs

» events

8


EVENTS

Different types of UI elements support different types of events, although some share common ones

In order to actually do something with an event, an event listener must be defined, that specifies what subsequent actions you want the application to perform

» event listeners

9


EVENT LISTENERS

Event listeners break down into two main categories:

UI elements support specific events which in most cases have event listeners associated with them. E.g. buttons have an onActionPerformed, windows an onInstantiate, and dropdowns a onSelectionChanged

In addition, data elements such as properties and tables listen to incoming Navajo services. This is what we call service listeners

» navajo data structure

10


NAVAJO DATA STRUCTURE

Tipi expects its data to be supplied by Navajo services in an XTML format

XTML is a single schema XML format, meant for easy reading and writing

XTML consists of a collection of messages and properties that structure data

XTML combines data & metadata, which means that a certain level of semantics is added to the data

Navajo services are commonly broken down in granularity to serve specific information needs

» combined data and metadata

11


COMBINED DATA & METADATA

By including basic types in properties—e.g. whether they are strings, numbers, dates, money fields etc.—the Navajo service layer can:

supply hints to the UI layer of how to represent the data

make sure that the UI layer doesn’t screw the data up

» tipi xml basics

12


2. TIPI XML BASICS

Tipi syntax — Tipi applications are written entirely in XML and meant to be easily understood and read (!) by humans eyes

Addressing semantics — how to address attributes, properties and other parts of your UI in Navajo expressions

Functions — perform common tasks using custom functions

Sample Tipi script — what does a simple screen look like

13

» tipi syntax


TIPI SYNTAX

Tipi files are usually structured so that each window, or dialog has its separate file, although files can include one another if necessary

Each UI element has its own XML tag containing a custom set of attributes. E.g.: a <c.window> element has attributes for “icon”, “height”, “title”, etc.

Tipi screen definitions are hierarchically defined. Using XPATH-style expressions different parts of the UI can be addressed, e.g.:

//desktop/personWindow/tabs/addressTab/addressToolbar/addAddressButton:icon

» expression semantics

14


ADDRESSING SEMANTICS

Address references are placed between {curlies} to make sure they’re picked up by the Tipi parser

They can refer to components, resources, navajos, properties or attributes:

<tipitable.doExcel path=”{component:/../myTable}” />

<d.window icon=”{resource:/icons/icon_small.png}” />

Actions sometimes address elements directly, and sometimes refer to their locations (cf. pointers), suffixing them with “ref”. E.g.:

<set value=”true” element=”{attributeref:/../myButton:enabled}” />

» functions

15


FUNCTIONS

The Navajo expression parser also supports the use of functions to manipulate data, attributes, or strings. E.g.:

<set value=”ToUpper(‘Hello World!’)” element=”{attributeref:/.:title}”/>

<c.panel id=”myPanel” border=”CreateTitledBorder(‘Person details’)”>

<set value=”GetInitials({property:/ProcessGetPerson:/Person/FirstName})” element=”{propertyref:/ProcessGetPerson:/Person/Initials}”/>

<injectNavajo navajo=”MergeNavajo({navajo:/relation/ProcessSearchOrganizations}, {navajo:/ProcessQueryWorkingSet})” service=”ProcessQueryWorkingSet”/>

» sample tipi script

16


SAMPLE TIPI SCRIPT

personSearchWindow » see Eclipse

» working with tipi

17


3. WORKING WITH TIPI

Managing layout — a complex UI structure can be created using a combination of UI elements and layout managers

Managing UI logic — typical usage of events, actions and listeners to create basic application flow

Managing data — how to fill up your UI with actual data, and how to pass data from one place to another

18

» managing layout


MANAGING LAYOUT

When creating a user interface you need not only say what elements your screens are comprised of, but also how these elements relate to each other

For this purpose a simple hierarchy is not enough, next to UI elements we need layout managers, e.g.:

buttons in a toolbar should be rendered from left-to-right

the person window is divided into 3 columns

when resizing a window, we want the memo-field in the bottom to stretch, but other fields to keep their current width and height

» ui elements

19


UI ELEMENTS

UI elements are structured in such a sense that some elements act as parents or children of others

This helps to group elements that are related, and makes it easy to address them

A window contains a panel and a toolbar. The panel in its turn contains a table and some input fields. The toolbar contains a set of buttons

» layout managers

20


LAYOUT MANAGERS

Tipi supports a number of layout managers each suitable for different purposes. The layout manager doesn’t define what is being displayed, but how the actual UI is rendered. Some examples:

<l.flow> 

<l.border> 

<l.vertical> 

<l.mig> 

» managing ui logic

21


MANAGING UI LOGIC

From the moment an application is started, events are being triggered and actions are being fired. UI designers want to manipulate the way users interact with the application and control which elements actually listen to which events

» actions

22


ACTIONS

Actions come in two broad categories:

general actions manipulate the UI elements, logic or data. E.g.:

<showInfo text=”‘Hello World!’”/>

<callService input={navajo:/InitSearchPerson}” service=”ProcessSearchPerson”/>

element-specific actions, implement methods of certain UI elements. E.g.:

<tipitable.doExcel path=”{component:/../myTable}” />

<window.instantiate id=”personWindow”/>

» event listeners

23


EVENT LISTENERS

Typical events that we would want UI elements to listen to are:

<onInstantiate> 

<onActionPerformed> 

<onValueChanged> 

But many more elaborate ones exist. To name a few:

<onFocusGained>, <onDrag>, <onKey>, <onGeneratedErrors>, …

» service listeners

24


SERVICE LISTENERS

Components that display data, should be told what data to listen to. In its most basic form—where a component listens to an incoming Navajo service—this is implemented by adding the “service=…” attribute:

<c.panel id=”myPanel” service=”ProcessSearchPerson”> <l.flow> <c.label text=”‘Lastname : ‘“/> <c.property id=”lastname” name=”Person/LastName” /> </l.flow></c.panel>

the lastname property only loads when somewhere (!) an action fires the ProcessSearchPerson service call

» managing data

25


MANAGING DATA

Apart from the structure needed to build a proper UI, it is the data which fills it with actual content

Although other more elaborate samples can be found, most content that the user sees falls in the broad categories of properties and tables

Next to visible data, we sometimes need variables to store invisible content or to keep certain values independent of screens that have been opened and services that have been called

» properties

26


PROPERTIES

Properties in Tipi are directly mapped onto properties from Navajo services

Since XTML also contains metadata, Tipi automatically renders their types correctly. Certain attributes can be set on properties to:

override the ones supplied in XTML

<set type=”money” element=”{propertyref:/ProcessSearchPerson:/Person/Extra1}”/>

render properties differently. E.g.:

<c.property name=”Person/LastName” enabled=”false” label_indent=”120” />

» tables

27


TABLES

Displaying an array of data is most commonly done in tables. Tables map on (array) messages in XTML. The different columns in tables adhere to the types of the properties provided, but can be overridden

<c.tipitable service=”ProcessGetPersonAddresses” messagepath=”Addresses”> <column name=”StreetName” /> <column name=”HouseNumber” label=”Nr. + toev.”/> <column name=”ZipCode” size=”100”/> <column name=”City” /></c.tipitable>

» variables

28


VARIABLES

There are two ways to pass variables in Tipi:

set the value of a property in a Navajo service and use this as input for another service call. E.g.:

<set value=”{property:/../myTable:selectedMessage:PersonId” element=”{propertyref:/InitGetPerson:/Person/PersonId}”/>

set a global variable and later use this variable to either check certain conditions, or to later pass it on in a Navajo service. E.g. :

<set value=”‘myUserName’” element=”{globalref:/userName}”/>

» managing a tipi project

29


4. MANAGING A TIPI PROJECT

Project structure — what does a Tipi project look like

Running and debugging — how do developers work on Tipi

Deploying applications — how to put your project online

30

» project structure


PROJECT STRUCTURE

Setting up a Tipi project structure is easy. Only three folders are necessary:

/lib : contains the core libraries

/tipi : contains the Tipi .xml screen definitions. The first sc

/resource : contains icons and other resources

In the “Runtime configuration” (using Eclipse), set the Main Class, the Tipi file to start in (commonly start.xml), a Navajo Postman server URL, and a default look-and-feel

» running and debugging

31


RUNNING AND DEBUGGING

Since Tipi screens are meant to be created in a XML editor, only one XSD schema is used to validate input

Runtime errors and debugging information should be checked in Eclipse’s console

Tipi screens can be changed while running them, a simple flush via a keyboard shortcut—without restarting or re-compiling—is enough to check and test the latest changes. This makes for extremely fast development

» deploying applications

32


DEPLOYING APPLICATIONS

When deploying Tipi to a Java Swing desktop application, Java’s Web Start mechanism is preferable

Java Web Start wants the jar files to be signed. The ANT build.xml script takes care of this

To run a Java Web Start project a .jnlp file is needed (essentially a sort of runtime configuration)

Tipi screen definitions are loaded runtime, so can be changed without the need for an actual “deployment” or (visible) download by the user

» extending tipi

33


5. EXTENDING TIPI

Tipi is written in Java and easily extendible with custom … :

Components — e.g. a <c.sourceviewer> was created to easily switch between the XML source view of a Tipi component and its parsed representation

Functions — e.g. ScaleImageMax() was added to prevent people from uploading images that were too big

Events — e.g. to support catching the event of people pressing the ‘enter’ key on certain input fields <onKey> was added to property elements

Actions — e.g. <mergeNavajo navajoA,navajoB service=”navajoC”> was added to support working sets

34

» customizing appearance


6. CUSTOMIZING APPEARANCE

The actual look-and-feel of a Tipi application is not being defined in the application itself. Tipi only represents the form of an application, not its representation

When deploying a Tipi application as a Java Swing application, a multitude of 3rd party themes and skins can be chosen from. E.g. Substance (current), Nimbus, Metal, etc.

To further add to the idea of a Filthy Rich Client Tipi can be extended by a number of effects and transitions, such as 3D flipping panels, macbars, macbuttons, peeling windows, etc.

35

» how it all ties up


END

Questions?

More about Dexels and the Navajo framework can be found at:

www.dexels.com

www.navajo.nl

Feel free to call us at +31 20 490 4977 or mail us at [email protected] to ask for further information


http://www.dexels.com

http://www.dexels.com

http://www.navajo.nl

http://www.navajo.nl

mailto:[email protected]

mailto:[email protected]

Date post:	27-Jun-2015
Category:	Technology
Upload:	web-werck
View:	679 times
Download:	0 times

Tipi - Building Rich User Interfaces

Technology