×
Namespaces

Variants
Actions
(Difference between revisions)

Basic UI Components for Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
somnathbanik (Talk | contribs)
(Somnathbanik - - Introduction)
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:Windows Phone 7.5)
(14 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Category:Windows Phone]][[Category:Code Snippet]][[Category:Code Examples]]
+
[[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 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
+
|sourcecode= [[Media:UIComponentWP7.zip]] [[Media:UIComponentQt.zip]]  
|sourcecode= [[Media: UIComponentQt.zip]] [[ Media: UIComponentWP7.zip]]<!-- Link to example source code e.g. [[Media:The Code Example ZIP.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'') -->
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1]
+
|sdk= [http://www.developer.nokia.com/Develop/Windows_Phone/Tools/ Windows Phone SDK 7.1] for Windows Phone and Qt SDK for Qt Code
 
|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 -->
|creationdate= 17th October,2011<!-- Format YYYYMMDD -->
+
|translated-by= <!-- [[User:XXXX]] -->
|author= [[User:somnathbanik]] <!-- Display as link [[User:username]] -->
+
|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= 20111017
 +
|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.
+
[[File: UIComponentQt.png|thumb|301px|none| Qt UI Components ][File: UIComponentWP7.png|thumb|301px|none| WP7 UI Components ]]
+
[[File: UIComponentWP7.png|thumb|301px|none| WP7 UI Components ]]
+
  
==Basic Idea==
+
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.    
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.  
+
<gallery widths=200px heights=400px>
+
File:UIComponentQt.png|Qt UI Components
+
File:UIComponentWP7.png|WP7 UI Components
==Implementation==
+
</gallery>
+
 
Lets create an empty project for Qt and WP7  and add the below components in the respective projects.
+
==Implementation==  
+
 
==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 58: Line 60:
 
             }
 
             }
 
         }
 
         }
     }
+
     }  
+
+
 
</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 74: Line 74:
 
             <shell:ApplicationBarIconButton x:Name="FavButton" IconUri="/Images/appbar.favs.rest.png" Text="favourite" Click="FavButton_Click"/>
 
             <shell:ApplicationBarIconButton x:Name="FavButton" IconUri="/Images/appbar.favs.rest.png" Text="favourite" Click="FavButton_Click"/>
 
         </shell:ApplicationBar>
 
         </shell:ApplicationBar>
     </phone:PhoneApplicationPage.ApplicationBar>
+
     </phone:PhoneApplicationPage.ApplicationBar>   
+
   
+
 
</code>
 
</code>
  
 
==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.  
<code cpp>
+
<code cpp-qt>  
+
 
     //menu items
 
     //menu items
 
     Menu {
 
     Menu {
Line 124: Line 121:
 
         }
 
         }
 
     }
 
     }
</code>
+
</code>  
+
 
   
 
   
 
===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 136: Line 131:
 
                 <shell:ApplicationBarMenuItem x:Name="Menu1" Text="Menu 1" Click="Menu1_Click"/>
 
                 <shell:ApplicationBarMenuItem x:Name="Menu1" Text="Menu 1" Click="Menu1_Click"/>
 
                 <shell:ApplicationBarMenuItem x:Name="Menu2" Text="Menu 2" Click="Menu2_Click"/>
 
                 <shell:ApplicationBarMenuItem x:Name="Menu2" Text="Menu 2" Click="Menu2_Click"/>
                 <shell:ApplicationBarMenuItem x:Name="Menu3" Text="Menu 3" Click="Menu3_Click"/>
+
                 <shell:ApplicationBarMenuItem x:Name="Menu3" Text="Menu 3" Click="Menu3_Click"/>  
+
 
             </shell:ApplicationBar.MenuItems>
 
             </shell:ApplicationBar.MenuItems>
 
     </phone:PhoneApplicationPage.ApplicationBar>
 
     </phone:PhoneApplicationPage.ApplicationBar>
Line 145: Line 139:
  
 
==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-qt>
 
// text box
 
// text box
 
     TextField {
 
     TextField {
Line 157: Line 151:
 
         placeholderText: "Enter Text Here"
 
         placeholderText: "Enter Text Here"
 
         validator: IntValidator{bottom: 0; top: 100}
 
         validator: IntValidator{bottom: 0; top: 100}
     }
+
     }  
+
 
</code>
 
</code>
 
===WP7 project===
 
===WP7 project===
 
<code xml>
 
<code xml>
<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===
<code cpp>
+
<code cpp-qt>
 
ProgressBar {
 
ProgressBar {
 
         anchors.top:textField.bottom
 
         anchors.top:textField.bottom
Line 181: Line 172:
 
     }
 
     }
 
</code>
 
</code>
 +
 
===WP7 project===
 
===WP7 project===
<code xml>
+
<code xml>  
+
 
<ProgressBar Height="5" HorizontalAlignment="Left" Margin="29,121,0,0" Name="progressBar1" VerticalAlignment="Top" Width="391" />
 
<ProgressBar Height="5" HorizontalAlignment="Left" Margin="29,121,0,0" Name="progressBar1" VerticalAlignment="Top" Width="391" />
 
 
</code>
 
</code>
  
Line 192: Line 182:
 
   
 
   
 
===Qt project===
 
===Qt project===
<code cpp>
+
<code css>
 
   //button
 
   //button
 
     Button {
 
     Button {
Line 209: Line 199:
 
                     mainText.text ="Button Press and Hold"
 
                     mainText.text ="Button Press and Hold"
 
                 }
 
                 }
             }
+
             }
 
+
 
</code>
 
</code>
 
===WP7 project===
 
===WP7 project===
<code xml>
+
<code xml>  
+
 
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="29,152,0,0" Name="button1" VerticalAlignment="Top" Width="391" Click="button1_Click" />
 
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="29,152,0,0" Name="button1" VerticalAlignment="Top" Width="391" Click="button1_Click" />
 
</code>
 
</code>
Line 222: Line 210:
 
   
 
   
 
===Qt project===
 
===Qt project===
<code cpp>
+
<code css>  
+
 
     // radio button
 
     // radio button
 
     Row {
 
     Row {
Line 240: Line 227:
 
===WP7 project===
 
===WP7 project===
 
<code xml>
 
<code xml>
<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="29,251,0,0" Name="radioButton1" VerticalAlignment="Top" Checked="radioButton1_Checked"/>
+
<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="29,251,0,0" Name="radioButton1" VerticalAlignment="Top" Checked="radioButton1_Checked"/>  
+
+
 
</code>
 
</code>
  
Line 249: Line 234:
 
   
 
   
 
===Qt project===
 
===Qt project===
<code cpp>
+
<code css>
 
//CheckBox
 
//CheckBox
 
     CheckBox {
 
     CheckBox {
Line 258: Line 243:
 
         checked: false
 
         checked: false
 
         onClicked: if(checked) {mainText.text ="Check Box Checked"} else {mainText.text = "Check Box Un-Checked"}
 
         onClicked: if(checked) {mainText.text ="Check Box Checked"} else {mainText.text = "Check Box Un-Checked"}
     }
+
     }  
+
+
 
</code>
 
</code>
 +
 
===WP7 project===
 
===WP7 project===
<code xml>
+
<code xml>  
+
   <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="255,251,0,0" Name="checkBox1" VerticalAlignment="Top" Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked" />  
   <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="255,251,0,0" Name="checkBox1" VerticalAlignment="Top" Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked" />
+
+
 
</code>
 
</code>
  
Line 272: Line 254:
 
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 280: Line 262:
 
         font.pixelSize: 20
 
         font.pixelSize: 20
 
     }
 
     }
</code>
+
</code>  
+
 
   
 
   
 
===WP7 projet===
 
===WP7 projet===
<code xml>
+
<code xml>  
+
   <TextBlock x:Name="PageTitle" Text="hello world !" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>  
   <TextBlock x:Name="PageTitle" Text="hello world !" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
+
+
 
</code>
 
</code>
 
   
 
   
Line 293: Line 272:
  
 
==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:Windows Phone 7.5]]

Revision as of 08:18, 30 November 2012

This article demonstrates how to create some basic UI components, including menus, toolbars, buttons, progress bars, checkboxes, etc., in both Qt and WP7.

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone SDK 7.1 for Windows Phone and Qt SDK for Qt Code
Devices(s): WP7 Emulator
CompatibilityArticle
Keywords: UI Component Qt and WP7
Created: somnathbanik (17 Oct 2011)
Last edited: hamishwillee (30 Nov 2012)

Contents

Introduction

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 TextBox, ProgressBar, Button, RadioButton, CheckBox, 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.

Implementation

Application Menu Bar

Qt Project

This is the ToolBar in Qt with ToolButton which provides a different style of appearance compared to a normal Button.

// tool bar
ToolBar {
anchors.bottom: parent.bottom
tools: ToolBarLayout {
ToolButton {
iconSource: "toolbar-back"
onClicked: pageStack.depth <= 1 ? Qt.quit() : pageStack.pop()
}
ToolButton {
iconSource: "toolbar-search"
onClicked: mainText.text ="Search"
}
ToolButton {
iconSource: "toolbar-refresh"
onClicked: mainText.text = "Refresh "
}
ToolButton {
iconSource: "toolbar-menu"
onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close()
}
}
}

WP7 project

The XAML code below provides an Application Bar that has four icon buttons using ApplicationBarIconButton Element.

