Wicket演示脚本 （AJAX技术及架构演讲续2）

演讲幻灯片

 

Wicket演示

 

演示准备

1. 下载和安装NetBeans 6.0 Beta 2。NetBeans 6.0现在已进入Beta 2，很快汉化版就会随着正式版本推出。
2. 下载Wicket NetBeans Plugin，此插件支持Wicket1.3
3. 下载Ajax_DemoData.rar。这是一个NetBeans项目，用来给演示程序提供数据，这样就不用在演示的时候敲入数据了。这里面就包含了一个Java类：DemoDataProvider，调用DemoDataProvider.getDemoData(String prefix)方法会返回一个常用编程语言的列表。这里为了简单起见，数据都是手工录入的，在你的实际项目中数据可以来自数据库或者是web服务等动态的数据源。下载后按以下步骤安装：
       a.       解压rar文件到本地目录
     b.      在NetBeans里通过“File －> Open Project”打开这个项目。

 

演示脚本

1. 启动NetBeans。
2. ” File” -> “New Project”。
3. 在“New Project”对话框，左侧选“Web”，右侧选“Web Application”，然后“Next”。
4. 在“New Web Application”对话框，“Project Name”＝WicketDemo，“Server“＝”GlassFish V2“然后“Next”。
5. 在“Frameworks”对话框，选择“Wicket 1.3”,然后“Finish”.
6. NetBeans自动生成项目并打开“index.jsp”,关闭“index.jsp”,Wicket项目的首页不是这一页。
7. 打开”WicketDemo” -> “Source Packages”->”com.myapp.wicket”目录下的两个文件
1. Home.html，这是页面的显示
2. Home.java，这是页面背后相关的逻辑。Wicket的一个优点就是严格分隔显示和逻辑
8. 在Home.html里的“<span wicket:id=’mainNavigation’/>”语句后加入下列HTML语句。如幻灯片里提到，wicket也是基于组件的框架，wicket就是通过“wicket:id=…”将一个普通的HTML tag变成Wicket组件的，每个wicket组件都需要相应的Java逻辑来支持，Java逻辑定义在和HTML文件相对印的Java源文件里，在我们的演示中就是Home.java了。

<form wicket:id="form">       <input type="text" wicket:id="prefix"/>        <span wicket:id="terms ">$%^&*</span> </form>

 

9. 在Home.java里的Home构造函数里加入以下程序。具体的Wicket API细节可古狗一下，搜索结果的第一条就是了（很火呀，考虑到wicket还有别的意思）

public Home() {         Form form = new Form("form");         add(form);         final AutoCompleteTextField field = new AutoCompleteTextField("prefix", new Model("")) {             protected Iterator getChoices(String input) {                 List<String> result = DemoDataProvider.getDemoData(input);                 return result.iterator();             }         };         form.add(field);         final Label label = new Label("terms", field.getModel());         label.setOutputMarkupId(true);         form.add(label);         field.add(new AjaxFormSubmitBehavior(form, "onchange") {             protected void onSubmit(AjaxRequestTarget target) {                 target.addComponent(label);             }         });     }

 

10.   NetBeans会报错，是因为需要导入类。在程序编辑框里点右键，选择“Fix Imports”，然后选择需要的类，注意需要做两次“Fix Imports”. 按下图选择，要注意的是“Label”，不知为什么是灰的。

 

11.  好了，可运行程序了，简单吧？

Posted at 07:42下午 十一月 15, 2007 by Michael Li in Web 2.0  |  Comments[0]

DynaFaces演示脚本 （AJAX技术及架构演讲续1）

离上海Sun技术日都快三个礼拜了，答应把演示材料陆续贴出的，可期间连续出差，一直没动。现刚从日本回来，总算有时间能开始兑现我的诺言了。好，废话少说，埋头干活。

演讲幻灯片

DynaFaces演示

演示准备工作

1.         下载和安装NetBeans 6.0 Beta 2。NetBeans 6.0现在已进入Beta 2，很快汉化版就会随着正式版本推出。

