SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
QML, the future of Qt’s UI
New Paradigms for Portable User Interfaces
What Determines a User Interface (UI)



• Graphics Power

• Screen

• Input Method

• Purpose
What Determines a User Interface (UI)

                   15 years ago


• Graphics Power 2D primitives

• Screen          75dpi

• Input Method    keybord, joystick, mouse

• Purpose         offline content creation, calculation
What Determines a User Interface (UI)

                  Today


• Graphics Power animated 3D rendering

• Screen         240dpi

• Input Method   keyboard, stylus, touch, accelerometer

• Purpose        managing huge amounts of content
                 (online & offline), communication,
                 collaboration, fun
Widget Model



    Window

        Widget

             Widget




                      Widget
                               Widget


             Widget            Widget
Widget Model



•   Widgets are rectangular
•   Widgets have a parent and optional child widgets
•   Widgets are clipped to their parent and clip their children
•   Widgets draw the pixels they are responsible for
•   Widgets manage their content
•   Widgets are expensive to show/hide/move/resize
•   Widgets are (almost) impossible to flip/rotate/stretch
Example 1: A List of Items
Example 1: A List of Items
Widget Model


UIs using widgets are

   –   Clearly structured / Bulky
   –   Static
   –   Enforcing standard platform look and feel
   –   Very useful for traditional applications
The Future




             Widgets
What do we want?


• Express a UI the way we think about it: components,
  views, states, transitions, animations and effects
• Connect the UI to real data and back-end functionality
• Everything should be fast and easy
• In fact so easy that also designers can do it (e.g. the sort
  of people doing Flash, Silverlight and Web)
What do we want?


• A world where developers and designers work directly
  together on the same project
• A world where a UI is determined by its usability and not
  by limitations of the underlying technology
Meet QML


• QML is a new declarative language extension to Qt
• It maps almost directly to how you should think about a
  UI: components, views, states, transitions, animations
  and effects
• The declarative language itself is simple and intuitive,
  the rest is JavaScript.
• All the power and freedom of Qt is still available
Live Demonstration
Summary


• QML is a new declarative language extension to Qt
• It provides you with all the elements you need to think
  about a UI and nothing more
• It allows complete concentration on the UI and finding
  and solving problems as fast as possible
• It’s so simply and intuitive that designers and developers
  can work directly together
• Programmers: You will never want to code a UI in C++
  again
• Designers: You will never need to prototype the UI with a
  separate technology again

Más contenido relacionado

Similar a Qt Developer Days 2009 Keynote - Portable UIs

Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Development
binuvt
 
Accelerate Time to Market by Pipelining UX with Development - Part 1
Accelerate Time to Market by Pipelining UX with Development - Part 1Accelerate Time to Market by Pipelining UX with Development - Part 1
Accelerate Time to Market by Pipelining UX with Development - Part 1
ICS
 

Similar a Qt Developer Days 2009 Keynote - Portable UIs (20)

Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2Accelerate Time to Market by Pipelining UX with Development - Part 2
Accelerate Time to Market by Pipelining UX with Development - Part 2
 
Integrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product LifecycleIntegrating User Experience Design into the Product Lifecycle
Integrating User Experience Design into the Product Lifecycle
 
User Experience Prototyping
User Experience PrototypingUser Experience Prototyping
User Experience Prototyping
 
Usability & Agile Development
Usability & Agile DevelopmentUsability & Agile Development
Usability & Agile Development
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI PrototypingGame Design 2 (2013): Lecture 5 - Game UI Prototyping
Game Design 2 (2013): Lecture 5 - Game UI Prototyping
 
Create great UIs for budget phones
Create great UIs for budget phonesCreate great UIs for budget phones
Create great UIs for budget phones
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
ICS3211 Week6
ICS3211 Week6ICS3211 Week6
ICS3211 Week6
 
Qt WebKit going Mobile
Qt WebKit going MobileQt WebKit going Mobile
Qt WebKit going Mobile
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 
Accelerate Time to Market by Pipelining UX with Development - Part 1
Accelerate Time to Market by Pipelining UX with Development - Part 1Accelerate Time to Market by Pipelining UX with Development - Part 1
Accelerate Time to Market by Pipelining UX with Development - Part 1
 
Online platforms for ICT Content Development
Online platforms for ICT Content DevelopmentOnline platforms for ICT Content Development
Online platforms for ICT Content Development
 
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU Module 1st USER INTERFACE DESIGN (15CS832) - VTU
Module 1st USER INTERFACE DESIGN (15CS832) - VTU
 
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_holeRabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
Rabbit Hole® – A User Experience Case StudyCx ux engage_2014_rabbit_hole
 
Interaction design
Interaction designInteraction design
Interaction design
 
Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
 
PyData NYC 2015 Presentation
PyData NYC 2015 PresentationPyData NYC 2015 Presentation
PyData NYC 2015 Presentation
 
Angular JS - UI Development Online Training
Angular JS - UI Development Online TrainingAngular JS - UI Development Online Training
Angular JS - UI Development Online Training
 
Ux Meets Code Interaction Usability
Ux Meets Code Interaction UsabilityUx Meets Code Interaction Usability
Ux Meets Code Interaction Usability
 

Más de account inactive

Más de account inactive (20)

Meet Qt
Meet QtMeet Qt
Meet Qt
 
