Code Generation for Conceptual User Interface Patterns

Code Generation
from Conceptual User Interface Patterns
The Tutorial

Pedro J. Molina, PhD.
http://pjmolina.com/cuip/
May 18th, 2007

Contents

1. Introduction
2. Patterns
3. Conceptual User Interface Patterns
4. Modelling
5. Code Generation
6. Validation
7. Open Issues

Capgemini Spain / Technology Services
Code Generation 2007, May 18th
© 2007 Pedro J. Molina. All rights reserved 1

Timetable
9:00 H

Tutorial Block 1
65 min.
10:05 H

10:15 H
Q&A 10 min.

Tea / Coffee &
10:45 H
Exhibition 30 min.

Tutorial Block 2
65 min.
11:50 H

12:00 H
Q&A 10 min.


1. Introduction
Tutorial
Code generation from Conceptual User Interface Patterns

Introduction

Tutorial Objectives
• Show the State of the Art in MBCG for user interfaces
• Introduce the pattern approach to UI development
• Present an approach for the spec. & generation of code in the
domain of user interfaces


Human
A bit of history
The entire history of software
engineering is that of the rise in
levels of abstraction. Conceptual Models /
Grady Booch Model Execution

Objetive: Reduce the Semantic Gap C++ / 4GL / Java / C#
between the human & the machine.

Cobol / Smalltalk / C

Assembler: MOVE A0, SP+

Machine Code: 0101001…

Machine Code Generation 2007, May 18th

Novak’s Rule

“Automatic Programming is defined as the synthesis of a
program from a specification.

If automatic programming is to be useful, the specification
must be smaller and easier to write than the program would
be if written in a conventional programming language.”

G.S. Novak.


Introduction

UI Development “like other software”

• Implies moving from an abstract & general problem definition to a
concrete and detailed implementation.

• OMG MDA: PIMs & PSM promotes a process to refine models for
software refinement in iterations.


The working context at glance
Conceptual Model Problem Space
Structure Model
Dynamic Model
Behavioural Model
UI Model

Repository

Execution Model

N automatic Solution Space
translations

App 1 App 2
Architecture A Architecture B
N software solutions


State of the Art
User Interface Modelling
• TRIDENT [Vanderdonctk93, Bodart96]
• MOBI-D, Mecano [Puerta96]
• OVID [Roberts98]
• UMLi [Pinheiro00]
• CTT, Teresa [Paternò00]
• Genova [Genera00]

Cons:
• Full domain model is described as input but only User Interface is
considered to obtain a tangible result


State of the Art
• CASE modelling tools


State of the Art

TRIDENT/SEGUIA [Bodart96]
• AIO / CIO [Vanderdonckt93]
• Presentation Units
• SEGUIA:
− CIO Selection and layout manager


State of the Art
CTT [Paternò00]
• Task notation


State of the Art

OVID [Roberts98]
• Based in UML
• View as a Class Stereotype


State of the Art

UMLi [Pinheiro01]
• UML extension for specifying of UI
• Formal Semantics
• Low level descriptions


State of the Art

WISDOM [Nunes01]

• UML extension

• Method proposed for small
software companies

• Interaction Spaces


State of the Art
GENOVA [Genera00]
Generates CRUD UIs


State of the Art

UIML [Harmonia02]

UsiXML www.usixml.org [Vanderdonckt05]

XAML [Microsoft05]


State of the Art
CanonSketch [Campos04]
http://dme.uma.pt/projects/canonsketch/


Domain Engineering

• Model Driven Development
• MDA

• Software Product Line Engineering

• Program Families

• Parnas D.L., 1976

“On the Design and Development of Program Families” IEEE
Transactions on Software Engineering SE-2 (march 1976) 1-9.


Commonality Analysis

It is a domain study to:

• Document the domain to deal with

• Identify the common part enclosable in a runtime component

• Identify the variable part specifiable in a model


Commonality Analysis
The document covers the following aspects:

1. Domain Scope
2. General description
3. Term Dictionary
4. Common part
5. Variabilities
6. Variation parameters
7. Critical/Open Issues


The Quest for the Lost Model…
Parameterisation
Reduces common parts
Increases family size
Increases complexity

Immutable Variability
Sample:
Background Sample:
color fixed to Background
#AAFF88 color can be
specified

Standardisation
Increases common parts
Reduces family size
Simplifies the system


The Quest for the Lost Model…

“Lo bueno, si breve, dos veces bueno.”
B. Gracián, (XVII century)

