responsive applications tutorial - eclipsecon 2014.pdf
TRANSCRIPT
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