layout interac-on gui’ - kth · dh2642:’interac/on’programming’ 1 layout interac-on data’...

DH2642: Interac/on Programming

1

Layout Interac-on

Data

GUI

1

Layout Cris/an Bogdan

cris/@kth.se

2


2

Main frame

menu PanelCap/on

panel2

List RadiobuFon1

…

…

3

Frame

Panel Menu

Panel MenuWidget1 … …

…

4


3

Tree terminology

Frame

Panel Menu

Panel MenuWidget1 … …

…

parent

siblings

leaf

5

Main frame

menu PanelCap/on

panel2

List RadiobuFon1

…

… What is the next sibling of Item 4? What is the next sibling of Item 5? What is the parent of Item 3?

What is the parent of CheckedCheckBox? What is the deepest level in the tree? 6


4

Answers

What is the next sibling of Item 4? => It is Item 5

What is the next sibling of Item 5? => None

What is the parent of Item 3? => List

What is the parent of CheckedCheckBox? => SelectedTab

What is the deepest level in the tree?

5: Frame -‐> PanelCap/on -‐> Panel -‐> List -‐> Item 1 (or any of other items since they are siblings )

7

Technologies

HTML5 / Javascript

Android

Java Swing

Java FX

There are many more…

8


5

Building the interface

1. Construc/ng a tree Procedural or Declara/ve

2. Graphically arranging children of a node -‐

layout

3. Styling rules to apply to a tree

9

WIDGETS The basic building blocks

10


6

What are widgets?

So[ware components with logic and presenta-on

Used for input/output, layout, naviga-on, etc.

11

User command input

12


7

BuQon

<button />

javax.swing.JButton

javafx.scene.contorl.Button

android.widget.Button

13

Menu

N/A

javax.swing.JMenu

javafx.scene.contorl.Menu

Done a bit differently hFp://developer.android.com/guide/topics/ui/menus.html

14


8

Data input/output

15

Text input

<input type=“text”/> <input type=“password”/>

javax.swing.JTextField javax.swing.JPasswordField

javafx.scene.contorl.TextField javafx.scene.contorl.PasswordField

android.widget.EditText android:password=“true”

16


9

Node aFributes

Also known as proper-es

Generic exist on all widgets (color, background color, font, name, size, posi/on in

the parent node, layout constraints, …) Specific depends on the wdiget type

Can be defined through styles

HTML: type=“password” android:password=“true”

17

List

<select size=4> <option>Volvo</option> … <select/>

javax.swing.JList

javafx.scene.contorl.ListView

android.widget.ListView

18


10

Radio/check buQon

<input type=“checkbox” /> <input type=“radio” />

javax.swing.JCheckBox javax.swing.JRadioButton

javafx.scene.contorl.CheckBox javafx.scene.contorl.RadioButton

android.widget.CheckBox android.widget.RadioButton

19

Slider

$("#slider").slider(); hFp://jqueryui.com/demos/slider/

javax.swing.JSlider

javafx.scene.contorl.Slider

android.widget.SeekBar

20


11

Informa/on display

21

Label

<span>Some text</span>

javax.swing.JLabel

javafx.scene.contorl.Label

android.widget.TextView

22


12

Tool-p

<element title=“Your tooltip” /> <element data-‐toggle=“tooltip” title=“Your tooltip” />

javax.swing.JToolTip

javafx.scene.contorl.Tooltip

N/A

23

Containers

24


13

Scroll container

<div style=“height:100px; weight:100px overflow:scroll”/>

javax.swing.JScrollPane

javafx.scene.contorl.ScrollPane

android.widget.ScrollView

25

Tabs

nav-‐tabs, tab, tab-‐content, tab-‐pane hFp://getbootstrap.com/javascript/#tabs

javax.swing.JTabbedPane

javafx.scene.contorl.TabPane

android.widget.TabHost └android.widget.TabWidget

26


14

Dialog

modal hFp://getbootstrap.com/javascript/#modals

javax.swing.JDialog

Done differently in Java FX

android.app.AlertDialog hFp://developer.android.com/guide/topics/ui/dialogs.html

27

Naviga/onal

28


15

Hyperlink

<a href=“#”>Take me there</a>

javafx.scene.contorl.Hyperlink

android.widget.TextView android:autoLink="web"

29

Other

$("#datepicker").datepicker();

$("#accordion").accordion();

30


16

Web components

New upcoming technology

Custom tags

Libraries:Bosonic, Polymer, X-‐tag

hFp://webcomponents.org/ 31

…

javax.swing.JTable

javax.swing.JFileChooser

javax.swing.JColorChooser javax.swing.JTree

javax.swing.JSplitPane

32


17

?

What type of widget is a combobox? command, informa/on display, data input/output, naviga/onal?

What type is a scrollbar on the side of a window?

33

Answers

What type of widget is a combobox? It is a data input/output What type is a scrollbar on the side of a window? It is naviga.onal since it is used to navigate (scroll) through en/er screen

34


18

BUILDING THE INTERFACE Pujng components together

35

Construc/ng a tree

Declara-ve A tower of 3 blocks Procedural 1.  Put down block A. 2.  Put block B on block A. 3.  Put block C on block B.

36


19

Root nodes: how do you start a tree?

In HTML the <body> tag

JavaFX add a root container to javafx.scene.Scene

In Swing it depends if you want a window (JFrame), a dialog box (JDialog) or an applet

(JApplet) Each has a “content pane”

In Android each Ac/vity has a “content view”, needs to be set

37

Declara/ve -‐ HTML <body> <div>What is your name?</div> <div><input type=“text”></div> <div><button>Send</button></div> </body>

38


20

Procedural -‐ HTML var div1 = $("<div/>").html("What is your name?"); $("body").append(div1); var div2 = $("<div/>").append($("<input/>")); $("body").append(div2); var div3 = $("<div/>").append($("<button/>").html("Send")); $("body").append(div3);

39

Declara/ve – Android (1) <?xml version="1.0" encoding="utf-‐8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>

res/layout/main.xml

40


21

Declara/ve – Android (2) package se.kth.csc.iprog; import android.app.Activity; import android.os.Bundle; public class HelloAndroid extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }

src/se/kth/csc/iprog/HelloAndroid.java

41

Procedural -‐ Android package se.kth.csc.iprog; import android.app.Activity; import android.os.Bundle; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; public class HelloAndroid extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout layout = new LinearLayout(this); TextView tv = new TextView(this); tv.setText("Hello I'm a TextView"); Button bt = new Button(this); bt.setText("Hello I'm a Button"); layout.addView(tv); layout.addView(bt); setContentView(layout); } }

src/se/kth/csc/iprog/HelloAndroid.java 42


22

Declara/ve – Java FX (1) <?xml version="1.0" encoding="UTF-‐8"?> <?import javafx.scene.control.Button?> <?import javafx.scene.layout.StackPane?> <StackPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1"> <children> <Button text="Say 'Hello World'" /> </children> </StackPane>

fxml_example.fxml

43

Declara/ve – Java FX (2) package se.kth.csc.iprog; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.Parent; import javafx.stage.Stage; public class HelloWorld extends Application { @Override public void start(Stage primaryStage) { Parent root = FXMLLoader.load(getClass() .getResource("fxml_example.fxml")); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Hello World!"); primaryStage.setScene(scene); primaryStage.show(); } }

44


23

Procedural – Java FX package se.kth.csc.iprog; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class HelloWorld extends Application { @Override public void start(Stage primaryStage) { Button btn = new Button(); btn.setText("Say 'Hello World'"); StackPane root = new StackPane(); root.getChildren().add(btn); Scene scene = new Scene(root, 300, 250); primaryStage.setTitle("Hello World!"); primaryStage.setScene(scene); primaryStage.show(); } }

45

package se.kth.csc.iprog; import java.awt.BorderLayout; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; public class GUISimple{

public static void main(String[] args) { JFrame f = new JFrame("a window"); JPanel panel = new JPanel();

panel.setLayout(new BorderLayout()); panel.add(new JButton("up"), BorderLayout.NORTH); panel.add(new JButton("middle"), BorderLayout.CENTER); panel.add(new JButton("left"), BorderLayout.WEST);

f.getContentPane().add(panel); f.setSize(300, 500); f.setVisible(true); }

}

Procedural – Java Swing

46


24

Procedural: Tree APIs

In all OO frameworks the parent node class inherits from the node class Not unexpected, a parent node is a node ☺

Node APIs allow gejng and sejng node aFributes

Parent node APIs provide ways to arrange (lay out) the nodes contained

Parent node APIs allow traversing and changing the tree gejng the parent of a node lis/ng children of a parent node adding and removing

47

?

Declara/ve vs Procedural

Which one is faster to write?

Which one is more intui-ve?

Which one is faster for a computer to process?

Can we combine them?

48


25

Answers Which one is faster to write? Depends if the components are very dynamic (for widgets you use change constantly and their number can vary a lot) then it might be simpler to do procedural. But in general declara/ve is favorable. Which one is more intui-ve? Declara/ve is self organized in a tree thus it already represents the tree structure of the UI. It also allows one to focus on the important elements (proper/es and values) and not how they were created (using various methods calls in procedural version). Which one is faster for a computer to process? The procedural is compiled in code, while the declara/ve needs parsing. S/ll, if the procedural includes lots of jQuery searches, the advantage is lost. Can we combine them? Absolutelly. That will oNen be the case in real scenarios.

49

AUTOMATIC LAYOUT Arranging the components

50


26

Why automa/c layout

Window/screen size changes -‐ responsivness

Font changes

Widget set/theme/skin changes

Text changes (e.g. interna/onaliza/on)

Dynamic changes in the tree

51

Flow Layout -‐ HTML

<body> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> <button>Long-‐Named Button 1</button> <button>5</button>

</body>

<element style="display:inline"/>

52


27

Flow Layout -‐ Android

<?xml version="1.0" encoding="utf-‐8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a TextView" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello, I am a Button" /> </LinearLayout>

android.widget.LinearLayout

53

Procedural Flow Layout – Java Swing

JPanel controls = new JPanel(); controls.setLayout(new FlowLayout()); //Add buttons to the experiment layout controls.add(new JButton("Button 1")); controls.add(new JButton("Button 2")); controls.add(new JButton("Button 3")); controls.add(new JButton("Long-‐Named Button 4")); controls.add(new JButton("5"));

java.awt.FlowLayout

54


28

Block Layout -‐ HTML

<body> <div> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> </div> <div> <button>Long-‐Named Button 1</button> <button>5</button> </div>

</body>

<element style="display:block"/> (default for div)

55

Grid Layout -‐ HTML

<table> <tr> <td>Name:</td> <td><input /></td> </tr> <tr> <td>Surname:</td> <td><input /></td> </tr> </table>

56


29

Grid Layout – HTML + Bootstrap <div class="row"> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> <div class="col-‐md-‐1">.col-‐md-‐1</div> </div> <div class="row"> <div class="col-‐md-‐8">.col-‐md-‐8</div> <div class="col-‐md-‐4">.col-‐md-‐4</div> </div> <div class="row"> <div class="col-‐md-‐4">.col-‐md-‐4</div> <div class="col-‐md-‐4">.col-‐md-‐4</div> <div class="col-‐md-‐4">.col-‐md-‐4</div> </div> <div class="row"> <div class="col-‐md-‐6">.col-‐md-‐6</div> <div class="col-‐md-‐6">.col-‐md-‐6</div> </div>

hFp://getbootstrap.com/css/#grid 57

Grid Layout -‐ Android <?xml version="1.0" encoding="utf-‐8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="1"> <TableRow> <TextView android:text="@string/open" android:padding="3dip" /> <TextView android:text="@string/open_shortcut" android:gravity="right" android:padding="3dip" /> </TableRow> … </TableLayout>

58


30

Procedural Grid Layout – Java Swing

JPanel controls = new JPanel(); controls.setLayout(new GridLayout(0,2)); //Add buttons to the experiment layout controls.add(new JLabel("Name:")); controls.add(new JTextField()); controls.add(new JLabel("Surname:")); controls.add(new JTextField());

Also GridBagLayout (more complex), BoxLayout (simpler) BorderLayout, par/cular case of GridBagLayout

59

Float Layout -‐ HTML

<body> <button style="height:100px;float:left"> I'm a button </button> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </body>

<element style="float:left"/> (or right)

60


31

Border Layout – Java Swing

•  up, down have constant height

•  le[, right have constant width

•  up, down, and middle grow with the window width

•  le[, right and middle grow with window height

61

BorderLayout in HTML <html style="height:100%" > <style>div{border:1px solid;text-‐align:center;}</style> <body style="height:100%;margin:0;

display:flex; align-‐items:stretch; flex-‐direction:column;">

<div>up</div> <div style="flex:1;

display:flex; align-‐items:stretch; flex-‐direction:row;">

<div>left</div> <div style="flex:1;">middle</div> <div>right</div> </div> <div>down</div>

</body> </html> 62 hFps://css-‐tricks.com/snippets/css/a-‐guide-‐to-‐flexbox/


32

Card Layout

Contains several children arranged in a stack

Can change the order of the children to bring any of them on top (i.e. visible)

Swing/AWT: java.awt.CardLayout

Android: android.widget.FrameLayout

HTML: hide and show various parts of the tree

63

The automa/c layout process

A parent node has a layout policy for arranging its children

Children nodes have layout constraints

“wishes” towards the parent “align me to the right and to the top”

“I want to eat up all the space le[ on this line”

Since parent nodes have parents, and children can also contain children, the process is complex!

64


33

For more details

Leraning Layout – great guide for HTML hFp://learnlayout.com/

Working with Laouys in Java FX

hFp://docs.oracle.com/javafx/2/layout/jfxpub-‐layout.htm

Android Layouts hFp://developer.android.com/guide/topics/ui/declaring-‐layout.html

Java Swing Laying out Components hFp://docs.oracle.com/javase/tutorial/uiswing/layout/index.html

65

? What layout managers can we use to achieve the Finder layout behavior?


34

STYLYING Adding some style

67

Why?

Coherent look and feel

Separa/on of the structure (view tree) from the

details of presenta-on

68


35

What is defined with style?

Layout

Color Font Size

Posi-on Borders

Anima-on …

69

Style in HTML As aQribute

<button style="font-‐weight:bold">Save</button>

In html as a tag

<style> button { font-‐weight:bold; }

</style>

In a Cascading Style Sheet (CSS) document

PRIORITY

70


36

Selectors <button class="menuButton" id="b1">Save</button> <style>

#b1 { … } By id .menuButton By class { padding:10;… } button { … } By tag

#c1 div { … } By element paths </style>

PRIORITY

71

Responsivness Using rela-ve values

width:50%; instead of width:300px;

Media queries <style> body { background-‐color: lightgreen; } @media (max-‐width: 150px) { body { background-‐color: lightblue; } } </style> 72


37

Spacing -‐ HTML

Margin

Padding

Content

Border

Margin

Padding

Content

Border

Margin

Padding

Content

Border

73

Style – Java FX

Uses CSS ☺

Just has some extra proper/es and ways of selec/ng components

74


38

Style -‐ Android

<?xml version="1.0" encoding="utf-‐8"?> <resources> <style name="CodeFont" parent="@android:style/TextAppearance.Medium"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> </style> </resources>

res/value/CodeFont.xml

... <TextViewstyle="@style/CodeFont" android:text="@string/hello" />

From our layout example

75

?

What does cascading in CSS mean?

Is the order inside a style sheet important?

76


39

? What does cascading in CSS mean? Cascading means that it depends where the style declara/on is defined (inline > style tag > external css file) and how specific the selector is (id > class > tag). The highest priority declara/on will be the one that’s applied. This is calculated per declara/on (not the whole {…} declara/on block). Meaning that if font-‐size and color are defined in the css file for one element, but then the font-‐size is defined also inline, only the font-‐size will be overridden. The color will s/ll be the one from css file. Is the order inside a style sheet important? Similar to loca/on and selector priority the order of the declara/ons in the document also maWers. In other words, if you want to add something that overrides your previous declara/ons, add it to the boWom of the document.

77

layout interac-on gui’ - kth · dh2642:’interac/on’programming’ 1 layout interac-on data’...

Documents