aspose file tools*
The moose likes JSF and the fly likes JSF Facelets with jQuery Mobile Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "JSF Facelets with jQuery Mobile " Watch "JSF Facelets with jQuery Mobile " New topic
Author

JSF Facelets with jQuery Mobile

Mark Kelsall
Greenhorn

Joined: Apr 23, 2011
Posts: 19
Hi guys,

I have been playing around with using JSF for a while & get some of the basics. However, I'm in a position where I want to display a list, as in (ul, li). i did a bit of googling & found that facelets was the best was to implement this.

So there I was, creating .xhtml pages & watching them work fine in my browser on my laptop & then I tested it in Safari on a generic iPhone & it doesn't work! So when I say it doesn't work, I mean that the jQuery Mobile UI doesn't render & it just displays the basic html. It turns out that this is a problem with jQuery Mobile not being able to parse the file properly (or something to that effect). I have googled around for some answers to this & found various different articles stating, try this, try that, & they don't seem to work.

So here I am & asking the question:

Can facelets be used/rendered on another file type? For example .jsp or .html or jsf or anything instead of .xhtml?

Any advice would be great, feels like I'm

Thanks in advance

Mark
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15628
    
  15

JSF originally was designed to support plug-in rendering so that alternative forms of output would be easy to do without writing platform-specific code or templates. However, the majority of things done in JSF are targeted at HTML web browsers, so Facelets was designed specifically with HTML in mind.

Safari is an HTML browser. JSF/Facelets does not forward the xhtml files directly to the browser, however. Instead, JSF uses the xhtml to construct its internal data structures which are then used by the JSF renderer, assisted by Facelets. So the actual output back to Safari WILL be HTML, regardless of what filename extension you coded on the View templates. ".xhtml" is simply the accepted standard, but web.xml can be instructed to use any extension it wants to.

I think your real problem is that you're attempting to construct "brute force" HTML on a JSF view. People do a lot of this, especially using div, span, and table HTML elements. I discourage it, because they're at risk for exactly the sort of problems you're having. For the most part, you can do everything you need using only JSF tags with no raw HTML at all. Sometimes it can be a little cumbersome (especially since stock JSF doesn't have rowspan/colspan support). but sometimes it's actually simpler than the HTML equivalent, so it all balances out.

The joker in the deck is jQuery. JSF and jQuery can play well together, but they do have to respect each other's view of the world. jQuery usually has to be coded to work with the HTML that JSF generates, which isn't always a straight translation of the high-level JSF tag into low-level HTML. I'm afraid that you haven't given us any concrete examples of what you're trying to do, so there's really no way to tell what you may be doing wrong.


Customer surveys are for companies who didn't pay proper attention to begin with.
Mark Kelsall
Greenhorn

Joined: Apr 23, 2011
Posts: 19
Hi Tim,

Thanks for your quick response.

Let me try to explain my situation & current thinking of implementation:

JSF web project that has a managed bean with EJB dependency injection to call a service that will access a database. - This bit works fine.
The service returns a list of an object & that in turn needs to be displayed on the UI for the user to select (hence the need for ul, li elements). This is the bit where I realised I had a problem & went to facelets for an answer, straight JSF doesn't seem to implement the html ul, li tags (as far as I can see).



This is currently how I am calling the managed bean that is registered in my faces-config.xml

Would you be able to suggest an easier implementation method to represent these elements?
I have not got to the level of creating my own tags, is this what you are suggesting?

The reason I'm so adamant about using ul, li elements is because of the look & feel that is provided with jQuery Mobile.

Thanks

Mark
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15628
    
  15

In most cases, a JSF dataTable is actually your best choice. The ul/li tags are somewhat deprecated these days even among HTML purists because CSS can do the same thing, only better. In your particular example, it's also simpler to code a dataTable instead of attempting to use ui:repeat. Which is more geared towards emitting sets of UI elements than iterating data, anyway.

The RichFaces extension tagset has a (several?) "List" tags in its toolbox. I never could quite figure out their utility, but you might want to see if they fit your need.
Mark Kelsall
Greenhorn

Joined: Apr 23, 2011
Posts: 19
Thanks for your feedback, I appreciate it!

I understand that a datatable would be best data wise, but not so visually, especially when it comes to displaying on a mobile.

I think that I unfortunately will have to go down the datatable route & bow to common practice.

Thanks Tim!
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15628
    
  15

More important than what display elements you use are the CSS settings you use with them. You can see a tremendous benefit simply by developing a CSS "skin" that's optimized for the mobile display. In fact, JSF is designed with the idea that CSS will handle the actual display details and JSF is geared more towards the View layout. In extreme cases, it may be useful to add mobile-friendly alternative View definitions, but a lot can be done with just plain CSS.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: JSF Facelets with jQuery Mobile
 
Similar Threads
Are JSF 2.0 Facelets really XHTML-conform?
JSF and trying to display a resultset
Error:The XML page cannot be displayed Cannot view XML input using style sheet
javax.servlet.ServletException:Index:0, Size:0 at javax.faces.webapp.FacesServlet error on first pag
Beginning Facelets question