Upload
others
View
25
Download
0
Embed Size (px)
Citation preview
DH2642: Interac/on Programming
1
Layout Interac-on
Data
GUI
1
Layout Cris/an Bogdan
cris/@kth.se
2
DH2642: Interac/on Programming
2
Main frame
menu PanelCap/on
panel2
List RadiobuFon1
…
…
3
Frame
Panel Menu
Panel MenuWidget1 … …
…
4
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
11
Informa/on display
21
Label
<span>Some text</span>
javax.swing.JLabel
javafx.scene.contorl.Label
android.widget.TextView
22
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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/
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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?
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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
DH2642: Interac/on Programming
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