“Everything should be as simple as possible,
but no simpler.”
A. Einstein, (XX century)

Application Modeling Language
DSL (Domain Specific Languages)
• Samples:
− TeX
− SQL
− OCL
− HTML

Modulable composable DSL
• Pros
− Reuse
− Scalability
− Faster addition of features


Economics of Model Driven Development

Economies of Scale
• “The condition where few inputs like effort and time are used to produce big
quantities of a unique output.” [Wit96]

However in Software: each good is produced only once.
• Copy Cost are = 0 € !

Economies of Scope
• “The condition where few inputs like effort and time are used to produce a
big variety of outputs.
• More added value producing different goods in the same production line.
• Scope economy is achieved when combining two or more products in the
same production line is cheaper that producing them separately. [Wit96]


Domain Engineer’s Economic Model
Traditional Cost = N * CT

Cost with Domain Engineering = I + N * CF

Saving SF = CT - CF
5 CT

4 CT
Accumulated Cost

3 CT

2 CT
I

CT

1 2 3 4 5
Family Members

2. Patterns
Tutorial

Patterns

Origins: C. Alexander (60s)

First usage in Software engineering:
• Gamma & et al. “Design Patterns”

Pattern definition
• Recurrent problem
− in a given context
− with a non trivial solution
− that can be abstracted and reused

• Pearl of knowledge (distilled experience)

• Anti-patterns (didactical also)


Patterns. Definition

We can explain how to make a dress specifying the scissors route over
the cloth in terms of angles and cut longitudes or, we can provide a
pattern.

Reading the cut specifications, nobody would have idea about what is
the goal, at least not till construction.

However, the pattern anticipates the result: is the rule to create the
dress. But, at the same time, is also in big amount, the dress by it self.

James Coplien, 1996.


Patterns

Taxonomy

• By abstraction level
− Analysis / Conceptual
− Design
− Implementation (Idioms)

• By domain (application field)
− Software Engineering
− User Interface
− Architecture
− Social Networks
− Etc.


Design Patterns. Tidwell
http://time-tripper.com/uipatterns/index.php


Design Patterns. van Welie http://www.welie.com


Pattern Templates
Traditionally patterns are described following a template
There is no universal template

Each domain has its own templates
Each author can used what he consider he need
The most used: Gamma et al.

We tried to standardize a common factor as a guide for new patterns
in the field of User Interface Patterns and provide a very simple XML
DTD: PLML [CHI2003]


Pattern Language

Set of patterns

• In a given domain

• Strongly interrelated

• Provides a set of primitives to build solutions in the domain

• No necessarily complete!!!
− A pattern is an empiric approximation


3. Conceptual User Interface Patterns / CUIP
Tutorial

Just-UI Method

A pattern language for the specification and generation of business user
interfaces

Objectives:
1. Improve an OO Conceptual Model with a model for the specification of user
interface requirements
2. In a practical way: looking for a high degree of code generation
3. Increasing the level of abstraction of the specification in the User Interface
4. Increasing the quality and productivity of the whole development process

Very concrete domain
• User Interfaces for Information Systems / Business software (nevertheless a big
market)


Just-UI Method

Proposal:

• Extension of a Conceptual Model

• Introducing an Abstract User Interface Model

• Using Conceptual User Interface Patterns as basic
primitives (building blocks)

In a feasible way for enabling reliable UI Code
Generation


Proposal

Advantages:

• A Unique Specification for the system (Funct + UI)
− Making easier the maintenance phase

• Abstract User Interface Specification
− Device independence: Desktop, Web, Mobile, Pervasive Devices,
Voice…

• Rapid Prototyping of User Interface
− Running prototypes in early stages of Requirements Gathering &
Analysis


Pattern Languages

Abstract
Requirements
Analysis Patterns UI Conceptual
[Fowler96] Patterns
[Molina98-03]

Specification

Logical Design Common Usability
Ground Collections
Design Collection
Patterns [vanWelie00,
[Tidwell92] Traetteberg00,
[Gamma95]
Physical Design Javahery02]

Concrete
Idioms
Implementation [Coplein98]

Structural User Interface Usability

Delta Effect ∆

Requirements ? ? ?
? ?

Analysis

Design

Implementation

(∆) Delta Effect. Capgemini Spain / Technology Services

Conceptual Pattern Language

Conceptual User Interface Patterns

• Captures a recurrent concept in the process of user interface requirement
gathering

• Provides an homogeneous solution that allows to solve the requirement in
the implementation in an automatic way


Conceptual Pattern Language