2. 下载dynamicfaces02.complib。这是DynaFace的组件面板，有了它你可以把DynaFaces的组件以托拽的方式加入到你程序中去。下载后按以下步骤安装
       a.       启动NetBeans Beta 2
       b.      Tools -> Component Libraries
       c.       在对话框的左面，点击“Import…”找到已下载到本地的dynamicfaces02.complib文件，然后点击“OK”即可。
3. 下载Ajax_DemoData.rar。这是一个NetBeans项目，用来给演示程序提供数据，这样就不用在演示的时候敲入数据了。这里面就包含了一个Java类：DemoDataProvider，调用DemoDataProvider.getDemoData(String prefix)方法会返回一个常用编程语言的列表。这里为了简单起见，数据都是手工录入的，在你的实际项目中数据可以来自数据库或者是web服务等动态的数据源。下载后按以下步骤安装：
       a.       解压rar文件到本地目录
     b.      在NetBeans里通过“File －> Open Project”打开这个项目。

演示脚本

1.      启动NetBeans。“

2.      File” -> “New Project”。

3.      在“New Project”对话框，左侧选“Web”，右侧选“Web Application”，然后“Next”。

4.      在“New Web Application”对话框，“Project Name”＝DyanFacesDemo，“Server“＝”GlassFish V2“然后“Next”。

5.      在“Frameworks”对话框，选择“Visual Web JavaServer Faces”,然后“Finish”。

6.      把Ajax_DemoData项目加到DynaFacesDemo的库中去，因为会用到它的类。

a.       右键“DynaFacesDemo”项目，在跳出窗口选择“Properties”

b.      在“Project Properties”窗口。左面选择“Libraries”；右面点击“Add Project...”，找到 Ajax_DemoData所在目录，点击“Add Project JAR File”。

c.       点击“Ok”关闭“Project Properties”对话框。

7.      在项目中加入DynaFaces面板组件。加入面板组件后就可以以托拽的方式使用DynaFaces的组件了。

a.       展开“DynaFacesDemo”项目

b.      右键“Component Libraries”目录，选择“Add Component Library...”

c.       在“Add Component Library”对话框，选择“Dynamic Faces Components(0.2)”,点击“Add Component Library”.

d.      注意“Dynamic Faces”出现在屏幕右侧的组件面板的上方。打开它，可看到“Ajax Transaction”和“Ajax Zone”两个组件。

8.      从右面组件面板里拖入下列组件,如图所示

a.       Basic  -> Label，并把显示文字改成”Programming Languages“

b.      Basic -> TextField

c.       Layout -> Layout Panel，调整框的大小

d.      ”Dynamic Faces“ -> “Ajax Transaction”，至页面空白处，这是个不显示的组件。

9.      切换到Java显示，找到prerender()方法，加入以下程序

@Override     public void prerender() {         fillContent();     }

 

 

 

10.  NetBeans这时会报错，因为fillContent（）没有定义。按下列程序加入fillContent()的定义

private void fillContent() {         if(null != getLayoutPanel1().getChildren()){             getLayoutPanel1().getChildren().clear();         }         String prefix = (String)getTextField1().getText();         String content = DemoDataProvider.getDemoData(prefix).toString();         Label label = new Label();         label.setText(content);         this.getLayoutPanel1().getChildren().add(label); }

11.  接下来要通过DynaFaces加入AJAX的后台交互

a.       回到页面的”Design“窗口，选中”textField1“，在textField1的属性窗口内找到”onKeyUp“（在javaScript分类里），加入以下javaScript程序

DynaFaces.Tx.fire("ajaxTransaction1", "textField1")

b.      右键”textField1“，选择”Configure Ajax Transaction…“。在跳出窗口里将”Send Input“的值改为”Yes“，并”OK“。

c.       右键”layoutPanel1“，选择”Configure Ajax Transaction…“。在跳出窗口里将”Re-Render“的值改为”Yes“，并”OK“。

12.  编程完毕，右键项目选择”Run“ ，NetBeans会编辑项目并部署到Glassfish服务器上，然后打开浏览器窗口显示运用，如下图

 

Posted at 06:49下午 十一月 15, 2007 by Michael Li in Web 2.0  |  Comments[1]