本節摘要:本節主要是簡單的介紹ECS在HTML中的應用
preparation
引入:
Jakarta Element Construction Set(ECS)是一個使用 Java 語言和面向對象方法創建標記語言文檔的開放源代碼項目
ECS 是一組類,它們可用於生成以 HTML、XML、VioceXML 和其他標記語言編寫的文檔。目前,ECS 支持 HTML 和 XML,
但是它可以擴展為支持其他不同的標記語言。有了 ECS,就可以創建一個使用面向對象方法生成這種文檔的應用程序,
這簡化了應用程序的開發和維護。ECS提供了用 Java 對象生成標記語言的更易管理的技術。
下載插件:
開發環境:
System:xp JDK:1.4 Tomcat:5.X Myeclipse:6.5
項目環境:
修改或新建的文件說明:1.TestEcs.java ECS的處理類 2.ECS效果顯示的頁面
web.xml文件不用做任何更改
start
導入ecs的jar包
TestEcs.java

1 package com.bean;
2
3 import java.io.File;
4 import java.io.FileOutputStream;
5 import java.io.IOException;
6 import java.io.OutputStream;
7 import org.apache.ecs.html.BR;
8 import org.apache.ecs.html.Body;
9 import org.apache.ecs.html.Button;
10 import org.apache.ecs.html.Font;
11 import org.apache.ecs.html.H1;
12 import org.apache.ecs.html.HR;
13 import org.apache.ecs.html.Head;
14 import org.apache.ecs.html.Html;
15 import org.apache.ecs.html.I;
16 import org.apache.ecs.html.IMG;
17 import org.apache.ecs.html.Input;
18 import org.apache.ecs.html.LI;
19 import org.apache.ecs.html.Label;
20 import org.apache.ecs.html.Link;
21 import org.apache.ecs.html.OL;
22 import org.apache.ecs.html.Option;
23 import org.apache.ecs.html.Select;
24 import org.apache.ecs.html.Strong;
25 import org.apache.ecs.html.TD;
26 import org.apache.ecs.html.TR;
27 import org.apache.ecs.html.Table;
28 import org.apache.ecs.html.TextArea;
29 import org.apache.ecs.html.Title;
30 import org.apache.ecs.html.U;
31 import org.apache.ecs.html.UL;
32
33 /**
34 * @description ecs.jar包的使用
35 * @author ptp
36 * @date 2012-01-07
37 */
38 public class TestEcs {
39 /**
40 * Jakarta Element Construction Set(ECS)是一個使用 Java 語言和面向對象方法創建標記語言文檔的開放源代碼項目
41 * ECS 是一組類,它們可用於生成以 HTML、XML、VioceXML 和其他標記語言編寫的文檔。目前,ECS 支持 HTML 和 XML,
42 * 但是它可以擴展為支持其他不同的標記語言。有了 ECS,就可以創建一個使用面向對象方法生成這種文檔的應用程序,
43 * 這簡化了應用程序的開發和維護。ECS提供了用 Java 對象生成標記語言的更易管理的技術。
44 * @throws IOException
45 */
46 public String ecs1() throws IOException {
47 // 本程序未用到以下幾個類,只是提出來做個介紹
48 // >>>>>>>>>>>>>>>>>>>>>>>>>start>>>>>>>>>>>>>>>>>>>>>>>>
49 Html html = new Html();
50 Head head = new Head();
51 // title
52 Title title = new Title("ECS-title");
53 head.addElement(title);
54
55 Body body = new Body();
56
57 // H1,H2,...H6
58 H1 h1 = new H1("ECS-標題");
59 body.addElement(h1);
60
61 // 橫線
62 HR hr = new HR();
63 body.addElement(hr);
64
65 html.addElement(head);
66 html.addElement(body);
67
68 // 普通輸入框
69 Input input = new Input();
70 body.addElement(input);
71 input = new Input();
72
73 // 普通按鈕
74 input.addAttribute("type", "button");
75 input.addAttribute("value", "確定");
76 input.addAttribute("name", "login");
77 body.addElement(input);
78
79 // 以下代碼也可以創建一個button
80 // Button button = new Button();
81 // button.addElement("按鈕");
82 // body.addElement(button);
83
84 // 換行
85 BR br = new BR();
86 body.addElement(br);
87
88 // 文本區
89 TextArea tArea = new TextArea();
90 body.addElement(tArea);
91 body.addElement(br);
92
93 // 標簽 字體 加粗 斜體 下划線
94 Font font = new Font();
95 I i=new I();//斜體 用法和Stong一樣
96 U u=new U();//下划線 用法和Stong一樣
97 font.addAttribute("size", "5");
98 font.addAttribute("color", "red");
99 Strong strong = new Strong();
100 Label label = new Label();
101 label.addElement("學歷:");
102 strong.addElement(label);
103 font.addElement(strong);
104 body.addElement(font);
105
106 // 下拉列表框
107 Select select = new Select();
108 Option option = new Option();
109 option.addElement("專科");
110 option.addAttribute("value", "1");
111 select.addElement(option);
112
113 option = new Option();
114 option.addElement("本科");
115 option.addAttribute("value", "2");
116 select.addElement(option);
117
118 option = new Option();
119 option.addElement("碩士");
120 option.addAttribute("value", "3");
121 select.addElement(option);
122
123 option = new Option();
124 option.addElement("博士");
125 option.addAttribute("value", "4");
126 select.addElement(option);
127
128 body.addElement(select);
129
130 // 圖片
131 IMG img = new IMG();
132 img.addAttribute("src",
133 "D:\\workspace\\JFreeChart\\WebRoot\\highcharts\\sun.png");//注意圖片的路徑,注意相對路徑和絕對路徑的區別
134 body.addElement(img);
135
136 //列表1 每項前面是圓點
137 UL ul = new UL();
138
139 LI li=new LI();
140 li.addElement("第一個");
141 ul.addElement(li);
142
143 li=new LI();
144 li.addElement("第二個");
145 ul.addElement(li);
146
147 li=new LI();
148 ul.addElement(li);
149 li.addElement("第三個");
150
151 body.addElement(ul);
152
153
154 //列表2 每項前面是數字
155 OL ol = new OL();
156
157 LI li1=new LI();
158 li1.addElement("第一個");
159 ol.addElement(li1);
160
161 li1=new LI();
162 li1.addElement("第二個");
163 ol.addElement(li1);
164
165 li1=new LI();
166 li1.addElement("第三個");
167 ol.addElement(li1);
168
169 body.addElement(ol);
170
171 String testECS=html.toString();
172 System.out.println(testECS);
173
174 //下面把以上代碼通過I/O輸出到一個html文件中,方便查看運行效果
175 // 1.使用File類找到一個文件
176 File file = new File("d:" + File.separator + "testEcs.html");
177
178 // 2.通過子類實例化父類對象
179 OutputStream out = null;// 准備好一個輸出的對象
180 out = new FileOutputStream(file);// 通過對象多態性,進行實例化
181
182 // 3.進行寫操作
183 String str = testECS;// 准備一個字符串
184 byte b[] = str.getBytes();
185 for (int k = 0; k < b.length; k++) {
186 out.write(b[k]);
187 }
188 out.flush();//把管道的數據輸出
189
190 // 4.關閉輸入流
191 out.close();
192 // <<<<<<<<<<<<<<<<<<<<<<<end<<<<<<<<<<<<<<<<<<<<<
193
194
195
196 // >>>>>>>>>>>>>>>第一個Table<<<<<<<<<<<<<<<<<<
197 Table htmlTable = new Table();
198 TR htmlTr = new TR();
199 TD htmlTd = new TD();
200 htmlTd.addElement("ECS");
201 htmlTd.setAlign("left");
202 htmlTd.setHeight(25);
203 htmlTr.addElement(htmlTd);
204 htmlTable.addElement(htmlTr);
205
206 // >>>>>>>>>>>>>>>第二個Table<<<<<<<<<<<<<<<<<<
207 Table htmlTable2 = new Table();
208 htmlTable2.setBorder(5);
209
210 // ---------------第一行---------------------
211 htmlTr = new TR();
212 htmlTd = new TD();
213 htmlTd.addElement("姓名:");
214 htmlTd.setWidth("16%");
215 htmlTd.setAlign("right");
216 htmlTd.setNoWrap(true);
217 htmlTr.addElement(htmlTd);
218
219 htmlTd = new TD();
220 htmlTd.addElement("李四");
221 htmlTr.addElement(htmlTd);
222
223 htmlTd = new TD();
224 htmlTd.addElement("性別:");
225 htmlTd.setWidth("16%");
226 htmlTd.setAlign("right");
227 htmlTr.addElement(htmlTd);
228
229 htmlTd = new TD();
230 htmlTd.addElement("男");
231 htmlTd.setWidth("34%");
232 htmlTd.setAlign("left");
233 htmlTr.addElement(htmlTd);
234
235 htmlTable2.addElement(htmlTr);
236
237 // ---------------第二行---------------------
238 htmlTr = new TR();
239 htmlTd = new TD();
240 htmlTd.addElement("年齡:");
241 htmlTd.setWidth("16%");
242 htmlTd.setAlign("right");
243 htmlTr.addElement(htmlTd);
244
245 htmlTd = new TD();
246 htmlTd.addElement("24");
247 htmlTd.setWidth("34%");
248 htmlTd.setAlign("left");
249 htmlTr.addElement(htmlTd);
250
251 htmlTd = new TD();
252 htmlTd.addElement("籍貫:");
253 htmlTd.setWidth("16%");
254 htmlTd.setAlign("right");
255 htmlTr.addElement(htmlTd);
256
257 htmlTd = new TD();
258 htmlTd.addElement("湖北省");
259 htmlTd.setWidth("34%");
260 htmlTd.setAlign("left");
261 htmlTr.addElement(htmlTd);
262
263 htmlTable2.addElement(htmlTr);
264
265 // ---------------第三行--------------------
266 htmlTr = new TR();
267 htmlTd = new TD();
268 htmlTd.addElement("學歷:");
269 htmlTd.setWidth("16%");
270 htmlTd.setAlign("right");
271 htmlTr.addElement(htmlTd);
272
273 htmlTd = new TD();
274 htmlTd.addElement("本科");
275 htmlTd.addElement(" ");
276 htmlTd.setWidth("34%");
277 htmlTd.setAlign("left");
278 // htmlTd.setBgColor("");
279 htmlTr.addElement(htmlTd);
280
281 htmlTd = new TD();
282 htmlTd.addElement("手機:");
283 htmlTd.setWidth("16%");
284 htmlTd.setAlign("right");
285 htmlTr.addElement(htmlTd);
286
287 htmlTd = new TD();
288 htmlTd.addElement("13916349897");
289 htmlTd.addElement(" ");
290 htmlTd.setWidth("34%");
291 htmlTd.setAlign("left");
292 htmlTr.addElement(htmlTd);
293 htmlTable2.addElement(htmlTr);
294
295 // ---------------第四行---------------------
296 htmlTr = new TR();
297 htmlTd = new TD();
298 htmlTd.addElement("住址:");
299 htmlTd.setWidth("16%");
300 htmlTd.setAlign("right");
301 htmlTr.addElement(htmlTd);
302
303 htmlTd = new TD();
304 htmlTd.addElement("湖北省襄陽市谷城縣廟灘鎮");
305 htmlTd.addElement(" ");
306 htmlTd.setWidth("34%");
307 htmlTd.setAlign("left");
308 htmlTr.addElement(htmlTd);
309 htmlTable2.addElement(htmlTr);
310
311 String result = htmlTable.toString() + htmlTable2.toString();
312 System.out.println(result);
313
314 return result;
315 }
316
317 /**
318 * @param args
319 * 測試的main方法
320 * @throws IOException
321 */
322 public static void main(String[] args) throws IOException {
323 TestEcs ecs = new TestEcs();
324 ecs.ecs1();
325
326 }
327
328 }
index.jsp