Principles / Requirements:

• Easy to use

• Compact Model

• Minimal set of Primitives

• Maximal Expressiveness Power

• Provide a Default Behaviour for frequent cases

• Saves time/effort (following Novak’s Rule)



Patterns are arranged in three abstraction levels: from general to
particular aspects.

1. User Access
• HAT Application Access

2. Interaction Units
• Service IU Service
• Instance IU Object interaction
• Population IU Set of objects
• Master/Detail IU Composition



3. Elemental Pattern

• Introduction Constraints input
• Defined Selection Error prevention
• Population Selection Selection Helper
• Supplementary Information Selection feedback
• Dependency Fields interdependencies
• Filter ¿How to limit the output?
• Order Criterion ¿How to order?
• Display Set ¿What to show?
• Actions Commands & actions
• Navigation Exploration of the system


A B Introduction
A uses B
Service IU Defined Selection
Argument Grouping
Just-UI
Status Recovery
Dependency Conceptual
Pattern
Supplementary Info.
Language

Instance IU Display Set
HAT
Actions
Navigation
Population
IU Filter
Order Criteria Level 1 (1)

Level 2 (4)
Master/Detail Master IU Level 3 (11)
IU Detail IU Capgemini Spain / Technology Services
Level 1 Level 2 Level 3 © 2007 Pedro J. Molina. All rights reserved 45

Hierarchical Action Tree (HAT)

A task oriented tree providing the user access to the system.

• Intermediate nodes: grouping labels
• Leaf nodes: links to interaction units

Store View
Purchases
Purchase article
Purchase to supplier
Pending orders
Sales
Sell article
New order
Pending orders
Store
...


Interaction Unit

It is an abstraction of a window, a scenario where user interacts with
the system

• Based on: AIO & Presentation Unit [Vanderdonckt93, Bodart95]
• Extended with behaviour semantics

Interaction Unit

Name
Alias
Help message
...


Service Interaction Unit

Represents an IU for a service.

• Gathers input arguments and launches the service.

Class
Service


Instance Interaction Unit

Abstracts object presentation.

• Composed of:
− Display Set
− Actions
− Navigation What to see?

What to do?

<
Code
Country.Name
Class Name

<
Customer_Edit
Surname
Customer_Delete
Explore...
Address.Street

>
Display Set Country_Nationalize

<
Actions ... Currency
Navigation Country

>
Invoices
Receipts
Payments

>

Population Interaction Unit
Represents a set of objects
• Composed of:
− Filters
− Order Criteria
− Display Set
− Actions
− Navigation
What to see?
How to search?
What to do?

<
Code
Country.Name
Class Name
Filters

<
Customer_Edit
Surname
Order Criteria Customer_Delete
Explore...
Address.Street

>
<

date ASC
code DES Display Sets Country_Nationalize

<
Actions ... Currency
Country

>
Navegation
>

Invoices
Receipts
Payments

>
Sorted?


Master/Detail Interaction Unit

Represents a composed pattern with head-details semantics.

• Composed of:
− A Master Component
− One or many Detail Components

Customer
Master

Current Invoices Due Payments

Detail 1 Detail 2

Invoices Payments


Filter

Definition: Expresses a search condition to locate information about a object
population in a given class.
• It is defined as an open logic expression. It can contain variables to allow the user to provide
values for such variables in runtime.

Example: For the class vehicle, it is need to seach for free vehicles of a given type.

Busy = False AND VehicleType= VType


Order Criteria

Definition: Order mechanism for a population of objects, based on class’s
attributes.
• Formed by a serie of pairs
<expression, sense>

Example: Ordering customers by surname & name.

<Surname, ASC>, <Name, ASC>


Display Set

Definition: Order list of object’s properties to be observed.
• It is specified as an order list of properties’ expressions (class’s attributes & properties
reachable by means of associations navigation)

Example: The properties relevant to displya an invoice in a given context are: invoide
number, total amount and name of the customer.

InvoiceNumer,
TotalAmount,
Customer.Surname,
Customer.Name


Navigation

- Definition: Is a subset of the semantic relations defined between
classes. It allows to cross from one object to related ones by means
of semantic relations.

- Example: Given a customer, it is convenient to navigate to invoices,
payments and current open contracts.

P_Invoices , P_Payments, P_OpenContrants


Actions

- Definition: Set of services reachable to change the state of a given object.

- Example: Cars in an ‘rent a car’ service can be rented, returned or finally
sold.

S_Rent, S_Return, S_Sell


Introduction

