Meego Wiki
Views

Components Migration

From MeeGo wiki
(Difference between revisions)
Jump to: navigation, search
(→Phase III (scheduled to end April 29))
Line 31: Line 31:
* Window and AppPage components
* Window and AppPage components
 +
Major API changes for Window:
 +
{|
 +
! 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 || -
 +
|}
 +
 +
Example:
 +
Window {
 +
    id: window
 +
 +
    bookMenuModel: [ qsTr("Page1") , qsTr("Page2") ]
 +
    bookMenuPayload: [ book1Component,  book2Component ]
 +
 +
    Component.onCompleted: {
 +
        console.log("load MainPage")
 +
        switchBook( book1Component )
 +
    }
 +
 +
    Component { id: book1Component; Page1 {} }
 +
    Component { id: book2Component; Page2 {} }
 +
}
==Window, Book and Page==
==Window, Book and Page==

Revision as of 11:38, 20 April 2011

Contents

Migration of Components from MeeGo.Labs.Components to MeeGo.Components

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:

Phase I (done April 8th)

  • deprecate Media pickers (image/video/music)
  • deprecate Date and Time pickers
  • Contacts picker will remain in meegolabs-ux-components for the time being

Phase II (schedule to end April 22)

  • all other duplicated components (see table below)
  • Window and AppPage/ApplicationPage will not be migrated in this phase
  • a Window2.qml is provided to test the new orientation behaviour

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:

  • the book and action menu context menus will still leave the screen/ appear in the wrong position when the orientation changes while they are visible.
  • Some apps create their own status bar and tool bar:
    • the panels view has two status bars.
    • the photo apps detail page always shows its search bar.

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 list below) from meegolabs will be removed on Tuesday(April 20) morning around 8:00 pacific time!

Phase III (scheduled to end April 29)

  • Window and AppPage components

Major API changes for Window:

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 -

Example: 

Window {
   id: window

   bookMenuModel: [ qsTr("Page1") , qsTr("Page2") ]
   bookMenuPayload: [ book1Component,  book2Component ]

   Component.onCompleted: {
       console.log("load MainPage")
       switchBook( book1Component )
   }

   Component { id: book1Component; Page1 {} }
   Component { id: book2Component; Page2 {} }
}

Window, Book and Page

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 to your application. Please find the examples and the tutorial in the devel package to help you understand the concept.

Phase II Components Migration:

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
Retrieved from "http://wiki.meego.com/Components_Migration"
Personal tools