1 <%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
2
3 <%
4 String path = request.getContextPath();
5 String basePath = request.getScheme() + "://"
6 + request.getServerName() + ":" + request.getServerPort()
7 + path + "/";
8 %>
9
10 <!--方式2:引入bean-->
11 <!--
12 創建一個Bean實例並指定它的名字和作用范圍
13 id 命名引用該Bean的變量。如果能夠找到id和scope相同的Bean實例,
14 jsp:useBean動作將使用已有的Bean實例而不是創建新的實例
15 class 指定Bean的完整包名
16 scope 指定Bean在哪種上下文內可用,可以取下面的四個值之一:page,request,session和application。
17 默認值是page,表示該Bean只在當前頁面內可用(保存在當前頁面的PageContext內)。
18 type 指定引用該對象的變量的類型,它必須是Bean類的名字、超類名字、該類所實現的接口名字之一
19 beanName 指定Bean的名字。如果提供了type屬性和beanName屬性,允許省略class屬性
20 -->
21 <jsp:useBean id="ecs" scope="page" class="com.bean.TestEcs"></jsp:useBean>
22 <!--
23 設置Bean中的屬性值.
24 name屬性是必需的。它表示要設置屬性的是哪個Bean
25 property屬性是必需的。它表示要設置哪個屬性。有一個特殊用法:
26 如果property的值是“*”,表示所有名字和Bean屬性名字匹配的請求參數都將被傳遞給相應的屬性set方法
27 value屬性是可選的。該屬性用來指定Bean屬性的值。
28 字符串數據會在目標類中通過標准的valueOf方法自動轉換成數字、boolean、Boolean、byte、Byte、char、Character
29 param是可選的。它指定用哪個請求參數作為Bean屬性的值。如果當前請求沒有參數,則什么事情也不做,
30 系統不會把null傳遞給Bean屬性的set方法。因此,你可以讓Bean自己提供默認屬性值,只有當請求參數明確指定了新值時才修改默認屬性值
31 value和param不能同時使用,但可以使用其中任意一個
32 -->
33 <jsp:setProperty name="ecs" property="*"/>
34 <%
35 String result=ecs.ecs1();
36 %>
37
38 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
39 <html>
40 <head>
41 <base href="<%=basePath%>">
42
43 <title>ecs的使用</title>
44 <meta http-equiv="pragma" content="no-cache">
45 <meta http-equiv="cache-control" content="no-cache">
46 <meta http-equiv="expires" content="0">
47 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
48 <meta http-equiv="description" content="This is my page">
49 <!--
50 <link rel="stylesheet" type="text/css" href="styles.css">
51 -->
52 </head>
53
54 <body>
55 <%=result%>
56 <br>
57 </body>
58 </html>
result
訪問的url為:http://localhost:8080/TestEcs/index.jsp
效果截圖1---生成的html文件 testEcs.html
效果截圖2---訪問的頁面index.jsp
補充幾點:
1.index.jsp頁面引入TestEcs類還有以下的方式:
<!-- 方式1:通過import導入類,然后new一個對象,調用需要的方法 -->
<%@page import="com.bean.TestEcs"%>
<%
TestEcs ecs=new TestEcs();
String result = ecs.ecs1();
%>
2.使用ecs生成單選框、復選框、鏈接等暫時還沒有列出,以后根據實際情況補充
望各位大俠不吝賜教……