Anatomy of the PetShop series six PetShop Presentation Layer Design

The Presentation Layer can be designed for the System

The most direct experience and confidence of customers. Just as people interact with each other, the feeling of first meeting is always unforgettable. A product delivered to the customer. For example, the User Interface (UI) lacks attractive features, the Interface is unfriendly, and the operation is not considerate, even if the performance of this product is very good, the architecture design is reasonable, and the business logic satisfies the customer's needs, it is still difficult to win the customer's favor. The saying goes: "Buddha wants gold, people need clothing", especially for Web applications, Web pages are like human clothes, representing the identity and face of the entire system, it is the biggest selling point of "customers.

As an art cell, I am not planning to make a big fuss about the art design on the user interface. I will skip this book. This chapter focuses on the presentation layer design. It also describes the application of the pattern in the presentation layer design, ASP. the Design and Application of the. NET control also includes. NET 2.0 new features.

6.1 MVC Mode

The most important mode in the presentation layer design is the Model-View-Controller (Model-View-Controller) mode. The MVC pattern was first proposed by the SmallTalk Language Research Group and is widely used in user interaction applications. The Controller modifies the attributes of the Model according to the user request (Response). At this time, the Event is triggered, and all View objects dependent on the Model are automatically updated, A Response is generated based on the Model object and returned to the Controller. In "enterprise application architecture model", Martin Fowler shows the entire process of MVC application, as shown in 6-1:

Figure 6-1 Typical MVC Mode

For example, if the MVC mode is split into three independent parts: Model, View, and Controller, we can implement and manage the relationships between them through the GOF design mode. In the system architecture design, the domain objects at the business logic layer and the data value objects at the data access layer belong to the Model objects in the MVC mode. To manage the relationship between the Model and View, you can use the Observer mode and View as the Observer. Once the attribute value of the Model changes, the View will be notified to update the Model-based value. The Controller, as the object for controlling user requests/responses, can use the Mediator mode to specifically regulate between request/response tasks. For View itself, we usually design it as a component or control based on the component-oriented design philosophy. These components or controls vary according to their own characteristics, a structure similar to a recursive combination of objects, so we can use the Composite mode to design View objects.

However, on the. NET platform, we do not need to implement the MVC mode on our own. ASP. NET has provided common Web controls, we can also inherit the System. web. UI. userControl: customizes user controls, and combines Web controls with ASPX pages to implement views. ASP. NET defines the System. Web. UI. Page class, which is equivalent to the Controller object in MVC mode and can process user requests. Because codebehind technology is used, the display logic of the user interface is completely separated from the UI implementation logic. That is to say, the View object and the Controller object become relatively independent, this facilitates code reusability. Compared with ASP, this programming method is more in line with the programming habits of developers and is conducive to the division of labor and collaboration between developers and uidesigners. The Model object is the domain object of the business logic layer. In addition, the. NET platform provides DataSet objects through ADO. NET to facilitate binding to the data source of the Web control.

6.2 Page Controller mode Application

The presentation layer design of PetShop makes full use of ASP. the technical features of. NET are controlled and displayed through Web pages and user controls, and the domain objects in the business logic layer are added to the presentation layer implementation logic by using codebehind technology, A typical Page Controller mode.

The Page Controller mode is one of the most important presentation layer modes of Martin Fowler in enterprise application architecture mode. On the. NET platform, the implementation of the Page Controller mode is very simple. Take the Products. aspx Page as an example. First, configure the following settings on the aspx page:

<% @ Page AutoEventWireup = "true" Language = "C #" MasterPageFile = "~ /MasterPage. master "Title =" Products "Inherits =" PetShop. Web. Products "CodeFile = "~ /Products. aspx. cs "%>

The Aspx Page inherits from the System. Web. UI. Page class. By inheriting the System. Web. UI. Control class, a Page object inherits the features of Web controls and implements the IHttpHandler interface. As an interface for ASP. NET to process HTTP Web requests, the following definitions are provided:

[AspNetHostingPermission (SecurityAction. InheritanceDemand,
Level = AspNetHostingPermissionLevel. Minimal ),
AspNetHostingPermission (SecurityAction. LinkDemand,
Level = AspNetHostingPermissionLevel. Minimal)]
Public interface IHttpHandler
{
Void ProcessRequest (HttpContext context );
Bool IsReusable {get ;}
}

The Page class implements the ProcessRequest () method, through which you can set the Request and Response attributes of the Page object to complete user Request/Corresponding Control. The Page class then associates the View with the Model through the Load events inherited from the Control class, as shown in Products. aspx. cs:

Public partial class Products: System. Web. UI. Page
{
Protected void Page_Load (object sender, EventArgs e)
{
// Get page header and title
Page. Title = WebUtility. GetCategoryName (Request. QueryString ["categoryId"]);
}
}

The event mechanism happens to be implemented in the observer mode. When the Load event of the ASPX page is triggered, the system uses GetCategoryName () of the WebUtility class (detailed introduction to the WebUtility class in Chapter 28th () method to obtain the Category value and display it on the Title of the page. As a Controller, the Page object is like a mediator used to coordinate the relationship between views and models.

Because the ASPX Page can also contain Web controls, these control objects are also View objects, which are controlled by Page objects. For example, in CheckOut. on the aspx page, when a user sends a CheckOut request. web. UI. webControls. wzdCheckOut of the Winzard control type triggers the FinishButtonClick event at the end of the wizard process, and calls the Insert () method of the domain object Order in this event, as shown below:

Public partial class CheckOut: System. Web. UI. Page

Protected void wzdCheckOut_FinishButtonClick (object sender, WizardNavigationEventArgs e ){
If (Profile. ShoppingCart. CartItems. Count> 0 ){
If (Profile. ShoppingCart. Count> 0 ){

// Display ordered items
CartListOrdered. Bind (Profile. ShoppingCart. CartItems );

// Display total and credit card information
LtlTotalComplete. Text = ltlTotal. Text;
LtlCreditCardComplete. Text = ltlCreditCard. Text;

// Create order
OrderInfo order = new OrderInfo (int. minValue, DateTime. now, User. identity. name, GetCreditCardInfo (), billingForm. address, shippingForm. address, Profile. shoppingCart. total, Profile. shoppingCart. getOrderLineItems (), null );

// Insert
Order newOrder = new Order ();
NewOrder. Insert (order );

// Destroy cart
Profile. ShoppingCart. Clear ();
Profile. Save ();
}
}
Else {
LblMsg. text = "<p> <br> Can not process the order. your cart is empty. </p> <p class = SignUpLabel> <a class = linkNewUser href = Default. aspx> Continue shopping </a> </p> ";
WzdCheckOut. Visible = false;
}
}

In the above Code, the relationship between Model and View is very typical. It obtains the property value of the control and passes it as a parameter value to the data value object OrderInfo, creates an Order object using the Order information generated on the page, and then calls the Inser () of the domain object Order () method to insert the OrderInfo object to the data table. In addition, it also makes a judgment on the ShoppingCart data item of the domain object. If its value is equal to 0, the UI prompt information is displayed on the page. In this case, the View Content determines the value of the Model, and the reverse Model value determines the display content of the View.

6.3 ASP. NET controls

ASP. NET control is the most important part of the View object. It makes full use of the object-oriented design ideas to build control objects through encapsulation and inheritance, so that when users develop Web pages, these controls can be reused and even customized. In Chapter 8th, I have introduced the design idea of controls in. NET Framework, and implemented the control tree by introducing a Composite mode. In ASP. NET Control, System. web. UI. control is the root of the Control tree, which defines all ASP.. NET controls have common properties, methods, and events, and are responsible for managing and controlling the entire lifecycle of controls.

The Control base class does not contain specific UI functions. To provide UI-related method attributes, You need to derive from the System. Web. UI. WebControls. WebControl class. This class is actually a subclass of the Control class, but it attaches attributes such as ForeColor, BackColor, and Font.

In addition, an important class is System. Web. UI. UserControl, which is also a subclass of the Control class. We can customize some user controls derived from UserControl. in the Visual Studio Design environment, we can combine multiple types of controls into a Custom User Control by dragging them, you can also add new attributes and methods to the Custom User control class in codebehind mode.

The hierarchical structure of the entire ASP. NET control class is 6-2:

Figure 6-2 hierarchical structure of ASP. NET control classes