< PreviousChapter 7: Implementation200Figure 7.4: GemstoneJS Build Process 201Figure 7.5: GemstoneJS Hello World in the Web Browser202Chapter 8ExampleChapter 8: Example204Chapter Contents8.1 User Interface Specification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2078.1.1 Domain Use Cases ................................................... 2078.1.2 Domain Data Model ................................................. 2098.1.3 Dialog Mock-Up ...................................................... 2098.2 User Interface Architecture ................................................. 2098.2.1 Hierarchical Decomposition ....................................... 2098.2.2 Rich-Client Architecture ............................................ 2098.3 User Interface Implementation ............................................ 2128.3.1 Application Manifest (package.json) ............................. 2128.3.2 Front End: Application Manifest (fe/package.json) ............. 2138.3.3 Front End: Application Configuration (fe/gemstone.yaml) .... 2148.3.4 Front End: Main Procedure (fe/src/main.js) ...................... 2148.3.5 Front End: Common Code (fe/src/common.js) .................. 2168.3.6 Front End: Common Style (fe/src/common.css) ................. 2178.3.7 Front End: Screen Components (fe/src/screen.js) ............... 2188.3.8 Front End: Screen View Mask (fe/src/screen.html) .............. 2208.3.9 Front End: Screen View I18N (fe/src/screen.yaml) .............. 2228.3.10 Front End: Screen View Style (fe/src/screen.css) ................ 2228.3.11 Front End: Units Components: (fe/src/units.js) .................. 2238.3.12 Front End: Units I18N (fe/src/units.yaml) ......................... 2248.3.13 Front End: Unit Components (fe/src/unit.js) ..................... 2258.3.14 Front End: Unit View Mask (fe/src/unit.html) .................... 2278.3.15 Front End: Unit View I18N (fe/src/unit.yaml) ..................... 2288.3.16 Front End: Unit View Style (fe/src/unit.css) ....................... 2288.3.17 Front End: Persons Components: (fe/src/persons.js) ........... 2298.3.18 Front End: Persons I18N (fe/src/persons.yaml) .................. 2308.3.19 Front End: Person Components (fe/src/person.js) .............. 2308.3.20 Front End: Person View Mask (fe/src/person.html) ............. 2338.3.21 Front End: Person View I18N (fe/src/person.yaml) .............. 2348.3.22 Front End: Person View Style (fe/src/person.css) ................ 2348.3.23 Front End: Roster Components (fe/src/roster.js) ................ 2358.3.24 Front End: Roster View Mask (fe/src/roster.html) ................ 2378.3.25 Front End: Roster View I18N (fe/src/roster.yaml) . . . . . . . . . . . . . . . . 2388.3.26 Front End: Roster View Style (fe/src/roster.css) .................. 2388.3.27 Back End: Application Manifest (be/package.json) ............. 2398.3.28 Back End: Application Configuration (be/app.ini) .............. 240 2058.3.29 Back End: Main Procedure (be/src/main.js) ...................... 2408.3.30 Back End: GraphQL Network API (be/src/api.js) ................. 2418.3.31 Back End: Database Access (be/src/db.js) . . . . . . . . . . . . . . . . . . . . . . . . 2438.4 User Interface Results ....................................................... 2458.4.1 Source-Code Quantitative Summary ............................. 2458.4.2 Development-Time Screen-Shot .................................. 2478.4.3 User Interface Screen-Shots ........................................ 2478.4.4 Component Tree Visualization ..................................... 247Chapter 8: Example206User Interface Specification2078.1 User Interface SpecificationWalking on water and developing software from a specification are easy if both are frozen. — Edward V. BerardIn this section, a small example application, named Units and Persons (UnP), is speci-fied. The application is small enough, so one does not get lost in too many Software Engineering aspects, and large enough, so enough aspects of the Hierarchical User Interface Component Architecture (HUICA) can be later used in the subsequent implementation. However, there are intentionally no specification details in this section which are specific to the later use of HUICA.8.1.1 Domain Use CasesThe Units and Persons (UnP) application should allow the administration of a com-pany’s organization, based on organization units and persons. The application should support the following four particular Use Cases (see also Figure 8.1 on page 207): ■Use Case 1: Create or Delete a Unit ■Use Case 2: Modify a Unit ■Use Case 3: Create or Delete a Person ■Use Case 4: Modify a PersonThe UnP application allows the administra-tion of an organization’s linked Units and Persons.Create or DeleteUnitUserModifyUnitCreate or DeletePersonModifyPersonFigure 8.1: UnP Use CasesChapter 8: Example208Figure 8.3: UnP Dialog Mock-Up (Balsamiq Wireframe)*parentUnitUnitid: UUIDname: Stringabbreviation: StringPersonid: UUIDname: Stringinitials: Stringrole: StringbelongsTomembers0..10..1supervisordirector0..10..1Figure 8.2: UnP Data Model (UML Class Diagram)User Interface Architecture2098.1.2 Domain Data ModelThe domain data model of the Units and Persons (UnP) application consists of just the two entities Unit and Person, the two intra-relationships Unit.parentUnit and Person.supervisor, and the three inter-relationships Unit.director, Unit.members and Person.belongsTo. See Figure 8.2 on page 208 for the correspond-ing UML Class Diagram.8.1.3 Dialog Mock-UpThe User Interface (UI) of the Units and Persons (UnP) application con-sists of just a single window with four particular Dialogs, each Dialog corresponding to one of the four Use Cases above. See Figure 8.3 on page 208 for the corresponding Wireframe-based Dialog Mock-Up, giv-ing a rough sketch of the UI.8.2 User Interface ArchitectureIf you think good architecture is expensive, try bad architecture. — Brian Foote & Joseph YoderIn this section, the major architecture decisions have to be made. What technology stack to use for implementing the Hierarchical User Interface Component Archi-tecture (HUICA) and what particular Dialog composition structure to apply to the User Interface.8.2.1 Hierarchical DecompositionThe HTML5 Single-Page-App (SPA) based User Interface will use Hierarchical User Interface Component Architecture (HUICA) and hence we have to decide on the particular Hierarchical Decomposition. See Figure 8.5 on page 210 for the result-ing logical Dialog decomposition.See Figure 8.4 on page 210 for the proposed technical Component Tree, cor-responding to the particular Hierarchical Decomposition and the MVC/CT patterns Reusable Widget, Standalone Controller and Full Triad. 8.2.2 Rich-Client ArchitectureAs the Hierarchical User Interface Component Architecture (HUICA) should be applied and HUICA primarily targets the Rich-Client Architecture of HTML5 Single-Page-Apps (SPA), the GemstoneJS and GraphQL-IO frameworks are chosen for the HTML5 SPA based Front End of the Units and Persons (UnP) application.The UnP UI directly maps the two domain entities and their relationships onto a single screen.Next >