Presentation is loading. Please wait.

Presentation is loading. Please wait.


Similar presentations

Presentation on theme: "Qt."— Presentation transcript:

1 Qt

2 Qt is everywhere

3 Qt … is everywhere

4 Qt … is everywhere

5 Qt … is everywhere

6 Qt … is everywhere

7 Qt … is everywhere

8 Qt … is everywhere

9 Qt … is everywhere ” first true Qt device from Nokia”

10 Qt … is everywhere

11 Qt … is everywhere

12 Qt … is everywhere

13 Qt … is everywhere

14 Qt … is everywhere

15 Qt … is everywhere

16 Qt … is everywhere

17 Qt … is everywhere

18 Qt … is everywhere

19 Qt … is everywhere

20 Qt Story points Qt is everywhere Qt Qt Essentials & Add-ons
Qt Lighthouse Qt Quick 1.0 QML Qt Declarative Qt Creator 1.x Open Source – Qt5 Qt Quick 2.0 Demo Q&A

21 Qt Qt is a cross-platform application and UI framework with APIs for C++ programming and Qt Quick for rapid UI creation.

22 Qt Essentials Qt Core Qt Network Qt OpenGl Qt Qml Qt Webkit
Qt Multimedia Qt Sql Qt Location Qt Sensors Qt Service Framework Qt Publish & Subscribe Qt System Info

23 Qt Add-ons Qt Widgets (desktop) Qt Quick Components Qt Svg Qt Xml
Qt XmlPatterns Qt Script, tools Qt Concurrent Qt Print Support Qt Help Qt UiTools Qt Designer Qt ActiveQt (windows) Qt WebKit (WebKit1) Qt Multimedia Widgets Qt Feedback Qt 3D Qt Compositor Qt Wayland Qt Graphical Effects Qt Json DB Qt Mime Type Qt Organizer Qt Contacts Qt Versit

24 Qt Lighthouse Windowing system pushed to plug-ins
Easier porting and adaption to platforms E.g. Used by the Qt / Android and iOS community ports

25 Qt Quick 1.0 Developers are from Mars Designers are from Venus ♥☺ 
Qt C++ Flash Mockups Photoshop ♥☺ 

26 Fixing the UI design workflow
Qt Quick 1.0 Fixing the UI design workflow Designer´s Idea Proof of Concept Realized on Device

27 Qt User Interface Creation Kit
QML QtDeclarative Quick 1.0

28 What´s so Quick about it ?
Qt Quick 1.0 What´s so Quick about it ? Quick to Learn Quick to Iterate Quick to Render Quick to Extend

29 Qt Quick 1.0 QML Qt C++ Qt Quick Designer*

30 Qt QML Declarative! Very simple and intuitive JavaScript inspired
Direct and Expressive language No construction detour (Tool and Quick Designer in perfect sync) Very simple and intuitive Uses signals and slots, properties Fun to use! JavaScript inspired Tap into existing knowledge Built on top of C++ All QML elements are implemented in Qt using C++ QML can very easily be customized and extended from C++ No construction detour (Tool and Editor in perfect sync) -Qt Designer typically has a construction detour where the XML .ui file is converted (using uic) to a ui_*.h file that can be used in C++ Signals and slots is an implementation of the observer pattern QML and JavaScript Signals is like events Properties are similar to javascript signals Slots are function calls in javascript Instead of a DOM element, you would have access to a id-ed QML Item element, similar to a <div id=…> in HTML

