how to customize the meego tablet ux

How to Customize the MeeGo Tablet UXGail Rahn Frederick, Intel

with contributions from Intel engineers Geoff Gustafson and James Ausmusand screenshots by Bob Spencer!

2

Agenda• MeeGo Tablet UX Overview• New APIs in MeeGo Tablet UX– Panels API– Content API– Sharing API

• Theming a MeeGo Tablet• Q&A

3

What Can be Customized?MeeGo Tablet UX APIs allow developers to:•add and change panels•publish new kinds of content into panels and search results•share user-generated content to social networks and other Web targets•Visually re-skin the user experience

MEEGO TABLET UX OVERVIEW

PANELS API

13

Panels APIThe Panels API adds and changes panels in the tablet home screen.

You can:•Add a new panel•Re-order panels•Change panel contents•Remove panels

See meego-ux-panels in MeeGo Gitorious.

14

OverviewPanels are defined in a .panel file – in /usr/share/meego-ux-panels/panels/– sets panel properties– points to a QML file with panel layout

Use Panel UI widgets for consistent UX– import MeeGo.Panels 0.1

15

Example .panel file[Panel]

DisplayName=Example #Used in Panels settings

DisplayName[fi]=Esimerkki #Example translation

DefaultIndex=6 #Desired default ordering

UniqueName=example #Used for settings save/load

Path=/usr/share/meego-ux-panels/example/examplepanel.qml

#Path to actual panel QML

16

Example Panelimport Qt 4.7import MeeGo.Components 0.1import MeeGo.Panels 0.1FlipPanel { id: container Translator { catalog: "meego-ux-panels-example" } front: SimplePanel { panelTitle: qsTr("Example") panelComponent: PrimaryTile { text: "Hello world!“ } back: BackPanelStandard { panelTitle: qsTr("Example settings") subheaderText: qsTr("Example panel content") onClearHistClicked:{ console.log("Clear history clicked!"); } }}

CONTENT API

18

Content APIThe Content API integrates content services into the home screen and search:•Publish a content feed to the Friends panel•Make content available in search results

See meego-ux-content in MeeGo Gitorious.

19

Content PropertiesThe Content API supports these content item properties

● Title text● Description text● Icon (optional)● Thumbnail (optional)● Timestamp● Default action (tap)● Custom actions (context menu)

20

How to Write a MeeGo Content PluginDerive plugin class from McaFeedPlugin●Implement serviceModel() to provide a list of the services whose content is published in this plugin●Implement createFeedModel() to provide a live feed of data for Friends panel (optional)●Implement createSearchModel() to provide search results (optional)

Each implemented method returns a QAbstractItemModel with a list of items.

Now let’s look at each kind of model…

21

Service ModelsDerive from McaServiceModel

● Each list item describes one service or data source (i.e. social network, Web API, protocol, etc.)

● Use data roles defined in servicemodel.h– Service name (unique to a plugin)– Display name– Icon– Category (use “email”, “social” or “im” in Friends panel)– Implement config error and actions to provide the user a quick way to

configure the service

22

Feed ModelsDerive from McaFeedModel

● Each list item is a relevant content item● Provide content to be displayed

– Title, content, avatar, picture, timestamp● Provide actions object

– Default action when user taps your content item● E.g. open your application to detail view of content

– Custom actions for a context menu● E.g. mark as spam, delete, …

● Provide QAbstractItemModel signals when new content items arrive

23

Search ModelsSimilar to feed model. Also derive from McaSearchableFeed

● Implement setSearchText() and provide relevant, matching results

● Return empty model when search text is empty

SHARING API

25

Sharing APIThe Sharing API allows sharing of media and application data to social networks and other Web services.

Sharing happens in panels and apps in the tablet UX.

See the API in meego-ux-sharing and implementations in meego-ux-sharing-socialweb and meego-ux-sharing-email on MeeGo Gitorious.

26

Sharing API OverviewSharing API has two service-specific components:•QML UI plugin for sharing UX– Add comments, set privacy options, etc.

•C++ plugin to MeeGo Sharing Daemon– Interacts with service to do the sharing operations

28

Plugin Interface for MeeGo Sharing Daemonclass MeeGoUXSharingServicePluginInterface: public Qobject {

Q_OBJECT

public:

/* … removed some methods to fit slides …*/

virtual QHash<QString, QString> metaData() = 0;

virtual QList<MeeGoUXSharingServiceInfo> getServices() = 0;

virtual int Share(QString serviceName, const QString &sharetype, ArrayOfShareItemStruct items, QString &errmessage) = 0;

virtual bool CancelShare(QString serviceName, int opid) = 0;

signals:

void ShareProgress(const QString &service, int opid, int progress, const QString &message);

};

THEMING THE MEEGO TABLET UX

30

MeeGo Tablet UX ThemeA theme is a collection of visual assets and configuration that defines the visual skin of the tablet UX.

Theme contents are icons, graphics, backgrounds, fonts, colors and margins.

The default MeeGo Tablet theme is open source.– meego-ux-theme project in MeeGo Gitorious

31

Changing the MeeGo Tablet UX Theme1. Read Contributing.txt and Icon naming.txt to get started.2. Clone meego-ux-theme project locally.3. Update visual assets and theme.ini for your target resolution.

(Here’s the visual design magic.)4. Test your assets on a MeeGo tablet by overwriting the contents

of /usr/share/themes/RESOLUTIONwith new assets and rebooting.

5. Package updated theme and release upstream or in your product.

32

Q&A

33

Thank YouMeeGo Tablet UX APIs and Theme are in the meego-ux project in MeeGo Gitorious.

My Contact Info•gail.r.frederick@intel.com

Contact Info for Contributing Engineers•Content API

– geoff@linux.intel.com•Panels API, Sharing API

– james.ausmus@intel.com– Freenode #meego channel: jausmus