Example
• The user describes certain fields with a well-kwon format: postal codes, telephones,
mail addresses, etc.

• The user interface should prevent errors in this data entry fields.

• The Introduction Patterns [Molina98] addresses this input data problem.


Introduction

Introduction Pattern template

Introduction

Sample generated

Defined Selection

Defined Selection sample

Dependency

Models interdependences between service arguments.

Values & states of UI fields change depending on other values & states.

Dynamic is expressed using event-condition-action rules (ECA).


Dependency

Dependency pattern example

Dependency

Dependency Pattern specification window.

State Recovery

State Recovery Sample

Argument Grouping


4. Modelling
Tutorial

Just-UI / Diagramming

Inspired in the principles of
• Ruble “A&D of O-O applications”
• Constantine & Lockwood “Software for Use”

Simple, easy of use. Based in paper, post-its & pens

Easy to discuss with the user (promotes early validation)

Allows to involve the user in the design of the system



Population_Class2 MasterDetail1 ServiceNew
Instance1

Alias2 Alias3 Alias4
Alias1

(a) Instance IU (b) Population IU (c) Master/Detail IU (d) Service IU

(e) Navigational Link

Graphical primitives in Just-UI.


Layered Diagramming



Just UI / VISIO Prototype


Just-UI / Diagramming BizUI Prototype / MS DSL Tools


Autentificación error

servicios
correcto

Cliente
I
Servicio1
Aplicación
Clientes detalle Cliente

Cliente
ServicioN
servicios
Cliente Contratos

Contrato
Servicio1
Contratos detalle Contrato
Cliente Coche
Contrato
ServicioN

servicios
Contratos Coche

Coche
I Servicio1
Coches detalle Coche

Coche
ServicioN
Example of graphical language for UI specification.


S_Rent

MD_Contract-Vehicle
Rent Vehicle

Current Contract-Vehicle S_Return

Return Vehicle

S_Change_Address

P_Vehicle P_OldContracts
I_User
Change Address

Vehicle Fleet Old Contracts S_Delete_User
User

Delete User

S_Create_Fare

Create Fare

S_Change_Fare
I_Fare

Change Fare
Fare
S_Delete_Fare

Delete Fare

Example of graphical language for UI specification.


Formalization

HAT Interaction Units
Connected with actions
and navigations


Formalization

Visibility Semantics
Agent Server
Interface
•Attributes
•Services
•Roles
View
• Defines a User Interface in the Model
• It is a Collection of Interfaces
Model

V2
I2
I2
V1
I2
I2


Formalization

Visibility Semantics
Agent Server
Interface
Operator Customer
•Attributes
IU
•Services
∩ •Roles

Instance UI for Customer

Name, Surname, Salary Name, Surname
Create, Delete, Edit ∩ Create, Edit
Accounts, Invoices, Payments Invoices, Payments

Effective Items = IU Defined Items ∩ Visible Items

Meta-model

Class Attribute
1:1 0:M

1:1

0:M
Service Argument
1:1 0:M

Concept definition Pattern
1:1 0:M

0:M 0:M

application


Meta-model
Class definition 1:1 1:1 definition
0:M Class 0:M
1:1
Instance IU Population IU
0:M
1:1 definition
Service 0:M 0:M
Filter
0:M
0:M

application
ServiceIU

application
Order Criterium 0:M

Auxiliary
Patterns 0:M application Display Set
1:M
1:1

Class Actions
0:1 0:1

definition 1:1
Navigation
0:M 0:1 0:1
Master/Detail
IU
Instance IU
1:1 Master
1:1
application Population IU

Detail Capgemini Spain / Technology Services
1:M Master/Detail Code Generation 2007, May 18th
IU © 2007 Pedro J. Molina. All rights reserved 81

5. Code Generation
Tutorial

Code Generation

Rapid Prototyping based on:
• Code Generation
• Inference / Default Values / Scaffolding

Advantages
• Repeatable Process, Quality, Resource Saving, Time to Market,
Productivity

Shortcomings
• Fixed Design, Specialized Domain
• Customization Round Trip Problem


Code Generation

General Techniques
• File Cloning
• Templates
• Rewriting rules (a la Haskell, Prolog, Lisp, etc.)
• String Concatenation
• Grammar based transformations
• STDs to Finite Automata

UI oriented Techniques
• UI Componentization
• AIO to CIO mappings
• Design patterns & runtime architectures: MVC, PAC, SmartControls,
Webparts


Code Generation Technologies

Xml de/serialization
• DOM / SAX

