Creating Responsive SWT Applications

Creating Responsive SWT Applications

Jordi Böhme López Holger Staudacher

The Plan for this Tutorial

1. Status Quo 2. The Problem 3. The Solution 4. Hands-On 5. Results

Goal

Goal

Responsive Application ==

Responsive Design

Responsive Adapt the layout to the viewing environment

by using a fluid, proportion-based grid, flexible resources and rules.

Design Layout of the User Interface elements by

understanding interaction design and how it can enable a

pleasurable end user experience.

The Evolution of the

User Interface

80x24(480x240)

640x480

800x600

1024x768

3360x2100

480x240

640x480800x600

1024x768

3360x2100

1080p

Layouting the User Interface

SWT on the Desktop !

SWT RCP/Workbench

SWT in the Browser on Desktop & Mobile

!

RAP(Remote Application Platform)

SWT Layouts

A. Layout B. LayoutData

SWT Layout

Layout

LayoutData

LayoutData

Layout

LayoutData

LayoutData

FillLayout (distribute space equally)

���041�)9QGMLK

FillLayout

U FillLayout <AKLJA:ML=K�L@=�9N9AD9:D=�KH9;=�=IM9DDQ

U l.margin{Height,Width} K=LK�E9J?AFK

U l.spacing K=LK�KH9;=�:=LO==F�;=DDK

V������";DAHK=0GMJ;=

RowLayout (fill line-by-line or row-by-row)

���041�)9QGMLK

RowLayout

U RowLayout HD9;=K�9DD�;GFLJGDK�AF�JGOK���;GDMEFK���OJ9HK�:Q�<=>9MDL

U AK�;MKLGEAR=<�L@JGM?@�>A=D<K�G> RowLayout 9F< RowData

V������";DAHK=0GMJ;=

GridLayout (place in grid l-to-r, t-to-b)

���041�)9QGMLK

GridLayout

U GridLayout HGKALAGFK�;GFLJGDK�>JGE�D=>L�LG�JA?@L��LGH�LG�:GLLGE�AF�9?JA<

U AK�;MKLGEAR=<�L@JGM?@�>A=D<K�G> GridLayout 9F< GridData

U ;GFLJGDK�;9F�KH9F�K=N=J9D�JGOK�GJ�;GDMEFK��K== GridData�

V������";DAHK=0GMJ;=

GridLayout (place in grid l-to-r, t-to-b)

1 2

3 4 5

6 7 8

FormLayout (place relative to others)

���041�)9QGMLK

FormAttachment

U FormAttachments canU J=>=J�LG�9�H=J;=FL9?=�G>�L@=�H9J=FL�K�OA<L@���@=A?@LU J=D9L=�LG�L@=�KA<=�G>�9FGL@=J�;GFLJGD

V������";DAHK=0GMJ;=

Other SWT Layout

StackLayout (stack of "cards", one on top)

!

MigLayout (advanced 3rd party layout)

So, what is the problem?

Is there a solution?

Responsive Web Design

Media Queries Grid

Flexible Images Relative Units

Media Queries to distinguish

MobileDesktop

TV Print

Grid based CSS Layouts

Fixed (Width) Columns !

Fluid Columns

Fixed Grid

Fluid Grid

Flexible Resources

Images

Typography / Fonts

Always prefer relative units like percentages,

rather than absolute units like pixels or points.

FluidGrid (Golden Grid System)

4 Columns: 0 - 720px 8 Columns: 720 - 1872px 16 Columns: 1872 - ∞px

Responsive Web Design !

HTML + CSS + JavaScript

Responsive Design for SWT?

Challenges !

1. SWT & RAP Compatibility 2. Don’t reinvent the Wheel 3. Standalone Library 4. Readable Code

Passe-Partout Open-Source (EPL)

http://github.com/eclipsesource/tabris

Passe-Partout (or passepartout) is the French term for a mat, a paper or, more

usually, cardboard sheet with a cutout, which is placed under the glass in a picture frame.

Query Engine !

Single Jar !

Only depends on: org.eclipse.swt

!

SWT Layout !

Flexible Resources

Passe-Partout API

We prefer fluent API for better readability…

PassePartout. PassePartout. PassePartout. PassePartout. PassePartout. PassePartout.

createFluidGrid( … ); createFluidGridData( … ); when( … ); then( … ); px( … ); font( … );

Our Konami Code for Java

PassePartout. PassePartout. PassePartout. PassePartout. PassePartout. PassePartout.

createFluidGrid( … ); createFluidGridData( … ); when( … ); then( … ); px( … ); font( … );

Our Konami Code for Java

import static com.eclipsesource.tabris.passepartout.PassePartout

PassePartout. PassePartout. PassePartout. PassePartout. PassePartout. PassePartout.

createFluidGrid( … ); createFluidGridData( … ); when( … ); then( … ); px( … ); font( … );

Our Konami Code for Java

import static com.eclipsesource.tabris.passepartout.PassePartout

createFluidGrid( … ); createFluidGridData( … ); when( … ); then( … ); px( … ); font( … );

Rules

when( minWidth( px( 720 ) ) ).then( columns( 4 ) ); when( maxWidth( px( 719 ) ) ).then( columns( 4 ) );

when( … ).and( … ).then( …,…,… );

Rule

Query

Condition(s)Instruction(s)

Units

px( int ); percentage( double ); em( double );

Absolute Relative

Units

px( int );

em == a unit with the width of the capital "M"

percentage( double ); em( double );

Absolute Relative

FluidGridLayout

Composite composite = new Composite( parent, SWT.NONE ); composite.setLayout( createFluidGrid() );

4 Columns: 0 - 720px 8 Columns: 720 - 1872px 16 Columns: 1872 - ∞px

FluidGridData

Composite child = new Composite( parent, SWT.NONE ); child.setLayoutData( createFluidGridData( rule1, rule2 ) );

Composite parent = new Composite( parent, SWT.NONE ); parent.setLayout( createFluidGrid() ); !Composite yellow = new Composite( parent, SWT.NONE ); yellow.setLayoutData( createFluidGridData( when( minWidth( px( 720 ) ) ).then( columns( 4 ) ), when( maxWidth( px( 719 ) ) ).then( columns( 4 ) ) ) ); !Composite green = new Composite( parent, SWT.NONE ); green.setLayoutData( createFluidGridData( when( minWidth( px( 720 ) ) ).then( columns( 4 ) ), when( maxWidth( px( 719 ) ) ).then( columns( 4 ) ) ) );

Resources

Label label = new Label( parent, SWT.NONE ); createResource( when( … ).then( image( smallImage ) ), when( … ).then( image( largeImage ) ) ).bindTo( label );

QueryListenerFluidGridLayout grid = createFluidGrid(); grid.addQueryListener( rule, new QueryListener() { @Override public void activated( Query query ) { // create controls } @Override public void deactivated( Query query ) { // destroy controls } } );

Break

IDE & Workspace Setup

In Eclipse, go to: Window » Preferences » Java » Editor » Content Assist » Favorites

and add: com.eclipsesource.tabris.passepartout.PassePartout

Static Imports

Your Mission: Create a responsive UI

Now, Team Up!

Project Setup

Show Off Your Results

1. Sign in to http://eclipsecon.org

2. Select this session to evaluate

3. Vote:

Thank You

+1 0 -1

Everytime you vote -1, a fairy dies

Questions & Feedbackhttp://github.com/eclipsesource/tabris

http://developer.eclipsesource.com/tabris/docs/1.3/working/responsive-design/

@hstaudacher, @jordibohmelopez