SSH Framework Online Mall Project 3 The use of Easyui to build a background page frame _java

In the previous two, we have integrated ssh and extracted the service and action parts of the interface, we can say that the basic development environment has been set up, this section we build a background page. Let's discuss two ways to build: Based on frameset and Easyui. Finally we will use Easyui to develop.
1. Extract the public JSP page
Let's take a look at the current JSP page:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <%@ taglib 
"uri=" http:// Java.sun.com/jsp/jstl/core "prefix=" C "%> 
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > 
 
 

Put aside the body part of the content does not look, because this is before the test, extraction JSP page refers to some of the common parts extracted to a new JSP page, and then included in the current JSP page. Because the later project will certainly introduce JS, CSS and other files, if the JSP page is written, will be very redundant, so we have to extract a common JSP to introduce these files and other things. We create a new public folder in the Webroot directory, where we create a new HEAD.JSPF (JSPF represents a JSP fragment that other JSP pages contain).

<%@ page language= "java" pageencoding= "UTF-8"%> <%@ taglib uri= 
"Http://java.sun.com/jsp/jstl/core" Prefix= "C"%> 
<c:set value= "${pagecontext.request.contextpath}" var= "Shop"/> 
<title> Tesco Mall </title> 
<!-- 
<script type= "Text/javascript" src= "></script> 
<style type=" Text/css "></style> 
 --></span> 

The comments section mainly contains JS and CSS, because it is still useless, just to build a framework, and so used to remove. <c:set> tags will be replaced ${pagecontext.request.contextpath} with ${shop} to facilitate the writing. Then the new JSP will include this HEAD.JSPF. Let's look at the modified index.jsp:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <! 
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > 
 
 

Is there a kind of object oriented thinking ~

2. Build the background page based on frameset
2.1 Finding Problems
template Extraction Well, now we start to build the background page frame, first we use frameset to do. Create a new folder in the Web-inf directory Main page to save the background, create a new four JSP files in main: aindex.jsp, top.jsp, left.jsp, and right.jsp. Our frameset is written in aindex.jsp, and the other three are simply writing a sentence to test, and let's look at aindex.jsp:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <! 
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" > 
 
 

The structure is very obvious, divide the page into 3 pieces, on or around. Each module contains the corresponding JSP page, and then we write the <a href= "/wen-inf/main/aindex.jsp" > Test to the background </a> in the body of index.jsp, and start Tomcat. found that clicking the link is not accessible to the background. The reason is that the JSP in the Web-inf directory can not jump directly, need to go through the servlet or action to jump. There is no way, can only write a new jump action.
2.2 Write a page jump action
We first write a action to complete the page jump, the action is simply to implement the page jump, do not deal with any business logic.

/** 
 * @Description: TODO (This action is used to complete web-inf JSP and JSP request forwarding function, this action does not handle any logic) 
 * @author eson_15 
 * 
 * * Public 
class SendAction extends Actionsupport {public 
 
 String execute () {return 
 "send"; 
 } 
} 

We can see that sendaction did not inherit the baseaction we extracted before, but simply inherited the Actionsupport. Then we configure it in the Struts.xml file:

<?xml version= "1.0" encoding= "UTF-8"?> <! 
DOCTYPE struts public 
 "-//apache Software foundation//dtd struts Configuration 2.3//en" 
 "http:// Struts.apache.org/dtds/struts-2.3.dtd "> 
 
<struts> 
 <package name=" Shop "extends=" Struts-default "> 
 
 <!--Global result, valid for all action in this package--></span> 
 <global-results> 
 <result name= "Aindex" >/WEB-INF/main/aindex.jsp</result> 
 </global-results> 
 
 <! --omitting the other action's configuration ......</span>--> 
 
 <!--the action to complete the system request forwarding, all requests are given to execute--> 
 <action name= " Send_*_* "class=" SendAction "> 
 <result name=" send ">/WEB-INF/{1}/{2}.jsp</result> 
 </ action> 
 </package> 
 
</struts> 

Don't forget to configure in Beans.xml: <bean id= "SendAction" class= "Cn.it.shop.action.SendAction"/>.
This action is matched with two * numbers for easy access to web-inf/*/*.jsp, which requires a good address in the JSP. Let's look at the wording in aindex.jsp:

 <span style= "Font-family:microsoft Yahei;" > <%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  
 

From the modified aindex.jsp can be seen, we do not directly access the web-inf/under the JSP (we also can not access), we go through the action to jump, so we index.jsp in the body of the <a href= "Send_main_" Aindex.action "> Test to Background </a>, and then start Tomcat, you can click on the link normal access to the main background page.
From the above use frameset to build the process of background page, or very troublesome, it is a page included in the development will not use frameset, and Easyui only a page, all the requests are AJAX requests, Let's take a look at how to use Easyui to build a background page.

3. Build the background page based on Easyui
the jquery Easyui is a collection of UI plug-ins based on jquery, and the goal of jquery Easyui is to help Web developers easily create a rich and aesthetically pleasing UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags.
3.1 Import Easyui related components
We first in the project in the Webroot directory to import Easyui required components, online download, I use is jquery-easyui-1.3.5, remove some unwanted things, the final results are as follows:

3.2 build Easyui environment
        We opened just extracted the HEAD.JSPF file, where the import Easyui rely on the CSS and JS, other pages to introduce the JSPF file can be indirectly introduced Easyui rely on the CSS and JS:

The

 <%@ page language= "java" pageencoding= "UTF-8"%>, <%@ taglib uri= "Http://java". Sun.com/jsp/jstl/core "prefix=" C "%> <c:set value=" ${pagecontext.request.contextpath} "var=" Shop "/> < Title> Shopping Mall </title> <!--below is the Easyui environment--> <link rel= "stylesheet" href= ${shop Themes/icon.css "type=" Text/css "></link> <link rel=" stylesheet "href=" ${shop}/jquery-easyui-1.3.5/ Themes/default/easyui.css "type=" Text/css "></link> <script type=" Text/javascript "src=" ${shop}/ Jquery-easyui-1.3.5/jquery.min.js "></script> <script type=" Text/javascript "src=" ${shop}/ Jquery-easyui-1.3.5/jquery.easyui.min.js "></script> <script type=" Text/javascript "src=" ${shop}/ Jquery-easyui-1.3.5/locale/easyui-lang-zh_cn.js "></script> 

3.3 Set up a background frame
        web-inf/main/ The top.jsp, left.jsp, and right.jsp in the catalogue are deleted because they are not available now, and then the aindex.jsp page can now be used Easyui:

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >  

So much of the <div> here is to refer to the Easyui document above, I post it below. Start with the entire layout layout, remove what we don't need, and we just have three parts north, west and center:

Add the Accordon category layout to the West section Div, adding the code to the HEAD.JSPF:

So we simply set up the background of the page frame, and later just fill in the inside of things on the line. We test in the index.jsp: <a href= "Send_main_aindex.action" > directly to the background Easyui version </a> So the JSP will find we have just written sendaction and then jump to ewb-inf/main/aindex.jsp, you can correctly display the background frame, as follows:

At this point, we have successfully built the framework of the background page using Easyui.

(Note: In the end I will provide the entire project source download!) Welcome everyone to collect or share

Source of the entire project download address: http://www.jb51.net/article/86099.htm

Original address: http://blog.csdn.net/eson_15/article/details/51312490

The above is the entire content of this article, I hope to give you a reference, but also hope that we support the cloud habitat community.