How to Customize the MeeGo Tablet UX
Download as PPT, PDF0 likes6,184 views
The document discusses APIs in MeeGo Tablet UX that allow customizing panels, publishing content, sharing content, and theming. It describes the Panels API, Content API, Sharing API, and how to theme the MeeGo tablet experience. Details include adding and reordering panels, publishing content to panels and search, and sharing content to social networks using plugins and models.
![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](https://image.slidesharecdn.com/customizingtabletux-final-110525172200-phpapp01/85/How-to-Customize-the-MeeGo-Tablet-UX-15-320.jpg)
![Thank You MeeGo Tablet UX APIs and Theme are in the meego-ux project in MeeGo Gitorious. My Contact Info [email_address] Contact Info for Contributing Engineers Content API [email_address] Panels API, Sharing API [email_address] Freenode #meego channel: jausmus](https://image.slidesharecdn.com/customizingtabletux-final-110525172200-phpapp01/85/How-to-Customize-the-MeeGo-Tablet-UX-33-320.jpg)
How to Customize the MeeGo Tablet UX
- 1. How to Customize the MeeGo Tablet UX Gail Rahn Frederick, Intel with contributions from Intel engineers Geoff Gustafson and James Ausmus and 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
- 4. MEEGO TABLET UX OVERVIEW
- 12. PANELS API
- 13. Panels API The 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. Overview Panels 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 Panel import Qt 4.7 import MeeGo.Components 0.1 import MeeGo.Panels 0.1 FlipPanel { 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!"); } } }
- 17. CONTENT API
- 18. Content API The 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 Properties The 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 Plugin Derive 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 Models Derive 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 Models Derive 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 Models Similar to feed model. Also derive from McaSearchableFeed Implement setSearchText() and provide relevant, matching results Return empty model when search text is empty
- 24. SHARING API
- 25. Sharing API The 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 Overview Sharing 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
- 27. Sharing UX The Sharing UX is a QML file containing the service-specific UI. Loaded via a Loader component in a Modal Dialog interface MeeGo.Sharing.UI contains widgets for consistent UX Must emit one of the following signals at the end of the UI flow: cancel() if share operation was cancelled shareError(string errMsg) if an error occurred errMsg is a user-visible translated string shared(int shareid) if share has started successfully shareid > 0 for tracking share progress shareid < 0 for a share operation that is “fire and forget”
- 28. Plugin Interface for MeeGo Sharing Daemon class 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) ; };
- 29. THEMING THE MEEGO TABLET UX
- 30. MeeGo Tablet UX Theme A 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 Theme Read Contributing.txt and Icon naming.txt to get started. Clone meego-ux-theme project locally. Update visual assets and theme.ini for your target resolution. (Here’s the visual design magic.) Test your assets on a MeeGo tablet by overwriting the contents of /usr/share/themes/RESOLUTION with new assets and rebooting. Package updated theme and release upstream or in your product.
- 32. Q&A
- 33. Thank You MeeGo Tablet UX APIs and Theme are in the meego-ux project in MeeGo Gitorious. My Contact Info [email_address] Contact Info for Contributing Engineers Content API [email_address] Panels API, Sharing API [email_address] Freenode #meego channel: jausmus
Editor's Notes
- #2: Welcome again to MeeGo conference. Today, we’ll learn how to customize the MeeGo Tablet UX using APIs and themes. My name is Gail Frederick and I work at Intel. This presentation is a business and technical collaboration between myself and two key Intel engineers developing the tablet UX, Geoff Gustafson and James Ausmus. They aren’t here today, but they are available via email to answer technical questions about the APIs we will discuss today.
- #3: This session discusses three new APIs in the MeeGo Tablet UX and how they are used to change the look-and-feel and behavior of a MeeGo Tablet. Then, we will explore the default MeeGo tablet theme and describe how to achieve visual differentiation by re-theming the UX. We’ll save time for a short Q&A session. The Panels API allows you to add and change the home screen panels. The Content API allows you to publish content to the Friends panel and to a search application. The Sharing API allows you to integrate media and status sharing targets (i.e. social networks) into the UX. The theme is the place where visual assets and configuration (fonts, colors, whitespace, etc.) are modified.
- #5: First, let’s start with a quick overview of the MeeGo Tablet user experience. This will highlight where in the UX developers can use tablet APIs to change the experience.
- #13: Now let’s talk about the three new APIs in the MeeGo Tablet UX
- #14: The Panels API modifies existing panels and adds new content into the panels in the tablet home screen. More convention than API, it allows you to customize the home screen in any way.
- #15: .panel file has a similar in format to a .desktop file
- #18: Now let’s talk about the Content API
- #19: The content API is a publishing API for making third-party content items available in the home screen and search results of the tablet UX. Search in MeeGo Tablet UX today is available as an API only. No built-in app or UX is available.
- #20: A content item in the API can specify these properties and actions for a content item
- #21: How do you use the content API? Write a content plugin and convey service content through lists of items in QAbstractItemModel
- #22: The Service Model describes the data source for the plugin - meaning the Web app or social network (i.e. Facebook, Last.fm, etc.) that you are integrating into the tablet UX.
- #23: The Feed model provides a feed of content items (i.e. social status updates, received IMs, etc) to be integrated into the Friends panel. The model defines content item properties and actions to perform when the user interacts with the content item.
- #25: Now let’s talk about the Sharing API
- #26: The Share API allows sharing of media and other kinds of application data with others across social networks and other Web services. Sharing happens in panels and applications in the tablet UX.
- #27: The front-end of the Sharing API is a QML wizard that walks the user through the sharing process (which is service-specific).
- #29: The back-end of the Sharing API is a C++ plugin for MeeGo Sharing Daemon that performs the sharing mechanics.
- #30: Now let’s talk about how to change the visual design of the tablet UX.
- #31: Another way to differentiate a MeeGo Tablet product is by re-theming the UX. The MeeGo Tablet UX theme is a collection of visual assets that