Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Juan de Hoyos 
Zühlke Engineering GmbH 
Juan.dehoyos@zuehlke.com 
Applying the Presentation Model 
Design Pattern in Qt St...
© Zühlke 2014 
What makes an application awesome? 
Applying the Presentation Model Design Pattern in Qt Style | Juan de Ho...
What makes a graphical interface awesome?(*) 
© Zühlke 2014 
1. Clarity 
2. Concision 
3. Familiarity 
4. Responsiveness 
...
© Zühlke 2014 
It’s not that easy 
• Complex UI: mix C++/QML/Javascript 
• Low degree of encapsulation 
• Where to place c...
© Zühlke 2014 
Classical Layer architecture 
View 
Business logic 
Infrastructure 
• Display information 
• React to user ...
• UI state 
• Data transformation 
• Synchronize View and BL layers 
(*) http://martinfowler.com/eaaDev/PresentationModel....
© Zühlke 2014 
Qt to rescue! 
What we want: to Pull the functionality out of view but still profit from 
QML/Javascript ex...
© Zühlke 2014 
Example: Log viewer 
Display critical logs 
Display all logs 
Applying the Presentation Model Design Patter...
View Presentation Model 
• Log to display 
• Filter button 
• Window title 
EventLogs.qml 
• List of logs 
• Current Filte...
© Zühlke 2014 
Wrap up 
• In complex UIs pulling the presentation behavior out of the widgets pays 
off: Presentation Mode...
Thanks! 
Juan de Hoyos 
Zühlke Engineering GmbH 
Juan.dehoyos@zuehlke.com 
Applying the Presentation Model Design Pattern ...
Nächste SlideShare
Wird geladen in …5
×

Applying the Presentation Model Design Pattern in Qt

1.380 Aufrufe

Veröffentlicht am

In complex user interfaces is sometimes a good idea to pull the state and behavior of the widgets out of the widgets and create and additional abstraction layer between the widgets and the domain model. This layer collects the domain data needed to display and guarantee consistence with the model underneath, without need of polluting the widgets with complex additional logic. To address this problem, the Presentation Model design pattern was born. However, the price we have to pay is adding more complexity to our application. More concretely, we need a way to keep the model, the view and the domain layer synchronized.

By leveraging from core features of Qt and QML like signals/slots and the high degree of expressiveness of declarative programing, we can apply the Presentation Model with much less pain as we’ll experience in raw C++.

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Applying the Presentation Model Design Pattern in Qt

  1. 1. Juan de Hoyos Zühlke Engineering GmbH Juan.dehoyos@zuehlke.com Applying the Presentation Model Design Pattern in Qt Style © Zühlke 2014 Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 1
  2. 2. © Zühlke 2014 What makes an application awesome? Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 2
  3. 3. What makes a graphical interface awesome?(*) © Zühlke 2014 1. Clarity 2. Concision 3. Familiarity 4. Responsiveness 5. Consistency 6. Aesthetics 7. Efficiency 8. Forgiveness (*) wikipedia:http://en.wikipedia.org/wiki/User_interface Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 3
  4. 4. © Zühlke 2014 It’s not that easy • Complex UI: mix C++/QML/Javascript • Low degree of encapsulation • Where to place common functionality? • Widgets aware of domain layer • … Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 4
  5. 5. © Zühlke 2014 Classical Layer architecture View Business logic Infrastructure • Display information • React to user actions • UI state • Data transformation • Domain rules • Data structures • Application state • Data Persistence • Networking • Etc. Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 5
  6. 6. • UI state • Data transformation • Synchronize View and BL layers (*) http://martinfowler.com/eaaDev/PresentationModel.html © Zühlke 2014 Adding a new layer: Presentation Model* View Presentation Model Business logic Infrastructure Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 6
  7. 7. © Zühlke 2014 Qt to rescue! What we want: to Pull the functionality out of view but still profit from QML/Javascript expressivity: • Keep the business logic in C++ • Write the model(s) in QML – Synchronize via Signal/Slots and property binding Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 7
  8. 8. © Zühlke 2014 Example: Log viewer Display critical logs Display all logs Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 8
  9. 9. View Presentation Model • Log to display • Filter button • Window title EventLogs.qml • List of logs • Current Filtering (state) EventLogsPM.qml Set Filter Model changed Visible logs QML Retrieve Logs C++ • Business Logic EventLogs.cpp Logs Logs Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 9 © Zühlke 2014
  10. 10. © Zühlke 2014 Wrap up • In complex UIs pulling the presentation behavior out of the widgets pays off: Presentation Model Pattern. • This increases the complexity, specially by the synchronization of data. • Fortunately, Qt provides us features that make the synchronization easier: • Signal/Slots • Property binding • By using QML in the model we can benefit of a declarative approach. Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 10
  11. 11. Thanks! Juan de Hoyos Zühlke Engineering GmbH Juan.dehoyos@zuehlke.com Applying the Presentation Model Design Pattern in Qt Style | Juan de Hoyos 30. September 2014 Slide 11 © Zühlke 2014

×