Netbeans: Facelet
Tôi xin giới thiệu một ví dụ nhỏ về Facelete trong netbeans, bạn cần chuẩn bị một số thứ sau:
Netbeans 5.5.1
NBFaceleteSupportPlugin
MySQL 5(hay csdl nào mà bạn có cũng được)
Driver
Sun Server
Tạo netbeans project
New Project
Web \ Web application
Next
Project name : Facelet
Server : Sun Java Application Server
Next
Framework: Facelets
Finish
Poject của chúng ta đã sẵn sàng và bạn có thể run để test Facelet. Tiếp theo ta sẽ tạo một Persistence Unit
Chuột phải chọn new file / Folder
Trong phần Persistence chọn Persistence Unit
Next
Trong phần Persistence Unit Name ta để mặc định
Ta chỉ sửa phần Data Source đế csdl mà ta dùng
Chọn Create cho Table Generation Strategy
Finish
Tiếp theo, ta tạo một entity
new File / Folder
Phần Persistence chọn Entity Class
Ta đặt tên cho class là Run
Package com.bds.entity
Finish
Ta cần thêm một số thuộc tính sau
-
@Temporal(value = TemporalType.DATE)
private Date dateOfRun;
private String location = "";
private int totalHours;
private int totalMinutes;
private int totalSeconds;
private int avgHr;
private float distance;
private String environment = "";
Và đừng quên tạo getter, setter nhé bạn.
Tạo JSF Page
new File/Folder
Trong phần Persistence chọn JSF Pages From Entity Class
Chọn và add entity class Run
Next
Ta sẽ lưu trong package com.bds.web
Finish
Đến đây thì project của ta chạy không được, bởi vì một Facelet Project chỉ chạy các file jsf có đuôi .xhtml. Việc của chúng ta cần làm đơn giản là thay các trang JSF thành xhml và theo cấu trúc Facelet. Tôi sẽ hiện thực trên trang List, và các bạn sẽ làm phần còn lại nhé.
Trước tiên ta sẽ tạo trang navigation
Chuột phải vô phần Web Pages chọn new File/Folder
Trong phần Web, chọn Facelets Simple File
Next
Đặt tên : navigation
Finish
Có nội dung
-
<p>
<div class="navitems"><a href="List.jsf">Show all Runs</a></div>
<div class="navitems"><a href="../index.jsp">Home</a></div>
</p>
File template.xhtml của ta có nội dung như sau
-
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Running around.....</title>
<link href="../css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>
<ui:insert name="title">Running around.....</ui:insert>
</h1>
<div id="navi">
<ui:insert name="navigation">
<ui:include src="navigation.xhtml"></ui:include>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">Hmmm, where is the content?</ui:insert>
</div>
</body>
</html>
Trong trang List.xhtml, ta sẽ kéo thả những thành phần chính ( composition, define, view và form), mục đích của phần này là nó sẻ hiện thực cho ta các không gian tên phù hợp. Sau đó ta chỉ việc copy từ List.jsp qua:
-
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition template="../template.xhtml">
<ui:define name="content">
<f:view>
<h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
<h1>Listing Runs</h1>
<h:form>
<h:commandLink action="#{run.createSetup}" value="New Run"/>
<br />
<h:dataTable value='#{run.runs}' var='item' border="1" cellpadding="2" cellspacing="0">
<h:column>
<f:facet name="header">
<h:outputText value="Id"/>
</f:facet>
<h:commandLink action="#{run.detailSetup}" value="#{item.id}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="DateOfRun"/>
</f:facet>
<h:outputText value="#{item.dateOfRun}">
<f:convertDateTime type="DATE" pattern="MM/dd/yyyy" />
</h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Location"/>
</f:facet>
<h:outputText value="#{item.location}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="TotalHours"/>
</f:facet>
<h:outputText value="#{item.totalHours}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="TotalMinutes"/>
</f:facet>
<h:outputText value="#{item.totalMinutes}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="TotalSeconds"/>
</f:facet>
<h:outputText value="#{item.totalSeconds}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="AvgHr"/>
</f:facet>
<h:outputText value="#{item.avgHr}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Distance"/>
</f:facet>
<h:outputText value="#{item.distance}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Environment"/>
</f:facet>
<h:outputText value="#{item.environment}"/>
</h:column>
<h:column>
<h:commandLink value="Destroy" action="#{run.destroy}">
<f:param name="id" value="#{item.id}"/>
</h:commandLink>
<h:outputText value=" "/>
<h:commandLink value="Edit" action="#{run.editSetup}">
<f:param name="id" value="#{item.id}"/>
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</ui:define>
</ui:composition>
</body>
</html>
Tương tự tạo:
New.xhtml
Edit.xhtml
Details.xhtml
Hoàn tất và run.
Đọc tiếp >>