KDE Plasma for Mobile Phones
KDE Plasma for Mobile PhonesKDE Plasma for Mobile Phones
KDE Plasma for Mobile Phones
 
Shipping Mobile Applications Using Qt for Symbian
Shipping Mobile Applications Using Qt for SymbianShipping Mobile Applications Using Qt for Symbian
Shipping Mobile Applications Using Qt for Symbian
 
The Future of Qt Widgets
The Future of Qt WidgetsThe Future of Qt Widgets
The Future of Qt Widgets
 
Scripting Your Qt Application
Scripting Your Qt ApplicationScripting Your Qt Application
Scripting Your Qt Application
 
Special Effects with Qt Graphics View
Special Effects with Qt Graphics ViewSpecial Effects with Qt Graphics View
Special Effects with Qt Graphics View
 
Developments in The Qt WebKit Integration
Developments in The Qt WebKit IntegrationDevelopments in The Qt WebKit Integration
Developments in The Qt WebKit Integration
 
Qt Kwan-Do
Qt Kwan-DoQt Kwan-Do
Qt Kwan-Do
 
Qt on Real Time Operating Systems
Qt on Real Time Operating SystemsQt on Real Time Operating Systems
Qt on Real Time Operating Systems
 
Development with Qt for Windows CE
Development with Qt for Windows CEDevelopment with Qt for Windows CE
Development with Qt for Windows CE
 
Translating Qt Applications
Translating Qt ApplicationsTranslating Qt Applications
Translating Qt Applications
 
Qt Creator Bootcamp
Qt Creator BootcampQt Creator Bootcamp
Qt Creator Bootcamp
 
Qt State Machine Framework
Qt State Machine FrameworkQt State Machine Framework
Qt State Machine Framework
 
Mobile Development with Qt for Symbian
Mobile Development with Qt for SymbianMobile Development with Qt for Symbian
Mobile Development with Qt for Symbian
 
How to Make Your Qt App Look Native
How to Make Your Qt App Look NativeHow to Make Your Qt App Look Native
How to Make Your Qt App Look Native
 
Animation Framework: A Step Towards Modern UIs
Animation Framework: A Step Towards Modern UIsAnimation Framework: A Step Towards Modern UIs
Animation Framework: A Step Towards Modern UIs
 
Using Multi-Touch and Gestures with Qt
Using Multi-Touch and Gestures with QtUsing Multi-Touch and Gestures with Qt
Using Multi-Touch and Gestures with Qt
 
Debugging Qt, Fixing and Contributing a Bug Report (Using Gitorious)
Debugging Qt, Fixing and Contributing a Bug Report (Using Gitorious)Debugging Qt, Fixing and Contributing a Bug Report (Using Gitorious)
Debugging Qt, Fixing and Contributing a Bug Report (Using Gitorious)
 
The Mobility Project
The Mobility ProjectThe Mobility Project
The Mobility Project
 
Copy Your Favourite Nokia App with Qt
Copy Your Favourite Nokia App with QtCopy Your Favourite Nokia App with Qt
Copy Your Favourite Nokia App with Qt
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 

Qt Developer Days 2009 Keynote - Portable UIs

  • 1. QML, the future of Qt’s UI New Paradigms for Portable User Interfaces
  • 2. What Determines a User Interface (UI) • Graphics Power • Screen • Input Method • Purpose
  • 3. What Determines a User Interface (UI) 15 years ago • Graphics Power 2D primitives • Screen 75dpi • Input Method keybord, joystick, mouse • Purpose offline content creation, calculation
  • 4. What Determines a User Interface (UI) Today • Graphics Power animated 3D rendering • Screen 240dpi • Input Method keyboard, stylus, touch, accelerometer • Purpose managing huge amounts of content (online & offline), communication, collaboration, fun
  • 5. Widget Model Window Widget Widget Widget Widget Widget Widget
  • 6. Widget Model • Widgets are rectangular • Widgets have a parent and optional child widgets • Widgets are clipped to their parent and clip their children • Widgets draw the pixels they are responsible for • Widgets manage their content • Widgets are expensive to show/hide/move/resize • Widgets are (almost) impossible to flip/rotate/stretch
  • 7. Example 1: A List of Items
  • 8. Example 1: A List of Items
  • 9. Widget Model UIs using widgets are – Clearly structured / Bulky – Static – Enforcing standard platform look and feel – Very useful for traditional applications
  • 10. The Future Widgets
  • 11. What do we want? • Express a UI the way we think about it: components, views, states, transitions, animations and effects • Connect the UI to real data and back-end functionality • Everything should be fast and easy • In fact so easy that also designers can do it (e.g. the sort of people doing Flash, Silverlight and Web)
  • 12. What do we want? • A world where developers and designers work directly together on the same project • A world where a UI is determined by its usability and not by limitations of the underlying technology
  • 13. Meet QML • QML is a new declarative language extension to Qt • It maps almost directly to how you should think about a UI: components, views, states, transitions, animations and effects • The declarative language itself is simple and intuitive, the rest is JavaScript. • All the power and freedom of Qt is still available
  • 15. Summary • QML is a new declarative language extension to Qt • It provides you with all the elements you need to think about a UI and nothing more • It allows complete concentration on the UI and finding and solving problems as fast as possible • It’s so simply and intuitive that designers and developers can work directly together • Programmers: You will never want to code a UI in C++ again • Designers: You will never need to prototype the UI with a separate technology again