I am new to JSF. I have a unordered list and a div.
<ul class="nav navbar-nav">
<li>Test Page</li>
<li>Item1</li>
<li>Item2</li>
<li>item3</li>
</ul>
<div id="content"></div>
Now on click of the list items I want to load different xhtml pages using JSF. Is it possible to achieve this usecase ? I am using JSF 2.0 and primefaces.
Any help will be really appreciated.
Just replace the plain HTML link by a JSF h:link. According to the docs:
Render an HTML "a" anchor element. The value of the component is rendered as the anchor text and the outcome of the component is used to determine the target URL rendered in the "href" attribute.
<li><h:link outcome="TestPage" value="Test Page" /></li>
Where the outcome attribute specifies the target navigation case.
See also:
Implicit navigation in JSF 2
Note that's useful for using JSF navigation cases. If you want to just perform a GET request for an external non-JSF url, just use the plain HTML way.
On click event of <li> element, you can call $('#content').load(Url, successEventHandler)
Related
I created a simple JSF 2 composite component.
<cc:implementation>
<nav>
<ul class="pagination">
<li>Prev</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>Next</li>
</ul>
</nav>
</cc:implementation>
When I use it, I see that some built-in attributes are already created for it like class. So I can write:
<my:pagination class="someclass"/>
But when I navigate to the page and view the source of the page, I can't see no mention of someclass.
So how can I use that class attribute in JSF composite component?
EDIT
Here all the built-in attributes that I have got:
In my app I have tutor and student as roles of user. And I decide that main page for both will be the same. But menu will be different for tutors and users. I made to .xhtml page tutorMenu.xhtml and student.xhtml. And want in dependecy from role include menu. For whole page I use layout and just in every page change content "content part" in ui:composition.
In menu.xhtml
<h:body>
<ui:composition>
<div class="menu_header">
<h2>
<h:outputText value="#{msg['menu.title']}" />
</h2>
</div>
<div class="menu_content">
<с:if test="#{authenticationBean.user.role.roleId eq '2'}">
<ui:include src="/pages/content/body/student/studentMenu.xhtml"/>
</с:if>
<с:if test= "#{authenticationBean.user.role.roleId eq '1'}">
<ui:include src="/pages/content/body/tutor/tutorMenu.xhtml" />
</с:if>
</div>
</ui:composition>
I know that using jstl my be not better solution but I can't find other. What is the best decision of my problem?
Using jstl-tags in this case is perfectly fine, since Facelets has a corresponding tag handlers (that are processed in the time of view tree creation) for the jstl tags and handles them perfectly. In this case c:if could prevent processing (and adding the components located in the included xhtml file) of the ui:include which leads to reduced component tree and better performance of the form.
One downside of using this approach is that you cannot update these form parts using ajax, i.e. you change the user role and refresh the form using ajax, because the ui:include for the other role is not part of the view anymore. In such case you have to perform a full page refresh.
In my application after clicking to a link I want to focus to a part of a page after the page load. With static html we can do this by code parts below.
Go to Chapter 4
and the chapter 4 is defined;
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
In jsf 2 I can not find even name attribute in order to use for this purpose.
Any help will greatly be appreciated.
In JSF, the name attribute is computed based on the combination of the 'id' atribute of the jsf component and the 'id' attribute of the form. The reason for this is explained by BalusC here. So if you specify an id for a JSF component, then the name is also computed for it.
Anyways, starting HTML5 usage of name attribute for <a> tag is made obsolete instead it is recommended to use the id attribute of the nearest container. So do not rely on the name attribute.
Though you can try to focus any of these:
<h2 id="top4">This is a heading</h2> or
<h2><a id="top4">This is a heading</a></h2>
Or simply focus a container on the target page like this:
In HTML 4.01
<div id="top4">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</div>
In HTML 5
<article id="top4">
<h2>This is a heading</h2>
<p>This is a paragraph</p>
</article>
Now in JSF, this is how you focus the container on the target page:
When the outcome is a different page but in the same application:
<h:link id="link1" value="link1" outcome="welcome" fragment="top4" />
where the outcome is welcome.xhtml which is relative to the context root, and "top4" is the id of the container to be focused when the target page is rendered.
When linking an external site:
<h:outputLink id="link2" value="http://www.msn.com/#spotlight">link2</h:outputLink>
Within the same page:
<h:link id="link3" value="link3" fragment="top4" />
Here there is no outcome specified, so the outcome will be the same page.
See also:
http://dev.w3.org/html5/markup/a.html
h:link
h:outputLink
When the Apache My Faces JSF 1.2 Implementation renders an HTML page behind the scenes , is it even possible to set/code something which will display a pure HTML Table / DIV (NOT the jsf component ) conditionally. When I searched , I saw that , using h:panelGroup is a solution, but I haven't tried yet, posting here for any better methods or approaches.
Its almost like wanting to say - writing a javascript code in java and inject it when the HTML is rendered - is it possible?
Thanks,
Several ways.
Use <h:panelGroup layout="block">. It renders a HTML <div> element.
<h:panelGroup layout="block" rendered="#{bean.condition}">
content
</h:panelGroup>
Wrap the HTML <div> element inside a <h:panelGroup>. Without any client-side attributes like id, styleClass, onclick, etc, the <h:panelGroup> won't render anything. With them it would however render a <span> element (or <div> if layout is set to block).
<h:panelGroup rendered="#{bean.condition}">
<div>content</div>
</h:panelGroup>
Wrap the HTML <div> element inside a <f:verbatim>.
<f:verbatim rendered="#{bean.condition}">
<div>content</div>
</f:verbatim>
It's by the way not so special that MyFaces generates HTML. The Mojarra JSF implementation also does that. The competitors Struts2, Spring MVC, Wicket, Tapestry, etc..etc.. also. Microsoft ASP.NET MVC also. PHP also. All server side languages in fact. Simply because of the fact that the webbrowser doesn't understand them. It only understands HTML/CSS/JS ;)
As to mixing JavaScript with Java/JSP/JSF, you may find this article useful.
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