jsf表格panelGrid

第２７卷　

ＶＯ１．２７　第１９期　

ＮＯ．１９　计算机工程与设计　

Ｃｏｍｐｕｔｅｒ　Ｅｎｇｉｎｅｅｒｉｎｇ　ａｎｄ　Ｄｅｓｉｇｎ　２００６年１０月　

Ｏｃｔ．２００６　

基于ＪＳＦ的网格门户设计与实现　

陈秋萍　，　吴立国　，　王永吉　

（１．中国科学院软件研究所互联网软件技术实验室，北京１０００８０；２．中国科学院研究生院，北京１０００３９；　

３．中国科学院计算机科学重点实验室，北京１０００８０）　

摘要：网格门户在推广网格应用中起了重要作用，但网格门户在诸多方面如功能和表现能力等仍有待完善。引入ＪａｖａＳｅｒ－　

ｖｅｒＦａｃｅｓ（ＪＳＦ）这一新的ｗ＿ｅｂ框架，设计和实现了一个网格门户。利用ＪＳＦ的表现能力提供了一个更为丰富的、集成的、易操　

作并且可定制的用户接口。并且由于ＪＳＦ与其它Ｊａｖａ技术、底层的网格技术实现无缝的衔接，实现了平台无关的、强大的网　

格资源管理及动态配置功能，同时使系统具有更强的可扩展性。　关键词：网格门户；网格计算；Ｗｅｂ技术；ＪＳＦ；用户接口　中图法分类号：ＴＰ３９３　文献标识码：Ａ　文章编号：１０００．７０２４（２００６）１９．３５１１．Ｏ４　

Ｄｅｓｉｇｎ　ａｎｄ　ｉｍｐｌｅｍｅｎｔａｔｉｏｎ　ｏｆ　ＪＳＦ—ｂａｓｅｄ　ｇｒｉｄ　ｐｏｒｔａｌ　

ＣＨＥＮ　Ｑｉｕ—ｐｉｎｇ　，ＷＵ　Ｌｉ—ｇｕｏ　，ＷＡＮＧ　Ｙｏｎｇ－ｊｉ　，　

（１．Ｌａｂｏｒａｔｏｒｙ　ｆｏｒ　Ｉｎｔｅｒｎｅｔ　Ｓｏｆｔｗａｒｅ　Ｔｅｃｈｎｏｌｏｇｉｅｓ，Ｉｎｓｔｉｔｕｔｅ　ｏｆ　Ｓｏｔｔｗａｒｅ，Ｃｈｉｎｅｓｅ　Ａｃａｄｅｍｙ　ｏｆ　Ｓｃｉｅｎｃｅｓ，Ｂｅｉｊ　ｉｎｇ　１　０００８０，　

Ｃｈｉｎａ；２．Ｇｒａｄｕａｔｅ　Ｓｃｈｏｏｌ，Ｃｈｉｎｅｓｅ　Ａｃａｄｅｍｙ　ｏｆ　Ｓｃｉｅｎｃｅｓ，Ｂｅｉｊｉｎｇ　１０００３９，Ｃｈｉｎａ；３．Ｋｅｙ　Ｌａｂｏｒａｔｏｒｙ　ｆｏｒ　Ｃｏｍｐｕｔｅｒ　

Ｓｃｉｅｎｃｅ，Ｃｈｉｎｅｓｅ　Ａｃａｄｅｍｙ　ｏｆ　Ｓｃｉｅｎｃｅｓ，Ｂｅｉｊｉｎｇ　１　０００８０，Ｃｈｉｎａ）　

jsf用法 -回复

JSF（JavaServer Faces）是一个MVC（Model-View-Controller）架构的Java Web应用程序框架，用于构建用户界面。它提供了一组丰富的组件和标签库，使开发人员能够轻松创建可重用、可扩展和易于维护的Web界面。在本文中，我们将一步一步回答关于JSF的用法。

第一步：环境设置与配置

要开始使用JSF，我们首先需要安装Java开发工具包（JDK）和Eclipse IDE（集成开发环境）。确保JDK已正确安装并配置了环境变量，并在Eclipse中安装了JSF插件。

第二步：创建JSF项目

在Eclipse中，我们可以使用JSF项目向导来创建一个新的JSF项目。选择“File -> New -> Other”菜单项，并从弹出对话框中选择“JSF Project”。输入项目的名称和位置，并选择适当的JSF版本。

第三步：定义面板页面

在JSF中，界面由一系列的面板组成。可以使用标准HTML标记或JSF组件标记来定义这些面板。在页面的顶部，我们需要添加JSF命名空间的声明，如下所示：

xmlns:f="

然后，我们可以使用``标签来定义页面的主体内容。在这个标签内，我们可以使用各种JSF组件来构建用户界面。

第四步：添加JSF组件

JSF提供了各种组件，如输入框、按钮、表格等。我们可以使用这些组件来创建用户友好的界面。下面是几个常见的JSF组件的示例：

- ``：用于显示和接收文本输入的组件。

- ``：用于触发动作的按钮组件。

- ``：用于显示数据的表格组件。

这些组件的属性和事件可以通过JSF标签的属性和监听器来自定义和处理。

第五步：管理数据与业务逻辑

在JSF中，我们可以通过使用Managed Bean来管理数据和业务逻辑。Managed Bean是一个普通的Java类，它负责接收用户输入、处理业务逻辑并保存数据。可以使用``标签来定义和配置Managed Bean。此外，还可以通过注解（如`ManagedBean`和`RequestScoped`）来配置Managed Bean。

jsgrid用法

jsGrid是一个基于jQuery的轻量级、灵活的表格展示插件，提供了丰富的配置选项和API，可以方便地实现各种复杂的表格展示和操作功能。以下是jsGrid的基本用法：

1. 引入jsGrid的CSS和JS文件：

```html

```

2. 准备表格容器：

```html

```

3. 初始化jsGrid：

```javascript

$("myGrid").jsGrid({

width: "100%", // 表格宽度

height: "400px", // 表格高度

autoload: true, // 是否自动加载数据

inserting: true, // 是否可以插入新数据

editing: true, // 是否可以编辑数据

sorting: true, // 是否可以排序数据

paging: true, // 是否支持分页加载数据

invalidNotify: $.noop, // 当无效输入时什么都不做

fields: [ // 表头配置

{ name: "id", type: "number", width: 20 },

{ name: "name", type: "text", width: 50 },

{ name: "age", type: "number", width: 20 },

{ name: "email", type: "text", width: 50 },

{ name: "isAdmin", type: "checkbox", title: "Is Admin" }

],

controller: { // 数据控制方法，增删改查等操作 loadData: function() { return $.ajax({ url: "./data" }); }, // 加载数据的方法

1 PrimeFaces简介

PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库。

1.1.1 Carousel：多用途,标签式、分布式显示 ........................................................................ 1

1.1.2 Galleria 图片陈列廊 ........................................................................................................ 2

1.1.3 LightBox :图片加亮显示 .................................................................................................. 3

1.1.4 DataGrid 数据栅格 .......................................................................................................... 4

1.1.5 DataList 用列表的形式显示数据，每个栅格可显示多个数据项 ................................ 6

1.1.6 DataTable数据表格 .......................................................................................................... 8

1.1.7 Tree 树形显示 ................................................................................................................ 13