Eg: h:inputText will render a "input type='text'".
What jsf tag can render a "div" tag?
You can create a DIV component using the <h:panelGroup/>.
By default, the <h:panelGroup/> will generate a SPAN in the HTML code.
However, if you specify layout="block", then the component will be a DIV in the generated HTML code.
<h:panelGroup layout="block"/>
In JSF 2.2 it's possible to use passthrough elements:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf">
...
<div jsf:id="id1" />
...
</html>
The requirement is to have at least one attribute in the element using jsf namespace.
Apart from the <h:panelGroup> component (which comes as a bit of a surprise to me), you could use a <f:verbatim> tag with the escape parameter set to false to generate any mark-up you want. For example:
<f:verbatim escape="true">
<div id="blah"></div>
</f:verbatim>
Bear in mind it's a little less elegant than the panelGroup solution, as you have to generate this for both the start and end tags if you want to wrap any of your JSF code with the div tag.
Alternatively, all the major UI Frameworks have a div component tag, or you could write your own.
you can use myfaces tomahawk component
http://myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_div.html
I think we can you use verbatim tag, as in this tag we use any of the HTML tags
Related
The template page http://www.blacktie.co/demo/kelvin contains a tag I haven't seen before: <t>Email</t>
The corresponding CSS styles this: #footwrap t {font-weight: 700;}
I'm curious as to the significance of the <t>. It's not listed at http://htmldog.com/reference/htmltags or other lists I can find.
Is this a custom HTML tag? From what I've read about custom elements (eg http://www.html5rocks.com/en/tutorials/webcomponents/customelements) you need to call document.registerElement() or document.createElement() but this doesn't seem to be the case here.
Is this code semantically correct, or should it be written as:
<span class="t">Email</span>
#footwrap .t {font-weight: 700;}
Yes, the <t> tag is a custom element. While custom tags can be useful, if you want them supported in all browsers, you have to register the element with JS:
var tTag = document.registerElement('t');
More about custom tags here
So to answer your question, the coding is not valid, unless they have registered the element with the browser with JavaScript.
Sometimes, its just easier to use a class :D
This may be completely wrong, but t is not a real HTML tag. Therefor I assume it is a XHTML item. So yes if it IS XHTML then that would be correct, and the class would not be (unless that was the name of it of course).
I want to use plain HTML 5 in my JSF page as some UI functionality cannot be achieved by HTML support provided by JSF2.
In JSF 2.0, some attributes of HTML 5 form elements cannot be rendered correctly in the standard JSF input components.
For eg,<input type="email" cannot be rendered by <h:inputText type="email".
In the below given link, they have used some pure HTML 5 tags like <canvas> <header> <footer> <small> etc.
Now my questions are:
When I try to use the pure html input tag with type "text" in my JSF page, I cant able to retrieve the value from my Managed Bean and set it to this text box. why the value is not displayed?
Only some plain HTML 5 tags will be supported in xhtml page or all the plain HTML 5 tags will be supported
HTML5 Support was added in JSF2.2. Since then you can add passthrough Attributes to JSF-Components:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://java.sun.com/jsf/passthrough">
<h:form>
<h:inputText p:type="email" />
</h:form>
</html>
Attributes which are not known will be ignored by JSF (2.0 and 2.2). If you need to render HTML5-Attributes with JSF2.0 you can use Omnifaces HTML5 Renderkit.
Pure HTML-Tags are just pure HTML-Tags. They are no JSF components. So they will be rendered to the view but JSF won't care about them and won't update your Model.
JSF2.2 came also with Passthrough Elements. Now it's possible to turn a HTML-Tag to a JSF-Component:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://java.sun.com/jsf"
xmlns:f="http://java.sun.com/jsf/core">
<input jsf:id="foo" type="text" jsf:value="#{bean.bar}">
</html>
JSF knows that there is a corresponding UIComponent and will convert this HTML-Tag to a h:inputText. If there is no corresponding UIComponent JSF will create a special one which supports ajax.
See also: JSF 2.2: HTML5 friendly markup
Is it possible to update parts of my page that are not JSF components?
For example, can I update a plain HTML <div> or do I need to wrap that in a JSF component?
Is it possible to update parts of my page that are not JSF components?
No. The to-be-updated component has to be available by UIViewRoot#findComponent(), so that JSF can find them, invoke encodeAll() on it, capture the generated HTML output and pass back it in the ajax response so that JavaScript can update the HTML DOM tree with it. Plain HTML elements are not represented as real UIComponent instances in the JSF component tree, so JSF already cannot locate them in first place.
For example, can I update a plain HTML <div> or do I need to wrap that in a JSF component?
You need to wrap it in a JSF component like <h:panelGroup>. You can however just use <h:panelGroup layout="block"> to represent a real <div> in JSF. This way you don't need to wrap the <div> in another JSF component.
<h:panelGroup layout="block" id="foo">
...
</h:panelGroup>
Since JSF 2.2 you can use new passthrough elements feature with jsf:id attribute to declare HTML(5) elements as JSF components.
<... xmlns:jsf="http://xmlns.jcp.org/jsf">
<div jsf:id="foo">
...
</div>
<main jsf:id="bar">
...
</main>
<section jsf:id="baz">
...
</section>
They will render their output as-is, but under the covers be a concrete UIPanel instance.
There's however one corner case in case of composite components. You can use the following approach to have a HTML element which is updateable by ajax.
<cc:implementation>
<span id="#{cc.clientId}">
...
</span>
</cc:implementation>
The explanation that this approach works is because even though the composite component does not render itself to the HTML output, it is by itself available by UIViewRoot#findComponent().
See also:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Rerendering composite component by ajax
It seems that you can't.
to update something wrap it up in a 'updateable' component (in primeaces p:outputpanel) and update that one.
Addition: in your special case you can refresh the children of the p:tree that way: JSF update primefaces tree children
(haha always wanted to talk to me in third person)
AFAIK you update components by their ID and since regular elements can have an ID it should be possible as long as you get the ID right ;-)
I need a unique id for some DIVs under JSF 1.2, how do I go about doing this in a manner that can be resolved later for use in a Javascript function?
Traditionally I use either JSF HTML or Richfaces components, which automatically use JSF to generate an unique id and then use rich:clientId() to resolve that id. I just haven't found a component that will just give me a DIV.
The <h:panelGroup layout="block"> will render a <div>.
When the layout attribute is omitted and when it has another attributes which should end up in HTML, like styleClass and so on, it will by default render a <span>.
You can render a div as discussed in this question,
What jsf component can render a div tag?
BalusC is partially correct about <h:panelGroup layout="block"> producing a div, thought strangely enough you need to include a style or styleClass element to guarantee that it produces a div. Here is the quote from the documentation.
If the "style" or "styleClass" attributes are present, and the "layout" attribute is present with a value of "block", render a "div" element
When you put an ID on the h:panelGroup then it will be prepending with a JSF id. This doesn't work on JSF Facelets however, where you will run into duplicate ID issues.
I want to look at using JSF but I'm put off by what appears to be the liberal use of html tables for layout by many components.
How do you go about using JSF to develop css-based layouts?
I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.
Does anyone know of a JSF tutorial that develops a CSS based layout? If not, does anybody fancy making one? ;)
the liberal use of html tables for layout by many components
Many components? There are as far as I know only two which do that "unnecessarily": the <h:selectOneRadio> and <h:selectManyCheckbox>. If you want a table-less group of radiobuttons and checkboxes wherein you have the full control over the generated markup, just use the Tomahawk variant instead, which has an extra layout attribute value of spread. Here's an example of the <t:selectOneRadio> approach:
<t:selectOneRadio id="foo" value="#{bean.foo}" layout="spread">
<f:selectItems value="#{bean.foos}" />
</t:selectOneRadio>
...
<t:radio for="foo" index="0" />
...
<t:radio for="foo" index="1" />
...
<t:radio for="foo" index="2" />
...
Since JSF 2.2 it's even possible to do it "out the box" with new passthrough elements/attributes feature. Since JSF 2.3 it has even become part of standard component set. See also a.o. <h:selectOneRadio> renders table element, how to avoid this?
For the remainder, you just have the control of the general HTML output fully in your own hands. Just do not use tables for layout at all. I.e. do not use HTML <table> or JSF <h:panelGrid> for layout. Just use HTML <div> elements to display content blocks. Or if you're a JSF-purist, you can use <h:panelGroup layout="block"> to let JSF generate a HTML <div> element.
As to applying CSS, it isn't that hard, every JSF HTML component has a styleClass attribute wherein you can specify CSS classes (which would end up in a HTML class attribute) and style attribute wherein you can specify inline CSS (which would end up in a HTML style attribute).
You can even define global CSS styles and use the ID selectors. Only thing which you need to take care in JSF+CSS is that the JSF-generated HTML element IDs are prepended with the IDs of all parent NamingContainer components (e.g. <h:form>, <h:dataTable>, etc) with a colon : as separator. As the colon is an illegal character in CSS identifiers, you need to escape it using \. So styling the input element of for example
<h:form id="form">
<h:inputText id="input" ... />
which generates <input type="text" id="form:input" ... /> should be done as
#form\:input {
background: gray;
}
It's however very rare to select form input elements or table elements by ID. More commonly the classname is to be used (which is more semantic and better reuseable) and this doesn't need to be escaped. The ID are usually used by main layout components only anyway (header, menu, content, footer, title, etc) and they usually don't end up in a JSF NamingContainer.
See also:
How to use JSF generated HTML element ID with colon ":" in CSS selectors?
By default, JSF generates unusable ids, which are incompatible with css part of web standards
What is the need of JSF, when UI can be achieved from CSS, HTML, JavaScript, jQuery?
JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used
I seem to be labouring under a misaprehension here, but every JSF tutorial I've seen ends up producing table-based HTML layouts. I've also looked at RichFaces and IceFaces demos and there's an awful lot of tables-for-layout there as well.
Start here: Java EE web development, where do I start and what skills do I need?
It is definitely possible to produce a website built on JSF that does not use tables for layout. I'm not sure why you think JSF relies upon tables? JSF provides the framework for you to develop whatever type of page you want.
Here is another link that may prove useful:
http://www.ibm.com/developerworks/java/library/j-jsf1/index.html