I'm using a RichFaces commandbutton and I need it to execute two functions on click, one after the other. Right now, I have the code like so:
<a4j:commandButton styleClass="btn-hide"
onl
id="btnId"
type="submit"
value="addNew"
rendered="true"
reRender="panel"
eventsQueue="eventQueue"
status="eventQueue"
actionListener="#{(someMethod.something)}"
oncomplete="javascript:something;this.disabled=false"
onclick="Bean.setDesc(document.getElementById('inputArea').value);this.disable=false"
ignoreDupResponses="true"
immediate= "true">
<s:conversationId></s:conversationId>
</a4j:commandButton>
If you look at the onclick portion, I need the Bean.setDesc to run first and then this.disabled=false. How would I go about doing this chronologically?
Thanks
Here's a code stub to get you started. You'll want to use a4j:jsFunction if you are looking to grab values directly from the client and pass them to a server method with javascript.
<h:form id="form1" prependId="false">
<a4j:jsFunction
name="setDesc"
action="#{exampleBean.actionMethod()}"
immediate="true">
<a4j:param name="inputAreaValue" assignTo="#{exampleBean.desc}"/>
</a4j:jsFunction>
<h:commandButton id="button" onclick="setDesc(document.getElementById('inputArea').value); this.disabled = true;" />
</h:form>
and the managed bean:
#ManagedBean(name = "exampleBean")
#SessionScoped
public class ExampleBean implements Serializable {
private static final long serialVersionUID = 6823632613070575039L;
private String desc;
public String getDesc() { return desc; }
public void setDesc(String desc) { this.desc = desc; }
/**
* Action Method
*/
public void actionMethod() {
// do something here
}
}
Related
Can I add JSF components dynamically? I need to have a form with a button which should add one <h:inputText> to the form. Is this possible?
I know this should be possible in JavaScript somehow. Do anybody know how to do this in JSF? I think the major problem is how do I get or set values of new inputs via #{value}.
Use an iterating component like <h:dataTable> or <ui:repeat> to display a dynamically sized List of entities. Make the bean #ViewScoped to ensure that the list is remembered across postbacks on the same view instead of recreated over and over.
Kickoff example with <h:dataTable> (when using <ui:repeat> simply replace <h:dataTable> by <ui:repeat>, and <h:column> by e.g. <li> or <div>):
<h:form>
<h:dataTable value="#{bean.items}" var="item">
<h:column><h:inputText value="#{item.value}" /></h:column>
<h:column><h:commandButton value="remove" action="#{bean.remove(item)}" /></h:column>
</h:dataTable>
<h:commandButton value="add" action="#{bean.add}" />
<h:commandButton value="save" action="#{bean.save}" />
</h:form>
Managed bean:
#Named
#ViewScoped
public class Bean {
private List<Item> items;
#PostConstruct
public void init() {
items = new ArrayList<>();
}
public void add() {
items.add(new Item());
}
public void remove(Item item) {
items.remove(item);
}
public void save() {
System.out.println("items: " + items);
}
public List<Item> getItems() {
return items;
}
}
Model:
public class Item {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String toString() {
return String.format("Item[value=%s]", value);
}
}
See also:
Recommended JSF 2.0 CRUD frameworks
How to create dynamic JSF form fields
How to implement a dynamic list with a JSF 2.0 Composite Component?
How to choose the right bean scope?
It's should be like that
Bind a form tag to the bean property
<form binding="#{myBean.myform}">...</form>
#ManagedBean("myBean")
public class Bean{
property HtmlForm myform;
}
on event, create a new instance of the input component
HtmlInputText input=new HtmlInputText();
and attach to the your form
myform.getChildren().add(input);
Use h:dataTable to add elements dynamically... Have a list of any type you want to provide values for dataTable...
In h:dataTable... you can include the element tag to create inside <h:column>
It will be used to generate elements you want to create dynamically.
Can I add JSF components dynamically? I need to have a form with a button which should add one <h:inputText> to the form. Is this possible?
I know this should be possible in JavaScript somehow. Do anybody know how to do this in JSF? I think the major problem is how do I get or set values of new inputs via #{value}.
Use an iterating component like <h:dataTable> or <ui:repeat> to display a dynamically sized List of entities. Make the bean #ViewScoped to ensure that the list is remembered across postbacks on the same view instead of recreated over and over.
Kickoff example with <h:dataTable> (when using <ui:repeat> simply replace <h:dataTable> by <ui:repeat>, and <h:column> by e.g. <li> or <div>):
<h:form>
<h:dataTable value="#{bean.items}" var="item">
<h:column><h:inputText value="#{item.value}" /></h:column>
<h:column><h:commandButton value="remove" action="#{bean.remove(item)}" /></h:column>
</h:dataTable>
<h:commandButton value="add" action="#{bean.add}" />
<h:commandButton value="save" action="#{bean.save}" />
</h:form>
Managed bean:
#Named
#ViewScoped
public class Bean {
private List<Item> items;
#PostConstruct
public void init() {
items = new ArrayList<>();
}
public void add() {
items.add(new Item());
}
public void remove(Item item) {
items.remove(item);
}
public void save() {
System.out.println("items: " + items);
}
public List<Item> getItems() {
return items;
}
}
Model:
public class Item {
private String value;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String toString() {
return String.format("Item[value=%s]", value);
}
}
See also:
Recommended JSF 2.0 CRUD frameworks
How to create dynamic JSF form fields
How to implement a dynamic list with a JSF 2.0 Composite Component?
How to choose the right bean scope?
It's should be like that
Bind a form tag to the bean property
<form binding="#{myBean.myform}">...</form>
#ManagedBean("myBean")
public class Bean{
property HtmlForm myform;
}
on event, create a new instance of the input component
HtmlInputText input=new HtmlInputText();
and attach to the your form
myform.getChildren().add(input);
Use h:dataTable to add elements dynamically... Have a list of any type you want to provide values for dataTable...
In h:dataTable... you can include the element tag to create inside <h:column>
It will be used to generate elements you want to create dynamically.
HTML code:
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="Color:"></h:outputText>
<p:themeSwitcher effect="fade" style="width:165px" id="color">
<f:selectItem itemLabel="Green" itemValue="href='#{request.contextPath}/theme/primefaces-aristo/theme.css" />
<f:selectItem itemLabel="Blue" itemValue="href='#{request.contextPath}/theme/primefaces-aristo/theme1.css" />
</p:themeSwitcher>
</h:panelGrid>
I create 2 different CSS stylesheet which are theme.css and theme1.css
The problem is when I select the theme1.css(label as Blue), it doesn't work and the theme still the same.
How to solve it? Any ideas?
UPDATE:
JAVA page:
private String csspath = "";
private String selectedCss = "Pink";
private boolean trigger_valuechange_refresh;
public Test() {
if(this.selectedCss.equals("Pink")) {
this.csspath = "/theme/primefaces-aristo/theme1.css";
} else {
this.csspath = "/theme/primefaces-aristo/theme.css";
}
}
public String getCsspath() {
return csspath;
}
public String getSelectedCss(){
return selectedCss;
}
public void setSelectedCss(String selectedCss){
this.selectedCss = selectedCss;
}
public void handleTest_combo_box_trans_groupValueChange() {
this.trigger_changeValue_refresh = true;
if (this.trigger_changeValue_refresh) {
if (_tg != null) {
getTransactActivityType_ByLogCategory(_tg);
}
this.trigger_changeValue_refresh = false;
}
}
HTML:
<h:outputStylesheet name="#{pc_Test.csspath}" value="#{pc_Test.csspath}" />
<p:selectOneMenu value="#{pc_Test.selectedCss}">
<p:ajax update="form1" listener="#{pc_Test.changeValue}"/>
<f:selectItem itemLabel="Green" itemValue="Green" />
<f:selectItem itemLabel="Pink" itemValue="Pink" />
This is my updated code. I have some problem on JAVA page which is the value change part.
Any idea to solve it?
I would use the following approach:
You manage the selected CSS in a ManagedBean and let the user choose his oder her desired style with a <p:selectOneMenu>. So your xhtml page looks like this:
<h:outputStylesheet library="css" name="#{myBean.stylesheet}" />
<p:selectOneMenu value="#{myBean.stylesheet}">
<p:ajax event="itemSelect" update="main" />
<f:selectItem itemLabel="Green" itemValue="theme.css" />
<f:selectItem itemLabel="Blue" itemValue="theme1.css" />
</p:selectOneMenu>
By using <p:ajax> you can trigger an update on whichever area (e.g. a surrounding <h:form id="main">) and apply the new styling. I don't know if itemSelect is the right event to listen to but you can find out by trying.
Your corresponding ManagedBean would look like the following:
#ManagedBean
#SessionScoped
public class MyBean {
private String stylesheet;
//getter and setter
}
This is only the approach I would take and therefore not tested. But this is a way it could work. Hope I could help you a little.
Personnaly i would use a managed bean in session scope for storing the user css choise.
#ManagedBean(name = "CSSManager")
#SessionScoped
public class CSSManager {
private String csspath = "";
private String selectedCss = "Blue";
public CSSManager() {
if(this.selectedCss.equals("Blue"))) {
this.csspath = "css/theme1.css";
} else {
this.csspath = "css/theme.css";
}
}
public void changeValue(){
}
public String getCsspath() {
return csspath;
}
public String getSelectedCss(){
return selectedCss;
}
public void setSelectedCss(String selectedCss){
this.selectedCss = selectedCss;
}
}
And inside your HTML code :
<h:outputStylesheet name="#{CSSManager.csspath}" value="#{CSSManager.csspath}" />
Don't forget to put your css file inside the WebContent/resources/css/ folder.
That should do the trick
Update :
<p:selectOneMenu value="#{CSSManager.selectedCss}">
<p:ajax update="Your Main Form" listener="#{CSSManager.changeValue}"/>
<f:selectItem itemLabel="Blue" itemValue="Blue" />
<f:selectItem itemLabel="Green" itemValue="Green" />
</p:selectOneMenu>
Is there a way to send some JS value to my bean, using the ActionListener property of a p:commandButton?
Example:
<p:inputText id="txtColaborador1"></p:inputText>
<p:commandButton ajax="true" actionListener="#{demandaController.validarLogin(document.getElementById('form\:j_idt100\:txtColaborador1').value)}""></p:commandButton>
And in my Bean:
....
public class DemandaController
public void validarLogin(String text1) {
//....
}
}
Also, would be better using widgetVar.
I'm already providing another solution for this case, cause i can recover that text value in my bean....but still, is there way to do that?
You can achieve this by using Primefaces Remote Command
remoteCommand
<p:remoteCommand name="validarLoginCommand"
actionListener="#{demandaController.validarLogin()}"/>
Button
<p:inputText id="txtColaborador1" widgetVar="txtColaboradorVar"></p:inputText>
<p:commandButton onclick="handleLogin()"></p:commandButton>
JS
function handleLogin() {
myJSValue = txtColaboradorVar.jq.val();
validarLoginCommand([{name: 'myJSValue', value: myJSValue}]);
}
Managed Bean
public void validarLogin() {
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
myJSValue = (String) map.get("myJSValue");
}
Hope this Helps.
Basically I have a list of records. Each record (the VO bean) will have an alert flag, alertFlag, attached to it. When the alertFlag is true, an alertbox will be prompt. Otherwise it wouldn't prompt.
The VO bean:
#ManagedBean(name = "theVo")
#SessionScoped
public class TheVO {
private boolean alertFlag;
/** getter and setter **/
}
Here is the XHTML code:
<t:dataTable var="theRecord" value="#{theVo.theList}">
<t:column>
<h:commandLink value="#{theRecord.recNo}"
actionListener="#{theEnquiry.doSetAlertFlag(theRecord.paramKey)}"
immediate="true"
action="#{theDetail.doShowDetailsPage(theRecord)}"
onclick="readAlertFlag(#{theEnquiry.alertFlag})"/>
</h:commandLink>
</t:column>
...
...
</t:dataTable>
Here is theEnquiry bean:
#ManagedBean(name = "theEnquiry")
#SessionScoped
public class Enquiry {
private boolean alertFlag = false;
/** getter and setter of alertFlag **/
public void doSetAlertFlag(Integer theParamKey) {
// check whether the alert flag is true or false.
// if alert flag is true, otherwise set it false
}
}
Here is the JavaScript code:
function readAlertFlag(alertFlag) {
if( alertFlag == "true" )
alert('alertFlag is true');
else
alert('alertFlag is false');
}
My current situation is the JavaScript alert box will always execute first then only doSetAlertFlag() get executed. But my expectation is to execute doSetAlertFlag() first because I want the checking to be done first before prompting. If this can't be done on JavaScript prompt, I'm open to alternative solution.
Let JSF render the script conditionally. Replace the onclick by a <h:outputScript rendered>.
<h:commandLink ... />
<h:outputScript rendered="#{theEnquiry.alertFlag}">showAlert()</h:outputScript>