1. 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

2. 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

3. 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

4. MeeGo Official UI design (handset) Principle & Guideline
Comes from :
Overview
UI Feedback
Full Screen Mode
Applications Design
Portrait & Landscape
1 vs. 2 Columns for list view
Navigation in the Application

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

7. 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

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

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

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

11. Navigation in the application
Drill Down

12. Navigation in the application
Navigation in View Menu

13. Navigation in the application
Navigation in Tab Bar

14. 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(
Some hints

15. 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

16. 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

17. 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

18. 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

19. 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: ###############################################
TEMPLATE = app
TARGET =.
DEPENDPATH += .
INCLUDEPATH += .
# Input
SOURCES += main.cpp
CONFIG += meegotouch
$ qmake
$ make 19 19