Technical University Hamburg-Harburg Project Study Report Fenfang Xu Asset Presentation in Open Dynamic Content Management Systems: A Model of User Interface Components and Design Considerations for a Visualization Engine or Generator Degree course: Information and Media Technologies Supervising examiner: Prof. Dr. Joachim W. Schmidt Second examiner: Dr. Hans-Werner Sehring Delivery day 30th August 2004 2 Index 1 Introduction ........................................................................................................................... 9 1.1 Motivation.................................................................................................................................... 9 1.2 The Structure of this Project Report....................................................................................... 10 2 Requirements....................................................................................................................... 11 2.1 Problems of Existing User Interface Visualization Approaches........................................... 11 2.2 Requirements of a Visualization Engine or Generator.......................................................... 15 2.3 Possible Approaches ................................................................................................................. 16 3 Selected Visualization Components................................................................................... 21 3.1 Container Component .............................................................................................................. 21 3.1.1 Window Component........................................................................................................................... 22 3.1.2 Panel Component................................................................................................................................ 23 3.1.3 Toolbar Component............................................................................................................................ 23 3.2 Layout Management................................................................................................................. 24 3.2.1 Design of Layout Managers According to the Strategy Pattern ......................................................... 24 3.2.2 GridLayout Manager .......................................................................................................................... 25 3.2.3 GridBagLayout Manager.................................................................................................................... 26 3.2.4 BoxLayout Manager........................................................................................................................... 26 3.2.5 FlowLayout Manager ......................................................................................................................... 26 3.2.6 BorderLayout Manager....................................................................................................................... 27 3.3 The MVC Design Pattern to Design View Component and Model and Controller............ 27 3.3.1 The Model-View-Controller Design Pattern ...................................................................................... 27 3.3.2 View Component................................................................................................................................ 28 3.3.3 Active Components ............................................................................................................................ 31 3.4 UI Components.......................................................................................................................... 32 4 Visualization Technologies ................................................................................................. 33 4.1 Layout Description Languages ................................................................................................33 4.1.1 SGML-based Layout Description Languages..................................................................................... 34 4.1.2 XML-based Layout Description Languages....................................................................................... 34 4.2 Tool-based Interface Generation.............................................................................................44 4.3 Toolkits and User Interface Libraries for Programming Languages .................................. 46 4.4 Scripting Languages ................................................................................................................. 48 4.5 UI Technologies Supported by a Visualization Engine or Generator .................................. 49 5 A Visualization Engine or Generator................................................................................ 51 5.1 Analysis of Possibilities to Implement a Visualization Engine or Generator ...................... 51 5.2 GUI Domain .............................................................................................................................. 52 5.3 Technology Domain .................................................................................................................. 54 5.4 Different Possibilities for Implementation of a GUI Engine or Generator.......................... 54 5.4.1 Creating a UI Component Based on the Type of an Asset’s Content Reference................................ 54 5.4.2 A Java Class is the Value of a Characteristic of an Asset................................................................... 56 5.4.3 An Instance of a Component is the Value of a Characteristic of an Asset ......................................... 58 5.4.4 An Instance of a UI Component is the Value of a Content of an Asset.............................................. 60 5.4.5 A Combination of Technologies as Instances and Components as Classes........................................ 62 5.4.6 A Different Combination of Technologies as Instances and Components as Classes ........................ 64 5.4.7 Another Combination of Technologies as Instances and Components as Classes ............................. 66 5.5 Comparison of Different Possibilities to Implement a GUI Engine or Generator.............. 68 6 Summary and Outlook........................................................................................................ 71 6.1 Summary.................................................................................................................................... 71 6.2 Outlook....................................................................................................................................... 71 Appendix A: Visualization Components Class Diagrams .....................................................I Appendix B: Visualization Technologies Diagrams........................................................... III Appendix C: Glossary............................................................................................................. V Appendix D: References ........................................................................................................IX Declaration...........................................................................................................................XIII 4 List of Figures Figure 2-1: Assets represent entities by [content | concept]-pairs............................................ 12 Figure 2-2: Three-tier architecture ........................................................................................... 12 Figure 2-3: The waterfall model............................................................................................... 13 Figure 2-4: Iterative incremental development model ............................................................. 13 Figure 2-5: The evolution of a user interface........................................................................... 14 Figure 2-6: The personalization of a user interface.................................................................. 15 Figure 2-7: The variants of a user interface ............................................................................. 15 Figure 2-8: Use case diagram of a user.................................................................................... 17 Figure 2-9: The working mechanism of the UI visualization engine or generator .................. 17 Figure 2-10: Case diagram of a domain designer .................................................................... 18 Figure 2-11: Case diagram of a GUI engine or generator........................................................ 18 Figure 3-1: Components class diagram.................................................................................... 21 Figure 3-2: Container class diagram ........................................................................................ 22 Figure 3-3: Frame..................................................................................................................... 22 Figure 3-4: Internal frame ........................................................................................................ 22 Figure 3-5: Dialog .................................................................................................................... 23 Figure 3-6: Panel ...................................................................................................................... 23 Figure 3-7: Scroll panel...........................................................................................................