Rotating QWidget based applications on MeeGo Harmattan - Revision history

Hamishwillee: Text replace - "`" to ""`


2012-10-11T01:13:34Z
Text replace - "<code cpp>" to "<code cpp-qt>"

			
			
			
			
		
		← Older revision
		Revision as of 01:13, 11 October 2012
		
Line 54:
Line 54:
  A MeeGo Components-based application is made up of a [Window] and some [Pages]. To rotate the application we need to paint the QWidget main view on the page. Therefore we have to "transform" the MainWindow widget into a QDeclarataiveItem as shown in the code below.   A MeeGo Components-based application is made up of a [Window] and some [Pages]. To rotate the application we need to paint the QWidget main view on the page. Therefore we have to "transform" the MainWindow widget into a QDeclarataiveItem as shown in the code below.
    
− <code cpp> + <code cpp-qt>
  ProxyWidget::ProxyWidget(QDeclarativeItem *parent) :   ProxyWidget::ProxyWidget(QDeclarativeItem *parent) :
       QDeclarativeItem(parent),        QDeclarativeItem(parent),
Line 76:
Line 76:
    
  The new object type is registered and available to the declarative view   The new object type is registered and available to the declarative view
− <code cpp> + <code cpp-qt>
    qmlRegisterType<ProxyWidget>("ProxyWidget", 1, 0, "ProxyWidgetItem");     qmlRegisterType<ProxyWidget>("ProxyWidget", 1, 0, "ProxyWidgetItem");
  </code>   </code>
Line 107:
Line 107:
  </code>   </code>
  This code is all you need to rotate the application; the line below can be removed from main.cpp, because it doesn't do anything.   This code is all you need to rotate the application; the line below can be removed from main.cpp, because it doesn't do anything.
− <code cpp> + <code cpp-qt>
  viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);   viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
  </code>   </code>
Line 134:
Line 134:
    
  In applications developed with Qt WebKit the virtual keyboard is not automatically hidden when it is unfocused. A workaround consists of adding an event filter to the affected view instance:     In applications developed with Qt WebKit the virtual keyboard is not automatically hidden when it is unfocused. A workaround consists of adding an event filter to the affected view instance:  
− <code cpp> + <code cpp-qt>
  class EventFilter : public QObject     class EventFilter : public QObject  
  {        {     
Line 158:
Line 158:
    </code>     </code>
  This filter can be installed on a QGraphicsView or (in QML) on a {{Icode|QDeclarativeView}} instance:     This filter can be installed on a QGraphicsView or (in QML) on a {{Icode|QDeclarativeView}} instance:  
− <code cpp> + <code cpp-qt>
  EventFilter ef;     EventFilter ef;  
  view.installEventFilter(&ef);     view.installEventFilter(&ef);  
  </code>   </code>



Hamishwillee: moved Rotating QWidget-based applications to Rotating QWidget based applications on MeeGo Harmattan: This is meego specific
2012-06-18T23:17:18Z
moved Rotating QWidget-based applications to Rotating QWidget based applications on MeeGo Harmattan: This is meego specific

		
		← Older revision
		Revision as of 23:17, 18 June 2012
		


Hamishwillee: Hamishwillee - Tidy wiki text
2012-06-18T00:43:38Z
Hamishwillee - Tidy wiki text

			
			
			
			
		
		← Older revision
		Revision as of 00:43, 18 June 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:MeeGo Harmattan]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:MeeGo Harmattan]][[Category:Qt Quick]] + [[Category:Qt]][[Category:MeeGo Harmattan]][[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Qt C++ UI]][[Category:UI]]
− {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }} + {{Abstract|This article explains how to rotate {{Qapiname|QWidget}}-based applications on MeeGo Harmattan. This useful when porting apps from desktop if you don't want to re-write the UI in QML.}}
  {{ArticleMetaData   {{ArticleMetaData
  |sourcecode= [https://gitorious.org/harmattanwidgetproxy/harmattanwidgetproxy/archive-tarball/master CannedSolution.tgz]   |sourcecode= [https://gitorious.org/harmattanwidgetproxy/harmattanwidgetproxy/archive-tarball/master CannedSolution.tgz]
Line 19:
Line 19:
    
  MeeGo 1.2 Harmattan, Nokia's latest platform in the market, offers to application developers a set of QML Components which can be used to design amazing interfaces where touch input, fluid animations and user experience are crucial.   MeeGo 1.2 Harmattan, Nokia's latest platform in the market, offers to application developers a set of QML Components which can be used to design amazing interfaces where touch input, fluid animations and user experience are crucial.
  + 
  QML Components have been optimized to squeeze out all the GPU power, providing developers with an easy way of coding which doesn't cause performance loss as QWidget sometimes does.   QML Components have been optimized to squeeze out all the GPU power, providing developers with an easy way of coding which doesn't cause performance loss as QWidget sometimes does.
  For this and other reasons Harmattan doesn't support QWidgets. Porting a Symbian or Maemo QWidget-based application to the new platform requires the re-writing of the entire UI.   For this and other reasons Harmattan doesn't support QWidgets. Porting a Symbian or Maemo QWidget-based application to the new platform requires the re-writing of the entire UI.
  Writing a UI with QML is much easier than with QWidget and the porting doesn't really take so much time.   Writing a UI with QML is much easier than with QWidget and the porting doesn't really take so much time.
  + 
  However, some developers don't really want to spend time on QML and they want to run the app on MeeGo as it is.   However, some developers don't really want to spend time on QML and they want to run the app on MeeGo as it is.
    
Line 32:
Line 34:
  == Why don't QWidget-based apps rotate on Harmattan? ==   == Why don't QWidget-based apps rotate on Harmattan? ==
  A mobile application can be locked in landscape or potrait or even be left free to change according to the device orientation value provided by the accelerometer sensor.   A mobile application can be locked in landscape or potrait or even be left free to change according to the device orientation value provided by the accelerometer sensor.
− QWidget class provides a setAttribute method that was largely used on Symbian and Maemo to set the application orientation. +  
− QWidget::setAttribute(orientation) on Harmattan doesn't work anymore because X11 server has been built without RandR extension ( [http://en.wikipedia.org/wiki/RandR X Resize, Rotate and Reflect] ). This means that the screen cannot rotate anymore and therefore it is the application itself which has to rotate. + {{Icode|QWidget}} class provides a {{Icode|setAttribute()}} method that was largely used on Symbian and Maemo to set the application orientation.
  + {{Icode|QWidget::setAttribute(orientation)}} on Harmattan doesn't work anymore because X11 server has been built without RandR extension ( [http://en.wikipedia.org/wiki/RandR X Resize, Rotate and Reflect] ). This means that the screen cannot rotate anymore and therefore it is the application itself which has to rotate.
  +  
  This is an important feature, allowing MeeGo to have a fancy and smooth transition effect when an application switches from one orientation mode to another.   This is an important feature, allowing MeeGo to have a fancy and smooth transition effect when an application switches from one orientation mode to another.
    
  == How to work around this problem ==   == How to work around this problem ==
− In order to make the application work in portrait mode QWidgets need to be rotated. Unfortuantely QWidgets, originally designed for Desktop, are not able to rotate. + In order to make the application work in portrait mode QWidgets need to be rotated. Unfortuantely {{Icode|QWidget}}s, originally designed for desktop, are not able to rotate.
− The only way to rotate a QWidget is to paint it in a canvas and rotate it. Qt canvas is called QGraphicsScene. The scene is displayed to the user by a QGraphicsView and the items in the QGraphicsScene are QGraphicsItems. + The only way to rotate a {{Icode|QWidget}} is to paint it in a canvas and rotate it. Qt canvas is called {{Qapiname|QGraphicsScene}}. The scene is displayed to the user by a {{Qapiname|QGraphicsView}} and the items in the {{Icode|QGraphicsScene}} are {{Qapiname|QGraphicsItems}}.
− In order to paint a QWidget in a QGraphicsScene we need a [http://doc.qt.nokia.com/latest/qgraphicsproxywidget.html QGraphicsProxyWidget]. + 
− The easiest solution to rotate the app would be to paint the main window on QGraphicsScene and then rotate the scene. Unfortunately this is not really the best solution because developers would need to write the animation code of the transition between the two orientation modes and to adapt the application so that it displays the system bar on the top part of the screen. + 
−   + 
− A better option would be to transform the QWidget graphics item into a QML element. + 
    
  + In order to paint a {{Icode|QWidget}} in a QGraphicsScene we need a [http://doc.qt.nokia.com/latest/qgraphicsproxywidget.html QGraphicsProxyWidget].
  + The easiest solution to rotate the app would be to paint the main window on {{Icode|QGraphicsScene}} and then rotate the scene. Unfortunately this is not really the best solution because developers would need to write the animation code of the transition between the two orientation modes and to adapt the application so that it displays the system bar on the top part of the screen.
    
  + A better option would be to transform the {{Icode|QWidget}} graphics item into a QML element.
    
  == The solution: "Embedding" a QWidget in a MeeGo Components-based application==   == The solution: "Embedding" a QWidget in a MeeGo Components-based application==
  As we said before, MeeGo applications use MeeGo QML components.   As we said before, MeeGo applications use MeeGo QML components.
  + 
  A MeeGo Components-based application is made up of a [Window] and some [Pages]. To rotate the application we need to paint the QWidget main view on the page. Therefore we have to "transform" the MainWindow widget into a QDeclarataiveItem as shown in the code below.   A MeeGo Components-based application is made up of a [Window] and some [Pages]. To rotate the application we need to paint the QWidget main view on the page. Therefore we have to "transform" the MainWindow widget into a QDeclarataiveItem as shown in the code below.
    
Line 117:
Line 121:
  == Canned Solution ==   == Canned Solution ==
  To make it easier for you, I made a template which you could re-use.     To make it easier for you, I made a template which you could re-use.  
  + 
  Step-by-step instructions are available [https://gitorious.org/harmattanwidgetproxy/harmattanwidgetproxy/blobs/master/qmlproxy/README here].   Step-by-step instructions are available [https://gitorious.org/harmattanwidgetproxy/harmattanwidgetproxy/blobs/master/qmlproxy/README here].
  The code is divided into 2 parts: the first one contains the procedure described previously and the second one should contain the code of your application. This code is built as static library and its main widget is used by the proxy widget described before.   The code is divided into 2 parts: the first one contains the procedure described previously and the second one should contain the code of your application. This code is built as static library and its main widget is used by the proxy widget described before.
Line 122:
Line 127:
  == Limitations ==   == Limitations ==
  The main limitations of this solution are:   The main limitations of this solution are:
− * QTreeWidget::setItemWidget doesn't work as expected: the bug has been reported [https://bugreports.qt.nokia.com/browse/QTBUG-12253 here]. + * {{Qapiname|QTreeWidget::setItemWidget()}} doesn't work as expected: the bug has been reported [https://bugreports.qt.nokia.com/browse/QTBUG-12253 here].
  * QDialogs should not be used.   * QDialogs should not be used.
  * Rotation doesn't really work on the Qt SDK Simulator.     * Rotation doesn't really work on the Qt SDK Simulator.  
Line 128:
Line 133:
  * The virtual keyboard cannot be closed by tapping outside the text field (QLineEdit): The following code snippet fix this problem too.     * The virtual keyboard cannot be closed by tapping outside the text field (QLineEdit): The following code snippet fix this problem too.  
    
  + In applications developed with Qt WebKit the virtual keyboard is not automatically hidden when it is unfocused. A workaround consists of adding an event filter to the affected view instance: 
  <code cpp>   <code cpp>
− In applications developed with Qt WebKit the virtual keyboard is not   
− automatically hidden when it is unfocused. A workaround consists of   
− adding an event filter to the affected view instance:  
−   
  class EventFilter : public QObject     class EventFilter : public QObject  
  {        {     
Line 154:
Line 156:
       QWidget *prevFocusWidget;          QWidget *prevFocusWidget;  
  };     };  
−     +   </code>
− This filter can be installed on a QGraphicsView or (in QML) on a   + This filter can be installed on a QGraphicsView or (in QML) on a {{Icode|QDeclarativeView}} instance:  
− QDeclarativeView instance:   + <code cpp>
−  + 
  EventFilter ef;     EventFilter ef;  
  view.installEventFilter(&ef);     view.installEventFilter(&ef);  
−  
  </code>   </code>




ArpStorm: ArpStorm -
2012-06-15T12:05:29Z
ArpStorm -

			
			
			
			
		
		← Older revision
		Revision as of 12:05, 15 June 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:MeeGo Harmattan]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo Harmattan]][[Category:Qt Quick]] + [[Category:Qt]][[Category:MeeGo Harmattan]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:MeeGo Harmattan]][[Category:Qt Quick]]
  {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}   {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}
  {{ArticleMetaData   {{ArticleMetaData




Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"
2012-06-13T10:58:05Z
Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

			
			
			
			
		
		← Older revision
		Revision as of 10:58, 13 June 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]] + [[Category:Qt]][[Category:MeeGo Harmattan]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo Harmattan]][[Category:Qt Quick]]
  {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}   {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}
  {{ArticleMetaData   {{ArticleMetaData



Gnuton: Gnuton -
2012-03-22T06:30:17Z
Gnuton -

			
			
			
			
		
		← Older revision
		Revision as of 06:30, 22 March 2012
		
Line 1:
Line 1:
− [[Category:Qt]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]] + [[Category:Qt]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]]
  {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}   {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}
  {{ArticleMetaData   {{ArticleMetaData




Gnuton: Gnuton -
2012-01-11T19:04:14Z
Gnuton -

			
			
			
			
		
		← Older revision
		Revision as of 19:04, 11 January 2012
		
Line 1:
Line 1:
− [[Category:Draft]][[Category:Qt]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]] + [[Category:Qt]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]]
  {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}   {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}
  {{ArticleMetaData   {{ArticleMetaData




Gnuton: Gnuton - /* The solution: "Embedding" a QWidget in a MeeGo Components-based application */
2011-12-02T09:20:19Z
Gnuton - - The solution: "Embedding" a QWidget in a MeeGo Components-based application

			
			
			
			
		
		← Older revision
		Revision as of 09:20, 2 December 2011
		
Line 112:
Line 112:
       orientationLock: PageOrientation.LockPortrait        orientationLock: PageOrientation.LockPortrait
  </code>   </code>
  + 
  + More information about controlling rotation is available at [http://harmattan-dev.nokia.com/docs/library/html/guide/html/Developer_Library_Developing_for_Harmattan_Controlling_rotation.html this page].
    
  == Canned Solution ==   == Canned Solution ==



Hamishwillee: Hamishwillee - Fix up typo
2011-12-01T22:29:36Z
Hamishwillee - Fix up typo

			
			
			
			
		
		← Older revision
		Revision as of 22:29, 1 December 2011
		
Line 1:
Line 1:
− [[Category:Draft]] + [[Category:Draft]][[Category:Qt]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]][[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]]
− {{Abstract|This article explains how to rotate QtWidget-based applications on Harmattan... }} + {{Abstract|This article explains how to rotate QtWidget-based applications on MeeGo Harmattan. }}
−   + 
  {{ArticleMetaData   {{ArticleMetaData
  |sourcecode= [https://gitorious.org/harmattanwidgetproxy/harmattanwidgetproxy/archive-tarball/master CannedSolution.tgz]   |sourcecode= [https://gitorious.org/harmattanwidgetproxy/harmattanwidgetproxy/archive-tarball/master CannedSolution.tgz]
−  
  |devices= Nokia N9, Nokia N950   |devices= Nokia N9, Nokia N950
  |sdk= [http://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Nokia Qt SDK 1.1.3 or above]   |sdk= [http://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Nokia Qt SDK 1.1.3 or above]
Line 13:
Line 11:
  |update-by=<!-- After significant update: [[User:username]]-->   |update-by=<!-- After significant update: [[User:username]]-->
  |update-timestamp=<!-- After significant update: YYYYMMDD -->   |update-timestamp=<!-- After significant update: YYYYMMDD -->
− |creationdate= <!-- Format YYYYMMDD --> + |creationdate=20111024
  |author= [[User:gnuton]]   |author= [[User:gnuton]]
  }}   }}
    
  == Introduction ==   == Introduction ==
− Qt is a framework used to develop application software with a graphical user interface (GUI). It allows developers to write the application GUI using QWidget(pure C++), QtComponents(C++/QML/JS) or HTML(C++/HTML/JS). + Qt is a framework used to develop application software with a graphical user interface (GUI). It allows developers to write the application GUI using QWidget (pure C++), QtComponents (C++/QML/JS) or HTML(C++/HTML/JS).
    
  MeeGo 1.2 Harmattan, Nokia's latest platform in the market, offers to application developers a set of QML Components which can be used to design amazing interfaces where touch input, fluid animations and user experience are crucial.   MeeGo 1.2 Harmattan, Nokia's latest platform in the market, offers to application developers a set of QML Components which can be used to design amazing interfaces where touch input, fluid animations and user experience are crucial.
Line 46:
Line 44:
  A better option would be to transform the QWidget graphics item into a QML element.   A better option would be to transform the QWidget graphics item into a QML element.
    
− [[Category:Qt]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]] +  
− [[Category:Qt]][[Category:Qt Mobility]][[Category:Draft]][[Category:MeeGo]][[Category:Qt Quick]] +  
  == The solution: "Embedding" a QWidget in a MeeGo Components-based application==   == The solution: "Embedding" a QWidget in a MeeGo Components-based application==
  As we said before, MeeGo applications use MeeGo QML components.   As we said before, MeeGo applications use MeeGo QML components.
Line 104:
Line 102:
  }   }
  </code>   </code>
− This code is all you need to rotate the application, so the line below can be removed from the main.cpp, because useless + This code is all you need to rotate the application; the line below can be removed from main.cpp, because it doesn't do anything.
  <code cpp>   <code cpp>
  viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);   viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);



Gnuton: Gnuton - /* The solution: "Embedding" a QWidget in a MeeGo Components-based application */
2011-12-01T16:27:21Z
Gnuton - - The solution: "Embedding" a QWidget in a MeeGo Components-based application

			
			
			
			
		
		← Older revision
		Revision as of 16:27, 1 December 2011
		
Line 104:
Line 104:
  }   }
  </code>   </code>
− This code is all you need to rotate the application, so the line below can be removed from the main.cpp   + This code is all you need to rotate the application, so the line below can be removed from the main.cpp, because useless
−   + 
  <code cpp>   <code cpp>
  viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);   viewer->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
  + </code>
  + 
  + In case you want to lock your app in portrait mode  you need to set orientationLock property of the Page element to PageOrientation.LockPortrait as follow
  + <code javascript>
  + Page {
  +     orientationLock: PageOrientation.LockPortrait
  </code>   </code>

Rotating QWidget based applications on MeeGo Harmattan - Revision history

Hamishwillee: Text replace - "" to ""

Hamishwillee: moved Rotating QWidget-based applications to Rotating QWidget based applications on MeeGo Harmattan: This is meego specific

Hamishwillee: Hamishwillee - Tidy wiki text

ArpStorm: ArpStorm -

Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

Gnuton: Gnuton -

Gnuton: Gnuton -

Gnuton: Gnuton - /* The solution: "Embedding" a QWidget in a MeeGo Components-based application */

Hamishwillee: Hamishwillee - Fix up typo

Gnuton: Gnuton - /* The solution: "Embedding" a QWidget in a MeeGo Components-based application */

Hamishwillee: Text replace - "`" to ""`