J2EE Struts UI Architecture and UI Design

1,889 views

Published on

J2EE Struts UI Architecture and UI Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,889
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

J2EE Struts UI Architecture and UI Design

  1. 1. Asmira UI<br />Architecture<br />UI Design, Architecture and Presentation by Ben Martinka, iAsia DigitalWorks, Inc., 2004<br />
  2. 2. Struts Framework<br />Actions<br />Forms<br />Pages<br />Tiles<br />
  3. 3. Forms<br /><ul><li> Fields
  4. 4. Field Groups
  5. 5. Data Collection
  6. 6. Data Display</li></li></ul><li>Actions<br /><ul><li> Buttons, Links
  7. 7. Menus, Tabs
  8. 8. Commands, Icons
  9. 9. All Navigation</li></li></ul><li>Tiles<br /><ul><li> Screen Layers
  10. 10. Building Blocks
  11. 11. Reusability
  12. 12. Consistency</li></li></ul><li>Pages<br /><ul><li> Tile Assemblies
  13. 13. Action Targets
  14. 14. Application Flow
  15. 15. Task-Oriented</li></li></ul><li>Web Page JSPs<br />Action Classes<br />____________<br />____________<br />HTML &<br />Java for<br />Display<br />Logic<br />Java for<br />Process<br />& Flow<br />Logic<br />Tiles-def.xml<br />____________<br />Struts-cfg.xml<br />____________<br />Defines<br />Tiles &<br />Pages<br />Defines<br />Forms &<br />Actions<br />Struts Framework<br />Actions<br />Forms<br />XML<br />config files,<br />JSP code<br />pages<br />Pages<br />Tiles<br />
  16. 16. Web Page JSPs<br />Action Classes<br />____________<br />____________<br />____________<br />____________<br />____________<br />____________<br />____________<br />Actions<br />____________<br />____________<br />____________<br />____________<br />____________<br />____________<br />Forms<br />____________<br />____________<br />____________<br />____________<br />Tiles-def.xml<br />XML<br />config files,<br />JSP code<br />pages<br />____________<br />____________<br />____________<br />____________________________________ ____________________________________________________<br />Struts-cfg.xml<br />____________<br />____________<br />____________<br />____________________________________ ____________________________________________________<br />____________<br />____________<br />____________<br />Pages<br />Tiles<br />Struts Framework<br />____________<br />____________<br />Tiles-def.xml<br />Hand-coding of XML, JSP pages, Java classes<br />grows proportionally to UI requirements<br />
  17. 17. Web Page JSP Templates<br />Custom Pages<br />Action Classes<br />____________<br />____________<br />____________<br />Tiles-def.xml (Hand-coded, Map-assisted)<br />____________<br />Struts-cfg.xml (Map-generated)<br />____________<br />Struts Framework<br />supplemented by <br />“Form Models” &<br />XML-Generating<br />“Content Maps”<br />____________<br />(Specify)<br />____________<br />UC Form Models:<br /><ul><li> Create
  18. 18. View
  19. 19. Edit
  20. 20. Search
  21. 21. List</li></ul>____________<br />____________<br />____________<br />____________<br />____________<br />Forms-def.xml<br />(Map-generated)<br />____________<br />____________<br />____________________________________ ____________________________________________________<br />____________<br />____________________________________ ____________________________________________________<br />____________<br />____________________________________ ____________________________________________________<br />____________<br />____________<br />Code-Generating<br />UI Specs/Implementation<br />Model (Content Map.xls)<br />(Auto)<br />(Auto)<br />(Manual)<br />____________<br />Field-level Access Control<br />Hand-coding reduced, consistency, security, maintainability added<br />
  22. 22. Search Form Model<br />
  23. 23. List Form Model<br />
  24. 24. Entity View/Confirm Form Model<br />
  25. 25. Entity Create/Edit Form Model<br />
  26. 26. CSS Stylesheet for Look & Feel Control<br />Javascript Library<br />for Interactivity<br />Reusable<br />“Field Cluster”<br />Tiles for common<br />attribute sets<br />Label & Message Repository<br />(Internationalization-ready)<br />Enumerated<br />Datatype Lists<br />Custom & Standardized Edit Control Tiles for facilitated Data Entry<br />Images<br />Additional UI Building Block Components<br />
  27. 27. Build Data Dictionary:<br /><ul><li> Identify Enumerated Datatypes & Values
  28. 28. Identify Data Transfer Business Objects
  29. 29. Identify Data Attributes & Datatypes</li></ul>Build Label & Message Repository:<br /><ul><li> ID/Store Form & Table Labels for all fields
  30. 30. ID/Store Group, Form & Page Headings
  31. 31. ID/Store User Notices, Errors & Tooltips</li></ul>Build Content Map (per Submodule):<br /><ul><li> Identify & Structure ea. Search & List Form
  32. 32. Identify & Structure ea. Detail & Lookup Form
  33. 33. Identify Display & Validation Requirements
  34. 34. Identify each Page, Action, & flow between
  35. 35. Identify Tab Hierarchies & code into Tiles
  36. 36. Build Site Map Diagram</li></ul>Produce UI Code:<br /><ul><li> Program Action Classes in Java, per Form
  37. 37. Generate XML Form Structures & Configs
  38. 38. Add Access Rights by Field, Role, Activity
  39. 39. Create any one-off custom pages needed
  40. 40. Integrate and Test components</li></ul>Client Requirements Docs:<br /><ul><li> Data Field Matrices
  41. 41. Report Formats
  42. 42. Use Cases</li></ul>UI Task Flow<br />Build Common Components:<br /><ul><li> Edit Control & Cluster Tiles & JSPs
  43. 43. Form & Page Model Tiles & JSPs
  44. 44. Navigation Tiles & Functionality
  45. 45. Framework Java shared by Actions
  46. 46. Javascript Library
  47. 47. CSS Stylesheet</li></ul>Extra Development Requirements:<br /><ul><li> Build Field-level Security Console
  48. 48. Spec & Program Scanner Interfaces
  49. 49. PDA and/or SMS Requirements?
  50. 50. Other Custom Use Case Handling?</li>

×