Basic UI Components for Qt and WP7 - Revision history

Hamishwillee: Text replace - "[[Category:Silverlight" to "[[Category:XAML"

2013-04-10T01:27:03Z

Text replace - "[[Category:Silverlight" to "[[Category:XAML"

Hamishwillee: Hamishwillee - Addition to article of: Category:Windows Phone 7.5

2012-11-30T05:18:53Z

Hamishwillee - Addition to article of: Category:Windows Phone 7.5

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


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

			
			
			
			
		
		← Older revision
		Revision as of 01:20, 11 October 2012
		
Line 81:
Line 81:
  ===Qt Project===   ===Qt Project===
  This is the Menu Item that has been added to the Application Menu Bar, which can be used for accessing particular function.     This is the Menu Item that has been added to the Application Menu Bar, which can be used for accessing particular function.  
− <code cpp>   + <code cpp-qt>  
       //menu items        //menu items
       Menu {        Menu {
Line 141:
Line 141:
  Text file is used to get text from user input.When user clicks on the text filed area, virtual keyboard pops up and allows user to edit text on it. This is a single line of editable plain text.     Text file is used to get text from user input.When user clicks on the text filed area, virtual keyboard pops up and allows user to edit text on it. This is a single line of editable plain text.  
  ===Qt project===   ===Qt project===
− <code cpp> + <code cpp-qt>
  // text box   // text box
       TextField {        TextField {
Line 162:
Line 162:
    
  ===Qt project===   ===Qt project===
− <code cpp> + <code cpp-qt>
  ProgressBar {   ProgressBar {
           anchors.top:textField.bottom            anchors.top:textField.bottom



Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"
2012-06-13T10:51:27Z
Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

			
			
			
			
		
		← Older revision
		Revision as of 10:51, 13 June 2012
		
Line 1:
Line 1:
− [[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]][[Category:MeeGo]][[Category:Symbian]][[Category:Silverlight]] + [[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Silverlight]]
  {{Abstract|This article demonstrates how to create some basic UI components, including menus, toolbars, buttons, progress bars, checkboxes, etc., in both Qt and WP7.}}   {{Abstract|This article demonstrates how to create some basic UI components, including menus, toolbars, buttons, progress bars, checkboxes, etc., in both Qt and WP7.}}
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->



Pooja 1650: Pooja 1650 - /* Application Menu Item */
2012-06-11T07:23:46Z
Pooja 1650 - - Application Menu Item

			
			
			
			
		
		← Older revision
		Revision as of 07:23, 11 June 2012
		
Line 78:
Line 78:
    
  ==Application Menu Item==   ==Application Menu Item==
− In addition to the icons in the Menu Bar we can also add text-based menu items. This menu items are displays in a list view.    + In addition to the icons in the Menu Bar we can also add text-based menu items. These menu items are displayed in a list view.   
  ===Qt Project===   ===Qt Project===
  This is the Menu Item that has been added to the Application Menu Bar, which can be used for accessing particular function.     This is the Menu Item that has been added to the Application Menu Bar, which can be used for accessing particular function.  




Pooja 1650: Pooja 1650 - /* Introduction */
2012-06-11T07:22:23Z
Pooja 1650 - - Introduction

			
			
			
			
		
		← Older revision
		Revision as of 07:22, 11 June 2012
		
Line 27:
Line 27:
  This article shows how to create some of the basic UI components in both Qt and WP7. It is intended primarily for developers who are familiar with Qt and want to start learning Windows Phone 7.   This article shows how to create some of the basic UI components in both Qt and WP7. It is intended primarily for developers who are familiar with Qt and want to start learning Windows Phone 7.
    
− The UI elements that we demonstrate in Qt are {{Icode|TextBox}}, {{Icode|ProgressBar}}, {{Icode|Button}}, {{Icode|RadioButton}}, {{Icode|CheckBox}}, {{Icode|MenuBar}}. Once we are done with each component in Qt we show how to create create the same UI elements for Windows Phone 7 using XAML.    + The UI elements that we demonstrate in Qt are {{Icode|TextBox}}, {{Icode|ProgressBar}}, {{Icode|Button}}, {{Icode|RadioButton}}, {{Icode|CheckBox}}, {{Icode|MenuBar}}. Once we are done with each component in Qt we show how to create the same UI elements for Windows Phone 7 using XAML.     
−  + 
  <gallery widths=200px heights=400px>   <gallery widths=200px heights=400px>
  File:UIComponentQt.png|Qt UI Components     File:UIComponentQt.png|Qt UI Components  
  File:UIComponentWP7.png|WP7 UI Components   File:UIComponentWP7.png|WP7 UI Components
  </gallery>   </gallery>
−  +  
  ==Implementation==     ==Implementation==  
    



Hamishwillee: Hamishwillee - Tidy wiki text. Fix categories
2012-04-26T06:21:22Z
Hamishwillee - Tidy wiki text. Fix categories

			
			
			
			
		
		← Older revision
		Revision as of 06:21, 26 April 2012
		
Line 1:
Line 1:
− [[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]] + [[Category:Windows Phone]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]][[Category:MeeGo]][[Category:Symbian]][[Category:Silverlight]]
− {{Abstract|This article demonstrates how to create some basic UI components in both Qt and WP7}} + {{Abstract|This article demonstrates how to create some basic UI components, including menus, toolbars, buttons, progress bars, checkboxes, etc., in both Qt and WP7.}}
  {{ArticleMetaData <!-- v1.2 -->   {{ArticleMetaData <!-- v1.2 -->
  |sourcecode= [[Media:UIComponentWP7.zip]] [[Media:UIComponentQt.zip]]     |sourcecode= [[Media:UIComponentWP7.zip]] [[Media:UIComponentQt.zip]]  
Line 20:
Line 20:
  |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= 17th October,2011<!-- Format YYYYMMDD --> + |creationdate= 20111017
  |author= [[User:Somnathbanik]]   |author= [[User:Somnathbanik]]
  }}   }}
    
  ==Introduction==   ==Introduction==
− This article is basically who are familiar in Qt and wants to starts WP7. Here we will see how to create some of the basic UI components in both Qt and WP7. We will focus on Qt UI and will create the same on WP7.  + This article shows how to create some of the basic UI components in both Qt and WP7. It is intended primarily for developers who are familiar with Qt and want to start learning Windows Phone 7.
−  + 
    
− {| class="wikitable" + The UI elements that we demonstrate in Qt are {{Icode|TextBox}}, {{Icode|ProgressBar}}, {{Icode|Button}}, {{Icode|RadioButton}}, {{Icode|CheckBox}}, {{Icode|MenuBar}}. Once we are done with each component in Qt we show how to create create the same UI elements for Windows Phone 7 using XAML.    
− |- + 
− ! Qt !! Windows Phone + 
− |- + 
− |   + 
− [[File: UIComponentQt.png|thumb|201px|none| Qt UI Components ]] + 
− || + 
− [[File: UIComponentWP7.png|thumb|201px|none| WP7 UI Components ]] + 
           
− |- + <gallery widths=200px heights=400px>
− | Example of Qt || Example of WP + File:UIComponentQt.png|Qt UI Components 
− |} + File:UIComponentWP7.png|WP7 UI Components
−   + </gallery>
− ==Basic Idea== + 
− First we will create few UI components in Qt project and will try to make the same for WP7. The UI element that we will use in Qt are {{Icode|TextBox}}, {{Icode|ProgressBar}}, {{Icode|Button}}, {{Icode|RadioButton}}, {{Icode|CheckBox}}, {{Icode|MenuBar}}. Once we are done with each component in Qt we will create the same for WP7.    + 
           
  ==Implementation==     ==Implementation==  
− Lets create an empty project for Qt and WP7 and add the below components in the respective projects. +  
−  + 
  ==Application Menu Bar==     ==Application Menu Bar==  
  ===Qt Project===   ===Qt Project===
  This is the {{Icode|ToolBar}} in Qt with {{Icode|ToolButton}} which provides a different style of appearance compared to a normal {{Icode|Button}}.   This is the {{Icode|ToolBar}} in Qt with {{Icode|ToolButton}} which provides a different style of appearance compared to a normal {{Icode|Button}}.
− <code cpp> + <code css>
  // tool bar   // tool bar
       ToolBar {        ToolBar {
Line 75:
Line 64:
  </code>   </code>
  ===WP7 project===   ===WP7 project===
− <code xml> +  
− The below WP7 code in XAML provides an Application Bar that has four icon buttons using {{Icode|ApplicationBarIconButton}} Element. + The XAML code below provides an Application Bar that has four icon buttons using {{Icode|ApplicationBarIconButton}} Element.
−     +   <code xml>
  <!--Sample code showing usage of ApplicationBar-->   <!--Sample code showing usage of ApplicationBar-->
       <phone:PhoneApplicationPage.ApplicationBar>        <phone:PhoneApplicationPage.ApplicationBar>
Line 136:
Line 125:
           
  ===WP7 project===   ===WP7 project===
− The below WP7 code in XAML creats three menu items in the menu bar.   + The below WP7 code in XAML creates three menu items in the menu bar.  
  <code xml>   <code xml>
  <!--Sample code showing usage of ApplicationBar-->   <!--Sample code showing usage of ApplicationBar-->
Line 169:
Line 158:
  <TextBox Height="72" HorizontalAlignment="Left" Margin="39,26,0,0" Name="textBox1" Text="Enter Text Here" VerticalAlignment="Top" Width="381" />      <TextBox Height="72" HorizontalAlignment="Left" Margin="39,26,0,0" Name="textBox1" Text="Enter Text Here" VerticalAlignment="Top" Width="381" />   
  </code>   </code>
  + 
  ==Progress Bar==   ==Progress Bar==
− The progress bar that we have used in the section are indeterminate   + The progress bar that we have used in the section are indeterminate progress bar (they show that progress is occurring, but not how much is complete/remaining).
− progress bar. + 
    
  ===Qt project===   ===Qt project===
Line 194:
Line 183:
           
  ===Qt project===   ===Qt project===
− <code cpp> + <code css>
      //button       //button
        Button {         Button {
Line 222:
Line 211:
           
  ===Qt project===   ===Qt project===
− <code cpp>   + <code css>  
       // radio button        // radio button
       Row {        Row {
Line 246:
Line 235:
           
  ===Qt project===   ===Qt project===
− <code cpp> + <code css>
  //CheckBox   //CheckBox
       CheckBox {        CheckBox {
Line 266:
Line 255:
  This is a constant block of text, that has no option to edit by user input. In our case we display the selected control name in this Text Box.     This is a constant block of text, that has no option to edit by user input. In our case we display the selected control name in this Text Box.  
  ===Qt project===   ===Qt project===
− <code cpp> + <code css>
  Text {   Text {
           id:mainText            id:mainText
Line 285:
Line 274:
  ==Source Code==   ==Source Code==
  *The full source code for Qt example is available here: [[File: UIComponentQt.zip]]   *The full source code for Qt example is available here: [[File: UIComponentQt.zip]]
− *The full source code for WP7 example is available here: [[File: UIComponentWP7.zip]][[Category:MeeGo]] [[Category:Symbian]] + *The full source code for WP7 example is available here: [[File: UIComponentWP7.zip]]



Hamishwillee: Hamishwillee - Bot update - Fix metadata etc
2012-04-24T00:30:18Z
Hamishwillee - Bot update - Fix metadata etc

			
			
			
			
		
		← Older revision
		Revision as of 00:30, 24 April 2012
		
Line 1:
Line 1:
  [[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]]   [[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]]
− {{Abstract|This article demonstrates how to  create some basic UI components in both Qt and WP7}} + {{Abstract|This article demonstrates how to create some basic UI components in both Qt and WP7}}
− {{ArticleMetaData + {{ArticleMetaData <!-- v1.2 -->
− |sourcecode= [[Media: UIComponentQt.zip]] [[ Media: UIComponentWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> + |sourcecode= [[Media:UIComponentWP7.zip]] [[Media:UIComponentQt.zip]]  
−   + 
  |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->   |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
  |devices= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->   |devices= WP7 Emulator  <!-- Devices tested against - e.g. ''devices=N95, N8'') -->
Line 9:
Line 8:
  |platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->   |platform= WP7.1 <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
  |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->   |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
− |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> + |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
− |capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> + |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
  + |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
  |keywords= UI Component Qt and WP7 <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->   |keywords= UI Component Qt and WP7 <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
− |id= <!-- Article Id (Knowledge base articles only) --> + |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
  + |translated-by= <!-- [[User:XXXX]] -->
  + |translated-from-title= <!-- Title only -->
  + |translated-from-id= <!-- Id of translated revision -->
  + |review-by= <!-- After re-review: [[User:username]] -->
  + |review-timestamp= <!-- After re-review: YYYYMMDD -->
  + |update-by= <!-- After significant update: [[User:username]]-->
  + |update-timestamp= <!-- After significant update: YYYYMMDD -->
  |creationdate= 17th October,2011<!-- Format YYYYMMDD -->   |creationdate= 17th October,2011<!-- Format YYYYMMDD -->
− |author= [[User:somnathbanik]] <!-- Display as link [[User:username]] --> + |author= [[User:Somnathbanik]]
  }}   }}
    
Line 38:
Line 45:
           
  ==Implementation==     ==Implementation==  
− Lets create an empty project for Qt and WP7  and add the below components in the respective projects.   + Lets create an empty project for Qt and WP7 and add the below components in the respective projects.  
           
  ==Application Menu Bar==     ==Application Menu Bar==  
  ===Qt Project===   ===Qt Project===
− This is the {{Icode|ToolBar}} in Qt with {{Icode|ToolButton}} which provides  a different style of appearance compared to a normal {{Icode|Button}}. + This is the {{Icode|ToolBar}} in Qt with {{Icode|ToolButton}} which provides a different style of appearance compared to a normal {{Icode|Button}}.
  <code cpp>   <code cpp>
  // tool bar   // tool bar
Line 69:
Line 76:
  ===WP7 project===   ===WP7 project===
  <code xml>   <code xml>
− The below WP7 code in  XAML provides an Application Bar that has  four icon buttons using {{Icode|ApplicationBarIconButton}} Element. + The below WP7 code in XAML provides an Application Bar that has four icon buttons using {{Icode|ApplicationBarIconButton}} Element.
           
  <!--Sample code showing usage of ApplicationBar-->   <!--Sample code showing usage of ApplicationBar-->
Line 129:
Line 136:
           
  ===WP7 project===   ===WP7 project===
− The below WP7 code in  XAML creats three menu items in the menu bar.   + The below WP7 code in XAML creats three menu items in the menu bar.  
  <code xml>   <code xml>
  <!--Sample code showing usage of ApplicationBar-->   <!--Sample code showing usage of ApplicationBar-->
Line 144:
Line 151:
    
  ==Text Field==   ==Text Field==
− Text file is used to get text from user input.When user clicks on the text filed area, virtual keyboard pops up and allows user to edit text on it. This is a  single line of editable plain text.   + Text file is used to get text from user input.When user clicks on the text filed area, virtual keyboard pops up and allows user to edit text on it. This is a single line of editable plain text.  
  ===Qt project===   ===Qt project===
  <code cpp>   <code cpp>
Line 163:
Line 170:
  </code>   </code>
  ==Progress Bar==   ==Progress Bar==
− The  progress  bar that we have used in the section are indeterminate   + The progress bar that we have used in the section are indeterminate  
  progress bar.   progress bar.
    
Line 277:
Line 284:
    
  ==Source Code==   ==Source Code==
− *The full source code  for Qt  example is available here: [[File: UIComponentQt.zip]] + *The full source code for Qt example is available here: [[File: UIComponentQt.zip]]
− *The full source code  for WP7  example is available here: [[File: UIComponentWP7.zip]][[Category:MeeGo]] [[Category:Symbian]] + *The full source code for WP7 example is available here: [[File: UIComponentWP7.zip]][[Category:MeeGo]] [[Category:Symbian]]



Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)
2012-02-15T05:48:52Z
Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

			
			
			
			
		
		← Older revision
		Revision as of 05:48, 15 February 2012
		
Line 278:
Line 278:
  ==Source Code==   ==Source Code==
  *The full source code  for Qt  example is available here: [[File: UIComponentQt.zip]]   *The full source code  for Qt  example is available here: [[File: UIComponentQt.zip]]
− *The full source code  for WP7  example is available here: [[File: UIComponentWP7.zip]] + *The full source code  for WP7  example is available here: [[File: UIComponentWP7.zip]][[Category:MeeGo]] [[Category:Symbian]]




Rahulvala: Rahulvala -
2011-12-19T08:03:20Z
Rahulvala -

			
			
			
			
		
		← Older revision
		Revision as of 08:03, 19 December 2011
		
Line 1:
Line 1:
− [[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]] + [[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]][[Category:Porting]][[Category:Qt Quick]][[Category:UI]]
  {{Abstract|This article demonstrates how to  create some basic UI components in both Qt and WP7}}   {{Abstract|This article demonstrates how to  create some basic UI components in both Qt and WP7}}
  {{ArticleMetaData   {{ArticleMetaData

Basic UI Components for Qt and WP7 - Revision history

Hamishwillee: Text replace - "[[Category:Silverlight" to "[[Category:XAML"

Hamishwillee: Hamishwillee - Addition to article of: Category:Windows Phone 7.5

Hamishwillee: Text replace - "" to ""

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

Pooja 1650: Pooja 1650 - /* Application Menu Item */

Pooja 1650: Pooja 1650 - /* Introduction */

Hamishwillee: Hamishwillee - Tidy wiki text. Fix categories

Hamishwillee: Hamishwillee - Bot update - Fix metadata etc

Hamishwillee: Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories)

Rahulvala: Rahulvala -

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