HTML Learn Online Technology 

Designing a view Component : Part I

Sourabh Bhunje 0 Comments

Designing a view Component:

Views are one of two aspects of boundary components from Jaconson’s Analysis models.

Types of View Components

There are four fundamental types of views:

  • Data presentation

This includes any data presented on a visible screen. There are many forms of presentation including graphs, spreadsheets, listings, and so on.

  • Data forms

Forms for data entry are also considered view components.

  • Navigational aids

In this, the type of view includes menus, hyperlinks, site maps, and so on.

  • Informational screens or pop ups

This type of view includes welcome text, instructions, help screen, error messages, confirmation dialogs, and so on.

Soccer League Case Study:

  • Throughout this course you see examples of web application development based on a Soccer League domain.
  • For the purpose of this course, this domain is summarized by the following use case diagram, as shown in figure.

 Analysis Models League

  • You see these three use cases developed within evolving web application architecture, the complexity of the domain has been kept to a developing skill.

List League Analysis Model:

  • An analysis model provides a set of abstract components that are needed to realize a particular use case.
  • The figure given below provides an example Analysis model for the List All Available Leagues use case.

Analysis Models League

  • It is beyond the scope of this course to teach you how to construct an Analysis model. However, the table given below is a summary of the three types of Analysis model components.

Analysis Model Components:

Component Description Symbol
Boundary  A boundary component is any component that communicates with an end user of a system, There are two fundamental aspects of boundary components: view and controllers. Analysis Models
Service The service component does provide a layer of services that communicate between boundary components and entity component.
Entity An entity component does represent thedomain entities; such components usually do represent persistent domain data and can include complex object oriented behavior.

 

List League Page Flow:

  • Based on analysis model, there are two boundary components: Home and ListLeagues.
  • The Home component is welcome (or home) page of the Soccer League web application.
  • From the home page, a user can select the List all leagues hyperlink, which sends an HTTP request to the web application for the ListLeagues component.
  • The ListLeagues component does provide a view, which lists all of the soccer leagues that exist in the system.
  • These two pages are the complete web application. Another view of this web application is the logic hierarchy of URL’s.
  • This hierarchy shows the complete set (and structure) of the URLs that a user can access while using the Soccer League web application.
  • Notice that list_leagues.view is a symbolic resource name. the web container dispatches an HTTP request for this URL to a servlet to dynamically generate the list of leagues.
  • You see how to develop that servlet and how to configure the URL mapping to that aservlet in this module.

Home Page HTML:

The code given below shows the HTML code for the first half of the home page.

 

  1. <html>
  3. <head>
  4. <title>Duke’s Soccer League: Home</title>
  5. </head>
  7. <body bgcolor = ‘white’>
  9. <!– Page Heading–>
  10. <table border = ‘1’ cellpadding = ‘5’ cellspacing = ‘0’ width = ‘400’>
  11. <tr bgcolor = ‘#CCCCFF’ align = ‘center’ valign = ‘center’ height = ‘20’>
  12. <td><h3>Duke’s Soccer League: Home</h3></td>
  13. </tr>
  15. <p>
  16. This is the Home Page for Duke’s Soccer League.
  17. </p>
  19. <h3>Players</h3>
  21. <ul>
  22. <li><a href = ‘list_leagues.view’>List all the Leagues</a></li>
  23. <li>Register for a league (TBA)</li>
  24. </ul>
  26. <h3>League Administrator</h3>
  28. <ul>
  29. <li>Add a new league (TBA)</li>
  30. </ul>
  32. </body>
  34. </html>

Home Page HTML (Part 2):

In the above code shows the HTML code for the second half of the home page. Notice a hyperlink on line 22. The ‘href’ attribute does hold a relative URL path to the List Leagues page.

List Leagues Page HTML:

  • The code given below shows the HTML output code for the List Leagues page.
  • The soccer league list, lines through are generated dynamically, the rest is static HTML.
  • Later in this, there are instructions to develop the servlet to create the dynamic and static content.

 

  1. <html>
  3. <head>
  4. <title>Duke’s Soccer League: Home</title>
  5. </head>
  7. <body bgcolor = ‘white’>
  9. <!– Page Heading –>
  10. <table border = ‘1’ cellpadding = ‘5’ cellspacing = ‘0’ width = ‘400’>
  11. <tr bgcolor = ‘#CCCCFF’ align = ‘center’ valign = ‘center’ height=’20’>
  12. <td><h3>Duke’s Soccer League: List Leagues</h3></td>
  13. </tr>
  14. </table>
  16. <p>
  17. The set of soccer leagues are:
  18. </p>
  20. <ul>
  21. <li>the Summer of Soccer Love 2014</li>
  22. <li>Fall Soccer League (2013)</li>
  23. <li>Fall Soccer League (2012)</li>
  24. <li>Soccer League (Spring’s 03)</li>
  25. <li>Summer Soccer Fast 2003</li>
  26. <li>Soccer League (Spring’s 04)</li>
  27. </ul>
  29. </body>
  30. </html>

Sourabh Bhunje

Sourabh Bhunje, B.E. IT from Pune University. Currently Working at Techliebe. Professional Skills: Programming - Software & Mobile, Web & Graphic Design, Localization, Content Writing, Sub-Titling etc. http://techliebe.com/about-us

Leave a Reply