Mobile Application Development with MeeGo™ - Touch Apps & UI Design Composite MeeGo™ Courseware (content courtesy from THU, JYU) Mobile Application Development with MeeGo™ - Touch Apps & UI Design

UI design MeeGo Official UI design Principle & Guideline Qt UI related (QML, GUI, OpenGL, …) Powerful UI features and functionality Cross-platform (MeeGo/WinCE/Linux/Windows/…) Rich sample resource Related internet URLs

MeeGo Official UI design Principle & Guideline Connected, Vibrant and Alive It’s an internet of things Task Switching & Multi-tasking Handle multi-tasks for the user Adaptive & Intelligent It should be more smart Responsive immediate feedback without a noticeable lag Getting the basics right Not over smart Plug-ins & Framework support Framework design for easy to develop and easy to use Simply beautiful No more, no less, beautiful just enough

MeeGo Official UI design (handset) Principle & Guideline Comes from : http://meego.com/developers/ui-design-guidelines/handset Overview UI Feedback Full Screen Mode Applications Design Portrait & Landscape 1 vs. 2 Columns for list view Navigation in the Application

http://embed.cs.tsinghua.edu.cn/

Use or not use, It depends! UI feedback haptic feedback auditory feedback visual feedback Use or not use, It depends!

Full Screen Mode Controls a tap away Fixed controls provide a more immersive experience for user. Controls a tap away Fixed controls Avoid to make the tap as an interaction of the application, e.g. Flash player App. displaying the interaction contents, a game. Embedded Exit in Application Content

Applications Design Status Bar Title Bar Content Area Tool/Tab Bar

Portrait & Landscape It is recommended that all application provide both portrait and landscape mode. (Game is an exception)

Two columns Two columns in landscape can optimize the space usage, but make sure the list is not following a specific order.

Navigation in the application Drill Down

Navigation in the application Navigation in View Menu

Navigation in the application Navigation in Tab Bar

MeeGo Official UI design Principle & Guideline Small homework (optional) Please give your opinion about the difference between handset UI design guideline and netbook/IVI/… UI design guideline. If you have ideas, please share it with all in the university network school(http://learn.tsinghua.edu.cn) Some hints

Sample MeeGo Touch App A simple MeeGo touch ‘Hello World’ application, saved as main.cpp: #include <MApplication> #include <MApplicationWindow> #include <MApplicationPage> #include <MLabel> int main(int argc, char **argv) { MApplication app(argc, argv); MApplicationWindow window; MApplicationPage page; page.setTitle("My First Page"); page.setCentralWidget(new MLabel("Hello World!")); page.appear(&window); window.show(); return app.exec(); } 15 15

MApplication The first object to be created in MeeGo touch app. Derived from QApplication. Mainly created to: Handle the main event loop. Manage the GUI application's control flow and main settings. Construct an instance of QDbus service, MApplicationService. By default, only a single instance of any application is allowed. To allow multiple instances of an application, Derive a class from default MApplicationService. Override its launch() function. 16 16

MApplicationWindow Derived from MWindow. Create a top-level application window. Status bar Navigation bar Application Page Toolbar To insert content into the window, a MApplicationPage has to be created and shown. Orientation changes and in-scene windows are automatically managed Set MApplicationWindow full screen will hide status bar; set back normal mode will show status bar again. 17 17

MApplicationPage Derived from MSceneWindow. Provide a framework for building an application's user interface. Create an pannable viewport. Only one page can be displayed at any given time. Navigation between pages are also technically achievable. Call child page appear() will make current page disappear and show child page instead. Page navigation history is managed by MSceneManager. Manage navigation bar display mode. 18 18

Build Up MeeGo Touch App MeeGo touch is created on top of Qt, sharing Qt building system. Firstly generate project (.pro) file, by using command, A typical generated project file content, Add libmeegotouch into building system, edit project file, Following standard qmake steps, $ qmake -project ############################################### # Automatically generated by qmake (2.01a) Tue Apr 20 14:00:01 2010 ############################################### TEMPLATE = app TARGET =. DEPENDPATH += . INCLUDEPATH += . # Input SOURCES += main.cpp CONFIG += meegotouch $ qmake $ make 19 19