I have a graphicimage in my xhtml whick I am loading on some condition:
Here is the component:
<h:graphicImage id="imgHlpProfileClass"
styleClass="helpIcon"
url="/images/icons/dashboard_help_16.png"
alt="Help Text"/>
In this case the text in alt is displayed.
But when I apply rendered condition in component the alt attribute is not displayed.
Example:
<h:graphicImage id="imgHlpProfileClass"
styleClass="helpIcon"
url="/images/icons/dashboard_help_16.png"
alt="Help Text"
rendered="#{not empty targetSource.object.type}"/>
EDIT:
I have made the changes like this. The rendered attribute is correctly working for both the output text as well as GraphicalImage. But in case of Graphical Image the alt is not working. What is wrong here?
<h:panelGroup id = "overrideProvisioningActionTextPanel">
<h:outputText value="Override Default Provisioning"
rendered="#{not empty targetSource.object.type}"/>
<h:graphicImage id="imgHlpAppCase"
styleClass="helpIcon"
url="/images/icons/dashboard_help_16.png"
alt="Help Text"
rendered="#{not empty targetSource.object.type}"/>
</h:panelGroup>
You're confusing alt with title.
The alt is only shown as replacement text when the image is broken, or when the enduser is using a client which doesn't load images like screenreaders. Moreover, searchbots also use alt as keyword to match images. The alt is not intented as tooltip. Therefor the title attribute should be used (like as on every other component/element). The appearance of alt and title is also different. The alt displays as inline text while the title displays only on hover.
So, this is what you ultimately need:
<h:graphicImage ... title="Help Text" />
This all has nothing to do with presence of rendered attribute. You'd have exactly the same problem when removing it (while having a working image!).
See also:
Basic HTML tutorial - the <img> element
Related
I have the following code in my xhtml
<h:form id="xyForm">
<p:dataGrid id="xyGrid" ....>
<p:selectOneMenu id="code" ...> </p:selectOneMenu>
</p:dataGrid>
</h:form>
But when I saw the code generated, it looks like the following
<select name="xyForm:xyGrid:0:code_input" tabindex="-1" id="xyForm:xyGrid:0:code_input"> </select>
My question here is: why _input is getting appended with name and id.
As per my understanding id should be only xyForm:xyGrid:0:code not with appended _input. Could someone please clarify or tell me how to remove that _input?
An id attribute should be unique within an html page.
While rendering the SelectOneMenu, the select tag is wrapped inside a div tag. The div tag will have the id of the component i.e. xyForm:xyGrid:0:code, and so it makes sense that the select tag should have a different id.
Also, this is a common pattern in Primefaces, observed in other components like SelectBooleanCheckbox etc.
Instead of trying to removing _input, you will have to figure around how to work around it.
I must print some component from html page. I used from Prime Faces, but I have some problem.
Internet Explorer 11 add some text to printed images ("Submit Query").
Problem occur in h:commandButton which have empty value.
How I may resolve this problem??
You can achieve by using css background-image with image in order to present a background image.
<h:commandButton value=" " style="background-image: url(your-image.png)" />
If you do not want to have the appearance of a button, you can nest <h:graphicImage> inside
<h:commandLink> and instead.
<h:commandLink ...>
<h:graphicImage value="your-image.png" />
</h:commandLink>
I would like my page to be user friendly as much as possible and I have an idea but its a little bit harder in the way I want to solve it.
I'm using primefaces and I would like to have a selectOneMenu element which changes to just an outputText with the value of the selected variable in the selectOneMenu. Anyone have some nifty ideas?
This can be done with ajax and partial rendering. Here is a sketch of my idea (untested and in plain JSF):
<h:panelGroup id="wrapper">
<h:selectOneMenu value="#{myBean.myValue}"
rendered="#{myBean.myValue == someInitialValue}" ...>
<f:ajax render="wrapper"/>
... (your select items here)
</h:selectOneMenu>
<h:outputText value="#{myBean.myValue}"
rendered="#{myBean.myValue != someInitialValue}" .../>
</h:panelGroup>
And that's what it does:
The value of h:selectOneMenu will be initialized and the menu will be rendered only if it is the initial value.
On change of the value, the surrounding panelgroup will be re-rendered, hides the menu and lets the h:outputText appear.
You need a wrapping panelGroup for this because the outputText is not there at page load. If your form is small you could also render=#form or any other surrounding container instead. Then you wouldn't need the wrapper.
Is it possible to have items in a rich:dataTable display with a different icon depending on their #{bean.type} similar to how you can alter the icon in a rich:tree and rich:treeNode?
you can add a <f:facet name="header"> in your rich column that can display any HTML, or in your rich column you can have any html which could be custom images.
you can add a rendered attribute to <h:graphicImage> based on the value of #{bean.type} or #{bean.type} could be a link to the image for to get.
for example
<h:graphicImage value="/images/icons/tables/down_icon.gif" rendered="#{carsSortingBean.sortsOrders['mileage']=='descending'}" />
<h:graphicImage value="/images/icons/tables/up_icon.gif.gif"
rendered="#{carsSortingBean.sortsOrders['mileage']=='ascending'}" />
So yes. There are lots of way's to customize the output of a dataTable
I have a data entry form where user enters lots of data. When user comes to the page to view existing data, the page should be displayed in read-only mode (all values shown as text), when he clicks 'Edit' button, normal form with all input controls should be shown so that user can change and save data.
We are using JSF 2.0 with PrimeFaces library. It is easy to achieve above behavior for text box and text area but not for Checkbox, multi-select, radio,..... controls. Is there any easy way available to achieve above behavior rather than writing our own code (which may run into lot of lines thus making backing bean code ugly)
Thanks for your help...
I'm not sure why you think that you need additional backing bean code for this. You've all the needed values in the backing bean already. Your problem is more in the presentation of those values. Just display them in the desired format by writing the view code accordingly. Perhaps you were thinking it too the hard way.
Instead of a select boolean checkbox, you could display for example a "Yes" or "No" value.
<h:selectBooleanCheckbox value="#{bean.checked}" rendered="#{bean.edit}" />
<h:outputText value="#{bean.checked ? 'Yes' : 'No'}" rendered="#{not bean.edit}" />
Instead of a select one menu/radio, you could just display the value in an output text.
<h:selectOneMenu value="#{bean.selectedItem}" rendered="#{bean.edit}">
<f:selectItems value="#{data.availableItems}" />
</h:selectOneMenu>
<h:outputText value="#{bean.selectedItem}" rendered="#{not bean.edit}" />
Instead of a select many listbox/checkbox, you could just display for example all values comma separated in a loop.
<h:selectManyListbox value="#{bean.selectedItems}" rendered="#{bean.edit}">
<f:selectItems value="#{data.availableItems}" />
</h:selectManyListbox>
<h:panelGroup rendered="#{not bean.edit}">
<ui:repeat value="#{bean.selectedItems}" var="selectedItem" varStatus="loop">
#{selectedItem}#{not loop.last ? ', ' : ''}
</ui:repeat>
</h:panelGroup>
You could wrap it all in a tag file or a composite to minimize boilerplate and code repetition.
I've done this in my last project using composite components which has a "preview" attribute and in the implementation I render a text when this attribute is true and the real (editing) when the attribute is false. For checkbox in preview mode you could show the checkbox itself but disabled, for radio - show the selected item.
MyFaces Tomahawk library [1] contains an extended version of the standard components that adds displayValueOnly attribute for this purpose. This might help you (I haven't used them).
[1] - http://myfaces.apache.org/tomahawk-project/tomahawk20/index.html