Developing a killer application is much easier if an existing example can be tweaked to build the needed functionality. Therefore the following list may help to find a project or feature template. If you know of an additional example please list it here.
Example Applications for Qt Quick
Qt Quick for Designer
http://qt.nokia.com/developer/learning/online/training/materials/qt-quick-for-designers
This extensive downloadable course comes with over 30 examples and labs. Excellent material.
| module 1 | basics |
| module 2 | animations |
| module 3 | ListView and Grid |
| module 4 | Flow and Repeater |
| module 5 | adapt to screen size, code organization |
| module 6 | (no examples) |
Nokia Developer Examples
There are plenty of qml examples [developer.nokia.com] on the Nokia Developer site
Examples from Qt 4.7.3
Qt4 examples are part of the Qt distribution and can be found in the examples/declarative directory (path is valid for source, build and installed)
Animation
| Basics | property animation and color animation |
| Behaviors | animation, component use |
| Easing | demonstrates easing curves, helps to select the right easing curve for your application |
| States | basic use of states and transitions |
Image Elements
| BorderImage | border images for shadows and decoration |
| Image | components, property alias, image fill modes |
Text
| Fonts | animate letter spacing, load custom fonts, list available fonts, moving text |
| Text Selection | broken ??? |
Positioners
| Example: | shows positioners Column, Row, Grid and Flow in action |
Key Interaction
| Example: | shows use of element FocusScope to have elements with keyboard focus |
Touch Interaction
| mousarea | showcase of mouse interactions, dragable item, mouse enter, exit, pressed, release, pressAndHold, click, doubleclick |
| gesture | logs recognized gestures to console |
UI Components
| Dial control | shows how graphics can be assembled to get a stunning visual control |
| Flipable | component to flip an image. Uses transformation (transform), states, transitions |
| Progress bar | |
| Scroll bar | |
| Search box | a line edit, shows key navigation and focus |
| Slide switch | checkbox like gui element. uses slider with two snap positions |
| Spinner | PathView in action |
| Tab widget | defining and using a default property, Repeater, BorderImage |
Toys
| Clocks | a clock modeled as a stack of images. Clockhand image rotation is updated with a Timer |
| Corkboards | ListModel, ListView, hierarchical model |
| Dynamic Scene | dynamic item creation, import javascript file, drag and drop |
| Tic Tac Toe | full game with a few lines of code |
| TV Tennis | Animation |
Models and Views
| GridView | GridView, inline component definition, highlighted item |
| ListView | different ListViews: dynamic items, with section heading, zoom into one item to show additional details, highlighted items |
| PathView | show items flowing along a defined path |
| Package | Share Delegate among two different views |
| Parallax | Using Listviews to build a parallax view component, foreground moves faster than background to simulate a 3D scene |
| VisualItemModel | demonstrates placing items in a view using a VisualItemModel |
| String ListModel | illustrates exposing a QStringList as a model in QML |
| Object ListModel | illustrates exposing a QList<QObject*> as a model in QML |
| AbstractItemModel | illustrates exposing a QAbstractItemModel derivative as a model in QML |
| WebView | different examples to show the use of WebView (webkit) to display web content |
XML
| XmlHttpRequest | XMLHttpRequest is a global object that can be used with JavaScript to obtain data over a network |
Internationalization (i18n)
| Example | shows how to benefit from Qt’s i18n features |
Threading
| Threaded ListModel | demonstrates use of Workerscript Element to perform JavaScript processing in another thread, communication from workerscript to GUI |
| WorkerScript | demonstrates use of Workerscript, communication from GUI to workerscript |
Screen Orientation
| Example | demonstrates how to switch the orientation of |
SQL Local Storage
| Example | creates local database (persistent), inserts a record, reads from database, displays result |
C++ Extensions
| Plugins | demonstrates how to write a C++ plugin, and use the types from qml |
| QGraphicsLayouts | integrate QGraphicsView Layouts into QML |
| QWidgets | use a plugin to integrate QWidget based widgets in a qml scene |
| Image provider | demonstrates use of QDeclarativeImageProvider |
| Network access manager factory | demonstrates use of QDeclarativeNetworkAccessManagerFactory |
Reference examples
Reference examples can be found under examples/declarative/cppextensions
| adding | Adding Types |
| binding | |
| default | Default Property |
| grouped | Grouped Properties |
| methods | Methods Support |
| signal | Signal Support |
| attached | Attached Properties |
| coercion | Inheritance and Coercion |
| extended | add properties to a class and use it in qml |
| properties | Object and List Property Types |
| valuesource | Property Value Source |
Demos
Qt4 demos
Qt4 demos are part of the Qt distribution and can be found in the demo/declarative directory (path is valid for source, build and installed)
| calculator | mobile desktop calculator using a javascript engine |
| flickr | viewer to access flickr database |
| minehunt | minesweeper game known from Windows, engine is C++, frontend QML |
| photoviewer | a picture viewer that works with stacks of pictures, index and detail view. Transitions between viewing modes is animated. Flickr is used as the data source. |
| rssnews | demonstrates use of XmlListModel to implement an rss viewer. Data source is rss.news.yahoo.com/rss/topstories |
| samegame | arcade style game implemented in qml with javascript. Tutorial style description is available. |
| snake | traditional snake games. Could not get it to work |
| twitter | twitter client, implemented based on XmlListModel |
| webbrowser | |
wiki demos
Demos descriptions maintained in this wiki.
mobile-demos
mobile-demos [qt.gitorious.org] are hosted on gitorious
Mobile demos show graphically rich applications templates. The UI-concepts shown are excelent building blocks for various mobile applications.
Descriptions of most of these demos is available here in the wiki (see links above).
| CoffeeTweed | use qml for process visualization |
| hyperui | user interface mock for Maemo |
| mybudget | budget planner |
| qtflyingbus | jump and run game |
| RadioTuner | analog tuner bar |
| shoplist | a list of lists with checkable items |
| weather | ??? tested on desktop, produced only garbage output |
| weather-qml | very nice ui for a weather forecast application. Uses Listview and animations. There is a video about this demo [get.qt.nokia.com] |
Categories:
