使用struts-menu制作树型菜单实例录像教程
2007-05-11 22:48
721 查看
使用struts-menu制作树型菜单实例录像教程
速动画教程第十四集使用struts-menu制作树型菜单实例
下载：http://sonic.peakle.net/download/sonic014.rar
制作人：速
新建j2ee工程，工程名称为：struts-menu
Context root URL: /menu
选中Add JSTL libraries to WEB-INF/lib forlder? JSTL版本（随意）
以下所有的文件可以从源代码中拷贝
拷贝文件中的以下内容到工程的webroot目录中
images、scripts、styles、templates 四个文件夹
拷贝以下文件到 /WEB-INF/ 目录
struts-menu.tld
struts-menu-el.tld
menu-config.xml
拷贝以下文件到 /WEB-INF/lib/ 目录
struts-menu-2.3.jar
velocity-1.4.jar
velocity-tools-view-1.0.jar
拷贝以下文件到 /src/ 目录
globalMacros.vm
拷贝以下文件到 /WEB-INF/lib/ 目录，此文件是在使用j2ee1.4版本创建工程时才需要
commons-lang-2.0.jar ，此文件将在录像包中提供
刷新工程
创建Struts框架
按下Ctrl + N ，使用向导新增 struts 插件
Plugin class: net.sf.navigator.menu.MenuPlugIn
点击 add 按钮，在对话框中填入以下内容
Property：menuConfig
Value：/WEB-INF/menu-config.xml
按下Ctrl + N ，使用向导新增 Action
Use case：find
其它使用默认值
在WebRoot目录中新建两个jsp文件，index.jsp 、 ok.jsp
创建一个 Forward
name：okGo
Path：/ok.jsp
修改 index.jsp 文件，内容如下：
<html>
<head>
<title>ok</title>
</head>
<body>
<a href="find.do">Find</a>
</body>
</html>
修改 ok.jsp 文件，内容如下：
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="/WEB-INF/struts-menu.tld" prefix="menu" %>
<%@ taglib uri="/WEB-INF/struts-menu-el.tld" prefix="menu-el" %>
<%@ taglib uri="/WEB-INF/c.tld" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic, Database-driven Menu</title>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value="/styles/menuExpandable.css"/>" />
<script type="text/javascript"
src="<c:url value="/scripts/menuExpandable.js"/>"></script>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value="/styles/xtree.css"/>" />
<script type="text/javascript"
src="<c:url value="/scripts/xtree.js"/>"></script>
<link rel="stylesheet" type="text/css" media="all"
href="<c:url value="/styles/global.css"/>" />
<script type="text/javascript">
/* Function for showing and hiding elements that use 'display:none' to hide */
function toggleDisplay(targetId) {
if (document.getElementById) {
target = document.getElementById(targetId);
if (target.style.display == "none"){
target.style.display = "";
} else {
target.style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="dynamicMenu">
<menu:useMenuDisplayer name="ListMenu" repository="repository">
<menu:displayMenu name="DatabaseMenu"/>
<menu:displayMenu name="StandaloneMenu"/>
</menu:useMenuDisplayer>
</div>
<div class="dynamicMenu tree">
<script type="text/javascript">
<menu:useMenuDisplayer name="Velocity" config="/templates/xtree.html"
repository="repository">
<c:forEach var="menu" items="${repository.topMenus}">
<menu-el:displayMenu name="${menu.name}"/>
</c:forEach>
</menu:useMenuDisplayer>
</script>
</div>
</body>
</html>
创建数据库表
CREATE TABLE `menu_item` (
`id` bigint(20) NOT NULL default '0',
`parent_name` varchar(30) default NULL,
`name` varchar(30) default NULL,
`title` varchar(30) default NULL,
`description` varchar(50) default NULL,
`location` varchar(255) default NULL,
`target` varchar(10) default NULL,
`onclick` varchar(100) default NULL,
`onmouseover` varchar(100) default NULL,
`onmouseout` varchar(100) default NULL,
`image` varchar(50) default NULL,
`altImage` varchar(30) default NULL,
`tooltip` varchar(100) default NULL,
`roles` varchar(100) default NULL,
`page` varchar(255) default NULL,
`width` varchar(5) default NULL,
`height` varchar(5) default NULL,
`forward` varchar(50) default NULL,
`action` varchar(50) default NULL,
PRIMARY KEY (`id`)
);
INSERT INTO menu_item (id, name, title) VALUES (1,'DatabaseMenu','Database Menu');
INSERT INTO menu_item (id, parent_name, name, title, location) VALUES (2,'DatabaseMenu','Yahoo','Yahoo Mail','http://mail.yahoo.com');
INSERT INTO menu_item (id, parent_name, name, title, location) VALUES(3,'DatabaseMenu','JavaBlogs','JavaBlogs','http://javablogs.com');
INSERT INTO menu_item (id, name, title, location) VALUES (4,'StandaloneMenu','Standalone Menu','http://raibledesigns.com');
创建 Hibernate 框架，配置数据库连接，关于数据库连接的配置就不做介绍了，如果不知道如何配置的话请参考以前发布的录像！
记得点击 Copy JDBC Driver and add to classpath 链接
打开 MyEclipse Database Explorer 视图，创建 menu_item 的映射文件
修改 FindAction.java 文件，内容如下：
import java.util.List;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import net.sf.navigator.menu.MenuComponent;
import net.sf.navigator.menu.MenuRepository;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.hibernate.Query;
import org.hibernate.Session;
import org.hibernate.Transaction;
import com.Hibernate.MenuItem;
import com.Hibernate.SessionFactory;
public class FindAction extends Action {
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response) {
//创建连接
Session session=SessionFactory.currentSession();
//创建事务
Transaction tx=session.beginTransaction();
//创建对话
Query query=session.createQuery("FROM MenuItem m order by id");
List list=query.list();
//事务提交
tx.commit();
if(list.size()<0)
return mapping.getInputForward();
MenuRepository repository = new MenuRepository();
HttpSession httpsession=(HttpSession)request.getSession();
ServletContext application=(ServletContext)httpsession.getServletContext();
MenuRepository defaultRepository = (MenuRepository)application.getAttribute(MenuRepository.MENU_REPOSITORY_KEY);
repository.setDisplayers(defaultRepository.getDisplayers());
for (int i=0; i < list.size(); i++) {
MenuComponent mc = new MenuComponent();
MenuItem mi=(MenuItem) list.get(i);
String name = mi.getName();
mc.setName(name);
String parent = (String) mi.getParentName();
System.out.println(name + ", parent is: " + parent);
if (parent != null) {
MenuComponent parentMenu = repository.getMenu(parent);
if (parentMenu == null) {
System.out.println("parentMenu '" + parent + "' doesn't exist!");
// create a temporary parentMenu
parentMenu = new MenuComponent();
parentMenu.setName(parent);
repository.addMenu(parentMenu);
}
mc.setParent(parentMenu);
}
String title = (String)mi.getTitle();
mc.setTitle(title);
String location = (String) mi.getLocation();
mc.setLocation(location);
repository.addMenu(mc);
}
request.setAttribute("repository", repository);
return mapping.findForward("okGo");
}
}
以上代码是使用了hibernate操作数据，得到一个数据集，并将数据集添加到MenuRepository中
然后在jsp页面中使用以下代码显示树型菜单
<menu:useMenuDisplayer name="ListMenu" repository="repository">
<menu:displayMenu name="DatabaseMenu"/>
<menu:displayMenu name="StandaloneMenu"/>
</menu:useMenuDisplayer>
menu-config.xml 文件中的内容已经被精减了，如果要使用XML文件来配置菜单的话，请查看struts-menu的示例
代码完成，现在进行测试！
好了，显示正常，这集就讲到此了，下集再见！！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用struts-menu制作树型菜单实例录像教程
- 使用struts-menu制作树型菜单实例
- 使用struts-menu制作树型菜单实例 （转）
- emWin 2天速成实例教程010_Menu标题菜单控件使用方法
- 4.6 使用倾斜菜单命令制作阴影 [Illustrator CC教程]
- android用户界面之菜单(Menu)教程实例汇总
- Android学习教程之圆形Menu菜单制作方法（1）
- Qt4另类使用教程(二)---Qt4 右键菜单 透明Widget 实例
- 使用Unity3D 自主实战开发的赛车游戏实例，关键点记录 （三）之UI菜单制作
- AjaxControlToolkit 微软出的ajax.net 工具使用教程十二 HoverMenuExtender（滑出菜单） 控件的使用
- Yii2 rbac权限控制之菜单menu实例教程
- Struts之DispatchAction使用（录像教程）
- iOS中使用UIDatePicker制作时间选择器的实例教程
- 使用ActionManager, ActionMainMenuBar, ActionToolBar制作菜单
- 简单 纯css 多级导航菜单 制作教程1 - 使用ul li 制作导航栏
- 使用jsf + hibernate制作一个login实例教学录像
- Dreamweaver CS4实例教程—新特性应用之菜单制作
- [原创]使用js+xml制作的IE和FF都支持的树型菜单(程序不到4k哦)
- 使用Python的urllib和urllib2模块制作爬虫的实例教程
- 使用Menu制作弹出菜单