Upload
gail-frederick
View
8.313
Download
8
Tags:
Embed Size (px)
DESCRIPTION
The MeeGo Tablet UX is open-source software and designed to be customizable for market differentiation of MeeGo tablets. This session teaches developers about the new APIs in the MeeGo Tablet UX project and how they are used to change the look-and-feel and behavior of the MeeGo OS on tablets. Attendees learn about the Panels API, the Content API, the Share API and visual theme customizations, with demonstration of each customization on a MeeGo tablet device. Session from MeeGo Conference in May 2011.
Citation preview
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•[email protected]
Contact Info for Contributing Engineers•Content API
– [email protected]•Panels API, Sharing API
– [email protected]– Freenode #meego channel: jausmus