According to this link:
How to create a custom Facelets tag?
I was able to create a facelet tag files.
A part of my CustomGraphicImage.xhtml file:
<h:graphicImage style="border: #{border}px solid #000000" height="#{height}" width="#{width}" alt="#{alt}" library="image" name="#{value}" />
My test.xhtml file:
<my:ImgPath border="1" value="loading_pt01.gif"></my:ImgPath>
The problem is that when view HTML source code, undefined attributes still appear. In the below example, undefined tags are alt, height, width.
<img src="/demo-project/javax.faces.resource/loading_pt01.gif.xhtml?ln=image" style="border: 1px solid #000000" alt height width>
How can I display only defined attributes?
I'm thinking about using <c:if> to decide to whether display the attributes or not but that seems too much work.
Related
Good Evening, i want to know how to insert space between JSF components that lies in same <div> without using <h:outputText value=" " /> i used it and in order to insert the desired space that i want i repeated these tag around 50 times! what are the alternative approaches to do that, these is the <div> :
<div
style="width: 100%; font-size: 20px; line-height: 30px; background-color: gray">
<h:outputText value="" />
<h:outputLabel value="Notifications ">
<h:graphicImage
value="/resources/images/lunapic_136698680056094_2.gif" />
</h:outputLabel>
/// insert space here
<h:outputLink id="lnk" value="#">
<h:outputText value="Welcome,Islam"></h:outputText>
</h:outputLink>
<p:tooltip for="lnk">
<p:graphicImage value="/resources/images/sofa.png" />
</p:tooltip>
</div>
This is normally to be achieved using CSS, e.g. via the margin property. CSS works on HTML and JSF is in the context of the current question merely a HTML code generator. You should ignore the JSF part in the question and concentrate on the JSF-generated HTML output in order to achieve the requirement. You can see it by rightclick, View Source in a webbrowser. If the HTML needs some altering, then change the JSF source code in such way that it generates exactly the desired HTML.
E.g.
<h:outputLabel value="Notifications" style="margin-bottom: 100px;">
(please note that using style is a poor practice; CSS should preferably be declared in a .css file which you import via <h:outputStylesheet> and reference via styleClass attribute)
Again, this all has nothing to do with JSF. JSF is in the context of this question merely a HTML code generator. If you're brand new to basic HTML/CSS and thus doesn't exactly understand what JSF is producing, then I strongly recommend to take a JSF-pause and learn those basics first.
Unrelated to the concrete problem, the <h:outputLabel> generates a HTML <label> element, but you don't seem to have any HTML input element associated with it. You're in essence abusing the label element for the wrong purpose. Understanding basic HTML and how to write semantic HTML and knowing what HTML output those JSF components exactly generate should push you far in the right direction. In this particular case, you should likely be using <h:outputText> instead.
To insert spaces between components in the same line, you can use img tag with a 1x1 clear image. (Note: this should be the last resort until other options exhausted, see discussion below)
<img width="100" height="10" src="/path-to/dot_clear.gif" />
e.g.
<img width="100" height="10" src="https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif" />
Enter desired width; for height any number between 1 to 10 will do.
By default, the unit of width and height is pixel
To get a copy of the dot clear image and save it to local resources from https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif
Right click on the content area and Save as...
a newbie primefaces question:
When I create a simple primeface page, what should I put in order to have the text styled?
<h:body>
<!-- Ok, what I put here to have styled the following H1 and outputText? -->
<h1>Not styled h1</h1>
<h:outputText value="Not styled text." />
</h:body>
</html>
I am able to get styled text by placing it inside a <\p:panel>, but I find that a bit annoying to place everything in panels.
Use css to change it, it's the most elegant solution. You can create your own classes or override existing primefaces ones if you're sure you aren't going to use the original ones. Remember to add !important at the end of the attributes set.
.ui-panel
{
border: black solid 1px !important;
}
You can just follow this tutorial about how and where to add your css reference in order to make Primefaces styles overriden.
So, like the title says in my case height of the extendedDataTable doesn't work, so my table also doesn't scroll because all rows are shown. I'm using richfaces4.0-final version. So here is my piece of code:
<rich:extendedDataTable
value="#{advancedSearchView.criteria}" var="criteria"
height="50px"
selection="#{advancedSearchView.selection}" id="table"
selectionMode="single">
<rich:column id="criteria_row" filterBy="#{criteria}" filterEvent="onkeyup" width="500px">
<h:outputText value="#{criteria}" />
</rich:column>
</rich:extendedDataTable>
AdvancedSearchView is request scoped bean, and criteria is an array of Strings.
I hope that is enough information. Thank you in advance. A would really appreciate if someone gives me an answer, because I'm struggling with this for a while.
According to the RichFaces 4 VDL (View Declaration Language) documentation, the <rich:extendedDataTable> component does not support the height attribute at all.
Your functional requirement is however understood. You want to render the extended datatable with a height of 50px and make the table body scrollable. You need to achieve this using the usual CSS means by style attribute which can take inline CSS declarations, or by the styleClass attribute which can take CSS classes, like as on almost every other JSF HTML component.
So, with style
<rich:extendedDataTable ... style="height: 50px;">
or, with styleClass (which is also the more recommend practice; separate style from markup)
<rich:extendedDataTable ... styleClass="criteria">
and this piece in a CSS file which you include by <h:outputStylesheet />:
.criteria {
height: 50px;
}
I am using t:datalist with JSF 2.0 to allign images horizontally . But i would like to list the properties of each image below the image vertically.Now the properties are also listed horizontally along with images. The code i use is :
<t:dataList var="item" value="#{listItems.dataList}" id="listItems">
<h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
<h:outputText value="#{item.prodName}" />
<h:outputText value="#{item.prodPrice}" />
</t:dataList>
I am not able to use plain html table tag inside the datalist to list the name and price properties below the image. Found a tag named f:verbatim after some search , but i could not make it work either. Tried putting the html table tag inside a panelGroup too.
Wrap them in a left-floating <div> and put the lines below the image by <br>.
<t:dataList var="item" value="#{listItems.dataList}" id="listItems">
<div class="box">
<h:graphicImage url="#{item.prodFileName}" width="100" height="100" />
<br /><h:outputText value="#{item.prodName}" />
<br /><h:outputText value="#{item.prodPrice}" />
</div>
</t:dataList>
With for example this CSS
.box {
float: left;
margin: 5px;
padding: 5px;
border: 1px solid gray;
}
Only make sure that you've a clear: left; on the containing element so that floats don't go beyond the container.
Unrelated to the problem, please keep in mind that <f:verbatim> is deprecated in JSF 2. You should not use it anymore. You also do not need it anymore. In JSF 1.0/1.1 that tag was mandatory in order to be able to use plain HTML tags in a JSF page. Since JSF 1.2 it is not mandatory anymore. You can just inline HTML tags in a JSF page there where you want without fiddling with <f:verbatim>.
Should be simple but I couldn't find the answer, I would like to place components horizontally instead of vertically.
What I'm trying to achieve is a rich:toolbar with 2 or more rows. I've been trying to do that with a toolbar that has a panelgrid and two panelgroups like this:
<rich:toolbar...>
<f:panelgrid columns="1"...>
<f:panelgroup id="row1" .../> <-- Should be horizontal placement
<f:panelgroup id="row2" .../> <-- Should be horizontal placement
<f:panelgrid/>
<rich:toolbar/>
So how do I make the panelgroup layout horizontal (Or should I use something else?)
Thanks!
You probably already know that JSF in webserver ends up as HTML in webbrowser. In HTML, there are several ways to place elements horizontally (eventually with help of CSS):
Group them in inline elements (like <span> or any element with display: inline;).
Group them in block elements (like <div> or any element with display: block;) and give them all a float: left;.
The JSF <h:panelGrid> renders a HTML <table> element wherein each child component is taken as a <td>. The columns attribute represents the max amount of <td> elements in a single <tr> (so that the <h:panelGrid> knows when to put a </tr><tr> in). The JSF <h:panelGroup> renders a <span> element.
To achieve way 1 with JSF, you just need to group them in separate <h:panelGroup> components.
<rich:toolbar ...>
<h:panelgroup id="row1" ... />
<h:panelgroup id="row2" ... />
</rich:toolbar>
Way 2 can be done the same way, but then with <h:panelGroup layout="block"> instead and a float: left; in their CSS.