Initial commit
[qml-presentation-made-with-qml:qml-presentation-made-with-qml.git] / sfpreso.qml
1 import Qt 4.6
2
3 Rectangle {
4     id: root
5     width: 800
6     height: 640
7     color: "white"
8     property int selectedSlide: 0
9     property alias slideCount: slides.count
10
11     focus: true
12     //onPressed: if (root.selectedSlide < slideCount - 1) root.selectedSlide = root.selectedSlide + 1
13     Keys.onPressed: {
14         switch (event.key) {
15         case Qt.Key_Return:
16         case Qt.Key_Enter:
17         case Qt.Key_Space:
18         case Qt.Key_Right:
19         case Qt.Key_PageDown:
20         case Qt.Key_Tab:
21             if (root.selectedSlide < slideCount - 1) root.selectedSlide = root.selectedSlide + 1;
22             event.accepted = true;
23             break;
24         case Qt.Key_Left:
25         case Qt.Key_Backspace:
26         case Qt.Key_Back:
27         case Qt.Key_Backtab:
28         case Qt.Key_PageUp:
29             if (root.selectedSlide > 0) root.selectedSlide = root.selectedSlide - 1;
30             event.accepted = true;
31         }
32     }
33
34     ListModel {
35         id: slides
36         ListElement {
37             showHdr: false
38             showFtr: false
39             margins: false
40             layout: "picture"
41             source1: "images/front-page-edited.png"
42         }
43         ListElement {
44             header: "What Determines a User Interface (UI)"
45             layout: "basic"
46             bullets: [
47                 ListElement {
48                     bulletText: "Graphics Power"
49                 },
50                 ListElement {
51                     bulletText: "Screen"
52                 },
53                 ListElement {
54                     bulletText: "Input Mehtod"
55                 },
56                 ListElement {
57                     bulletText: "Purpose"
58                 }
59             ]
60         }
61         ListElement {
62             header: "What Determines a User Interface (UI)"
63             layout: "basic"
64             bullets: [
65                 ListElement {
66                     bulletText: "15 years ago"
67                     subBullets: [
68                         ListElement {
69                             bulletText: "<b>Graphics Power: </b>2D primitives"
70                         },
71                         ListElement {
72                             bulletText: "<b>Screen: </b>75 dpi"
73                         },
74                         ListElement {
75                             bulletText: "<b>Input Method: </b>keybord, joystick, mouse"
76                         },
77                         ListElement {
78                             bulletText: "<b>Purpose: </b>offline content creation, calculation"
79                         }
80                     ]
81                 },
82                 ListElement {
83                     bulletText: ""
84                 }
85             ]
86         }
87         ListElement {
88             header: "What Determines a User Interface (UI)"
89             layout: "basic"
90             bullets: [
91                 ListElement {
92                     bulletText: "Today"
93                     subBullets: [
94                         ListElement {
95                             bulletText: "<b>Graphics Power: </b>animated 3D rendering"
96                         },
97                         ListElement {
98                             bulletText: "<b>Screen: </b>240 dpi"
99                         },
100                         ListElement {
101                             bulletText: "<b>Input Method: </b>keyboard, stylus, touch, accelerometer"
102                         },
103                         ListElement {
104                             bulletText: "<b>Purpose: </b>managing huge amounts of content (online & offline), communication, collaboration, fun"
105                         }
106                     ]
107                 },
108                 ListElement {
109                     bulletText: ""
110                 }
111             ]
112         }
113         ListElement {
114             header: "Widget model"
115             layout: "picture"
116             source1: "images/widgets.png"
117         }
118         ListElement {
119             header: "Widget model"
120             layout: "basic"
121             bullets: [
122                 ListElement {
123                     bulletText: "Widgets are rectangular"
124                 },
125                 ListElement {
126                     bulletText: "Widgets have a parent and optional child widgets"
127                 },
128                 ListElement {
129                     bulletText: "Widgets are clipped to their parent and clip their children"
130                 },
131                 ListElement {
132                     bulletText: "Widgets draw the pixels they are responsible for"
133                 },
134                 ListElement {
135                     bulletText: "Widgets manage their content"
136                 },
137                 ListElement {
138                     bulletText: "Widgets are expensive to show/hide/move/resize"
139                 },
140                 ListElement {
141                     bulletText: "Widgets are (almost) impossible to flip/rotate/stretch"
142                 }
143             ]
144         }
145         ListElement {
146             header: "Example: A list of items"
147             layout: "picture"
148             source1: "images/list-of-items-1.png"
149         }
150         ListElement {
151             header: "Example: A list of items"
152             layout: "picture"
153             source1: "images/list-of-items-2.png"
154         }
155         ListElement {
156             header: "Widget model"
157             layout: "basic"
158             bullets: [
159                 ListElement {
160                     bulletText: "UIs using widgets are"
161                     subBullets: [
162                         ListElement {
163                             bulletText: "Clearly structured / Bulky"
164                         },
165                         ListElement {
166                             bulletText: "Static"
167                         },
168                         ListElement {
169                             bulletText: "Enforcing standard platform look and feel"
170                         },
171                         ListElement {
172                             bulletText: "Very useful for traditional applications"
173                         }
174                     ]
175                 },
176                 ListElement {
177                     bulletText: ""
178                 }
179             ]
180         }
181         ListElement {
182             header: "The Future"
183             layout: "picture"
184             source1: "images/no-widgets.png"
185         }
186         ListElement {
187             header: "What do we want?"
188             layout: "basic"
189             bullets: [
190                 ListElement {
191                     bulletText: "Express a UI the way we think about it: components, views, states, transitions, animations and effects"
192                 },
193                 ListElement {
194                     bulletText: "Connect the UI to real data and back-end functionality"
195                 },
196                 ListElement {
197                     bulletText: "Everything should be fast and easy"
198                 },
199                 ListElement {
200                     bulletText: "In fact so easy that also designers can do it (e.g. the sort of people doing Flash, Silverlight and Web)"
201                 }
202             ]
203         }
204         ListElement {
205             header: "What do we want?"
206             layout: "basic"
207             bullets: [
208                 ListElement {
209                     bulletText: "A world where developers and designers work <i>directly</i> together on the same project"
210                 },
211                 ListElement {
212                     bulletText: "A world where a UI is determined by its usability and not by limitations of the underlying technology"
213                 }
214             ]
215         }
216         ListElement {
217             header: "Meet QML"
218             layout: "basic"
219             bullets: [
220                 ListElement {
221                     bulletText: "QML is a new declarative language extension to Qt"
222                 },
223                 ListElement {
224                     bulletText: "It maps almost directly to how you should think about a UI: components, views, states, transitions, animations and effects"
225                 },
226                 ListElement {
227                     bulletText: "The declarative language itself is simple and intuitive, the rest is JavaScript."
228                 },
229                 ListElement {
230                     bulletText: "All the power and freedom of Qt is still available"
231                 }
232             ]
233         }
234         ListElement {
235             header: "Live Demonstration"
236             layout: "basic"
237             bullets: [ ]
238         }
239         ListElement {
240             header: "Summary"
241             layout: "basic"
242             bullets: [
243                 ListElement {
244                     bulletText: "QML is a new declarative language extension to Qt"
245                 },
246                 ListElement {
247                     bulletText: "It provides you with all the elements you need to think about a UI and nothing more"
248                 },
249                 ListElement {
250                     bulletText: "It allows complete concentration on the UI and finding and solving problems as fast as possible."
251                 },
252                 ListElement {
253                     bulletText: "It's so simple and intuitive that designers and developers can work directly together"
254                 },
255                 ListElement {
256                     bulletText: "Programmers: You will never want to code a UI in C++ again"
257                 },
258                 ListElement {
259                     bulletText: "Designers: You will never need to prototype the UI with a separate technology again"
260                 }
261             ]
262         }
263         /*ListElement {
264             layout: "qml"
265             url: "dial/dial.qml"
266         }*/
267         ListElement {
268             layout: "qml-grid"
269             showHdr: false //root.height > 800.0
270             header: "QML Examples"
271             url1: "samegame/samegame.qml"
272             url2: "dial/dial.qml"
273             url4: "slideswitch/display.qml"
274             url5: "flickr/flickr-mobile.qml"
275             url3: "clock/display.qml"
276             url6: "hello-world/hello-world.qml"
277         }
278         ListElement {
279             showHdr: false
280             showFtr: false
281             layout: "picture"
282             source1: "images/qt-big.png"
283         }
284     }
285     Rectangle {
286         anchors.fill: parent
287         Repeater {
288             model: slides
289             Slide {
290                 anchors.fill: parent
291                 state: index == root.selectedSlide ? "active" : ""
292                 headerText: header
293                 slideLayout: layout
294                 showHeader: showHdr != null ? showHdr : true
295                 showFooter: showFtr != null ? showFtr : true
296                 showMargins: margins != null ? margins : true
297                 bulletList: bullets != null ? bullets : []
298                 image1: source1 != null ? source1 : ""
299                 image2: source2 != null ? source2 : ""
300             }
301         }
302     }
303
304     /*MouseRegion {
305         anchors.fill: parent
306         anchors.topMargin: 60
307
308     }*/
309
310     Item {
311         id: toolBar
312         anchors.horizontalCenter: parent.horizontalCenter
313         y:0
314         width: 400
315         height: 60
316         MouseRegion {
317             id: toolBarRegion
318             anchors.fill: parent
319             hoverEnabled: true
320         }
321         Rectangle {
322             anchors.horizontalCenter: parent.horizontalCenter
323             height: toolBarButtons.height
324             width: toolBarButtons.width
325             opacity: toolBarRegion.containsMouse ? 0.5 : 0
326             color: "lightsteelblue"
327             Row {
328                 id: toolBarButtons
329                 anchors.horizontalCenter: parent.horizontalCenter
330                 Image {
331                     source: "images/back.png"
332                     MouseRegion {
333                         anchors.fill: parent
334                         onPressed: root.selectedSlide = 0
335                     }
336                 }
337                 Image {
338                     source: "images/back.png"
339                     MouseRegion {
340                         anchors.fill: parent
341                         onPressed: if (root.selectedSlide > 0) root.selectedSlide = root.selectedSlide - 1
342                     }
343                 }
344                 Image {
345                     source: "images/forward.png"
346                     MouseRegion {
347                         anchors.fill: parent
348                         onPressed: if (root.selectedSlide < slideCount - 1) root.selectedSlide = root.selectedSlide + 1
349                     }
350                 }
351                 Image {
352                     source: "images/forward.png"
353                     MouseRegion {
354                         anchors.fill: parent
355                         onPressed: root.selectedSlide = slideCount - 1
356                     }
357                 }
358             }
359         }
360     }
361 }