Separation of Concerns
in Web User Interfaces
26 september 2008
Jippe Holwerda

Overview

Overview
Separation of Concerns

Overview
Separation of Concerns
Web User Interface

Overview
Separation of Concerns
Web User Interface
Concerns Presentation Layout Style

Overview
Separation of Concerns
Web User Interface
Concerns Presentation Layout Style
Languages

Overview
Separation of Concerns
Web User Interface
Concerns Presentation Layout Style
Languages
UI description

Overview
Separation of Concerns
Web User Interface
Concerns Presentation Layout Style
Languages
UI description
Web application

Goal

Goal
Development efforts
of Web User Interfaces and

Goal
Development efforts
of Web User Interfaces and
Maintainability
Reusability
Quality

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Problems in Web Development

Problems in Web Development
- Many different languages

Problems in Web Development
- Many different languages
- Not integrated well

Problems in Web Development
- Many different languages
- Not integrated well
- No compile-time error checking

Problems in Web Development
- Many different languages
- Not integrated well
- No compile-time error checking
- A lot of boilerplate code

WebDSL
Domain-specific Language for the description of Web Applications
WebWorkflow
WebDSL
Data Model UI Access Control
Core WebDSL
Data Model UI
Web Application

WebDSL
Data Models User Interface Logic
Access Control Workflow

WebDSL
Data Models

Data Models

Data Models

entity Person {
Data Models name :: String
address <> Address
}
entity Address {
street :: String
number :: Int
city :: String
}

Data Models

Data Models

WebDSL
Data Models User Interface Logic
Access Control Workflow

Data Models User Interface Logic
Access Control Workflow

User Interface

User Interface

User Interface

