Contents |
PAGE UNDER CONSTRUCTION
Currently some component code versions exists in both meegolabs-ux-components and meego-ux-components. In order to avoid confusion for third party developers and to decrease the burden of maintaining two branches and keeping them in sync, we are deprecating code in meegolabs-ux-components where it is already available in meego-ux-components.
Component migration will occur in three phases:
Since most of the meego-ux-components depend on signals from the new meego-ux-components Window.qml, some of them will have issues when being used with the meegolabs Window.qml. The ModalContextMenu is our main problem child here. We have added a Window2.qml to the meegolabs repo which is basically the meegolabs Window.qml, but with the orientation behaviour of the new meego-ux-components Window.qml. Just add the '2' behind Window to use it, no further API changes are necessary. The ModalContextmenu called in the content area will now stay on screen. Of course Window2.qml does not have the full functionality of the meego-ux-components Window.qml, so there will still be a few bugs until you switch to the meego-ux-components Window.qml. Bugs we found after a quick testing:
These bugs should not be filed and will not be fixed since Window2.qml is only a preliminary solution for testing only!
ATTENTION: The old components (see table below) from meegolabs will be removed on Tuesday(April 20) morning around 8:00 pacific time!
| MeeGo Labs | MeeGo-Ux-Components | Changes |
| ActionMenu | ActionMenu | API changed |
| Button | Button | API and Design |
| CheckBox | CheckBox | API and Design |
| ContextMenu | ModalContextMenu | derived from ModalFog, API change |
| DropDown | DropDown | API and Design |
| EditPane | TextField | replace by TextField |
| ExpandingBox | ExpandingBox | API and Design |
| Fog | ModalFog | whole concept changed |
| IconButton | IconButton | API and Design |
| MessageBox | ModalMesseageBox | derived from ModalFog, API change |
| ModalDialog | ModalDialog | API and Design |
| ModalSurface | ModalFog | API and Design |
| PickerDialog | ModalDialog | - |
| PopupList | PopupList | API and Design |
| RadioButton | RadioButton | Design |
| RadioGroup.js | RadioGroup.js | Design |
| RadioGroup.qml | RadioGroup.qml | API and Design |
| Slider | Slider | API and Design |
| Spinner | Spinner | No API changes |
| StatusBar | StatusBar | No changes |
| TextEntry | TextEntry | API and Design |
| ToggleButton | ToggleButton | API and Design |
| TopItem | TopItem | API |
| VerticalSlider | VerticalSlider | API and Design |
A general change in the meego-ux-components is the concept of how to use Window and AppPage in order to create a navigation path in your application. You can find the examples and the tutorial in the devel package to help you understand the concept.
Nonetheless some examples:
The AppPage is the content that's shown inside an apps window. Statusbar and toolbar are provided by the Window.qml as well as a default action menu. The pageTitle will appear in the Windows toolbar.
AppPage {
id: mainPage
pageTitle: "My first page"
actionMenuModel: [ "First choice", "Second choice" ]
actionMenuPayload: [ 1, 2 ]
onActionMenuTriggered: {
// an action menu entry was clicked, action menu hidden
// and '1' or '2' returned in selectedItem
}
}
You can call addPage(<nextPageName>) to switch to the next page.
AppPage {
(...)
Component { id: nextPage; SubPage{} }
onClicked: { addPage( nextPage ) }
(...)
}
The Window.qml provides a back button in the toolbar to get back to the previous page.
The Window is the applications main item. It has a book menu to switch between main pages.
Window {
id: window
bookMenuModel: [ qsTr("Page 1") , qsTr("Page 2") ]
bookMenuPayload: [ book1Component, book2Component ]
Component.onCompleted: {
console.log("load MainPage")
switchBook( book1Component )
}
Component { id: book1Component; Page {} }
Component { id: book2Component; Page2 {} }
}
| meegolabs Window | meego-ux Window |
|---|---|
| bool foreground | bool isActiveWindow |
| bool transparent | - |
| string title | string toolBarTitle |
| string[] filterModel | string[] bookMenuModel |
| string[] filterPayload | string[] bookMenuPayload |
| - | string bookMenuTitle |
| - | bool bookMenuHighlightSelection |
| - | string[] actionMenuModel |
| - | string[] actionMenuPayload |
| - | string actionMenuTitle |
| - | bool actionMenuHighlightSelection |
| int filterMenuWidth | - |
| signal filterTriggered(int index, variant payload) | - |
| - | signal actionMenuTriggered( variant selectedItem ) |
| - | signal actionMenuIconClicked( int mouseX, int mouseY ) |
| Component applicationPage | - |
| alias currentApplication | - |
| variant applicationData | - |
| item content: innerContent | - |
| item container: outerContent | - |
| int orientation | int orientation |
| bool orientationLocked | bool isOrientationLocked |
| bool orientationTransitionEnabled | - |
| - | string lockOrientationIn |
| bool fullScreen | bool fullScreen |
| bool fullContent | bool fullContent |
| bool showtoolbar | - |
| bool showsearch | - |
| signal search(string needle) | signal search(string needle) |
| alias statusBar | - |
| color backgroundColor | - |
| color sidepanelBackgroundColor | - |
| bool showStartupAnimation | - |