Primefaces使用小结

由于公司项目中前端框架要改用Primefaces,之前没有接触过这个框架,而且网上资料教程少之又少,只能自己照着官网给的案例一步一步学,话不多说,接下来分享一些我学习中遇到的一些组件问题
1、selectManyCheckbox组件中记得加布局样式layout=“grid”

2、<h:panelGrid cellpadding=“5” columns=“2”> h:panelGrid中才有cellpadding属性

3、 <h:outputText id=“Max” value=“Max,Min and Step”/> id属性不能有空格 例: id=Max Min

4、 <p:dialog widgetVar=“dlg” header=“Content” showEffect=“fade” hideEffect=“fade”>
<p:outputLabel id=“display”>
<h:outputText value="#{editorView.text1}" escape=“false”/> //记得加escape
</p:outputLabel>
</p:dialog>

5、想要获取pickList中的source和target的值,需要用DualListModel cities中的cities.getTarget()和cities.getSource()方法

6、DataTable中列的sortBy属性sortBy ="#{dev.id}" 要在load方法中的map传入参数
LazyInfoDataModel中load方法
由于刚学了两周,还有许多组件没用过,所以只能一边记录一边学习,有大佬知道怎么给按钮添加图标以及加背景图片啊就像官网这样,试了icon属性但没用。。。。
在这里插入图片描述
以下为转载内容
转载地址:https://www.ccjk.com/primefaces-ui使用小结/

 一、ManagedBean的Scoped
    1、RequestScoped
    2、ViewScoped
    3、SessionScoped
    4、ApplicationScoped

Request、Session、Application大家都比较熟悉,就不多说了,ViewScoped顾名思义视图有效,或者说当前页有效,因为Servlet规范里并没有View这个概念,所以它是JSF延伸出的一个概念,个人理解是为Ajax准备的,大家一定要记住它哦,后续它可发挥了很大的作用。

二、Primefaces

1、template的使用

在现在Web开发中,特别是Ajax出现后,framesetframeiframe已经不是特别推荐使用了(当然也可以使用),牛人可以用DIV构建出任何想要的布局,像我们这些平民懂的分享牛人的成果就OK了,在Primefaces里我们可以用p:layout布局,并做成template,后面的每个页面只要继承这个template,就可以直接享用,如下图
2、ViewScoped的使用

这个很重要,在项目开始时,因为SessionScoped的生命周期太长了不想用,所以大部分的ManagedBean都是用的RequestScoped,问题是一个接一个,如p:commandButton和p:commandLink的action和actionListener莫名其妙的不可进入,Ajax的使用也有时可以有时不可以,Scoped换成Session就一切都OK了,发现跟Bean的生命周期有关系,最后调试完,发现用ViewScoped最合适,生命周期比Request长比Session短,同时又能解决上述问题,因为Primefaces UI里大量用到ajax通信,这种场景最适合用ViewScoped。
3、form的使用
在使用中一定要避免form嵌套form的情况,它会出现很多不可以预知的情况,如提交附件会出现问题,但并列form可以放心的使用
4、tree的使用

如上图的Left中可以放置一个树形菜单,使用过的人可能会和我碰到一样的问题,那就是当我打开一个新页面时,树形菜单不能保持我打开页面之前的状态,解决方法:负责树形菜单Node节点的Bean的Scoped要申明成SessionScoped,并在tree标签上加属性dynamic=”true”,如
5、confirmDialog的使用

如果在使用confirmDialog时发现,弹出框被遮罩层给挡住了不可使用,怎么办?解决方法:在confirmDialog标签加属性appendToBody=”true”,如

6、dialog的使用
不得不提的一个组件,超级好用,我的应用里大量用到了它,它用起来让你的Web应用就像是一个Client应用,交互性和用户体验非常的好。你可以将dialog当作一个提示框用,也可以在dialog里做一个复杂的表单,你可以选择遮罩也可以不使用,如果要使用遮罩只需加上属性modal=”true”
7、panelpanelGridoutputPanelaccordionPaneltabView等的使用
他们都是布局展现相关的,用好来,效果非常的好,当然还有其它的。
8、process和update属性的使用
前面说了Primefaces大量用到了Ajax,那就不得不提process和update,他们俩刚好相反,process指出要异步提交哪一部分的内容,update指出要异步更新哪一部分的内容,经常在一起配合使用。功能非常的强大,如果有兴以后可以再详细说说。
9、fileUpload的使用
在使用前要在Web.xml中加入如下部分:
PrimeFaces FileUpload Filter
org.primefaces.webapp.filter.FileUploadFilter
PrimeFaces FileUpload Filter
Faces Servlet
使用p:fileUpload的form必须加上属性enctype=”multipart/form-data”,而且它不
支持Ajax异步提交,所以对应的command要加上属性ajax=”false”。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PrimeFaces主要标签学习。 1 PrimeFaces综述 3 1.1 安装 3 1.2 配置,JSF2.0环境下用PrimeFace2.x 4 1.3 Hello World入门示例 4 1.4 UI组件: 4 2 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 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 Message/Messages 67 2.10.3 Tooltip 67 2.11 文件处理: 67 2.11.1 FileUpload 上传文件 67 2.11.2 FileDownload 下载文件 69 2.11.3 IdleMonitor 屏幕凝滞 70 2.11.4 Terminal 70 2.12 辅助功能(辅助其它JSF组件,给它们添加新的功能和行为): 71 2.12.1 Ajax Engine 71 2.12.2 Ajax Poll轮询 72 2.12.3 Ajax远程调用p:remoteCommand 72 2.12.4 Ajax Status 显示ajax后台运行状态。 72 2.12.5 Focus 73 2.12.6 Effect: 73 2.12.7 Collector : 74 2.12.8 Resizable 给任何JSF组件添加可调整大小的行为。 74 2.12.9 RequestContext : 75 3 TouchFaces 76 3.1.1 移动UI工具 76 3.1.2 Ajax Push/Comet 77 3.1.3 几分钟实现聊天应用: 78 4 附录 79 4.1 全部UI组件列表 84 4.2 PrimeFaces常用属性集 85
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值