Netbeans: Facelet

12:02

(0) Comments

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

  1. 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.

Cao Trong Hien

0 Responses to "Netbeans: Facelet"

Đăng nhận xét