Views
MeeGo UX Components
| Line 1: | Line 1: | ||
| - | == | + | =Overview= |
| - | + | This page will walk you through the process of creating an application with the QML based MeeGo UX Components. The MeeGo UX Components provide a set UI elements allowing you to quickly build applications which tightly integrate with the MeeGo user experience. | |
| - | == | + | =Install the MeeGo UX Components= |
| - | + | You can install the MeeGo UX components either from the zypper (recommended) or directly form the latest version of the source code. This code assumes you are working either on a [http://link-to-download-meego-image.com MeeGo system], within the [http://link-to-sdk-qemu-info.com MeeGo SDK QEMU environment], or within a [http://link-to-meego-chroot-info.com MeeGo chroot configuration]. | |
| - | == | + | ==Zypper== |
| - | + | To install the MeeGo UX Components via zypper: | |
| - | + | zypper install meego-ux-components-devel | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | - | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | == | + | ==From Source== |
| - | + | We'll first clone the source from the upstream repository location on Gitorious: | |
| - | + | git clone git://meego.gitorious.org/meego-ux/meego-ux-components | |
| - | + | cd meego-ux-components | |
| - | -- | + | qmake |
| - | + | make | |
| - | + | sudo make install | |
| - | + | NOTE: If you haven't been doing active development from sources, you may need several development dependency packages. The easiest way to get those dependencies installed is to use zypper to install the sources for meego-u-components first. You can then pull from GIT for the tip of development. This command tells zypper to install the source for meego-ux-components, which will install any build dependencies as well: | |
| - | + | zypper si meego-ux-components | |
| - | + | ||
| - | - | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | = | + | =Seeing the MeeGo UX Components= |
| - | + | ||
| - | + | Next lets test the install and verify that the widgets are installed. The default location for the sample applications using the components are: | |
| + | /usr/share/meego-ux-app-photos | ||
| + | /usr/share/meego-ux-tutorial | ||
| + | /usr/share/meego-ux-widgetgallery | ||
| - | + | We will run the widget gallery using the qmlviewer: | |
| - | + | $ qmlviewer /usr/share/meego-ux-widgetgallery/main.qml | |
| - | == Now you | + | =Building your first application= |
| + | Now that the MeeGo UX Components are installed on your system, you can begin developing a new application using the components. | ||
| - | + | # Launch Qt Creator. | |
| - | + | # Select 'Create Project' | |
| - | + | # Under Projects select 'Qt Quick Project' | |
| + | # 'QML Application' will be selected for the template type. | ||
| + | # Click 'Choose...' | ||
| + | # Give the project a name, for example "thatwaseasy". Click 'Next' | ||
| + | # Click 'Finish' Qt Creator will now create the project and provide an initial QML file | ||
| - | + | Let's run it to see what it does. Click the green arrow in the lower left corner of Qt Creator. This will run the application. After a few moments a new window will appear with the text 'Hello world' Now let's add a MeeGo UX button and when it is pressed, we will change the text to say "That was easy!" | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | =Adding MeeGo UX Components= | |
| - | + | Installed with the MeeGo UX Components are a set of QML files provided as a tutorial. You can find the contents of the first file in: | |
| - | + | /usr/share/meego-ux-tutorial/step1/main.qml. | |
| - | + | ||
| - | + | ||
| - | + | Open that file in Qt Creator, copy its contents, and replace the contents of the QML file that Qt Creator generated for you. | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | You can now run that first step by clicking on the green arrow (or pressing CTRL-R on the keyboard) Save your changes when prompted. | |
| - | + | ||
| - | + | You can explore the other tutorial steps and see what they each do. Experiment with the various components you see in the widgets gallery. | |
| - | + | ||
| - | + | =Screen Shots of the Meego UX Components= | |
| - | + | ||
| + | [[File:Meego-ux-widgetgallery-1.png|800px]] | ||
| + | ::(Initial view - showing the list of widgets) | ||
| + | |||
| + | |||
| + | [[File:Meego-ux-widgetgallery-Buttons.png|800px]] | ||
| + | ::(Showing Button Widgets) | ||
| + | |||
| + | |||
| + | [[File:Meego-ux-widgetgallery-ModalDialogs.png|800px]] | ||
| + | ::(Showing Modal Dialog Widgets) | ||
| + | |||
| + | |||
| + | [[File:Meego-ux-widgetgallery-date-picker.png|800px]] | ||
| + | ::(Showing Date Picker Widget in action) | ||
| + | |||
| + | |||
| + | [[File:Meego-ux-widgetgallery-messagebox.png|800px]] | ||
| + | ::(Showing ModalMessageBox in action) | ||
| + | |||
| + | |||
| + | [[File:Meego-ux-widgetgallery-progressbar.png|800px]] | ||
| + | ::(Showing ProgressBar widget in action after clicking the Start button) | ||
Revision as of 22:05, 30 March 2011
Contents |
Overview
This page will walk you through the process of creating an application with the QML based MeeGo UX Components. The MeeGo UX Components provide a set UI elements allowing you to quickly build applications which tightly integrate with the MeeGo user experience.
Install the MeeGo UX Components
You can install the MeeGo UX components either from the zypper (recommended) or directly form the latest version of the source code. This code assumes you are working either on a MeeGo system, within the MeeGo SDK QEMU environment, or within a MeeGo chroot configuration.
Zypper
To install the MeeGo UX Components via zypper:
zypper install meego-ux-components-devel
From Source
We'll first clone the source from the upstream repository location on Gitorious:
git clone git://meego.gitorious.org/meego-ux/meego-ux-components cd meego-ux-components qmake make sudo make install
NOTE: If you haven't been doing active development from sources, you may need several development dependency packages. The easiest way to get those dependencies installed is to use zypper to install the sources for meego-u-components first. You can then pull from GIT for the tip of development. This command tells zypper to install the source for meego-ux-components, which will install any build dependencies as well:
zypper si meego-ux-components
Seeing the MeeGo UX Components
Next lets test the install and verify that the widgets are installed. The default location for the sample applications using the components are:
/usr/share/meego-ux-app-photos /usr/share/meego-ux-tutorial /usr/share/meego-ux-widgetgallery
We will run the widget gallery using the qmlviewer:
$ qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
Building your first application
Now that the MeeGo UX Components are installed on your system, you can begin developing a new application using the components.
- Launch Qt Creator.
- Select 'Create Project'
- Under Projects select 'Qt Quick Project'
- 'QML Application' will be selected for the template type.
- Click 'Choose...'
- Give the project a name, for example "thatwaseasy". Click 'Next'
- Click 'Finish' Qt Creator will now create the project and provide an initial QML file
Let's run it to see what it does. Click the green arrow in the lower left corner of Qt Creator. This will run the application. After a few moments a new window will appear with the text 'Hello world' Now let's add a MeeGo UX button and when it is pressed, we will change the text to say "That was easy!"
Adding MeeGo UX Components
Installed with the MeeGo UX Components are a set of QML files provided as a tutorial. You can find the contents of the first file in:
/usr/share/meego-ux-tutorial/step1/main.qml.
Open that file in Qt Creator, copy its contents, and replace the contents of the QML file that Qt Creator generated for you.
You can now run that first step by clicking on the green arrow (or pressing CTRL-R on the keyboard) Save your changes when prompted.
You can explore the other tutorial steps and see what they each do. Experiment with the various components you see in the widgets gallery.
Screen Shots of the Meego UX Components
- (Initial view - showing the list of widgets)
- (Showing Button Widgets)
- (Showing Modal Dialog Widgets)
- (Showing Date Picker Widget in action)
- (Showing ModalMessageBox in action)
- (Showing ProgressBar widget in action after clicking the Start button)