Introduction to the elegant design and examples of the view layer in the MVC Framework

In B/S-based application development, the basic technical division is two major blocks: one is the software display interface, and the other is the program logic. In the scripting language era N years ago, ASP, PHP, and JSP are the two of us. Although we try to reuse a lot of functions or files to achieve software reuse, we still cannot meet changing user needs, this is mainly because the previous pure script encoding method could not well support and applied the powerful functions in the object-oriented (OO) field.

In common B/S software projects, the interface design includes the HTML interface, WAP interface, and other interfaces represented by the text character protocol. Taking the HTML pages we have the most access to as an example, when creating these interfaces, we often need to use graphic interface design tools such as PhotoShop or fireworks for global design, then, use HTML page creation tools such as Dreamweaver for processing and production. Powerful Program Logic and background processing are completed by the server-side programs, which have high stability, its development tools, such as JBuilder and eclipse, do not support view-layer interfaces very well (except for applications that use NotePad to write interfaces ), this makes the design of many MVC frameworks impossible.

As a friendly MVC framework, while simplifying the development of server applications, the design of the view layer should not affect the work of interface personnel too much, the most basic requirement is not to add too many tags and other elements that are not supported by the design software (for example, many struts labels are not supported in Dreamweaver ). Here we take easyjweb as an example to discuss how to implement reasonable design in the view layer.

Easyjweb, as a fast Java Web MVC Framework, is designed not only to simplify the coding of software developers, but also to facilitate the work of interface designers.

Of course, to enable the interface to be integrated with the background program logic, it is inevitable that a certain number of dialog protocols are required between the display interface and the program logic. Easyjweb, as an MVC framework, also has such a dialog protocol, which is the Interface Template identification language in easyjweb.

In the current version, the easyjweb Interface Template identification language uses the Apache open-source velocity template engine ), of course, more template engines will be added as needed for the framework application to choose.

Velocity is a Java-based template engine that allows anyone to reference objects defined by Java code simply using the template language. As a relatively complete template engine, velocity has powerful functions, but it also increases application complexity.

Theoretically, you can use all the velocity scripts and functions in the easyjweb template. However, we do not recommend that you use too many complex script expressions in the Interface Template, do not add any complicated logic to the Interface Template, or add variable declaration and logical operators to the Interface Template.

In easyjweb, we provide four basic template script statements to meet the requirements of all application templates. These four template statements are simple and can be directly added by the interface designer. In many easyjweb application practices, we can see that only the following four simple template script statements can be summarized in all interface templates:

1. $! OBJ returns the object result directly.
　　
For example, the Java object MSG value is displayed in the HTML Tag. <P> $! MSG </P>
Display the value of the MSG object processed by the htmlutil object in the HTML Tag. <p> $! Htmlutil. dosomething ($! MSG) </P>

2. # If ($! OBJ) # else # End judgment statement

For example, in easyjweb open-source applications, we often see examples for pop-up message MSG.
# If ($ MSG)
<SCRIPT>
Alert ('$! MSG ');
</SCRIPT>
# End
The above script indicates that when the object MSG object exists, the content after <SCRIPT> is output.

3. # foreach ($ info in $ list) $ info. Something # End cyclically reads the objects in the list of sets and processes them accordingly.
　　
For example, in the easyjf open-source forum system, the Forum homepage displays HTML Interface Template scripts with hot topics.

# Foreach ($ info in $ hotlist1)
<A href = "/bbsdoc. EJF? Easyjwebcommand = show & cid = $! Info. CID "target =" _ blank ">$! Info. Title </a> <br>
# End
The preceding script traverses objects in the hotlist1 set cyclically and outputs related content of objects.
　　
4. # macro (macroname) # End Script Function (macro) calls. It is not recommended to use them in a large number in the Interface Template.

For example, the template content displayed in the sorting status is often seen in easyjf simple order management and other systems.
Function (macro) definition, usually placed at the beginning
# Macro (orderpic $ type)
# If ($ orderfield. Equals ($ type ))

# End
# End

For example, <font color = "# ffffff"> title # orderpic ("title") </font>
　　
　　　　
Summary:
Of course, in practical application projects, there will be many complex and easy-to-change demands to make the interface more user-friendly. For example, the system displays different color prompts and voice prompts based on different object statuses. In this case, you still need to use too many template script functions with caution. Most of the requirements can be solved in a flexible way. Some information can directly add logical conversion information to the object, some interface requirements can be achieved by using expressions related to specific interfaces, such as JavaScript, CSS, and WMLScript on HTML pages. Only in this way can we ensure that the core of your system is not affected and controlled by the interface, so as to better expand and maintain your system.

We hope that you can become a real programmer, not just proficient in a specific scripting language, so we do not want Java developers to spend too much time on the view layer.

Due to the limited level, the content mentioned in this article is more unreasonable or needs to be improved. please correct me!