define page home() {
title { “Home page” }
form {
group(\"Edit Person\") {
groupitem { label(\"Name\") {input(p.name)} }
groupitem { label(\"Address\") {input(p.address)} }
groupitem { label(\"Employer\") {input(p.employer)} }
}
User Interface group() {
action(\"Save\", save())
}
}
}

define page home() {
title { “Home page” }
form {
group(\"Edit Person\") {
groupitem { label(\"Name\") {input(p.name)} }
groupitem { label(\"Address\") {input(p.address)} }
groupitem { label(\"Employer\") {input(p.employer)} }
}
User Interface group() {
action(\"Save\", save())
}
}
}

User Interface

define main() { define top() {
top() image(“images/logo.png”)
body() }
footer()
}
define body() {
text(“Standard body”)
}
User Interface define footer() {
navigate(disclaimer()) { “Disclaimer” }
}

define main() { define top() {
top() image(“images/logo.png”)
body() }
footer()
}
define body() {
text(“Standard body”)
}
User Interface define footer() {
navigate(disclaimer()) { “Disclaimer” }
}

User Interface

Data Models User Interface Logic
Access Control Workflow

WebDSL
Data Models User Interface Logic
Access Control Workflow

WebDSL
Logic

Logic

Logic

Logic

Logic
define page home() {
title { “Home page” }
var p : Person;
form {
group(\"Edit Person\") {
groupitem { label(\"Name\") {input(p.name)} }
groupitem { label(\"Address\") {input(p.address)} }
groupitem { label(\"Employer\") {input(p.employer)} }
}
group() {
action(\"Save\", save())
}
action save() {
p.save();
return person(p);
}
}
}

Logic

Logic

Data Models User Interface Logic
Access Control Workflow

WebDSL
Data Models User Interface Logic
Access Control Workflow

WebDSL
Data Models User Interface Logic
Access Control Workflow

WebDSL
Data Models User Interface Logic

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Why should we care about Web User Interfaces

Why should we care about Web User Interfaces
A user’s entry point to an application

Why should we care about Web User Interfaces
A user’s entry point to an application
Users will leave when not satisfied

Why should we care about Web User Interfaces
A user’s entry point to an application
Users will leave when not satisfied

Relevance of User Interface Development*
User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design
effort of web applications

Relevance of User Interface Development*
Amount of source code
48%
52%
User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design
effort of web applications

Relevance of User Interface Development*
Amount of source code Average time spent in design phase
45%
48%
52% 55%
User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design
effort of web applications

Relevance of User Interface Development*
Amount of source code Average time spent in design phase
45%
48%
52% 55%
Average time spent in implementation phase
50% 50%
User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design
effort of web applications

Relevance of User Interface Development*
Amount of source code Average time spent in design phase
45%
48%
52% 55%
Average time spent in implementation phase Average time spent in maintenance phase
37%
50% 50%
63%
User Interface Rest * Luciano Baresi and Sandro Morasca. Three empirical studies on estimating the design
effort of web applications

Problems with Web User Interface Development

Problems with Web User Interface Development
Complex

Problems with Web User Interface Development
Complex
Time consuming

Problems with Web User Interface Development
Complex
Time consuming

Problems with Web User Interface Development
Complex
Expensive
Time consuming

Problems with Web User Interface Development

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Research Questions #1

Research Questions #1
Level of abstraction

Research Questions #1
Level of abstraction
Development efforts

Research Questions #1
Level of abstraction
Development efforts
Maintainability

Research Questions #1
Level of abstraction
Development efforts
Maintainability
Reusability

Research Questions #1
Level of abstraction
Development efforts
Maintainability
Reusability
Quality

Research Questions #2

Research Questions #2
Using WebDSL,

Research Questions #2
Using WebDSL,
what are good
web user interface abstractions?

Research Questions #2
Using WebDSL,
what are good
web user interface abstractions?
Also applicable to other environments?

Research Questions #3

Research Questions #3
Using WebDSL,

Research Questions #3
Using WebDSL,
how much
of the user interface
can be generated?
0% 100%

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Approach

Approach
Separate
web user interface
concerns

Approach
Separate
web user interface
concerns
by

Approach
Separate
web user interface
concerns
by
developing language extensions

Approach
Separate
web user interface
concerns
by
developing language extensions
as plugins to WebDSL

Approach
WebWorkflow
WebDSL WebDSL
Data Model UI Access Control Styling and Layout
Core WebDSL Core WebDSL
Data Model UI Styling and Layout
Styling
Web Application
implementation
language

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Why Separation of Concerns?
Web Application

Why Separation of Concerns?
Web Application

Why Separation of Concerns?
Reduces complexity

Why Separation of Concerns?

Why Separation of Concerns?

Why Separation of Concerns?
Better reusability

Why Separation of Concerns?
Better reusability

Why Separation of Concerns?
Better reusability

Why Separation of Concerns?
Better reusability

Why Separation of Concerns?
Better reusability

Why Separation of Concerns?
Better maintainability

Why Separation of Concerns?
Better maintainability

What are the concerns in Web User Interfaces
Appearance
Presentation
Behavior
Structure

What are the concerns in Web User Interfaces
Appearance
Presentation
Behavior
Structure

What are the concerns in Web User Interfaces
Appearance
Presentation
Behavior
Structure

What are the concerns in Web User Interfaces
Presentation
Concrete Presentation
Abstract Presentation

What are the concerns in Web User Interfaces
Concrete Presentation
Abstract Presentation
Presentation

What are the concerns in Web User Interfaces
Abstract Presentation

What are the concerns in Web User Interfaces
Abstract Presentation

What are the concerns in Web User Interfaces
Abstract Presentation

What are the concerns in Web User Interfaces
Concrete Presentation

What are the concerns in Web User Interfaces
Concrete Presentation

What are the concerns in Web User Interfaces
Concrete Presentation

What are the concerns in Web User Interfaces
Concrete Presentation

What are the concerns in Web User Interfaces
Appearance
Presentation
Behavior
Structure

What are the concerns in Web User Interfaces
Presentation
Behavior
Structure
Appearance

What are the concerns in Web User Interfaces
Appearance
Text
Layout
Style

What are the concerns in Web User Interfaces
Layout
Style
Text
Appearance

What are the concerns in Web User Interfaces
Layout

What are the concerns in Web User Interfaces
Layout

What are the concerns in Web User Interfaces
Style

What are the concerns in Web User Interfaces
Style

What are the concerns in Web User Interfaces
Style

What are the concerns in Web User Interfaces
Style

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Separating Presentation

Separating Presentation
define page vets() {
main()
define body() {
header { \"Veterinarians:\" }
table {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row { text(v.name)
table {
for (s : Specialty in v.specialties) {
row { text(s.name) }
}
}
}
}
}
}
}

Separating Presentation
define page vets() {
main()
define body() {
header { \"Veterinarians:\" }
table {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row { text(v.name)
table {
for (s : Specialty in v.specialties) {
row { text(s.name) }
}
}
}
}
}
}
}

Separating Presentation
define page vets() {
main()
define body() {
header { \"Veterinarians:\" }
table {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row { text(v.name)
table {
for (s : Specialty in v.specialties) {
row { text(s.name) }
}
}
}
}
}
}
}

Separating Presentation
define page vets() {
main()
define body() {
header { \"Veterinarians:\" }
table {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row { text(v.name)
list {
for (s : Specialty in v.specialties) {
listitem { text(s.name) }
}
}
}
}
}
}
}

Separating Presentation

Separating Presentation
define page vets() {
main()
define body() {
header { \"Veterinarians:\" }
table {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row {
text(v.name)
output(v.specialties)
}
}
}
}
}

Separating Presentation
define output(coll : List<Specialty>) {
define page vets() { table() {
main() for (s : Specialty in coll) {
define body() { row { output(s.name) }
header { \"Veterinarians:\" } }
table { }
header { \"Name\" \"Specialty\" } }
for (v : Vet) {
row {
text(v.name)
output(v.specialties)
}
}
}
}
}

Separating Presentation
define output(coll : List<Specialty>) {
define page vets() { table() {
main() for (s : Specialty in coll) {
define body() { row { output(s.name) }
header { \"Veterinarians:\" } }
table { }
header { \"Name\" \"Specialty\" } }
for (v : Vet) {
row {
text(v.name)
define output(coll : List<Specialty>) {
output(v.specialties)
list() {
}
for (s : Specialty in coll) {
}
listitem { output(s.name) }
}
}
}
}
}
}

Approach
WebWorkflow
WebDSL WebDSL
Data Model UI Access Control Styling and Layout
Core WebDSL Core WebDSL
Data Model UI Styling and Layout
Styling
Web Application
implementation
language

Separating Presentation

Separating Presentation
- Pages only defined in terms of input and output

Separating Presentation
- Pages only defined in terms of input and output
- Input and output behavior defined separately

Separating Presentation
- Pages only defined in terms of input and output
- Input and output behavior defined separately
- Results in separation of structure and presentation

Separating Appearance
Layout
Style
Text
Appearance

Styling and WebDSL

Styling and WebDSL
- styling on generated code

Styling and WebDSL
- styling on generated code
- low-level

Styling and WebDSL
- styling on generated code
- low-level
- labour intensive

Styling and WebDSL
- styling on generated code
- low-level
- labour intensive
- error-prone

Related Styling Languages
eXtensible Style Language (XSL)
Constraint Cascading Style Sheets (CCSS)
Presentation Specification Language (PSL)
Cascading Style Sheets (CSS)

Constraint Cascading Style Sheets (CCSS)

Constraint Cascading Style Sheets (CCSS)
@precondition Browser[width] >= 800px

Constraint Cascading Style Sheets (CCSS)
@precondition Browser[width] >= 800px
@variable table-width;
table {
constraint: width = table-width
}

Constraint Cascading Style Sheets (CCSS)
@precondition Browser[width] >= 800px
@variable table-width;
table {
constraint: width = table-width
}
@constraint #c1[width] = #c2[width]

Presentation Specification Language (PSL)

Presentation Specification Language (PSL)
- Property propagation

Presentation Specification Language (PSL)
- Property propagation
- Tree elaboration

Presentation Specification Language (PSL)
- Property propagation
- Tree elaboration
- Box layout

Presentation Specification Language (PSL)
li {
if (ChildNum(Self) == round(NumChildren(Parent) / 2 + 1)) then
VertPos: Top = Parent.Top;
HorizPos: Left = LeftSib.Left + LeftSib.Width;
else
VertPos: Top = LeftSib.Actual.Bottom;
HorizPost: Left = LeftSib.Left;
endif
Width = 200;
}

Cascading Style Sheets (CSS)
<html>
<head>
<title>Home Page</title>
</head>
<body>
<p>
<span>This is text</span>
<a href=”home.html”>Home</a>
</p>
</body>
</html>
html > body > p > span {
font-size: 40px;
}
a{
text-decoration: none;
color: blue;
}

Related Styling Languages
eXtensible Style Language (XSL)
Constraint Cascading Style Sheets (CCSS)
Presentation Specification Language (PSL)
Cascading Style Sheets (CSS)

CSS problems

CSS problems
Missing functionality

CSS problems
Missing functionality
- contrast between text color and background

CSS problems
Missing functionality
- contrast between text color and background
- vertical alignment of elements

CSS problems
Missing functionality
- contrast between text color and background
- vertical alignment of elements
- native multi-column layouts

CSS problems
Missing functionality
- contrast between text color and background
- vertical alignment of elements
- native multi-column layouts
- headers and footers

CSS problems
Excessive functionality

CSS problems
Excessive functionality
- box layout with padding, border, margins

CSS problems
Excessive functionality
- box layout with padding, border, margins
- unnecessary properties

CSS problems
Excessive functionality
- box layout with padding, border, margins
- unnecessary properties
- text-shadow

CSS problems
Excessive functionality
- box layout with padding, border, margins
- unnecessary properties
- text-shadow
- first-line

CSS problems
Poor design

CSS problems
Poor design
- properties that describe multiple unrelated concerns

CSS problems
Poor design
- properties that describe multiple unrelated concerns
- white-space

CSS problems
Poor design
- properties that describe multiple unrelated concerns
- white-space
- text-decoration

CSS problems
Poor design
- properties that describe multiple unrelated concerns
- white-space
- text-decoration
- positioning

Layout with CSS
Tables

Layout with CSS
Tables

Layout with CSS
Tables

Layout with CSS
Tables
Problems

Layout with CSS
Tables
Problems
- layout embedded in structure

Layout with CSS
Tables
Problems
- layout embedded in structure
- corrupts page structure

Layout with CSS
Floats and positioning

Layout with CSS
Floats and positioning
Problems

Layout with CSS
Floats and positioning
Problems
- difficult to use

Layout with CSS
Floats and positioning
Problems
- difficult to use
- different browser interpretations

Approach
WebWorkflow
WebDSL WebDSL
Data Model UI Access Control Styling and Layout
Core WebDSL Core WebDSL
Data Model UI Styling and Layout
Web Application CSS

Language Development Process

Language Development Process
1. Look at existing code

Language Development Process
1. Look at existing code
2. Find reoccurring patterns

Language Development Process
1. Look at existing code
2. Find reoccurring patterns
3. Capture these patterns in abstractions

Language Development Process
1. Look at existing code
2. Find reoccurring patterns
3. Capture these patterns in abstractions
4. build them into the language

Layout Language Requirements

Layout Language Requirements
1. Specify the natural flow of elements

Layout Language Requirements
1. Specify the natural flow of elements
2. Specify how one element is positioned
in relation to other elements

Layout Language Requirements
1. Specify the natural flow of elements
2. Specify how one element is positioned
in relation to other elements
3. Try to do better than CSS

Layout Language
module appearance
layout
main() {
top();
mainbody: [ sidebar() | body() ];
}
customerDetails(c : Customer) {
float { group() };
list();
}

Layout Language
define main() {
define page home() { top()
title { \"Home Page\" } topmenu()
sidebar()
main() body()
} footer()
}

Layout Language
define main() {
define page home() { top()
title { \"Home Page\" } topmenu()
sidebar()
main() body()
} footer()
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language
main() {
top();
topmenu();
mainbody: [ sidebar() | body() ];
footer();
}

Layout Language

Layout Language
define page allOwner() {
for ( o : Owner ) {
ouput(o : Owner);
}
}

Layout Language
define page allOwner() { page allOwner() {
for ( o : Owner ) { float { output(o : Owner) };
ouput(o : Owner); }
}
}

Layout Language
define page allOwner() { page allOwner() {
for ( o : Owner ) { float { output(o : Owner) };
ouput(o : Owner); }
}
}

Layout Language
define page allOwner() { page allOwner() {
for ( o : Owner ) { float { output(o : Owner) };
ouput(o : Owner); }
}
}

Styling Language Requirements

Styling Language Requirements
1. Associate stylistic properties and values with
structural elements

Styling Language Requirements
1. Associate stylistic properties and values with
structural elements
2. Try to do better than CSS

Styling Language
module appearance
styling globalStyling
const globalFont : Font := Font.Helvetica;
const globalFontColor : Color := Color.black;
const globalFontSize : Length := 12pt;
main() {
font := bodyFont;
font-size := bodyFontSize;
font-color := bodyFontColor;
background-color := bgColor;
}
page allPet() >> list() {
orientation := Orientation.vertical;
separator := Separator.none;
}
topmenu() >> menu() > menuheader() > navigate() {
padding := 0.3em;
font := globalFont;
font-color := globalFontColor;
font-size := globalFontSize;
font-line := Line.none;
}

Style Definitions

Style Definitions
- Selector selects WebDSL elements
page home() >> list() {
width := 500px;
orientation := Orientation.horizontal;
}

Style Definitions
- Selector selects WebDSL elements
- Collection of style statements
page home() >> list() {
width := 500px;
orientation := Orientation.horizontal;
}

Style Definitions
- Selector selects WebDSL elements
- Collection of style statements
- style declaration page home() >> list() {
width := 500px;
orientation := Orientation.horizontal;
}

Style Definitions
- Selector selects WebDSL elements
- Collection of style statements
- style declaration const globalFontSize : Length := 14pt;
- constant declaration

Style Definitions
- Selector selects WebDSL elements
- Collection of style statements
- style declaration const globalFontSize : Length := 14pt;
- constant declaration page home() >> par() {
font-size := globalFontSize;
}

Selectors

Selectors
page home() { ... }
main() { ... }
output(p : Person) { ... }
output(c : Customer) { ... }
page home() >> main() { ... }
page home() >> main() >> list() > listitem() { ... }

Style Expressions

Style Expressions
Style values font-size := 1em;

Style Expressions
Style values font-size := 1em;
width := 100%;

Style Expressions
Style values font-size := 1em;
width := 100%;
orientation := Orientation.horizontal;

Style Expressions
Style values font-size := 1em;
width := 100%;
orientation := Orientation.horizontal;
separator := Separator.pipe;

Style Expressions
Style values font-size := 1em;
width := 100%;
orientation := Orientation.horizontal;
separator := Separator.pipe;
font-line := Line.under;

Style Expressions
Style values font-size := 1em;
width := 100%;
orientation := Orientation.horizontal;
separator := Separator.pipe;
font-line := Line.under;
Style constants
const globalFontSize : Length := 12pt;
font-size := globalFontSize;

Style Expressions
Dependent style

Style Expressions
Dependent style
top() {
width := 200px;
}
footer() {
width := top().width;
}

Style Expressions
Dependent style

Style Expressions
Dependent style
page home() >> top() {
width := 200px;
}
page home() >> footer() {
width := (page home >> top()).width;
}

Style Expressions
Style addition

Style Expressions
Style addition
top() {
height := 100px;
}
footer() {
height := top().height;
}
body() {
height := top().height + footer().height;
}

Style addition example

Style addition example
define page createPet() {
var p : Pet;
header{ \"Create\" }
form {
group(\"Owner details\") {
groupitem { label(\"Name:\") { input(o.name) } }
groupitem { label(\"Address:\") { input(o.address) } } }
group(\"More details\") {
groupitem { label(\"City:\") { input(o.city) } }
groupitem { label(\"Telephone:\") { input(o.telephone) } }
groupitem { label(\"Pets:\") { input(o.pets) } } }
group {
action(\"Save\", save())
action(\"Cancel\", cancel()) } }
action save() {
o.save();
return owner(o); }
action cancel() {
cancel home(); } }

Style addition example
style formStyle
form() {
width :=
(form() > group()).padding-left +
(form() > group()).padding-right +
(form() > group() >> label()).margin-right +
(form() > group() >> label()).width +
(form() > group() >> input()).width *
(form() > group() >> input()).font-size +
(form() > group() >> input()).border-right-width +
(form() > group() >> input()).border-left-width;
}

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Examples - ING Card

Examples - ING Card
main() {
top();
mainbody: [ sidebar() | body() ];
}

Examples - ING Card

Examples - ING Card

Examples - ING Card

Examples - ING Card

Examples - ING Card
define sideMenu() {
list {
listitem { navigate(home()) { \"Home\" } }
listitem { navigate(home()) { \"Create Card Request\" } }
listitem { navigate(home()) { \"Work Card Request\" } }
listitem { navigate(home()) { \"Scoring\" } }
listitem { navigate(home()) { \"Maintenance\" } }
listitem { navigate(home()) { \"Digital Applications\" } }
listitem { navigate(home()) { \"Pending Requests\" } }
listitem { navigate(home()) { \"Letters\" } }
}
}

Examples - ING Card
define sideMenu() {
list {
listitem { navigate(home()) { \"Home\" } }
listitem { navigate(home()) { \"Create Card Request\" } }
listitem { navigate(home()) { \"Work Card Request\" } }
listitem { navigate(home()) { \"Scoring\" } }
listitem { navigate(home()) { \"Maintenance\" } }
listitem { navigate(home()) { \"Digital Applications\" } }
listitem { navigate(home()) { \"Pending Requests\" } }
listitem { navigate(home()) { \"Letters\" } }
}
}
sideMenu() > list() {
orientation := Orientation.vertical;
separator := Separator.none;
spacing := 0.2em;
}
sideMenu() > list() > listitem() {
background-color := #f95807;
align := Align.center;
}

Examples - ING Card

Examples - OSB

Examples - OSB

Examples - OSB

Examples - OSB
define topmenu() {
mainNavigation()
adminNavigation()
}

Examples - OSB
define topmenu() { define mainNavigation() {
mainNavigation() list {
adminNavigation() listitem { navigate(home()) { \"Home\" } }
} listitem { navigate(home()) { \"UserInfo\" } }
listitem { navigate(home()) { \"Reports\" } }
}
}

Examples - OSB
define topmenu() { define mainNavigation() {
mainNavigation() list {
adminNavigation() listitem { navigate(home()) { \"Home\" } }
} listitem { navigate(home()) { \"UserInfo\" } }
listitem { navigate(home()) { \"Reports\" } }
}
}
define adminNavigation() {
list {
listitem { navigate(home()) { \"Administration\" } }
listitem { navigate(home()) { \"Status\" } }
listitem { navigate(home()) { \"Configuration\" } }
listitem { navigate(home()) { \"Logout\" } }
}
}

Examples - OSB
define topmenu() { define mainNavigation() {
mainNavigation() list {
adminNavigation() listitem { navigate(home()) { \"Home\" } }
} listitem { navigate(home()) { \"UserInfo\" } }
listitem { navigate(home()) { \"Reports\" } }
}
}
layout
topmenu() {
menu: [ mainNavigation() | adminNavigation() ];
}
style
mainNavigation() {
align := Align.left;
}
adminNavigation() {
align := Align.right;
}

Examples - OSB
define topmenu() { define mainNavigation() {
mainNavigation() list {
adminNavigation() listitem { navigate(home()) { \"Home\" } }
} listitem { navigate(home()) { \"UserInfo\" } }
listitem { navigate(home()) { \"Reports\" } }
}
}
style
mainNavigation() >> list() {
orientation := Orientation.horizontal;
separator := Separator.none;
spacing := 1em;
}
adminNavigation() >> list() {
orientation := (mainNavigation() >> list()).orientation;
separator := (mainNavigation() >> list()).separator;
spacing := (mainNavigation() >> list()).spacing;
}

Examples - PetClinic

Examples - PetClinic

Examples - PetClinic

Examples - PetClinic
header { \"Veterinarians:\" }
table() {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row {
text(v.name) output(v.specialtiesList)
}}}

Examples - PetClinic
header { \"Veterinarians:\" }
table() {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row {
text(v.name) output(v.specialtiesList)
}}}
define output(coll : List<Specialty>) {
list() {
for (s : Specialty in coll) {
listitem { output(s.name) }
}}}

Examples - PetClinic
header { \"Veterinarians:\" }
table() {
header { \"Name\" \"Specialty\" }
for (v : Vet) {
row {
text(v.name) output(v.specialtiesList)
}}}
define output(coll : List<Specialty>) {
list() {
for (s : Specialty in coll) {
listitem { output(s.name) }
}}}
style
output(c : List<Specialty>) >> list() {
orientation := Orientation.horizontal;
separator := Separator.comma;
spacing-right := 0.2em;
}

Evaluation
LOC generated CSS LOC source code
600
450
300
150
0
ING Card OSB PetClinic

Outline
- Introduction
- WebDSL
- Web User Interfaces
- Research Questions
- Approach
- Separation of Concerns : Why and What?
- Separating Presentation, Layout and Style
- Case Studies
- Conclusions and Future work

Contributions

Contributions
- defined web user interface concerns

Contributions
- defined web user interface concerns
- separation of page presentation from structure

Contributions
- defined web user interface concerns
- separation of page presentation from structure
- sublanguages for layout and style

Contributions
- defined web user interface concerns
- separation of page presentation from structure
- sublanguages for layout and style
- case studies for evaluation of sublanguages

Conclusions
Used concept of Separation of Concerns by
developing sublanguages describing those concerns
Level of abstraction
Development efforts
Maintainability
Reusability
Quality

Conclusions
Abstractions over CSS

Conclusions
Abstractions over CSS
- Layout

Conclusions
Abstractions over CSS
- Layout
- Style constants

Conclusions
Abstractions over CSS
- Layout
- Style constants
- Style reuse
- Style values referring to other definitions
- Style addition/multiplication/etc.

Conclusions
Addressed CSS problems

Conclusions
Addressed CSS problems
- missing functionality added

Conclusions
Addressed CSS problems
- missing functionality added
- shielded excessive functionality

Conclusions
Addressed CSS problems
- missing functionality added
- shielded excessive functionality
- resolved poor design

Conclusions
Addressed CSS problems
- missing functionality added
- shielded excessive functionality
- resolved poor design
- encapsulated implementation problems

Conclusions
Case Studies

Conclusions
Case Studies
- expressivity

Conclusions
Case Studies
- expressivity
- interesting abstraction

Conclusions
Case Studies
- expressivity
- interesting abstraction
- slightly reduced development efforts

Conclusions
Case Studies
- expressivity
- interesting abstraction
- slightly reduced development efforts
- high-level abstractions

Conclusions
Case Studies
- expressivity
- interesting abstraction
- slightly reduced development efforts
- high-level abstractions
- default style

Problem areas
- Finding robust transformations to CSS
is difficult
but rewarding
initial effort is still great
however, still room for improvement
- Still a long development cycle

Future work

Future work
- ‘Live’ editing of Style

Future work
- ‘Live’ editing of Style
- Personalization

Future work
- ‘Live’ editing of Style
- Personalization
- Style and layout constraints

Future work
- ‘Live’ editing of Style
- Personalization
- Style and layout constraints
- Style assistant

Future work
- ‘Live’ editing of Style
- Personalization
- Style and layout constraints
- Style assistant
- Separate remaining web user interface concerns

Future work
- ‘Live’ editing of Style
- Personalization
- Style and layout constraints
- Style assistant
- Separate remaining web user interface concerns
- More eye-candy

Questions?