使用java搭建簡單的ligerui環境 -开发者知识库

使用java搭建簡單的ligerui環境 -开发者知识库,第1张

       最近因為工作需要,學習了ligerui框架。但是,因為在公司,我們只是作為最低層的碼農,所以環境都已經搭建好了,我們這些碼農平時都是直接拿到工程,然后在別人的框架上不斷的ctrl c、ctrl v,然后修修補補。所以為了擺脫這種困境,決定自己使用簡單的servlet搭建一個ligerui,然后測試下ligerui這玩意到底是怎么跑起來的。

        1、下載ligerui相關組件。這個很簡單,直接去www.ligerui.com即可找到。

        2、使用Eclipse創建一個web工程,然后搭建下面這個目錄結構。


                                                      

                                           使用java搭建簡單的ligerui環境 -开发者知识库,第2张

        3、將ligerui的相關組件加入到WebContent/ligerUI下面,相關組件內容為:

  

        使用java搭建簡單的ligerui環境 -开发者知识库,第2张

        4、通過上面幾個步奏,我們已經搭建好了一個最基本ligerui的環境了。我們可以直接訪問ligerUI/index.htm,這個雖然是靜態的數據,但是可以告訴你相關的文件是否全部導入。在這里需要注意一點,在引用ligerui組件時,jsp中使用全路徑來訪問這些組件,不要使用相對路徑。因為在jsp環境中,forward指令會改變當前路徑。

        5、模擬一個ligerui的tree組件。在模擬時,我們先觀察ligerui的靜態數據格式,然后使用面向對象的思想提取出相關組件的javabean即可。


        下面的數據是ligerui首頁indexdata.js的數據格式,觀察數據,然后結合ligerui效果圖

        

{isexpand:"false",text:"布局",children:[ 
{url:"demos/layout/layoutMinWidth.htm",text:"最小寬度"},
{url:"demos/layout/layoutAutoHeight.htm",text:"自動高度"},
{url:"demos/layout/layoutAutoHeightAndDiff.htm",text:"高度補差"},
{url:"demos/layout/layoutCenterOnly.htm",text:"只顯示中間部分"},
{url:"demos/layout/layoutFixedHeight.htm",text:"固定高度"},
{url:"demos/layout/layoutFullHeight.htm",text:"全屏高度"},
{url:"demos/layout/layoutHalfHeight.htm",text:"百分比高度"},
{url:"demos/layout/layoutLeftMiddleOnly.htm",text:"只顯示左側和中間"},
{url:"demos/layout/layoutLeftWidth.htm",text:"限制左邊寬度"},
{url:"demos/layout/layoutLeftHide.htm",text:"左邊剛開始隱藏"},
{url:"demos/layout/layoutHideToggle.htm",text:"左邊右邊不允許隱藏"},
{url:"demos/layout/layoutResizeDisable.htm",text:"左邊底部不允許調整大小"}
]
}
使用java搭建簡單的ligerui環境 -开发者知识库,第2张 

        從上面可以看到,一個菜單有子菜單,或者是多個子葉子節點。下面是具體的代碼:

package net.itaem.vo;

import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

/**
* 菜單
*
* 用來模擬ligerui的菜單
*
* */
public class MenuVo {
/**
* id值
* */
private String id;
/**
* 菜單名
* */
private String text;
/**
* 是否打開菜單,默認不打開
* */
private boolean isexpand;
/**
* 菜單下面的子菜單
* */
private List<MenuVo> children;
/**
* 該菜單的父親菜單
* */
private MenuVo parent; //父menu菜單id
/**
* 菜單的url
* */
private String url;


public MenuVo(){

}

public MenuVo(String id, String text, boolean isexpend){
this.id = id;
this.text = text;
this.isexpand = isexpend;
}


public String getUrl() {
return url;
}

public void setUrl(String url) {
this.url = url;
}

public MenuVo getParent() {
return parent;
}

public void setParent(MenuVo parent) {
this.parent = parent;
}

public String getId() {
return id;
}


public void setId(String id) {
this.id = id;
}


public String getText() {
return text;
}


public void setText(String text) {
this.text = text;
}


public boolean isIsexpand() {
return isexpand;
}


public void setIsexpand(boolean isexpand) {
this.isexpand = isexpand;
}


public List<MenuVo> getChildren() {
return children;
}


public void setChildren(List<MenuVo> children) {
this.children = children;
}

/**
* 使用遞歸的方式來生成這個Menu的json格式字符串
* @return 返回該菜單的json格式字符串
* @see MenuVo#menuJson(MenuVo)
* */
@Override
public String toString() {
JSONObject json = new JSONObject();
//生成這個節點的基本數據
json.put("text", text);
json.put("isexpand", isexpand);
json.put("url", url);

if(parent != null){
json.put("pid", parent.getId());
}

//生成這個節點的子菜單數據
JSONArray childrenJson = new JSONArray();
if(children != null){
for(MenuVo child: children){
//讓每個子menu遞歸的去生成json數據
childrenJson.add(toJson(child));
}
json.put("children", childrenJson);
}

return json.toString();
}

/**
* 遞歸入口
* @see MenuVo#toJson()
* */
private String toJson(MenuVo menu){
JSONObject json = new JSONObject();
if(menu.getChildren() != null){
//生成這個菜單節點的基本數據
json.put("text", menu.getText());
json.put("id", menu.getId());
if(menu.getParent() != null){
json.put("pid", menu.getParent().getId());
}
json.put("isexpand", menu.isIsexpand());
if(menu.getParent() != null){
json.put("pid", menu.getParent().getId());
}
//生成這個菜單節點的子菜單數據
JSONArray childrenJson = new JSONArray();
if(menu.getChildren() != null){
for(MenuVo child: menu.getChildren()){
//讓每個子menu遞歸的去生成json數據
childrenJson.add(toJson(child));
}
json.put("children", childrenJson);
}
}else{ //這個節點不是菜單,是菜單下面的一個具體子節點,該節點已經沒有子節點了
json.put("id", menu.getId());
if(menu.getParent() != null){
json.put("pid", menu.getParent().getId());
}
json.put("text", menu.getText());
json.put("url", menu.getUrl());
}
return json.toString();
}
/**
* hasCode方法
* 由於業務邏輯需要,重寫
* */
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result
((children == null) ? 0 : children.hashCode());
result = prime * result ((id == null) ? 0 : id.hashCode());
result = prime * result (isexpand ? 1231 : 1237);
result = prime * result ((parent == null) ? 0 : parent.hashCode());
result = prime * result ((text == null) ? 0 : text.hashCode());
result = prime * result ((url == null) ? 0 : url.hashCode());
return result;
}

