<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- orientation.qdoc -->
<title>Qt 4.8: Orientation Example</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Orientation Example</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#landscape-ui">Landscape UI</a></li>
<li class="level1"><a href="#portrait-ui">Portrait UI</a></li>
<li class="level1"><a href="#mainwindow-class-definition">MainWindow Class Definition</a></li>
<li class="level1"><a href="#mainwindow-class-implementation">MainWindow Class Implementation</a></li>
<li class="level1"><a href="#the-function">The <tt>main()</tt> Function</a></li>
</ul>
</div>
<h1 class="title">Orientation Example</h1>
<span class="subtitle"></span>
<!-- $$$widgets/orientation-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="widgets-orientation-landscape-ui.html">widgets/orientation/landscape.ui</a></li>
<li><a href="widgets-orientation-mainwindow-cpp.html">widgets/orientation/mainwindow.cpp</a></li>
<li><a href="widgets-orientation-mainwindow-h.html">widgets/orientation/mainwindow.h</a></li>
<li><a href="widgets-orientation-portrait-ui.html">widgets/orientation/portrait.ui</a></li>
<li><a href="widgets-orientation-main-cpp.html">widgets/orientation/main.cpp</a></li>
<li><a href="widgets-orientation-images-qrc.html">widgets/orientation/images.qrc</a></li>
<li><a href="widgets-orientation-orientation-pro.html">widgets/orientation/orientation.pro</a></li>
</ul>
<p>The Orientation example shows a simple way to use different UIs depending on the screen orientation of a mobile device.<p class="centerAlign"><img src="images/orientation-landscape.png" alt="The UI in landscape mode" /></p><p class="centerAlign"><img src="images/orientation-portrait.png" alt="The UI in portrait mode" /></p><p>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.</p>
<p>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 <tt>MainWindow</tt> class.</p>
<a name="landscape-ui"></a>
<h2>Landscape UI</h2>
<p>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:</p>
<p class="centerAlign"><img src="images/orientation-landscape-ui.png" alt="The landscape UI" /></p><p>To the left is a <a href="qwidget.html">QWidget</a> called <tt>choiceWidget</tt>, which will show the current image, and to the right are three <a href="qradiobutton.html">QRadioButton</a> instances. The active radio button specifies the image to show.</p>
<a name="portrait-ui"></a>
<h2>Portrait UI</h2>
<p>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:</p>
<p class="centerAlign"><img src="images/orientation-portrait-ui.png" alt="The portrait UI" /></p><p>Similarly, it contains a <a href="qwidget.html">QWidget</a>, also called <tt>choiceWidget</tt>, that will show the current image. In contrast to the landscape UI, this one doesn't provide any controls to change the image.</p>
<a name="mainwindow-class-definition"></a>
<h2>MainWindow Class Definition</h2>
<p><tt>MainWindow</tt> inherits from <a href="qwidget.html">QWidget</a> and acts as the top level widget of the application.</p>
<pre class="cpp"> <span class="keyword">class</span> MainWindow : <span class="keyword">public</span> <span class="type"><a href="qwidget.html">QWidget</a></span>
{
Q_OBJECT
<span class="keyword">public</span>:
MainWindow(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent <span class="operator">=</span> <span class="number">0</span>);
<span class="keyword">protected</span>:
<span class="type">void</span> resizeEvent(<span class="type"><a href="qresizeevent.html">QResizeEvent</a></span> <span class="operator">*</span>event);
<span class="keyword">private</span> <span class="keyword">slots</span>:
<span class="type">void</span> onRadioButtonClicked(<span class="type"><a href="qabstractbutton.html">QAbstractButton</a></span> <span class="operator">*</span>button);
<span class="keyword">private</span>:
Ui<span class="operator">::</span>LandscapeUI landscape;
Ui<span class="operator">::</span>PortraitUI portrait;
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>landscapeWidget;
<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>portraitWidget;
};</pre>
<p>The <tt>resizeEvent()</tt> method is re-implemented, and used to check which UI to show. The <tt>onRadioButtonClicked()</tt> slot is connected to the landscape UI's radio button group and selects the current image.</p>
<p><tt>landscapeWidget</tt> and <tt>portraitWidget</tt> will contain the UI layouts. Only one of them is visible at a time.</p>
<a name="mainwindow-class-implementation"></a>
<h2>MainWindow Class Implementation</h2>
<p>In the constructor, the widgets that will hold the UIs are created and set up.</p>
<pre class="cpp"> MainWindow<span class="operator">::</span>MainWindow(<span class="type"><a href="qwidget.html">QWidget</a></span> <span class="operator">*</span>parent) :
<span class="type"><a href="qwidget.html">QWidget</a></span>(parent)<span class="operator">,</span>
landscapeWidget(<span class="number">0</span>)<span class="operator">,</span>
portraitWidget(<span class="number">0</span>)
{
landscapeWidget <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwidget.html">QWidget</a></span>(<span class="keyword">this</span>);
landscape<span class="operator">.</span>setupUi(landscapeWidget);
portraitWidget <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qwidget.html">QWidget</a></span>(<span class="keyword">this</span>);
portrait<span class="operator">.</span>setupUi(portraitWidget);</pre>
<p>Since the exit buttons on the layouts are different from each other, both of them have to have their <tt>clicked()</tt> signal connected to the <tt>close()</tt> slot of the main widget. The first image is also made current with the call to <tt>onRadioButtonClicked()</tt>.</p>
<pre class="cpp"> connect(portrait<span class="operator">.</span>exitButton<span class="operator">,</span> SIGNAL(clicked())<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(close()));
connect(landscape<span class="operator">.</span>exitButton<span class="operator">,</span> SIGNAL(clicked())<span class="operator">,</span> <span class="keyword">this</span><span class="operator">,</span> SLOT(close()));
connect(landscape<span class="operator">.</span>buttonGroup<span class="operator">,</span> SIGNAL(buttonClicked(<span class="type"><a href="qabstractbutton.html">QAbstractButton</a></span><span class="operator">*</span>))<span class="operator">,</span>
<span class="keyword">this</span><span class="operator">,</span> SLOT(onRadioButtonClicked(<span class="type"><a href="qabstractbutton.html">QAbstractButton</a></span><span class="operator">*</span>)));
landscape<span class="operator">.</span>radioAButton<span class="operator">-</span><span class="operator">></span>setChecked(<span class="keyword">true</span>);
onRadioButtonClicked(landscape<span class="operator">.</span>radioAButton);</pre>
<p>On the Maemo platform, windows are stuck in landscape mode by default. The application has to explicitly say that rotation is supported.</p>
<pre class="cpp"> <span class="preprocessor">#ifdef Q_WS_MAEMO_5</span>
setAttribute(<span class="type"><a href="qt.html">Qt</a></span><span class="operator">::</span>WA_Maemo5AutoOrientation<span class="operator">,</span> <span class="keyword">true</span>);
<span class="preprocessor">#endif</span>
}</pre>
<p>The <tt>resizeEvent()</tt> 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.</p>
<p>The dimensions of <tt>landscapeWidget</tt> is the transpose of the dimensions of <tt>portraitWidget</tt>. 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.</p>
<pre class="cpp"> <span class="type">void</span> MainWindow<span class="operator">::</span>resizeEvent(<span class="type"><a href="qresizeevent.html">QResizeEvent</a></span> <span class="operator">*</span>event)
{
<span class="type"><a href="qsize.html">QSize</a></span> size <span class="operator">=</span> event<span class="operator">-</span><span class="operator">></span>size();
<span class="type">bool</span> isLandscape <span class="operator">=</span> size<span class="operator">.</span>width() <span class="operator">></span> size<span class="operator">.</span>height();
<span class="keyword">if</span> (<span class="operator">!</span>isLandscape)
size<span class="operator">.</span>transpose();
landscapeWidget<span class="operator">-</span><span class="operator">></span>setFixedSize(size);
size<span class="operator">.</span>transpose();
portraitWidget<span class="operator">-</span><span class="operator">></span>setFixedSize(size);
landscapeWidget<span class="operator">-</span><span class="operator">></span>setVisible(isLandscape);
portraitWidget<span class="operator">-</span><span class="operator">></span>setVisible(<span class="operator">!</span>isLandscape);
}</pre>
<p>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 <tt>portrait</tt> and <tt>landscape</tt> have a <tt>choiceWidget</tt> of their own, the change has to be reflected in both instances.</p>
<pre class="cpp"> <span class="type">void</span> MainWindow<span class="operator">::</span>onRadioButtonClicked(<span class="type"><a href="qabstractbutton.html">QAbstractButton</a></span> <span class="operator">*</span>button)
{
<span class="type"><a href="qstring.html">QString</a></span> styleTemplate <span class="operator">=</span> <span class="string">"background-image: url(:/image_%1.png);"</span>
<span class="string">"background-repeat: no-repeat;"</span>
<span class="string">"background-position: center center"</span>;
<span class="type"><a href="qstring.html">QString</a></span> imageStyle(<span class="string">""</span>);
<span class="keyword">if</span> (button <span class="operator">=</span><span class="operator">=</span> landscape<span class="operator">.</span>radioAButton)
imageStyle <span class="operator">=</span> styleTemplate<span class="operator">.</span>arg(<span class="string">"a"</span>);
<span class="keyword">else</span> <span class="keyword">if</span> (button <span class="operator">=</span><span class="operator">=</span> landscape<span class="operator">.</span>radioBButton)
imageStyle <span class="operator">=</span> styleTemplate<span class="operator">.</span>arg(<span class="string">"b"</span>);
<span class="keyword">else</span> <span class="keyword">if</span> (button <span class="operator">=</span><span class="operator">=</span> landscape<span class="operator">.</span>radioCButton)
imageStyle <span class="operator">=</span> styleTemplate<span class="operator">.</span>arg(<span class="string">"c"</span>);
portrait<span class="operator">.</span>choiceWidget<span class="operator">-</span><span class="operator">></span>setStyleSheet(imageStyle);
landscape<span class="operator">.</span>choiceWidget<span class="operator">-</span><span class="operator">></span>setStyleSheet(imageStyle);
}</pre>
<p>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 <a href="model-view-programming.html#introduction-to-model-view-programming">Model-View-Controller pattern</a> 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.</p>
<a name="the-function"></a>
<h2>The <tt>main()</tt> Function</h2>
<p>The main function creates a <tt>MainWindow</tt> instance and shows it full screen.</p>
<pre class="cpp"> <span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span>argv<span class="operator">[</span><span class="operator">]</span>)
{
<span class="type"><a href="qapplication.html">QApplication</a></span> a(argc<span class="operator">,</span> argv);
MainWindow w;
w<span class="operator">.</span>showFullScreen();
<span class="keyword">return</span> a<span class="operator">.</span>exec();
}</pre>
</div>
<!-- @@@widgets/orientation -->
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Digia, Qt and their respective logos are trademarks of Digia Plc
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
