meego-ux-components

meego-ux-components

Version

This version of the meego-ux-components was tested on:

    meego-handset-ia32-pinetrail-1.1.90.7.20110308.6.iso
    meego-tablet-ia32-pinetrail-1.1.90.7.20110308.6.iso

Available components

The available components are listed below.

• Basic widgets provide basic UI-elements and structure.
• Modal dialogs are high level widgets that provide complex functionality inside an meego-ux-components Window/Page structure.
• Basic components are qml-files that provide basic functionality used by other components.
• Basic support for saving and restoring the state of the application by SaveRestoreState.

• Basic widgets:
  • AppPage
  • BottomToolBar
  • Button
  • CheckBox
  • DropDown
  • ExpandingBox
  • IconButton
  • InfoBar
  • Label
  • LayoutTextItem
  • ModalSpinner
  • PageStack
  • PopupList
  • ProgressBar
  • RadioButton
  • RadioGroup
  • Slider
  • Spinner
  • TextEntry
  • TextField
  • TimeSpinner
  • ToggleButton
  • VerticalSlider
  • Window
• Modal dialogs:
  • ContextMenu
  • DatePicker
  • ModalMessageBox
  • MusicPicker
  • PhotoPicker
  • TimePicker
  • VideoPicker
• Basic components:
  • ActionMenu
  • MucMediaGridView
  • ModalDialog
  • ModalFog
  • ScrollableMusicList
  • Theme
  • TopItem
• Examples
  • MeeGo-Ux-Components-Widgetgallery
  • MeeGo-Ux-Components-App-Photo
  • MeeGo-Ux-Components-Tutorial

Installation

You can install the meego-ux-components via zypper:

    sudo zypper install meego-ux-components
    sudo zypper install meego-ux-components-devel

or build them yourself.

    // necessary additional libraries:
    $ zypper in kcalcore-devel
    $ zypper in qt-mobility-devel
    $ zypper in libqtopengl-devel
    $ zypper in libcontentaction-devel
    $ zypper in contextkit-devel

    // then build the project
    $ qmake
    $ make install

You can find detailed documentation in the qml-files themselves, create documentation files via qdoc3, see on bottom, and on: https://meegoshare.org/meego-tablet/node/831

Examples for meego-ux-components

We provide two examples in which you can see and test the meego-ux-components in use. You can find these examples in the git repository:

    meego-ux-components/examples/

or if you installed them via zypper in:

    usr/share/

You can start the examples with:

    qmlviewer -frameless main.qml

On the ExoPc, in the terminal started from home desktop:

    meego-qml-launcher --fullscreen --opengl --app meego-ux-components-widgetgallery
    meego-qml-launcher --fullscreen --opengl --app meego-ux-components-app-photo

Widget gallery

You can find a widget gallery under:

    git repository:   meego-ux-components/examples/meego-ux-components-widgetgallery/

All currently available meego-ux-components can be found here. 'Widgets' shows basic interface items, 'Modal Dialogs' shows high level widgets like the PhotoPicker.

Photo App

An actual example for an meego-ux-components based application is the photos application which found under:

    git repository:   meego-ux-components/examples/meego-ux-components-app-photos

Note: Due to bugs in the branched photo models the 'favorite' functionality was disabled. These bugs do not appear in the current meego-ux-staging.

Tutorial

We provide a basic step by step tutorial for the Window-Book-Page concept and the usage of meego-ux-components. You can find it under:

    git repository:   meego-ux-components/examples/meego-ux-components-tutorial

Getting started in QML

To use the meego-ux-components import them via:

    import MeeGo.Components 0.1

Start by simply building a first main window like:

    import Qt 4.7
    import MeeGo.Components 0.1

    Window {
      id: window

          bookMenuModel: [ "My First Page" ]    // sets the book context menu
          bookMenuPayload: [ myFirstPage ]

        Component.onCompleted: switchBook( myFirstPage )

        Component {
            id: myFirstPage
            AppPage {
                Text { id: simpleText; anchors.centerIn: parent; text: "Hello World!" }
            }
        }
    }

Testing and QA

the documentation of testing and testcases can be found here: meego-ux-components-test

Build the Documentation

To update the documentation with qdoc3 please type in your bash:

    $ cd doc
    $ qdoc3  meego-ux-components.qdocconf

The documentation will be created in doc/html/ of your project folder.