Namespaces
Variants
Actions
(Difference between revisions)

Basic UI Components for Qt and WP7

Jump to: navigation, search
m (Hamishwillee - Add Qt Quick and Porting categories)
m (Chintandave er - removed extra space)
Line 20: Line 20:
 
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 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.   
 
   
 
   
−
[[File: UIComponentQt.png|thumb|201px|none| Qt UI Components ]]  
+
[[File: UIComponentQt.png|thumb|201px|none| Qt UI Components ]]
 
[[File: UIComponentWP7.png|thumb|201px|none| WP7 UI Components ]]
 
[[File: UIComponentWP7.png|thumb|201px|none| WP7 UI Components ]]
  
 
==Basic Idea==
 
==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.  
+
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.  
 
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}}.
Line 57: Line 54:
 
             }
 
             }
 
         }
 
         }
−
     }
+
     }  
−
+
−
+
 
</code>
 
</code>
 
===WP7 project===
 
===WP7 project===
Line 73: Line 68:
 
             <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>
  
Line 82: Line 75:
 
===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>  
−
+
 
     //menu items
 
     //menu items
 
     Menu {
 
     Menu {
Line 123: Line 115:
 
         }
 
         }
 
     }
 
     }
−
</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 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 135: Line 125:
 
                 <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 156: Line 145:
 
         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.
 
progress bar.
 +
 
===Qt project===
 
===Qt project===
 
<code cpp>
 
<code cpp>
Line 180: Line 166:
 
     }
 
     }
 
</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 208: Line 193:
 
                     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 221: Line 204:
 
   
 
   
 
===Qt project===
 
===Qt project===
−
<code cpp>
+
<code cpp>  
−
+
 
     // radio button
 
     // radio button
 
     Row {
 
     Row {
Line 239: Line 221:
 
===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 257: Line 237:
 
         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 279: Line 256:
 
         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>
 
   
 
   

Revision as of 10:29, 7 November 2011

This article demonstrates how to create some basic UI components in both Qt and WP7

WP Metro Icon Porting.png
WP Metro Icon UI.png
Article Metadata
Code Example
Tested with
SDK: Windows Phone SDK 7.1 for Windows Phone and Qt SDK for Qt Code
Devices(s): WP7 Emulator
Compatibility
Platform(s): WP7.1
Article
Keywords: UI Component Qt and WP7
Created: somnathbanik (17 Oct 2013)
Last edited: chintandave_er (07 Nov 2011)

Contents

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.

Qt UI Components
WP7 UI Components

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 TextBox, ProgressBar, Button, RadioButton, CheckBox, MenuBar. Once we are done with each component in Qt we will create the same for WP7.

Implementation

Lets create an empty project for Qt and WP7 and add the below components in the respective projects.

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 below WP7 code in  XAML provides an Application Bar that has  four icon buttons using {{Icode|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. This menu items are displays 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 creats 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.png
Note: 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.

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.png
Note: 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

Retrieved from "http://www.developer.nokia.com/Community/Wiki/index.php?title=Basic_UI_Components_for_Qt_and_WP7&oldid=116096"
621 page views in the last 30 days.
Featured links
Develop
Distribution
Blogs
Community
Resources
Site Map
Terms & Conditions
Privacy Policy
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved