aboutsummaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorJ-P Nurmi <jpnurmi@qt.io>2017-03-27 14:51:18 +0200
committerJ-P Nurmi <jpnurmi@qt.io>2017-03-28 10:26:09 +0000
commit8397d9fc8c5d0b607c9ef6eb9791f8dbe6d97aa0 (patch)
treeda754f97e1773420927e82e07dc756da9ccd701c /examples
parent9c14ae7bbfdf04c111c973dfdfedf62af8641862 (diff)
Doc: update the Wearable Demo docs
The demo was originally written to become a Qt Quick demo. Focus on the QQC2 specifics now that it became a QQC2 demo instead. There were also some outdated references after being refactored a bit after the initial submission. Change-Id: I96ef3f4745a295b2d8ab12a30fcbdf41a2c50626 Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'examples')
-rw-r--r--examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc208
-rw-r--r--examples/quickcontrols2/wearable/wearable.cpp2
2 files changed, 111 insertions, 99 deletions
diff --git a/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc b/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
index 4ae3233c..b56b4c1d 100644
--- a/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
+++ b/examples/quickcontrols2/wearable/doc/src/qtquickcontrols2-wearable.qdoc
@@ -29,134 +29,144 @@
\example wearable
\title Qt Quick Controls 2 - Wearable Demo
\ingroup qtquickcontrols2-examples
- \brief A QML app using Qt Quick Controls 2 and demonstrating how to create a
- collection of wearable sub-apps using custom QML screens.
+ \brief Demonstrates an application launcher designed for wearable devices.
\image qtquickcontrols2-wearable.png
- The \e {Wearable} demo is a collection of sub-apps. Each sub-app is
- contained within its own .qml file, and integrated into \c LauncherMain.qml.
- The app demonstrates following \l {Qt Quick} features:
+ The \e {Wearable Demo} consists of an application launcher and a collection
+ of small and simple example applications aimed at wearable devices.
- \list
- \li Using custom types to create screens and screen controls.
- \li Using Qt Quick Controls 2 with namespace.
- \li Using layout components such as \l [QML] Column and \l [QML] Row
- \li Using XMLHttpRequest to load data from local files.
- \li Using PathView, \l [QML] Path, PathAttribute, and PathLine types to
- lay out UI elements.
- \endlist
-
- \section1 Creating the Main Window
+ \section1 Structure
- In \c wearable.qml, we use an ApplicationWindow to create the main application
- window:
+ The main .qml file \c wearable.qml consists of an ApplicationWindow, a StackView
+ for a stack-based navigation model, and buttons for interactive navigation.
\quotefromfile wearable/wearable.qml
- \skipto import "qml/Common"
- \printuntil visible
-
- This ApplicationWindow embeds a container that uses StackView for holding
- the launch screen for sub-apps. \c LauncherMain is an initial item on
- the stack view that represents Launcher sub-app. This \c MainContainer also
- has functionality to navigate back to home screen which is enabled when
- additional app screens are loaded in the StackView
-
- \quotefromfile wearable/qml/MainContainer.qml
- \skipto QQC2.StackView {
- \printuntil initialItem: LauncherMain {
-
- In LauncherMain, we use a ListModel type with \l ListElement types defined
- explicitly to hold information about the sub-apps:
- List elements are defined like other QML types except that they contain a
- collection of \e role definitions instead of properties. Roles define both
- how the data is accessed and include the data itself. For each list element,
- we use the \c icon role to specify the launch icon for the feature.
-
- \quotefromfile wearable/qml/LauncherMain.qml
- \skipto ListModel
- \printuntil page: "Settings/SettingsMain.qml"
+ \skipuntil import "qml/Style"
+ \printuntil id: window
+ \dots
+ \skipto header
+ \printuntil id: homeButton
+ \dots 8
+ \skipto onClicked
\printuntil }
+ \printuntil id: backButton
+ \dots 8
+ \skipto onClicked
+ \printuntil id: stackView
+ \dots 8
+ \skipuntil initialItem
+ \printuntil /^\}/
- \section1 Using Custom Types
+ \section1 Styling
- In the app, we use the following custom types that are each defined in a
- separate .qml file:
+ The demo uses a custom \l {Styling Qt Quick Controls 2}{Qt Quick Controls 2 style}
+ embedded into the demo's resources. Since the style is specific to this particular
+ demo, it only needs to implement a few controls. The style also provides a singleton
+ type that contains various styling attributes, such as fonts and colors.
\list
- \li \c WSlider.qml
- \li \c WSwitch.qml
+ \li \c qml/Style/PageIndicator.qml
+ \li \c qml/Style/Slider.qml
+ \li \c qml/Style/Switch.qml
+ \li \c qml/Style/UIStyle.qml
\endlist
- In each \c .qml file that uses the custom types, we add an import statement
- to include a directory called \e Common where the types are located:
+ The style is applied in \c main() in \c wearable.cpp:
- \quotefromfile wearable/qml/Settings/SettingsMain.qml
- \skipto Common
- \printuntil "
+ \snippet wearable/wearable.cpp style
- \section1 Main Screens for Sub-apps
+ The main benefit of using the built-in styling system is that the style selection
+ is fully transparent to the application code. There is no need to import a specific
+ folder that contains the styled controls. This way, the application can be run with
+ other styles too.
- In the demo, we use the following custom screen types that are each
- defined in a separate .qml file:
+ \section1 Custom Type
- \list
- \li \c AlarmsMain.qml
- \li \c FitnessMain.qml
- \li \c NavigationMain.qml
- \li \c NotificationsMain.qml
- \li \c SettingsMain.qml
- \li \c WatchFaceMain.qml
- \li \c WeatherMain.qml
- \li \c LauncherMain.qml
- \endlist
+ The demo application contains a custom button type implemented in \c qml/NaviButton.qml.
+ The navigation button is used as a home and back button in \c wearable.qml. \c NaviButton
+ extends the standard AbstractButton API with properties that control the slide in and slide
+ out transitions and the button image.
- Each sub-app also has its own JavaScript functions file that contains
- routines to help acquire data to be displayed on the screen. It also
- contains functions to help manipulate or convert the data. In some sub-apps
- data acquisition is implemented using XMLHttpRequest to read from local
- files. These files were generated by storing responses from remote servers
- in JSON format. This code can be easily modified to acquire data from remote
- servers.
- Sub-apps are implemented with an assumption of lack of any input capabilities
- of the device and they can be further enhanced based on what input methods
- or communication means are offered by the wearable device under consideration.
- Sub-apps use SwipeView as a container to display a set of pages within the
- app.
-
- \section1 Navigation App
-
- This sub-app displays a walking route from source to destination. This route
- is obtained as a response by invoking an API provided by
- \l {http://www.openstreetmap.org/}. The response is in JSON format and the
- corresponding JavaScript file associated with the app helps interpret the
- response. Currently, it is not possible to specify the source and destination
- from within the app but it can be easily added based on the device's
+ \quotefromfile wearable/qml/NaviButton.qml
+ \skipuntil import "Style"
+ \printuntil id: image
+ \dots 8
+ \skipuntil }
+ \printuntil background:
+ \dots 8
+ \skipto }
+ \printuntil /^\}/
+
+ \section1 Launcher Page
+
+ The application launcher, which is specified as the initial content above, is
+ implemented using a circular PathView in \c LauncherPage.qml. Each application is
+ contained within its own .qml file, which is listed in a ListModel on the launcher
+ page.
+
+ \quotefromfile wearable/qml/LauncherPage.qml
+ \skipto PathView
+ \printuntil signal launched
+ \dots
+ \skipto ListModel
+ \printuntil }
+ \dots 8
+ \printline ListElement
+ \skipto "Settings"
+ \printuntil delegate:
+ \dots 8
+ \skipto onClicked:
+ \printto path:
+ \dots
+ \skipto /^\}/
+ \printline }
+
+ \section1 Applications
+
+ The applications are designed for touch input based on what input methods
+ or communication means are typically offered by wearable devices.
+
+ Most applications have their own JavaScript files that act as dummy
+ application backends. They illustrate fetching external data and help
+ manipulating or converting the data. In the \c Navigation and \c Weather
+ applications, data acquisition is implemented using \l XMLHttpRequest to
+ read from local files. These files were generated by storing responses from
+ remote servers in JSON format. This code can be easily modified to acquire
+ data from real remote servers.
+
+ \section2 Navigation
+
+ This application displays a walking route from source to destination. This
+ route is obtained as a response by invoking an API provided by
+ \l {https://www.openstreetmap.org/}. The response is in JSON format and the
+ corresponding JavaScript file associated with the application helps interpret
+ the response. Currently, it is not possible to specify the source and destination
+ from within the application, but it can be easily added based on the device's
capabilities. For example, user input could be implemented as screens with
input fields, or can be communicated over Bluetooth/Wifi from a paired app
running on another device such as a smart phone or PC.
- \section1 Weather App
+ \section2 Weather
- This sub-app displays weather information for a day including temperature,
- sunrise-sunset info, air pressure, and so on. This information is obtained
+ This application displays weather information such as temperature, sunrise
+ and sunset times, air pressure, and so on. This information is obtained
as a response to invoking \l {https://openweathermap.org/}. The response is
- in JSON format and the corresponding JavaScript file associated
- with the app helps interpret the response. As with the Navigation sub-app
- this app can be modified by adding screens to accept location information to
- obtain weather data for a given location.
+ in JSON format and the corresponding JavaScript file associated with the
+ application helps interpret the response. As with the Navigation application,
+ this application can be modified by adding screens to accept location information
+ to obtain weather data for a given location.
- \section1 WatchFace App
+ \section2 World Clock
- This sub-app displays a world clock for different cities. As of now, the list
- of cities is hard-coded in the app but that can be changed based on the
- input capabilities of the device.
+ This application displays a world clock for different cities. As of now, the
+ list of cities is hard-coded in the application, but that can be changed based
+ on the input capabilities of the device.
- \section1 Other Sub-apps
+ \section2 Others
- Remaining sub-apps are implemented to return static data for now but they
- can be easily modified to process response data obtained from respective
- services.
+ The remaining applications return static data for now, but they can easily be
+ modified to process response data obtained from respective services.
\include examples-run.qdocinc
*/
diff --git a/examples/quickcontrols2/wearable/wearable.cpp b/examples/quickcontrols2/wearable/wearable.cpp
index 5f96caf4..c50c95c4 100644
--- a/examples/quickcontrols2/wearable/wearable.cpp
+++ b/examples/quickcontrols2/wearable/wearable.cpp
@@ -56,7 +56,9 @@ int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
+ //! [style]
QQuickStyle::setStyle(QStringLiteral("qrc:/qml/Style"));
+ //! [style]
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/wearable.qml")));