PrimeFaces中文详细教程

admin管理员组

文章数量:1539010

2024年6月27日发(作者：)

PrimeFaces简介

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

1 PrimeFaces综述 ....................................................................................................................................... 3

1.1 安装 ........................................................................................................................................... 3

1.2 配置，JSF2.0环境下用PrimeFace2.x .................................................................................... 4

1.3 Hello World入门示例 .............................................................................................................. 4

1.4 UI组件： .................................................................................................................................. 4

UI组件 ...................................................................................................................................................... 5

2.1 布局 ........................................................................................................................................... 5

2.1.1 Layout 页面布局 ............................................................................................................ 5

2.1.2 Panel用于包含其它组件，提供象windows窗口式的外观。 ..................................... 8

2.1.3 TabView 分页式面板组件 ............................................................................................... 8

2.1.4 OutputPanel 仅用于显示元素 ......................................................................................... 9

2.1.5 Fieldset .............................................................................................................................. 9

2.1.6 Dashboard 仪表盘 .......................................................................................................... 10

2.1.7 Themeswitcher 主题切换器，动态切换主题 ............................................................... 11

2.1.8 Separator空白分隔区域 ................................................................................................. 11

2.1.9 Spacer行内加空格 ......................................................................................................... 11

2.2 菜单 ......................................................................................................................................... 11

2.2.1 Menu ................................................................................................................................ 11

2.2.2 Menubar ........................................................................................................................... 12

2.2.3 MenuButton ..................................................................................................................... 13

2.2.4 Toolbar ............................................................................................................................. 13

2.2.5 Stack ：堆叠式菜单(竖向) ............................................................................................ 13

2.2.6 Dock ：动画鱼眼式菜单(横向) .................................................................................... 14

2.3 按钮： ..................................................................................................................................... 15

2.3.1 Button .............................................................................................................................. 15

2.3.2 CommandButton .............................................................................................................. 15

2.3.3 CommandLink ................................................................................................................. 17

2.3.4 ContextMenu ................................................................................................................... 17

2.3.5 HotKey ............................................................................................................................ 17

2.4 输入组件 ................................................................................................................................. 18

2.4.1 文本输入 ......................................................................................................................... 18

2.4.1.1 Editor ........................................................................................................................ 18

2.4.1.2 Password ................................................................................................................... 19

2.4.1.3 Password Strength .................................................................................................... 19

2.4.1.4 inputMask 输入掩码,实现格式化输入。 .............................................................. 19

2.4.1.5 InputText ................................................................................................................... 20

2.4.1.6 InputTextarea ............................................................................................................ 20

2.4.1.7 Watermark :文本输入内容提示 ............................................................................... 20

2.4.1.8 Keyboard 显示一个虚拟键盘，用以支持输入字符。 ......................................... 21

2.4.1.9 Inplace 替换文本 .................................................................................................... 22

2.4.2 选择式输入 ..................................................................................................................... 22

2.4.2.1 AutoComplete ：自动补全 ..................................................................................... 22

1

2

2.4.2.2 PickList 选择列表 ................................................................................................... 25

2.4.2.3 Slider 滑动条 ........................................................................................................... 26

2.4.2.4 Spinner ...................................................................................................................... 27

2.4.3 其它格式数据的输入： ................................................................................................. 27

2.4.3.1 Spreadsheet电子表格 ......................................................................................... 27

2.4.3.2 Calendar 各种格式的日期输入与显示 .................................................................. 28

2.4.3.3 Schedule 日程计划输入组件 .................................................................................. 31

2.4.3.4 Captcha ：变形字符验证 ....................................................................................... 31

2.4.3.5 Color Picker .............................................................................................................. 32

2.5 集合(复杂格式)数据的输出与显示： ................................................................................... 33

2.5.1 BreadCrumb ：层次化页面导航条 >…>….> ............................................................. 33

2.5.2 Accordion：一个容器组件，它用tab动态地显示折叠或展开过程。 ...................... 34

2.5.3 Carousel：多用途,标签式、分布式显示 ...................................................................... 35

2.5.4 Galleria 图片陈列廊 ...................................................................................................... 36

2.5.5 LightBox :图片加亮显示 ................................................................................................ 37

2.5.6 DataGrid 数据栅格 ........................................................................................................ 37

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

2.5.8 DataTable数据表格 ........................................................................................................ 41

2.5.9 Tree 树形显示 ................................................................................................................ 46

2.5.10 TreeTable 树表 ............................................................................................................... 47

2.5.11 DragDrop ......................................................................................................................... 50

2.5.11.1 Draggable组件： ................................................................................................... 50

2.5.11.2 Droppable组件 ...................................................................................................... 51

2.5.12 Charts基于flash的图形生成与显示 ............................................................................ 52

2.6 数据导出： ............................................................................................................................. 54

2.6.1 Data Exporter ................................................................................................................... 54

2.6.2 Printer .............................................................................................................................. 56

2.7 状态： ..................................................................................................................................... 56

2.7.1 ProgressBar ...................................................................................................................... 56

2.7.2 NotificationBar ................................................................................................................ 57

2.8 对话框： ................................................................................................................................. 58

2.8.1 ConfirmDialog ................................................................................................................. 58

2.8.2 Dialog .............................................................................................................................. 58

2.9 图形图像多媒体： ................................................................................................................. 59

2.9.1 ImageCompare ：提供丰富的接口比较两副图像 ....................................................... 59

2.9.2 Graphic Text 文本图象化显示 ...................................................................................... 60

2.9.3 ImageCropper .................................................................................................................. 60

2.9.4 ImageSwitch .................................................................................................................... 61

2.9.5 Google Maps 地图.......................................................................................................... 61

2.9.6 Dyna Image ..................................................................................................................... 63

2.9.7 Media ............................................................................................................................... 65

2.9.8 Star Rating ....................................................................................................................... 65

2.9.9 Wizard: ............................................................................................................................ 66

2.10 消息： ..................................................................................................................................... 66

2.10.1 Growl Mac风格的消息显示 ....................................................................................... 66

2.10.2 . 67

2

本文标签： 显示输入数据组件