diff options
author | David Boddie <david.boddie@nokia.com> | 2011-05-11 15:35:46 (GMT) |
---|---|---|
committer | David Boddie <david.boddie@nokia.com> | 2011-05-11 15:35:46 (GMT) |
commit | 0d0165e5e2eac13ae298739d9b5baed1a5a24358 (patch) | |
tree | ca529e33887ce121856086625d8f2c91bb764b61 /doc/src/examples/orientation.qdoc | |
parent | 586258bfb520452860d8ff94c2db132d6ffd9e42 (diff) | |
download | Qt-0d0165e5e2eac13ae298739d9b5baed1a5a24358.zip Qt-0d0165e5e2eac13ae298739d9b5baed1a5a24358.tar.gz Qt-0d0165e5e2eac13ae298739d9b5baed1a5a24358.tar.bz2 |
Squashed commit of changes from the 4.8-temp branch.
Diffstat (limited to 'doc/src/examples/orientation.qdoc')
-rw-r--r-- | doc/src/examples/orientation.qdoc | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/doc/src/examples/orientation.qdoc b/doc/src/examples/orientation.qdoc new file mode 100644 index 0000000..cfe1757 --- /dev/null +++ b/doc/src/examples/orientation.qdoc @@ -0,0 +1,143 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:FDL$ +** Commercial Usage +** Licensees holding valid Qt Commercial licenses may use this file in +** accordance with the Qt Commercial License Agreement provided with the +** Software or, alternatively, in accordance with the terms contained in a +** written agreement between you and Nokia. +** +** GNU Free Documentation License +** Alternatively, this file may be used under the terms of the GNU Free +** Documentation License version 1.3 as published by the Free Software +** Foundation and appearing in the file included in the packaging of this +** file. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! \example widgets/orientation + \group all-examples + \title Orientation Example + + The example shows a simple way to use different UIs depending on the screen + orientation of a mobile device. + + \image orientation-landscape.png The UI in landscape mode + \image orientation-portrait.png The UI in portrait mode + + The screen on many mobile devices can be viewed in both portrait and + landscape orientation. The orientation can be swiched with the help of a + hardware or software trigger. Due to the often small physical screen size, + user interfaces has to be very simple and compact to stay usable, and + applications usually occupy the whole screen. Designing a user interface + that works equally well in both landscape and portrait mode is not always + possible, however, so making a different layout for each case usually pays + off. + + The example application makes use of two different UI widgets created with + the Qt Designer, one for portrait and one for landscape orientation. The + application has a widget that contains an image and the user is able to + select one of three images for it to show. In addition to the two UIs, the + application consists of a \c MainWindow class. + + \section1 Landscape UI + + If the screen is in landscape mode, the user probably holds the device with + both hands and is ready to give full attention to the application. The + landscape UI looks like this: + + \image orientation-landscape-ui.png The landscape UI + + To the left is a QWidget called \c choiceWidget, which will show the + current image, and to the right are three QRadioButton instances. The + active radio button specifies the image to show. + + \section1 Portrait UI + + When the device is in portrait mode, it usually means that the user holds + it with one hand, and can comfortably use the thumb for small amounts of + input. The layout is simpler, and is focused on consuming content. The + portrait UI looks like this: + + \image orientation-portrait-ui.png The portrait UI + + Similarly, it contains a QWidget, also called \c choiceWidget, that will + show the current image. In contrast to the landscape UI, this one doesn't + provide any controls to change the image. + + \section1 MainWindow Class Definition + + \c MainWindow inherits from QWidget and acts as the top level widget of the + application. + + \snippet examples/widgets/orientation/mainwindow.h 0 + + The \c resizeEvent() method is re-implemented, and used to check which + UI to show. The \c onRadioButtonClicked() slot is connected to the + landscape UI's radio button group and selects the current image. + + \c landscapeWidget and \c portraitWidget will contain the UI layouts. Only + one of them is visible at a time. + + \section1 MainWindow Class Implementation + + In the constructor, the widgets that will hold the UIs are created and set + up. + + \snippet examples/widgets/orientation/mainwindow.cpp 0 + + Since the exit buttons on the layouts are different from each other, both + of them have to have their \c clicked() signal connected to the \c close() + slot of the main widget. The first image is also made current with the call + to \c onRadioButtonClicked(). + + \snippet examples/widgets/orientation/mainwindow.cpp 1 + + On the Maemo platform, windows are stuck in landscape mode by default. The + application has to explicitly say that rotation is supported. + + \snippet examples/widgets/orientation/mainwindow.cpp 2 + + The \c resizeEvent() is called when the main window is first created, and + also whenever the window has been resized. If the window is shown in + full screen, this is an indication that the orientation of the screen has + changed. + + The dimensions of \c landscapeWidget is the transpose of the dimensions of + \c portraitWidget. When the orientation is known, both are set to the + (possibly transposed) size of the window. Depending on the orientation, one + widget is made visible and the other invisible. + + \snippet examples/widgets/orientation/mainwindow.cpp 3 + + When the user selects one of the radio buttons in the landscape UI, the + current image is changed. The image is displayed by specifying the + background style of the choice widget. Since both \c portrait and + \c landscape have a \c choiceWidget of their own, the change has to be + reflected in both instances. + + \snippet examples/widgets/orientation/mainwindow.cpp 4 + + Synchronizing both UIs like this might become unfeasible when there are + many things that can change. In that case it is better to make use of the + \l{Introduction to Model/View Programming}{Model-View-Controller pattern} + more extensively and share the content between both portrait and landscape + widgets. Then an interface for displaying and manipulating it can be tailor + made for both orientations. + + \section1 The \c main() Function + + The main function creates a \c MainWindow instance and shows it full + screen. + \snippet examples/widgets/orientation/main.cpp 0 +*/ |