<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton x:Name="BackButton" IconUri="/Images/appbar.back.rest.png" Text="Back" Click="BackButton_Click" />
<shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="/Images/appbar.feature.search.rest.png" Text="Search" Click="SearchButton_Click" />
<shell:ApplicationBarIconButton x:Name="RefreshButton" IconUri="/Images/appbar.refresh.rest.png" Text="Refresh" Click="RefreshButton_Click"/>
<shell:ApplicationBarIconButton x:Name="FavButton" IconUri="/Images/appbar.favs.rest.png" Text="favourite" Click="FavButton_Click"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Application Menu Item

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

This is the Menu Item that has been added to the Application Menu Bar, which can be used for accessing particular function.

    //menu items
Menu {
id: myMenu
visualParent: pageStack
MenuLayout {
MenuItem
{
text: qsTr("Menu1")
onClicked: mainText.text = "Menu1 is Clicked"
}
MenuItem{
text:qsTr("Menu2")
onClicked: mainText.text = "Menu2 is Clicked"
}
MenuItem{
text:qsTr("Menu3")
platformSubItemIndicator: true
onClicked: subMenu.open()
}
}
}
// sub menu
ContextMenu {
id: subMenu
MenuLayout {
MenuItem {
text: "Red"
onClicked: mainText.text = "Red is Clicked"
}
MenuItem {
text: "Green"
onClicked: mainText.text = "Green is Clicked"
}
MenuItem {
text: "Blue"
onClicked:mainText.text = "Blue is Clicked"
}
}
}

WP7 project

The below WP7 code in XAML creates three menu items in the menu bar.

<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem x:Name="Menu1" Text="Menu 1" Click="Menu1_Click"/>
<shell:ApplicationBarMenuItem x:Name="Menu2" Text="Menu 2" Click="Menu2_Click"/>
<shell:ApplicationBarMenuItem x:Name="Menu3" Text="Menu 3" Click="Menu3_Click"/>
</shell:ApplicationBar.MenuItems>
</phone:PhoneApplicationPage.ApplicationBar>

Note.pngNote: Here to show the difference between the code structure, I have put the Menu Bar and Menu Item code seperately, but both these codes are combined together and interrelated in the project source code

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.

Qt project

// text box
TextField {
anchors.top:statusBar.bottom
anchors.left: parent.left
anchors.right: parent.right
id:textField
width: 160
placeholderText: "Enter Text Here"
validator: IntValidator{bottom: 0; top: 100}
}

WP7 project

<TextBox Height="72" HorizontalAlignment="Left" Margin="39,26,0,0" Name="textBox1" Text="Enter Text Here" VerticalAlignment="Top" Width="381" />

Progress Bar

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).

Qt project

ProgressBar {
anchors.top:textField.bottom
anchors.left: parent.left
anchors.right: parent.right
id: progressBar
indeterminate: true
visible: simpletimer.running
}

WP7 project

<ProgressBar Height="5" HorizontalAlignment="Left" Margin="29,121,0,0" Name="progressBar1" VerticalAlignment="Top" Width="391" />

Button

We will create a button with text inside. On click of the button we will call the event handler to perform some task.

Qt project

   //button
Button {
id: button
anchors.top: progressBar.bottom
anchors.left: parent.left
anchors.right: parent.right
text: "Signals"
onPlatformReleased: {
mainText.text = "Button Released"
}
onClicked: {
mainText.text = "Button Clicked"
}
onPlatformPressAndHold: {
mainText.text ="Button Press and Hold"
}
}

WP7 project

<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="29,152,0,0" Name="button1" VerticalAlignment="Top" Width="391" Click="button1_Click" />

Radio Button

Lets create a RadioButton with a line of Text. When user select the radio button we catch the event and process it.

Qt project

    // radio button
Row {
anchors.top:button.bottom
id: radioButton
anchors.left: parent.left
RadioButton {
id: button1
text: "Radio Button"
checked: false
onClicked: if(checked) {mainText.text = "Radio Checked"} else {mainText.text ="Radio Un-Checked"}
}
}

WP7 project

<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="29,251,0,0" Name="radioButton1" VerticalAlignment="Top" Checked="radioButton1_Checked"/>

Check Box

CheckBox returns whether the box is checked or not, and the events are handled.

Qt project

//CheckBox
CheckBox {
anchors.top: button.bottom
anchors.right: parent.right
id: checkBox
text: "Check Box "
checked: false
onClicked: if(checked) {mainText.text ="Check Box Checked"} else {mainText.text = "Check Box Un-Checked"}
}

WP7 project

  <CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="255,251,0,0" Name="checkBox1" VerticalAlignment="Top" Checked="checkBox1_Checked" Unchecked="checkBox1_Unchecked" />

Text Block

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

Text {
id:mainText
anchors.centerIn: parent
text: qsTr("Hello world!")
color: platformStyle.colorNormalLight
font.pixelSize: 20
}

WP7 projet

   <TextBlock x:Name="PageTitle" Text="hello world !" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

Note.pngNote: When user clicks on any of the UI Control, we catch the event and display the name of the control in the Text Box.

Source Code

348 page views in the last 30 days.
×