Parsers
• ANTLR

Templates
• “Enforcing Strict Model-View Separation in Template Engines”
[Parr04]
• StringTemplate


Code Generation: Conceptual Map
Programs Models

Template Meta-model
Mappings

Abstraction
Classes /
Abstraction

Transformation
Types Algorithms

Instanciation
Instances
n
io
t
ca
ifi
Re

Source Specification
Reverse
Code
Engineering


Round Trip Problem / Tweaking
Tweaking
Round Trip Problem [Bergman02]

Manual
Changes

Generated Tweaked
Spec Translator Tweaking
Code code

Requirements changes Re-apply can be done
automatically?
Spec. evolves Manual
Changes

Generated Tweaked
Spec’ Translator Tweaking
Code’ code’


Development workbench architecture

Modeller /
Repository
Editor

Validator / Code
Checker Generator


Tool Support
Modeller
ON Modeller

ON Validator
Spec
ON DTD Meta-model

ON Transformation Engines Validation
• Business Logic
• Client
• Documentation XML
• Function Points Measure

Translators

User
Doc Help
FP Code


Code Generation Architecture
Translator

1. Load

Explicit Specification
Memory Structures
Specification

2. Inference

Templates

3. Generation
Algorithms

n
io
t
ca
Transformations ifi
Re

Source
Code

N-layered Architectures
Pros
• Scalable
3rd apps
• Multi-channel
PDA Desktop GUI Web UI
• Interoperable
− Connection of
heterogeneous
systems

Web Server
Cons
Exposed • Performance
Web Services penalty due to
layer over cost
Business Logic

Consumed
Web Services

DB 3rd
Web Services

Mappings: AIO CIO WinForms

Hierarchical Action Tree Menu
Interaction Unit Form
Action Button
Navigation Button
Display Set
• An object Labels
• Many objects Grid
Defined Selection Combo-boxes
...


Examples: VB 6.0/Windows


Mappings: AIO CIO Web / HTML

Hierarchical Action Tree Dynamic Menu
Interaction Unit HTML page
Action <A> Link
Navigation <A> Link
Display Set
• An object HTML Labels
• Many objects <Table>
Defined Selection <Option>
...

Examples: ColdFusion MX/Web


Examples: PocketPC/Windows CE
UICP to Pocket/PC Study [Belenguer02]


6. Validation
Tutorial

Empiric Validation
FAST [Weiss99] Investment
Domain Engineering Life-Cycle

Tools &
Domain Domain Domain
Domain
Analysis Model Implementation
Workbench

Release
Development
Feedback Application Engineering Life-Cycle Suite
Application #3
Application #2
Application #1

Req. Application Application
Application
Analysis Spec. Development

Payback

Applications Contexts

Model Execution Environments
• 1996-1999 / OO-Method Project
− Research & Development in Conceptual Modelling

• 1999-2004 / CARE Technologies / Olivanova products
− Model Execution for business applications

• 2005-2006 / Bancaja / Pisa Project
− Financial Terminal for a bank

• 2006-2007 / Pársec / Capgemini
− Model Driven Development for improving software factories


Empiric Validation

Validation in an industrial context
• Ideas implemented in commercial CARE Technologies products:
Olivanova
• Used for the development of several heterogeneous projects:
− Golf Tournament Tracking System
− Sales Dpt. of a Building Co.
− Furniture Warehouse
− Web-based Chat for a Telecom Co.
− e-Profile tracking for a USA University
− In-house developments (intranet)

• Full MDD workbench implemented by Capgemini for a Spanish
Bank: Bancaja (PISA Project)

Empiric Validation / Defect Cost
Traditional SW Life Cycle
MDD Live Cycle
Defects Cost
Defects %
exponential

Analysis Design Build Maintenance

Snow ball Effect

Empiric Validation

Time redistribution:
• Less time for Design & Coding
• More time for Requirements, Analysis & Testing

Traditional Development Deployment Model Execution Development
Deployment Requirements
5% 5%
10%
Testing Requirements
15% 25%
Testing
20%
Analysis Requirements Requirements
20% Analysis Analysis
Design Design
Coding Coding Coding
Testing 6% Testing
Deployment Design Deployment
Desing 4%
10%
Coding Analysis
40% 40%

Traditional Development Model Execution Development

Productivity Measure

Developer Effort
– As stated by [Myers92] UI 50% TotalFunc. 50%

– Conceptual Modeling UI 40% Total
Func. 60%

Using Inference UI

