Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to Customize the MeeGo Tablet UX Gail Rahn Frederick, Intel with contributions from Intel engineers Geoff Gustafson an...
Agenda <ul><li>MeeGo Tablet UX Overview </li></ul><ul><li>New APIs in MeeGo Tablet UX </li></ul><ul><ul><li>Panels API </l...
What Can be Customized? <ul><li>MeeGo Tablet UX APIs allow developers to: </li></ul><ul><li>add and change panels </li></u...
MEEGO TABLET UX OVERVIEW
 
 
 
 
 
 
 
PANELS API
Panels API <ul><li>The Panels API adds and changes panels in the tablet home screen. </li></ul><ul><li>You can: </li></ul>...
Overview <ul><li>Panels are defined in a  .panel  file  </li></ul><ul><ul><li>in /usr/share/meego-ux-panels/panels/ </li><...
Example .panel file <ul><li>[Panel] </li></ul><ul><li>DisplayName=Example  #Used in Panels settings </li></ul><ul><li>Disp...
Example Panel <ul><li>import Qt 4.7 </li></ul><ul><li>import MeeGo.Components 0.1 </li></ul><ul><li>import MeeGo.Panels 0....
CONTENT API
Content API <ul><li>The Content API integrates content services into the home screen and search: </li></ul><ul><li>Publish...
Content Properties <ul><li>The Content API supports these content item properties </li></ul><ul><ul><li>Title text </li></...
How to Write a MeeGo Content Plugin <ul><li>Derive plugin class from  McaFeedPlugin </li></ul><ul><li>Implement  serviceMo...
Service Models <ul><li>Derive from  McaServiceModel </li></ul><ul><ul><li>Each list item describes one service or data sou...
Feed Models <ul><li>Derive from  McaFeedModel </li></ul><ul><ul><li>Each list item is a  relevant  content item </li></ul>...
Search Models <ul><li>Similar to feed model. Also derive from  McaSearchableFeed </li></ul><ul><ul><li>Implement  setSearc...
SHARING API
Sharing API <ul><li>The Sharing API allows sharing of media and application data to social networks and other Web services...
Sharing API Overview <ul><li>Sharing API has two service-specific components: </li></ul><ul><li>QML UI plugin for sharing ...
Sharing UX <ul><li>The Sharing UX is a QML file containing the service-specific UI. </li></ul><ul><li>Loaded via a  Loader...
Plugin Interface for MeeGo Sharing Daemon <ul><li>class MeeGoUXSharingServicePluginInterface: public Qobject { </li></ul><...
THEMING THE MEEGO TABLET UX
MeeGo Tablet UX Theme <ul><li>A theme is a collection of visual assets and configuration that defines the visual skin of t...
Changing the MeeGo Tablet UX Theme <ul><ul><li>Read  Contributing.txt  and  Icon  naming.txt  to get started. </li></ul></...
Q&A
Thank You <ul><li>MeeGo Tablet UX APIs and Theme are in the  meego-ux  project in MeeGo Gitorious. </li></ul><ul><li>My Co...
Upcoming SlideShare
Loading in …5
×

How to Customize the MeeGo Tablet UX

12,326 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

How to Customize the MeeGo Tablet UX

  1. 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. 2. Agenda <ul><li>MeeGo Tablet UX Overview </li></ul><ul><li>New APIs in MeeGo Tablet UX </li></ul><ul><ul><li>Panels API </li></ul></ul><ul><ul><li>Content API </li></ul></ul><ul><ul><li>Sharing API </li></ul></ul><ul><li>Theming a MeeGo Tablet </li></ul><ul><li>Q&A </li></ul>
  3. 3. What Can be Customized? <ul><li>MeeGo Tablet UX APIs allow developers to: </li></ul><ul><li>add and change panels </li></ul><ul><li>publish new kinds of content into panels and search results </li></ul><ul><li>share user-generated content to social networks and other Web targets </li></ul><ul><li>Visually re-skin the user experience </li></ul>
  4. 4. MEEGO TABLET UX OVERVIEW
  5. 12. PANELS API
  6. 13. Panels API <ul><li>The Panels API adds and changes panels in the tablet home screen. </li></ul><ul><li>You can: </li></ul><ul><li>Add a new panel </li></ul><ul><li>Re-order panels </li></ul><ul><li>Change panel contents </li></ul><ul><li>Remove panels </li></ul><ul><li>See meego-ux-panels in MeeGo Gitorious. </li></ul>
  7. 14. Overview <ul><li>Panels are defined in a .panel file </li></ul><ul><ul><li>in /usr/share/meego-ux-panels/panels/ </li></ul></ul><ul><ul><li>sets panel properties </li></ul></ul><ul><ul><li>points to a QML file with panel layout </li></ul></ul><ul><li>Use Panel UI widgets for consistent UX </li></ul><ul><ul><li>import MeeGo.Panels 0.1 </li></ul></ul>
  8. 15. Example .panel file <ul><li>[Panel] </li></ul><ul><li>DisplayName=Example #Used in Panels settings </li></ul><ul><li>DisplayName[fi]=Esimerkki #Example translation </li></ul><ul><li>DefaultIndex=6 #Desired default ordering </li></ul><ul><li>UniqueName=example #Used for settings save/load </li></ul><ul><li>Path=/usr/share/meego-ux-panels/example/examplepanel.qml </li></ul><ul><li>#Path to actual panel QML </li></ul>
  9. 16. Example Panel <ul><li>import Qt 4.7 </li></ul><ul><li>import MeeGo.Components 0.1 </li></ul><ul><li>import MeeGo.Panels 0.1 </li></ul><ul><li>FlipPanel { </li></ul><ul><li>id: container </li></ul><ul><li>Translator { catalog: &quot;meego-ux-panels-example&quot; } </li></ul><ul><li>front: SimplePanel { </li></ul><ul><li>panelTitle: qsTr(&quot;Example&quot;) </li></ul><ul><li>panelComponent: PrimaryTile { </li></ul><ul><li>text: &quot;Hello world!“ </li></ul><ul><li>} </li></ul><ul><li>back: BackPanelStandard { </li></ul><ul><li>panelTitle: qsTr(&quot;Example settings&quot;) </li></ul><ul><li>subheaderText: qsTr(&quot;Example panel content&quot;) </li></ul><ul><li>onClearHistClicked:{ </li></ul><ul><li>console.log(&quot;Clear history clicked!&quot;); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  10. 17. CONTENT API
  11. 18. Content API <ul><li>The Content API integrates content services into the home screen and search: </li></ul><ul><li>Publish a content feed to the Friends panel </li></ul><ul><li>Make content available in search results </li></ul><ul><ul><li>See meego-ux-content in MeeGo Gitorious. </li></ul></ul>
  12. 19. Content Properties <ul><li>The Content API supports these content item properties </li></ul><ul><ul><li>Title text </li></ul></ul><ul><ul><li>Description text </li></ul></ul><ul><ul><li>Icon (optional) </li></ul></ul><ul><ul><li>Thumbnail (optional) </li></ul></ul><ul><ul><li>Timestamp </li></ul></ul><ul><ul><li>Default action (tap) </li></ul></ul><ul><ul><li>Custom actions (context menu) </li></ul></ul>
  13. 20. How to Write a MeeGo Content Plugin <ul><li>Derive plugin class from McaFeedPlugin </li></ul><ul><li>Implement serviceModel() to provide a list of the services whose content is published in this plugin </li></ul><ul><li>Implement createFeedModel() to provide a live feed of data for Friends panel (optional) </li></ul><ul><li>Implement createSearchModel() to provide search results (optional) </li></ul><ul><li>Each implemented method returns a QAbstractItemModel with a list of items. </li></ul><ul><li>Now let’s look at each kind of model… </li></ul>
  14. 21. Service Models <ul><li>Derive from McaServiceModel </li></ul><ul><ul><li>Each list item describes one service or data source (i.e. social network, Web API, protocol, etc.) </li></ul></ul><ul><ul><li>Use data roles defined in servicemodel.h </li></ul></ul><ul><ul><ul><li>Service name (unique to a plugin) </li></ul></ul></ul><ul><ul><ul><li>Display name </li></ul></ul></ul><ul><ul><ul><li>Icon </li></ul></ul></ul><ul><ul><ul><li>Category (use “email”, “social” or “im” in Friends panel) </li></ul></ul></ul><ul><ul><ul><li>Implement config error and actions to provide the user a quick way to configure the service </li></ul></ul></ul>
  15. 22. Feed Models <ul><li>Derive from McaFeedModel </li></ul><ul><ul><li>Each list item is a relevant content item </li></ul></ul><ul><ul><li>Provide content to be displayed </li></ul></ul><ul><ul><ul><li>Title, content, avatar, picture, timestamp </li></ul></ul></ul><ul><ul><li>Provide actions object </li></ul></ul><ul><ul><ul><li>Default action when user taps your content item </li></ul></ul></ul><ul><ul><ul><ul><li>E.g. open your application to detail view of content </li></ul></ul></ul></ul><ul><ul><ul><li>Custom actions for a context menu </li></ul></ul></ul><ul><ul><ul><ul><li>E.g. mark as spam, delete, … </li></ul></ul></ul></ul><ul><ul><li>Provide QAbstractItemModel signals when new content items arrive </li></ul></ul>
  16. 23. Search Models <ul><li>Similar to feed model. Also derive from McaSearchableFeed </li></ul><ul><ul><li>Implement setSearchText() and provide relevant, matching results </li></ul></ul><ul><ul><li>Return empty model when search text is empty </li></ul></ul>
  17. 24. SHARING API
  18. 25. Sharing API <ul><li>The Sharing API allows sharing of media and application data to social networks and other Web services. </li></ul><ul><li>Sharing happens in panels and apps in the tablet UX. </li></ul><ul><ul><li>See the API in meego-ux-sharing and implementations in meego-ux-sharing-socialweb and meego-ux-sharing-email on MeeGo Gitorious. </li></ul></ul>
  19. 26. Sharing API Overview <ul><li>Sharing API has two service-specific components: </li></ul><ul><li>QML UI plugin for sharing UX </li></ul><ul><ul><li>Add comments, set privacy options, etc. </li></ul></ul><ul><li>C++ plugin to MeeGo Sharing Daemon </li></ul><ul><ul><li>Interacts with service to do the sharing operations </li></ul></ul>
  20. 27. Sharing UX <ul><li>The Sharing UX is a QML file containing the service-specific UI. </li></ul><ul><li>Loaded via a Loader component in a Modal Dialog interface </li></ul><ul><li>MeeGo.Sharing.UI contains widgets for consistent UX </li></ul><ul><li>Must emit one of the following signals at the end of the UI flow: </li></ul><ul><ul><li>cancel() if share operation was cancelled </li></ul></ul><ul><ul><li>shareError(string errMsg) if an error occurred </li></ul></ul><ul><ul><ul><li>errMsg is a user-visible translated string </li></ul></ul></ul><ul><ul><li>shared(int shareid) if share has started successfully </li></ul></ul><ul><ul><ul><li>shareid > 0 for tracking share progress </li></ul></ul></ul><ul><ul><ul><li>shareid < 0 for a share operation that is “fire and forget” </li></ul></ul></ul>
  21. 28. Plugin Interface for MeeGo Sharing Daemon <ul><li>class MeeGoUXSharingServicePluginInterface: public Qobject { </li></ul><ul><li>Q_OBJECT </li></ul><ul><li>public: </li></ul><ul><li>/* … removed some methods to fit slides …*/ </li></ul><ul><li> virtual QHash<QString, QString> metaData() = 0; </li></ul><ul><li>virtual QList<MeeGoUXSharingServiceInfo> getServices() = 0; </li></ul><ul><li>virtual int Share(QString serviceName, const QString &sharetype, ArrayOfShareItemStruct items, QString &errmessage) = 0; </li></ul><ul><li>virtual bool CancelShare(QString serviceName, int opid) = 0; </li></ul><ul><li>signals: </li></ul><ul><li>void ShareProgress(const QString &service, int opid, int progress, const QString &message) ; </li></ul><ul><li>}; </li></ul>
  22. 29. THEMING THE MEEGO TABLET UX
  23. 30. MeeGo Tablet UX Theme <ul><li>A theme is a collection of visual assets and configuration that defines the visual skin of the tablet UX. </li></ul><ul><li>Theme contents are icons, graphics, backgrounds, fonts, colors and margins. </li></ul><ul><li>The default MeeGo Tablet theme is open source. </li></ul><ul><ul><li>meego- ux-theme project in MeeGo Gitorious </li></ul></ul>
  24. 31. Changing the MeeGo Tablet UX Theme <ul><ul><li>Read Contributing.txt and Icon naming.txt to get started. </li></ul></ul><ul><ul><li>Clone meego-ux-theme project locally. </li></ul></ul><ul><ul><li>Update visual assets and theme.ini for your target resolution. (Here’s the visual design magic.) </li></ul></ul><ul><ul><li>Test your assets on a MeeGo tablet by overwriting the contents of /usr/share/themes/RESOLUTION with new assets and rebooting. </li></ul></ul><ul><ul><li>Package updated theme and release upstream or in your product. </li></ul></ul>
  25. 32. Q&A
  26. 33. Thank You <ul><li>MeeGo Tablet UX APIs and Theme are in the meego-ux project in MeeGo Gitorious. </li></ul><ul><li>My Contact Info </li></ul><ul><li>[email_address] </li></ul><ul><li>Contact Info for Contributing Engineers </li></ul><ul><li>Content API </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><li>Panels API, Sharing API </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>Freenode #meego channel: jausmus </li></ul></ul>

×