Fully utilize embedded hardware potential and create ... Next Generation UI What’s Required? •...

52
Fully utilize embedded hardware potential and create advanced user interfaces fast

Transcript of Fully utilize embedded hardware potential and create ... Next Generation UI What’s Required? •...

Fully utilize embedded hardware potential and create advanced user interfaces fast

The Embedded Revolution

• Embedded is changing• Previously devices had small displays, not much memory, not much

processing power

The Future of Interactive Embedded

• VGA resolution, 128MB RAM, 400MHz + memory, internet connectivity• Devices can do more• More engaging user experience• Touch screens• Animations

Next Generation UI – Video Album

Next Generation UI – Cover Flow

Next Generation UI - Picture Full Screen

Next Generation UI – Internet Radio

Next Generation UI – Video Telephony

What Does This Mean?

• Increased user expectations

• Increased software complexity

• A need for development tools that increase productivity

Creating Next Generation UIWhat’s Required?

• Modular and flexible framework• Capable of building great user interfaces• Take advantage of hardware graphics acceleration• Not just a GUI Toolkit• Support internationalization• Should be a C++ framework• Cross-platform• Must be fun to use!

History of Qt

• Started in 1994

• Desire for a good cross platform framework, initially on UNIX systems• Now Mac OS X, Windows, Linux and all UNIX flavors• Now on Embedded Linux, Windows CE

• Initially a cross-platform GUI framework, now complete application development framework

Introduction to Qt

• Mature Application Development Framework - C++• More than 600 classes• Configurable Footprint• Not just a GUI Toolkit• Tools

• Qt Designer• Qt Linguist• Qt Assistant• Qmake

Google Earth

Adobe Photoshop Elements

Skype

Qt is the Basis for Millions of Linux Devices

Mobile Phones Personal Media Players Wireless TV VoIP Phones

Personal Communicators Set-top Boxes Navigation Systems Wi-Fi Devices

And many, many more ...

Qt Embedded

• Two embedded platforms• Embedded Linux• Windows CE 5 and 6 (implicitly Windows Mobile 5 and 6)

• Qt API source compatible• Migrating application is a simple recompile

• Delivered with full source• Free to change• Greater ease of debugging

Creating Advanced User Interfaces Fast

• Widgets – standard and custom• CSS in a widget world – styling• Advanced painting

WidgetsBasic design

WidgetsConnecting to Code

• Member functions can be defined as signals or slots• Example; slider and spin box have:

• valueChanged() signals• setValue() slots

• Connect using:• Connect(slider, SIGNAL(valueChanged(int)), spinBox, SLOT(setValue(int)));

Connect(spinbox, SIGNAL(valueChanged(int)), slider, SLOT(setValue(int)));

• Result

WidgetsCustomizing

• Modify• Sub-class an existing widget

• Combining Widgets• Group widgets into a composite

• Create new• Sub-class QWidget

• Qt Designer accepts custom widgets

Qt Widget Samples

Styling/ThemingCSS in a Widget World

• Stylesheets – allow look & feel to be changed

qApp->setStyleSheet("QLineEdit { background-color: yellow }");

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

nameEdit->setStyleSheet("background-color: yellow");

qApp->setStyleSheet("QLineEdit { background-color: yellow }");

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

nameEdit->setStyleSheet("background-color: yellow");

Styling/ThemingExample

Styling/ThemingExample

Styling/ThemingExample

Advanced PaintingDrawings

Advanced PaintingSVG

Supporting Modules

Qt Core

• A toolkit of useful productivity enhancing classes• Files I/O, streams, strings, date and time, iterators

• Containers• Vectors, list, stack, queue, set, map, hash

• XML parsing• SAX, DOM,

Query

• Threading support

AA2

Slide 30

AA2 [I really didn’t want this slide at this point in the presentation. The purpose of the bullet points in this slide was that it should follow onAFTER the description of how to build a GUI. The intention is to differentiate us from the other GUI toolkits out there, to say why we are different, to say that we offer more than just a GUI toolkit, to say guide the listener into realising that we are a complete framework. It doesn’t have the same impact as the first thing we talk about]Alistair Adams, 5/28/2008

Webkit Integration

• What is it?• Not a Browser• Open source HTML rendering component • Used in

• Apple’s Safari browser, iPhone, Nokia Series 60

• Integrated with Qt so works on all Qt platforms• How can it be used?

• HTML formatted help• Include on-line web in an application• Use HTML/JavaScript to create user interface

c32

Slide 31

c32 Combine all these slide into 2 max. Script in at the end that next week, June 4, we will be offering a webinar on WebKit as well.Carol Røsland, 5/20/2008

ModuleMultimedia – Phonon

• Multimedia Framework • GStreamer backend for Linux• DirectShow for Windows CE

Video SinkVideo Sink

MediaObjectMediaObject Audio SinkAudio Sink

Media SourceDieHard.avi

Media SourceDieHard.avi

Video DeviceVideo Device

Audio DeviceAudio Device

PathPath

Module Database

• Classes to manipulate SQL Databases• Indices, Records, Tables, Queries

• Backends for different databases• DB2, Borland InterDase, MySQL, Oracle, ODBC, PostgreSQL, SQLite V2,

SQLite V3+, Sybase• Plus custom

ModuleNetworking

• HTTP 1.1• with proxy and cookie support

• Sockets,• TCP, UDP, SSL

• FTP

Webkit Architecture Diagram

QtWebKitQWebView, QWebPage, QWebFrame, QWebHistory, QWebSettings

WebKit

QtGui

QtCore

QtXMLQtNetwork

Executable

Webkit/Application Architecture Diagram

QtWebKitQWebView, QWebPage, QWebFrame, QWebHistory, QWebSettings

QtGui

QtCore

QtNetwork

WebKit

Application Code

HTML

JavaScript

QWidgetsreferenced from HTML

QObjects exposed to JavaScript namespace

WebKit Example

• Web page in Application• JavaScript invoking native object• Native signals invoking JavaScript• Native Widget in web page

Don’t Have the Hardware for the Device?

• No hardware?• Not enough units for all developers?• Cross development too slow?• No problem

• Develop on the host with Linux QVFB

removeItem = menu.addAction(tr("Delete Folder", "A special command to delete a folder"));

Qt Linguist – making i18n a breeze

Graphics Acceleration

• Trend to hardware graphics acceleration• User replaceable paint engine• DirectFB paint engine

Animations

• QObject's timers• High-resolution timers, event driven

• QTimeLine• A mid-level convenience API for time curves/paths• Standard time curves

• Linear, EaseIn, EaseOut, EaseInOut

• Custom time curves• f(t) = sin(t / 6.28) * 10 + 150

Future-proofing

• Cross-platform• Cross-version

Summary

• Qt is a well proven C++ Application Framework• Provides great productivity• Runs on many platforms• Great Internationalization support• Fun to use

But don’t take our word for it

• Try it out for yourself

www.trolltech.com/downloads

The End

• Questions

• For more info visit:www.trolltech.com

Backup slides / Q & A slides

Signals/Slots

• Alternative to callback technique • Better type safety• Powerful component programming

mechanism• Improves productivity

Why Customers Love Qt

• Things work the way we say they do• Things work the way people expect them to• Obvious things are easy, difficult things possible• Qt is a tool that feels right• ”Would you recommend Qt?” 19 out of 20 would!

Qt Customers are Satisfied and Loyal

• 94% report that Qt meets or exceeds expectations

• 92% would recommend Qt to others

• 76% report a productivity increase with Qt

• 80% renew Qt licenses

Advanced PaintingImage Composition