A have found sample on internet(IBM site http://www.ibm.com/developerworks/web/library/j-jsf2fu-0410/index.html#listing1) and on some book that with JSF can make auto complete drop down list. Like on google search page. The main point of this is in using composite component page. It look like:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
<composite:attribute name="value" required="true"/>
<composite:attribute name="completionItems" required="true"/>
</composite:interface>
<!-- IMPLEMENATION -->
<composite:implementation>
<div id="#{cc.clientId}">
<h:outputScript library="javascript"
name="prototype-1.6.0.2.js" target="head"/>
<h:outputScript library="javascript"
name="autoComplete.js" target="head"/>
<h:inputText id="input" value="#{cc.attrs.value}"
onkeyup="com.corejsf.updateCompletionItems(this, event)"
onblur="com.corejsf.inputLostFocus(this)"
valueChangeListener="#{autocompleteListener.valueChanged}"/>
<h:selectOneListbox id="listbox" style="display: none"
valueChangeListener="#{autocompleteListener.completionItemSelected}">
<f:selectItems value="#{cc.attrs.completionItems}"/>
<f:ajax render="input"/>
</h:selectOneListbox>
<div>
</composite:implementation>
</ui:composition>
My questions are:
Why we use ui:composition tags with out any parameters.
We have in h:inputText defined valueChangeListener, realized over backend class which has method public void valueChanged(ValueChangeEvent e) with these two lines
UIInput input = (UIInput) e.getSource();
UISelectOne listbox = (UISelectOne) input.findComponent("listbox");
If (UIInput)e.get source return component inputText with id="name". How possible next line
UISelectOne listbox = (UISelectOne)input.findComponent("listbox");
For the first question: <ui:composition template="..."> renders the content's of this tag into the specified template. Since you have no template here, the attribute isn't needed.
For the second question: findComponent searches for the given id in the enclosing NamingContainer, which is your composite component (check the Javadoc for the full algorithm). It's not like jQuery where it only searches "below" the given component.
Related
launcher.xhtml
this form uses "thing"
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:custom="http://java.sun.com/jsf/composite/components">
<h:form id="form">
<p:panelGrid
id="pgid"
columns="2">
<h:outputText value="title"/>
<h:outputText value="#{bean.value}"/>
</p:panelGrid>
<custom:thing
via="#{bean.via1}"
viaListener="#{bean.via2Listener()}"
vias="#{bean.vias1}">
</h:form>
thing.xhtml
<p:selectOneMenu
process="#this"
value="#{cc.attrs.via}">
<p:ajax
listener="#{cc.attrs.viaListener}"
update="form:pgid"
/>
<f:selectItems value="#{cc.attrs.vias}"/>
</p:selectOneMenu>
faces can´t find form:pgid. tried with and without prepending "form". thanks
Relative client IDs (those not starting with :) are searched relative to the parent NamingContainer component, which is in your case the composite component itself. So it's looking for form:pgid in the context of <cc:implementation>.
You need to prefix the client ID with : (the default NamingContainer separator character) to make it absolute to the view root.
<p:ajax ... update=":form:pgid" />
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
It's just a simple Primefaces lightBox I want to use commandLinks in. Unfortunately it simply closes, when I click a commandLink. Is there a way to keep the lightBox open?
Here an example of what my code looks like:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="template.xhtml">
<ui:define name="content">
<p:lightBox>
<h:outputLink value="#">
<h:outputText value="open lightbox" />
</h:outputLink>
<f:facet name="inline">
<h:form>
<h:commandLink>
commandLink
</h:commandLink>
</h:form>
</f:facet>
</p:lightBox>
</ui:define>
</ui:composition>
Use an ajax (asynchronous) request instead of a synchronous request:
<h:commandLink ...>
<f:ajax ... />
</h:commandLink>
or as you're using PrimeFaces already, just use <p:commandLink> instead (it uses by default already ajax):
<p:commandLink ... />
With ajax, by default no fresh page replacement with the response is performed (which basically "resets" anything to defaults). You can in case of <f:ajax> tell by render attribute which parts of the component tree should be updated in the client side and in <p:commandLink> by the update attribute. E.g. if you want to render/update the parent form only, use #form. E.g.
<p:commandLink ... update="#form" />
I am trying to create composite components. I defined 4 attributes in composite:interface section. Here is code
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface >
<composite:attribute name="id" />
<composite:attribute name="maxlength" />
<composite:attribute name="required"/>
<composite:attribute name="value" />
</composite:interface>
<composite:implementation xmlns:kc="http://java.sun.com/jsf/composite/components/kaysComposite">
<p:inputTextArea id="#{cc.attrs.id}" value="#{cc.attrs.value}" maxlength="#{cc.attrs.maxlength}" required="#{cc.attrs.required}" counterTemplate="{0} / #{cc.attrs.maxlength}" counter="#{cc.attrs.id}_counter"/>
<h:outputText id="#{cc.attrs.id}_counter"/>
</composite:implementation>
</html>
This is the page i use my component
<kc:kaysInputTextArea id="gpAdres" value="#{someBean.variable}" maxlength="250" required="true"/>
<p:message for="gpAdres" />
The weird part is required attribute doesn't work, but others work fine. I couldn't find why it is behaving like this.
(Not a true answer, but too long for a comment. Just wanted to share some ideas which might help... please edit or replace if appropriate)
You did not describe the behavior you encountered, so I'm guessing the value inside the component does not change with the value you pass in.
I had a similar problem with the same setup, but when I passed in "true" or "false" directly (as your example does), it worked. Only if I handed over an EL expression, the value inside the component is not set anymore, regardless of what the expression evaluates to. In my case I had an explicit type set on the attribute, e.g. type="java.lang.Boolean" Removing this definition did the trick.
My guess is that when forcing the attribute to expect boolean it can't handle an EL and resolves it to the default value of Boolean (which seems to be true, unless default="false" is set).
By not setting a type it seems the component can retain the EL and passes it on to the next target, e.g. the rendered attribute of whatever h:tag.
Does not seem to be your exact problem, but maybe it helps in tracing the issue?
You can use this approach.
<kc:kaysInputTextArea id="gpAdres" value="#{someBean.variable}" maxlength="250" required="true" rendered="#{yourBooleanExpression}"/>
<kc:kaysInputTextArea id="gpAdres" value="#{someBean.variable}" maxlength="250" required="false" rendered="#{!yourBooleanExpression}"/>
This is hack, but work )
I also experienced strange behavior of components once. It turned out that there was a problem with the value id in
<composite:attribute name="id" />
So try out renaming the attribute to ident. Maybe other commonly named attributes like required or value are also a problem...
The concrete, even more funny situation I had was the following:
<composite:attribute name="id" requred="true" />
worked. Notice the typo in requred. When I fixed the typo, the component no longer worked, complaining that I didn't specify a value for as required marked id attribute, although I did provide a value for that. The solution was to rename the composite attribute:
<composite:attribute name="ident" required="true" />
just try using another attribute: id is reserved for the composite tag so you should try this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface >
<composite:attribute name="inputTextId" />
<composite:attribute name="maxlength" />
<composite:attribute name="required"/>
<composite:attribute name="value" />
</composite:interface>
<composite:implementation xmlns:kc="http://java.sun.com/jsf/composite/components/kaysComposite">
<p:inputTextArea id="#{cc.attrs.inputTextId}" value="#{cc.attrs.value}" maxlength="#{cc.attrs.maxlength}" required="#{cc.attrs.required}" counterTemplate="{0} / #{cc.attrs.maxlength}" counter="#{cc.attrs.id}_counter"/>
<h:outputText id="#{cc.attrs.inputTextId}_counter"/>
</composite:implementation>
</html>
I am in need of some assistance in getting my Composite Component to behave. I am still learning the ropes in JSF, so please excuse any ignorance that might be displayed in this post.
So, I am working with JSF 2.0 and decided to build a composite component to make this particular code snippet reusable. The component displays everything perfectly, but will not behave at all when trying to add the actionListener.
Here is the code for my component
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface displayName="columnUpdate">
<composite:attribute name="id"
required="true"
displayName="id"
shortDescription="Id to apply to this control and its child components">
</composite:attribute>
<composite:attribute
name="value"
displayName="value"
required="true"
shortDescription="Field that will hold the new updated value.">
</composite:attribute>
<composite:attribute
name="columnName"
displayName="columnName"
required="true"
shortDescription="Value that will be applied as the column header">
</composite:attribute>
<composite:attribute
name="text"
displayName="text"
shortDescription="Text to be displayed above the field">
</composite:attribute>
<composite:actionSource name="actionEvent" targets="saveEvent"></composite:actionSource>
</composite:interface>
<composite:implementation>
<h:outputLabel value="#{cc.attrs.columnName}" onclick="showWindow('#{cc.attrs.id}')"></h:outputLabel>
<div id="#{cc.attrs.id}" class="ccColumnUpdate">
<div id="windowClose" onclick="closeWindow('#{cc.attrs.id}');" style="top: -10px;" title="Close this window">CLOSE</div>
<div>
<h:outputLabel id="lblTitle" value="#{cc.attrs.text}"></h:outputLabel>
</div>
<div>
<h:inputText id="txtValue" value="#{cc.attrs.value}"></h:inputText>
</div>
<div style="text-align:right;">
<h:commandButton id="saveEvent" value="Save"></h:commandButton>
</div>
</div>
</composite:implementation>
</ui:composition>
Here is the code in my page that uses the component:
<al:columnUpdate id="cuExpenseAmount" value="#{expense.columnValue}" columnName="Expense Amount" text="Set Expense Amount to:">
<f:actionListener for="actionEvent" binding="#{expense.updateColumnValue}">
<f:ajax execute="#form"></f:ajax>
</f:actionListener>
</al:columnUpdate>
and here is my code on the Backing Bean:
public void updateColumnValue(ActionEvent event) throws ParseException{
//Got HERE
}
I am not receiving any errors or hit any breakpoints I set on the backing bean. Any help, or pointers in the right direction would be appreciated.
Regards,
Mike
I found the answer after playing around a little bit and more searching.
Changes to the composite component:
FROM:
<composite:actionSource name="actionEvent" targets="saveEvent"></composite:actionSource>
<h:commandButton id="saveEvent" value="Save"></h:commandButton>
TO:
<composite:attribute name="registerButtonActionListener" method-signature="void actionListener(javax.faces.event.ActionEvent)" />
<h:commandButton id="saveEvent" value="Save" actionListener="#{cc.attrs.registerButtonActionListener}">
<f:ajax execute="#this" event="click"></f:ajax>
</h:commandButton>
Changes to the page using the composite component:
<al:columnUpdate id="cuExpenseAmount" value="#{expense.columnValue}" registerButtonActionListener="#{expense.updateColumnValue}" columnName="Expense Amount">
</al:columnUpdate>
The big change was defining the method signature in the composite attribute.
Regards,
Mike
I found an alternative solution to yours. A drawback of your solution is that you can only register one listener: the actionListener attribute can only point to one method.
The way to add listeners is as follows (you almost had it right in the first piece of code you wrote):
<al:columnUpdate id="cuExpenseAmount" value="#{expense.columnValue}" columnName="Expense Amount" text="Set Expense Amount to:">
<f:actionListener for="actionEvent" binding="#{expense.updateColumnValue(ActionEvent)}">
<f:ajax execute="#form"></f:ajax>
</f:actionListener> </al:columnUpdate>
Notice how the method pointed to by binding takes an ActionEvent parameter. This is a requirement of using <f:actionlistener/>.
Using this method, multiple listeners can be registered to the action source made available by the composite component.
Currently I'm trying to implement webpart technology with JavaServer Faces 2.0 with Facelets view technology for educational purposes. I have created facelet templates, facelet custom components and made a few facelet "template" clients. But in one thing I'm stuck. I can't dynamically load controls and put them cc:attributes.
If I have a page for example with static text or bind it with ManagedBean the property ui:include everything works well.
<ui:define name="right-column">
right-column asd
<h:link outcome="asdf" value="link_get">
<f:param name="aa" value="123" />
<f:param name="a" value="123 dd + 20" />
</h:link>
<h:commandLink action="asdf?faces-redirect=true" value="asdf">
<f:param name="aa" value="123" />
</h:commandLink><br />
<ui:include src="./resources/Controls/CategoryTree.xhtml"/><br />
This works even if I put src with MenageBean property.
<ui:include src="#{browseProducts.incudePath}"/>
</ui:define>
Here is my facelet control (data binding is inside this control within #{TreeBean.root}:
<!-- NO INTERFACE -->
<cc:interface>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<!-- This is a very simply scaffolding for Category Three Control.
-->
<p:tree value="#{TreeBean.root}" var="node"
expandAnim="FADE_IN" collapseAnim="FADE_OUT">
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
</cc:implementation>
But I have problem when ui:include points to a control with cc:attribute. I don't know how to initialize this attribute from backing bean and do "stuff".
For example I have this page:
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="./resources/layout/Template.xhtml"
xmlns:sc="http://java.sun.com/jsf/composite/Controls">
<ui:define name="right-column">
<sc:dummy ItemCount="10" />
<ui:include src="./resources/Controls/dummy.xhtml" />
</ui:define>
</ui:composition>
Here goes the composite control:
<cc:interface>
<cc:attribute name="ItemCount" required="true"
shortDescription="This attribute is meaningful " />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<!-- How to pass ItemCount to my dummy bean to create so many items in
list as ItemCount value -->
<ui:repeat value="#{dummy.dummyList}" var="dummyItem">
<h:outputText value="#{dummyItem}" />
</ui:repeat>
</cc:implementation>
And backing bean code:
public ArrayList<String> getDummyList() {
//Here I try to get dummy list work.
dummyList = new ArrayList<String>(getDummyCount());
for (int i=0;i< getDummyCount();i++){
dummyList.add(i + "" + i);
}
return dummyList;
}
How can this be done?
I think you have two problems:
calling a method with parameter from a composite component
specifying some parameter to an included page
For 1., since jsf 2, you could call the method directly, specifying the parameter (which should be part of method signature):
<ui:repeat value="#{dummy.getDummyList(cc.attrs.dummyCode)}" var="dummyItem">
<h:outputText value="#{dummyItem}" />
</ui:repeat>
But I suspect you are trying to use a backing for something that it isn't designed for. Maybe you'll be interested in writing backing java code for your composite component, which is different. It's difficult to master if you are a beginner, though. I'd first try to design my pages and bean interactions differently. I don't know which problem you are trying to solve, but at first look, this solution looks too complicated.
For 2., you should have a look at ui:param. A quick google search gives me this: http://www.jsfcentral.com/articles/facelets_3.html