– Phase 1. Rapid Prototyping 15% 85 % Saving

– Phase 2: Final UI 50% 50% Saving


User Interface Code Generation

Rapid Prototyping based on:
• Inference (Scaffolding a la Ruby on Rails)
• Code generation

Pros
• Repeatable quality processes
• Resource saving
• Better Time to Market
• Productivity gain

Cons
• Fixed design
• Applicability at fixed and closed domains
• Customization Round Trip Problem


Process review
Pros
Forward engineering unique source one way
Solution can be anticipated looking at the model
Value is in the model
Robust, proven
Assured quality by construction
Fast: prototyping and rapid development

Cons
Rigid
Default Values are not always the optimal ones
Exceptions have to be handled with manual code / tweaking and
round-tripping


7. Open Issues
Tutorial

Guideline compliance

Windows / Mac / X11 Guidelines

Usability / Accessibility Guidelines

US Section 508 / Accessibility

WAI / AAA Recommendations

• Conformance Level A Priority 1. must
• Conformance Level Double-A Priority 2. should
• Conformance Level Triple-A Priority 3. may



Sample of WAI Recommendation

• Guideline 2. Don't rely on color alone.

− 2.1 Ensure that all information conveyed with color is also available
without color, for example from context or markup. [Priority 1]

− 2.2 Ensure that foreground and background color combinations provide
sufficient contrast when viewed by someone having color deficits or
when viewed on a black and white screen. [Priority 2 for images,
Priority 3 for text].

• Some parts of the guideline can be enforced by a code generator.
• Others should be still guarantied by a designer.



Put as much as possible standardisation inside the
common part.
• Implement such common part using the guideline criterion to be
compliant with.
• Usually guidelines also include best practices in the domain study
them deeply before starting the design of the output

Now the code generator produces compliant software by
design.

In some contexts the product must be certified to proof
compliance
• If you can proof the compliance of your code generator output you
will get the certification for all the output produced by the generator.


High vs Low level UI modelling

UI Modelling

High level Spec. Low level Spec.

Pros:
Pros:
• near to the problem domain
• adapted to the target device
• more general
• very precise

Cons: Cons:
• difficult to implement, • device dependent
• rigid automatic • difficult to be re-targeted to
implementations another device


Modelling & Code Gen. Technologies

Diagramming tools

• Eclipse GMF
• MS DSL Tools
• MetaEdit+

• UML Based tools

Textual Domain Specific Languages

• Grammars & Parsers: ANTLR

Templates
• Strict separation of model, transformation & presentation (template)
• output grammars StringTemplate



Key concept
• AIO Abstract Interface Object (technology independent)
• CIO Concrete Interface Object (platform dependent)
• Mappings between them

Architectures
• MVC Model View Controller
• Direct data-binding



AIO CIO
AIO CIO Selection
Concept Windows Web
• Based on platform mapping View Form HTML Page

List of objects Grid Table
• Based on data type

• Based on usability rules

• Based on user choice



Automatic Layout Generation
• There is not silver bullet • Choices depend on
• However you can find good heuristics to − Domain
solve 80% of cases − Device physical constrains
• Column alignment, multicolumn, grid, etc.


Creativity vs Automation. Where to stop?

Artist & graphical designers Programmers
• Skills: • Skills:
− Creativity − Analytic thinking
− Design aesthetics − Abstraction

• Tools: • Tools:
− Dreamweaver, Illustrator, Freehand − IDEs, compilers, debuggers, profilers.

They have different skills sets, tools & languages
It is difficult to find people with both skills

Team work is needed to
• Improve communication
• Clear separation of concerns (SoC) & responsibilities
• Degrees of freedom


Conclusions

1. User Interface Conceptual Patterns

2. UI Pattern Language for Business Applications

3. Abstract Specification Model (device independent)

4. Simple Graphical Notation

5. Inference support for Rapid Prototyping

6. Scalable/Industrial validated method


More info about: UI Spec & Code gen.

PhD Thesis (in Spanish)
User Interface Specification:
From requirements to automatic code generation.
Valencia 2003.

Available at: http://pjmolina.com/en/research/thesis.php

More info about: CUIP
Index of Conceptual User Interface Patterns
available on-line at:

http://pjmolina.com/cuip

Code Generation for Conceptual User Interface Patterns

More Related Content

What's hot (19)

Viewers also liked (20)

Similar to Code Generation for Conceptual User Interface Patterns (20)

More from Pedro J. Molina (17)

Recently uploaded (20)

Code Generation for Conceptual User Interface Patterns