Asmira UI Architecture

UI Design, Architecture and Presentation by Ben Martinka, iAsia DigitalWorks, Inc., 2004

Forms

Actions

Tiles

Pages

Struts Framework

Forms• Fields• Field Groups• Data Collection• Data Display

Actions• Buttons, Links• Menus, Tabs• Commands, Icons• All Navigation

Tiles• Screen Layers• Building Blocks• Reusability• Consistency

Pages• Tile Assemblies• Action Targets• Application Flow• Task-Oriented

Forms

Actions

Tiles

Pages

Struts Framework

XMLconfig files,JSP code

pages

____________

____________

Tiles-def.xml

DefinesTiles &Pages

____________

____________

Struts-cfg.xml

DefinesForms &Actions

____________

____________

Web Page JSPs

HTML &Java forDisplayLogic

____________

____________

Action Classes

Java forProcess& FlowLogic

____________

____________

Tiles-def.xml

____________

____________

Struts-cfg.xml

____________

____________

Web Page JSPs

____________

____________

Action ClassesStruts Framework

Forms

Actions

Tiles

Pages

XMLconfig files,JSP code

pages

Tiles-def.xml

____________

____________

____________

____________

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

____________

Hand-coding of XML, JSP pages, Java classesgrows proportionally to UI requirements

UC Form Models:• Create• View• Edit• Search• List

____________

____________

Tiles-def.xml (Hand-coded, Map-assisted)

____________

____________

Struts-cfg.xml (Map-generated)

____________

____________

Web Page JSP Templates

____________

____________

Action ClassesStruts Frameworksupplemented by “Form Models” &XML-Generating “Content Maps”

____________

____________

____________

____________

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

____________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

_______________

_________

____________

Hand-coding reduced, consistency, security, maintainability added

Forms-def.xml(Map-generated)

Code-GeneratingUI Specs/ImplementationModel (Content Map.xls)

____________________________________ ____________________________________________________

____________________________________ ____________________________________________________

Field-level Access Control

(Manual)

____________

____________

Custom Pages

____________

____________

(Auto)(Auto)

(Specify)

Search Form Model

List Form Model

Entity View/Confirm Form Model

Entity Create/Edit Form Model

Additional UI Building Block Components

Reusable“Field Cluster”Tiles for commonattribute sets

EnumeratedDatatype Lists

Custom & Standardized Edit Control Tiles for facilitated Data Entry

CSS Stylesheet for Look & Feel Control Javascript Libraryfor Interactivity

Label & Message Repository(Internationalization-ready)

Images

UI Task FlowClient Requirements Docs:

• Data Field Matrices• Report Formats

• Use Cases

Build Data Dictionary:• Identify Enumerated Datatypes & Values• Identify Data Transfer Business Objects• Identify Data Attributes & Datatypes

Build Label & Message Repository:• ID/Store Form & Table Labels for all fields• ID/Store Group, Form & Page Headings• ID/Store User Notices, Errors & Tooltips

Produce UI Code:• Program Action Classes in Java, per Form• Generate XML Form Structures & Configs• Add Access Rights by Field, Role, Activity• Create any one-off custom pages needed• Integrate and Test components

Build Common Components:• Edit Control & Cluster Tiles & JSPs• Form & Page Model Tiles & JSPs• Navigation Tiles & Functionality• Framework Java shared by Actions• Javascript Library• CSS Stylesheet

Extra Development Requirements:• Build Field-level Security Console• Spec & Program Scanner Interfaces• PDA and/or SMS Requirements?• Other Custom Use Case Handling?

Build Content Map (per Submodule):• Identify & Structure ea. Search & List Form• Identify & Structure ea. Detail & Lookup Form• Identify Display & Validation Requirements• Identify each Page, Action, & flow between• Identify Tab Hierarchies & code into Tiles• Build Site Map Diagram