JSF第一章,常用的较难标签
初学JSF会感到他强大的同时也会被它那复杂的标签所困惑,笔者就从自己的切身体会谈及我在JSF路上的尴尬与羞涩。
由于目前对JSF的相关书籍大都是偏于翻译,难免会有一些不到之处,但是唯有经历过,然后克服一个个问题,才能真正意义上掌握并熟练运用。无论是在html中还是jsp中,不管是ojnl还是jstl标签,最难搞的莫过于这么几种。
第一种:下拉框。第二种:单选框。
那么现在我就把我的需求说一下,领导指示页面要做成这种情况
需求如上,只要是实现这么两种效果,需求二的效果很好实现,需求一的效果就太太容易实现了(针对新手来说)
需求一,修改数据点击保存,不进行页面刷新,然后将数据提交到后台。
需求二,改变是否,不刷新页面,提交数据到后台。
1、实现需求一:
这个需要用到下面这个标签,顺便把属性说了
前台页面:
<rich:inplaceInput value="#{parseXmlAction.dataManagerTime}" showControls="true"
controlsHorizontalPosition="right" controlsVerticalPosition="bottom"
id="inplaceInput1"
required="true" >
//value:用于在前台显示的数据值
//showControls="true" 属性用来控制是否显示 Save/Cancel 按钮
//定义绑定id
<f:facet name="controls">
<button οnmοusedοwn="#{rich:component('inplaceInput1')}.save();"
type="button" οnclick="updDataManagerTime();">Save</button>
<button οnmοusedοwn="#{rich:component('inplaceInput1')}.cancel();"
type="button">Cancel</button>
</f:facet>
<a4j:support event="onviewactivated" actionListener="#{parseXmlAction.updDataManagerTime}" reRender="inplaceInput1" ajaxSingle="true">
//event="onviewactivated",事件类型,比较常用。
//actionListener="#{parseXmlAction.updDataManagerTime}" 你发送后台的监听事件
//reRender="inplaceInput1" 渲染的id
//ajaxSingle="true" 将你修改之后的值传递给后台,如果这里不设置的话,后台接受到的永远是上一个值,我在后台没做处理
直接用的这个属性
</a4j:support>
</rich:inplaceInput>
后台处理:
public void updDataManagerTime(){
System.out.println("修改信息dataManagerTime="+dataManagerTime);
}
简单介绍一下里面的常用属性,这个标签需要用到rich:inplaceInput标签,它需要有a4j控件的支持,才能往后台发送请求,响应你的后台action里面的方法。属性的简单说明:
1) defaultLabel属性,可以点击该属性以编辑控件的值;
2) 对于控件值的修改只是在Browser上的行为,不会向Server传递任何数据;
3) showControls属性用来控制是否显示Save/Cancel按钮;
4) controlsHorizontalPosition和controlsVerticalPosition用来控制Save/Cancel的位置;
5) 也可以使用自定义的控制器Control,只需要在体中加入一个<f:facet>,像这样:
<rich:inplaceInputid="inputEmail" value="#{inplaceInputBean.email}"
defaultLabel="Clickto edit email" showControls="true"
controlsVerticalPosition="bottom"
controlsHorizontalPosition="left">
<f:facetname="controls">
<button οnclick="#{rich:component('inputEmail')}.save();" type="button">
Save
</button>
<button οnclick="#{rich:component('inputEmail')}.cancel();"type="button">
Cancel
</button>
</f:facet>
</rich:inplaceInput>
6) 一旦自定义Control被启用,那么showControls属性也就隐式地被启用了。
7) 控件也提供了一些特定事件给<a4j:support>的,当控件状态改变的时候,这些事件就会被调用来发送Ajax Request。
• oneditactivation:当激活edit状态的时候,会触发Ajax Request;
• oneditactivated:当控件变为edit状态后,会触发AjaxRequest;
• onviewactivation:当激活view状态的时候,会触发Ajax Request;
• onviewactivated:当控件状态变为view状态后,会触发Ajax Request(这个最常用)。
大家看到我在a4j中使用的就是最后一个,修改完之后,点击保存,触发事件,将请求发送到后台。
2、实现需求二
其实这两中需求很像,用法都差不多。只不过提交到的action稍有不同,其他的也可以吧,但是没试过。
前端实现
<h:outputText id="checkedBox1" value="#{console.whetherSaveOriginalData}" style="font-weight:bold;font-size:10px"></h:outputText>
//value,显示后台值
<h:selectOneRadio ajaxSingle="true" value="#{parseXmlAction.whetherSaveOriginalData}" valueChangeListener="# {parseXmlAction.updWhetherSaveOriginalData}">
//valueChangeListener 往后台发送的事件
<f:selectItem itemValue="true" itemLabel="是"/>
<f:selectItem itemValue="false" itemLabel="否"/>
<a4j:support event="onchange" reRender="checkedBox1" ></a4j:support>
//这里的事件使用的是event="onchange" 其实上面的那个和这个想过一样,都能起到这种作用
</h:selectOneRadio>
后台action中:
public void updWhetherSaveOriginalData(ValueChangeEvent evt){
//你页面所有的信息都在ValueChangeEvent里面,通常会根据evt来获取,如果你的前台信息跟需要的信息不一致,可以根据只发生改变还赋值,如下。
//倘若值一样,你也可以根据我写的第一种来实现
String changeType = evt.getNewValue().toString();
if(changeType!=null&&!"".equals(changeType)){
if(changeType.equals("false")){
wifiAdmisstionAble=false;
}else{
wifiAdmisstionAble=true;
}
}
ParseWifiLocationConfig.setWifiAdmisstionAble(wifiAdmisstionAble);
}