Presentation is loading. Please wait.

Presentation is loading. Please wait.

Qt. Qt is everywhere Qt … is everywhere Qt … is everywhere.

Similar presentations

Presentation on theme: "Qt. Qt is everywhere Qt … is everywhere Qt … is everywhere."— 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.Qt Quick

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 Qt Quick 1.0 Fixing the UI design workflow Designer´s Idea Proof of Concept Realized on Device

27 Qt Quick 1.0 Qt User Interface Creation Kit QML QtDeclarative

28 Qt Quick 1.0 What´s so Quick about it ?

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

30 Qt QML Declarative! 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++

31 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 rocks !‘ anchors.right:parent.right font.pointSize:parent.width/10 } Qt QML Library import with version property: value Element nesting Property + expression binding Basic Visual element (Capitalized) Instance identifier SVG color names Rich text Anchor layouts property: object Hex color notation Scope dependent resolution

32 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

33 Qt QML - Elements

34 Public © 2010 Nokia QtQuick.ppt / 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

35 Qt Declarative Native UI runtime 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 2.1 Design Design Code Code Build Build Test Test Deploy Deploy Get started Get started Qt Creator covers complete application development life-cycle

38 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 Qt Creator 2.1 – User Interface Mode selector Run application Tutorials Featured items (quick guide) Choose target Examples Project wizards

40 Qt Creator Integrated Help Example or tutorial codeExample or tutorial documentation

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

42 Qt Creator 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 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 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 Qt Creator WYSIWYG Editor States Properties Item Library Canvas Navigator

46 Qt 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 Creator Item Library

47 Qt Creator 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 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 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 Context sensitive help Outline (all elements of current code file) Project browser Code Editor Semantic highlighting of QML elements or components

50 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 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 Qt 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 Qt Creator 2.1 – Qt Quick toolbars Text Rectangle PropertyAnimation Image BorderImage

54 Qt Creator 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 Qt Creator Fast Code Navigation Search Results display all locations (line number) where expression is used Usages are highlighted Double click on search result line to jump to actual code line (#30)

56 Qt Creator 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 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 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 3. Clock.qml is opened and cursor jumps to definition 2. Double click on hour image in Clock component in QML Viewer

60 Qt Creator 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 Qt Creator Deploy a Qt Quick UI Project 1.Start the Qt Quick Application Wizard 2.Choose a location for the project 3.Select the Qt Versions (= targets) Desktop, Symbian*, Maemo* 4.Applications Options Target specific options, such as icons or capabilities 5.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 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 Development Open Governance Fair Transparent Inclusive Meritocratic Shared roadmapping Broader Qt Ecosystem Richer releases Increased stability More opportunities for Qt experts Easier customization

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 Qt Quick 2.0 See QML version

69 Qt Quick 2.0 See QML version

70 Qt Quick 2.0 See QML version

71 Qt Quick 2.0 See QML version

72 Demo

73 Q & A

74 Thank You

Download ppt "Qt. Qt is everywhere Qt … is everywhere Qt … is everywhere."

Similar presentations

Ads by Google