/**
* equals方法
* 由於業務邏輯需要,重寫
* */
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;

MenuVo other = (MenuVo) obj;
if (children == null) {
if (other.children != null)
return false;
} else if (!children.equals(other.children))
return false;
if (id == null) {
if (other.id != null)
return false;
} else if (!id.equals(other.id))
return false;
if (isexpand != other.isexpand)
return false;
if (parent == null) {
if (other.parent != null)
return false;
} else if (!parent.equals(other.parent))
return false;
if (text == null) {
if (other.text != null)
return false;
} else if (!text.equals(other.text))
return false;
if (url == null) {
if (other.url != null)
return false;
} else if (!url.equals(other.url))
return false;

return true;
}


}

      上面我們使用遞歸的形式來生成每個menu的json數據,因為一個菜單下面可以有N級的子菜單,所以很適合使用遞歸的方式來解決問題。

       下面我們使用servlet來生成一個 10 * 10 * 3的目錄菜單。下面是servlet:

package net.itaem.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.itaem.vo.MenuVo;
import net.sf.json.JSONArray;

public class LigerUiTreeServlet extends HttpServlet{

/**
*
*/
private static final long serialVersionUID = 145235235L;

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
JSONArray json = new JSONArray();

//生成一個10 * 10 *3的樹
for(int i=0; i<10; i ){
MenuVo menu = new MenuVo();
menu.setText("text" i);
menu.setId(i "");

//偶數的菜單展開
menu.setIsexpand(false);


List<MenuVo> children = new ArrayList<MenuVo>();
for(int j=0; j<10; j ){
MenuVo menu1 = new MenuVo();
menu1.setText("text" i j);
menu1.setId(i "" j);
children.add(menu1);
menu1.setParent(menu);
List<MenuVo> menu1Children = new ArrayList<MenuVo>();
for(int k=0; k<3; k ){
MenuVo menuVo = new MenuVo();

menuVo.setText("text" i "" j "" k);
menuVo.setId("text" i "" j "" k);
menuVo.setUrl("#");
menuVo.setParent(menu1);
menu1Children.add(menuVo);
}
menu1.setChildren(menu1Children);
menu.setChildren(children);
}
json.add(menu.toString());

System.out.println(menu.toString());
}

req.setAttribute("treeData", json.toString());
req.getRequestDispatcher("ligerUI/index.jsp").forward(req, resp);
}



}

        然后配置相關servlet:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">

<display-name></display-name>

<servlet>
<servlet-name>LigerUiTreeServlet</servlet-name>
<servlet-class>net.itaem.servlet.LigerUiTreeServlet</servlet-class>
</servlet>


<servlet-mapping>
<servlet-name>LigerUiTreeServlet</servlet-name>
<url-pattern>/ligerTree.do</url-pattern>
</servlet-mapping>


<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

      然后每次訪問這個servlet,都會跳轉到ligerUI/index.jsp,這里基本和ligerui提供的靜態代碼一致,只需要將樹的數據修改為后台servlet提供的數據即可。

    使用java搭建簡單的ligerui環境 -开发者知识库,第2张



        總結:從上面的例子我們可以看出,快速搭建一個ligerui環境難度並不高。作為一個java web工程師,我們應該多掌握這種開源框架。雖然上面的例子只是模擬了一個menu樹,但是窺斑見豹,我們有了這個例子,其他的ligerui組件也肯定可以搞定了。

最佳答案:

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复