31 Qt QML Library import with version Basic Visual element (Capitalized)
import Qt 4.7 Rectangle { width: 200; height: 200 gradient: Gradient { GradientStop { position: 0.0 color: "lightsteelblue“ } GradientStop { position: 1.0 color: "#0000FF“ } Text { id: myText text: 'QML <b>rocks</b>!‘ anchors.right:parent.right font.pointSize:parent.width/10 Library import with version Basic Visual element (Capitalized) property: value property: object SVG color names Hex color notation Element nesting Instance identifier import Qt 4.6 Rectangle { width: 200; height: 200 gradient: Gradient { GradientStop { position: 0.0 color: "lightsteelblue" } position: 1.0 color: "blue" } } Text { id: myText text: 'QML <b>rocks</b>!' anchors.right:parent.right font.pointSize:16 Rich text Anchor layouts Scope dependent resolution Property + expression binding

32 QML - States and Animations
Qt QML - States and Animations A state is another name for specific property values in a set of items E.g. the position of a red rectangle A transition combines two states, from and to An animation is how the property values is smoothly changed from the first to second state (e.g. make the rectangle drop down and bounce before it is static again) PropertyAnimation key to other Animation types; ColorAnimation, NumberAnimation Sequential- and ParallelAnimation can be used to control ordering Actions allow direct changes during animation Follow enables tracking values import Qt 4.6 Rectangle { width: 200; height: 200 MouseRegion { id: mouseRegion anchors.fill:parent } gradient: Gradient { GradientStop { position: 0.0 color: "lightsteelblue" } position: 1.0 color: "steelblue" } Text { id: myText x: 61 y: 30 text: 'QML <b>rocks</b>!' font.pointSize:16 states: [ State { when: mouseRegion.pressed PropertyChanges { x: 59 y: 164 color: "#ff0000" target: myText name: "State1" ] transitions: [ Transition { ParallelAnimation { NumberAnimation { matchProperties: "y,x"; duration: } ColorAnimation { matchProperties: "color"; duration: 1000 }

33 Qt QML - Elements

34 QML - Behavioral Primitives
Qt QML - Behavioral Primitives Flickable Like a scrollview, but touch Flipable Dual-state MouseArea Responds to mouse input (Gestures being researched) FocusScope Enable sub-element focus WebView WebKit HTML engine Positioners Column Row Grid Views ListView GridView PathView Models ListModel SqlQuery XmlListModel Public © Nokia QtQuick.ppt /

35 Qt Declarative Native UI runtime Reads in the plain text QML file
Not to be confused with a web runtime or any other runtime Reads in the plain text QML file Translates QML to actual UI – which is actually a QGraphicsView scene Allows very tight and easy integration with existing Qt business logic

36 Qt Creator 2.1 Cross-platform IDE written in Qt
Available for Windows, Mac OS and Linux Optimized to develop Qt based C++ & QML applications Introducing Qt Quick tooling with Qt Creator 2.1 Core component of the Nokia Qt SDK Used to develop cross-platform applications for: Symbian MeeGo Windows Mac OS X Linux/X11

37 Qt Creator covers complete application development life-cycle
Design Code Get started Deploy Build Test

38 Creator 2.1 – welcome screen
Qt Creator 2.1 – welcome screen Qt Quick is a brand new technology Qt Creator provides all you need to get started: Tutorials & examples Manuals & reference documentation Integrated help in every step of the development life-cycle Wizards to create new Qt Quick applications

39 Creator 2.1 – User Interface
Qt Creator 2.1 – User Interface Mode selector Run application Tutorials Featured items (quick guide) Choose target Examples Project wizards

40 Creator 2.1 - Integrated Help
Qt Creator Integrated Help Example or tutorial code Example or tutorial documentation

41 Creator 2.1 - Manuals & Docs
Qt Creator Manuals & Docs HTML based help files & manuals All available manuals Search in manuals

42 Qt Creator 2.1 - Quick Project Wizards
Wizards guide users through the project creation steps Available wizards: Qt Quick UI pure QML project, recommended for designers Qt Quick Application app can be deployed to a device, can contain C++ code Custom QML Extension Plugin advanced project type for C++ developers who want to provide extension in Qt Quick UI projects

43 Qt Creator 2.1 - Agile Collaboration
Allow designers and developers to use their preferred tools While making transfer of deliverables more easy Convert a Photoshop file into a single QML file with an Image or Text element for each layer Photoshop QML Export script Gimp QML Exporter

44 Creator 2.1 - Designer / Developer
Qt Creator Designer / Developer QML file generated by QML Exporter used in Qt Quick Designer QML Export script for Photoshop is feature complete – use it ;) Preserve layers (with their name) Text layers can be converted to Text elements Layer styles (i.e. Drop Shadow) are converted to images

45 Creator 2.1 - WYSIWYG Editor
Qt Creator WYSIWYG Editor States Properties Navigator Item Library Canvas

46 Qt Creator 2.1 - Item Library
Creator Item Library Items displays QML elements grouped by type: your own QML components on top basic elements (such as Image, Text) interaction elements: Focus Scope, Mouse Area Views: Grid, List & Path view Advanced items: Flickable, Flipable and Web View Resources displays images and other files that you copy to the project folder Drag & drop items from Library to your QML application canvas

47 Qt Creator 2.1 - Properties
Top part of the Properties pane displays properties that are common to all elements, such as element type, position, size, visibility, and opacity. Layout allows you to set anchors and margins for elements Advanced offers transformations, such as scale and rotation

48 Creator 2.1 - Specific Element Properties
Qt Creator Specific Element Properties Some QML elements have a lot of element specific properties: Rectangle Text TextInput Image These properties can be easily managed in the Property panel

49 Outline (all elements of current code file)
Qt Creator Powerful Code Editor Aids in creating, editing and navigating code Syntax checking In-line error indicators Context sensitive help Semantic Highlighting (types, local variables,..) Highlighting & folding of code blocks Code bookmarks Outline Project browser Context sensitive help Code Editor Outline (all elements of current code file) Semantic highlighting of QML elements or components

50 Creator 2.1 - Code Completion
Qt Creator Code Completion As you write code, Qt Creator suggests elements, properties, Ids and code snippets to complete the code Ctrl+Space triggers code completion at any time

51 automatically added code for QML states
Qt Creator Snippets Snippets generate code for every day tasks thus saving a lot of typing Code snippets can consist of multiple fields that you specify values for Select an item in the list and press Tab or Enter to complete the code automatically added code for QML states

52 Creator 2.1 – Qt Quick toolbars
Helpful toolbars for QML elements whose properties are hard to get without visual feedback i.e. colours, font styles, gradients or animations

53 Creator 2.1 – Qt Quick toolbars
Text Rectangle PropertyAnimation Image BorderImage

54 Qt Creator 2.1 - Refactoring
Improve code readability and reduce complexity Refactor QML element : move an item and its functionality into a component (separate file) Refactor id: give an item a meaningful id and update all references to the old id new file automatically generated

55 Creator 2.1 - Fast Code Navigation
Qt Creator Fast Code Navigation Usages are highlighted Search Results display all locations (line number) where expression is used Double click on search result line to jump to actual code line (#30)

56 Qt Creator 2.1 - Preview without Building
Fast development and test cycles Qt Quick UI projects don’t need to be built or compiled Just press Run to preview and test these projects with the QML Viewer on your desktop

57 Qt Creator Debugger Debug the JavaScript part of you QML application: set breakpoints inspect variables with Locals and Watchers Both JavaScript and C++ parts can be debugged simultaneously Breakpoint Step through the code Values of variables

58 Qt Creator 2.1 - Inspect & Change Running Application
Switch to Observer Mode in QML Viewer Navigate in your code by selecting items of interest in your application Small adjustments to QML can be applied to the running program! Allows fast UI tweaking, e.g. fixing geometry properties On-the-fly without restarting the application Hover box: id (type) of QML element

59 Creator 2.1 - Navigation Within Application and Code
Qt Creator Navigation Within Application and Code Hover mouse over items of interest element is outlined with a blue line and hover box is displayed Use Breadcrumb navigation or double click on element code editor jumps to the line where element is defined 1. Start in clocks.qml 2. Double click on hour image in Clock component in QML Viewer 3. Clock.qml is opened and cursor jumps to definition

60 Creator 2.1 - Build & Deploy Qt Quick Applications
Qt Quick UI projects are a great way to do initial prototyping without the need to compile your project Downside is that these project types cannot be deployed to devices or distributed via Ovi Store In order to do so you need to convert your project into a Qt Quick Application Qt Creator provides a Wizard to do so Build the same application (same code base) for multiple targets: Symbian Maemo MeeGo

61 Creator 2.1 - Deploy a Qt Quick UI Project
Start the Qt Quick Application Wizard Choose a location for the project Select the Qt Versions (= targets) Desktop, Symbian*, Maemo* Applications Options Target specific options, such as icons or capabilities QML Sources Select any QML file in your Qt Quick UI project The complete project is imported and made available * Available if Nokia Qt SDK is installed

62 Creator 2.1 - Build for Multiple Targets
Qt Creator Build for Multiple Targets Qt Quick Applications need to be compiled In order to do so Qt Creator adds a lot of extra code (i.e. handling different platform settings and a QtDeclarativeView) Designers are not bothered with details and can concentrate on QML files Choose target platform (i.e. Symbian, Maemo or MeeGo) and Run

63 Qt Creator Simulator Qt Quick Application cannot be previewed in QML Viewer Use the Qt Simulator of the Nokia Qt SDK instead Qt Simulator can be chosen as a target in Qt Creator

64 Qt Creator Deploy Installation files (SIS or debian packages) are created 3 signing options: Not Signed Self Signed Certificate Custom Certificate Run will automatically deploy your application to a connected device Packages for distribution via Ovi Store can be built Create Smart Installer packages

65 Qt Creator 2.1 – QML Exporter
Photoshop QML Export script Gimp QML Exporter

66 Qt Open @ Open Development Open Governance Fair
Transparent Inclusive Meritocratic Broader Qt Ecosystem Richer releases Increased stability More opportunities for Qt experts Easier customization Shared roadmapping

67 Qt 5 Qt 5.0 will be the foundation for a new way of developing applications, where Qt Quick is in the center of Qt. Qt 5 continues to offer all of the power of native Qt C++, and we don’t want Qt 5 to be disruptive for existing code developed for Qt 4. Qt 5 enables highly sophisticated user experiences, offering applications the full capabilities of OpenGL/OpenGL ES graphics acceleration. In this respect, Qt 5.0 is a feature-driven release with time-to-market requirements especially for embedded environments.

68 < Shader demo > See QML version
Qt Quick 2.0 < Shader demo > See QML version

69 < Particles demo >
Qt Quick 2.0 < Particles demo > See QML version

70 < Path demo > See QML version
Qt Quick 2.0 < Path demo > See QML version

71 < 3D demo > See QML version
Qt Quick 2.0 < 3D demo > See QML version

72 Demo

73 Q & A

74 Thank You

Download ppt "Qt."

Similar presentations

Ads by Google