Primefaces 3.3.1 and JSF 2.0

1
votes

I am using Primefaces 3.3.1, JSF 2.0 and Liferay 6.0 in my app. I have my JS files included in the portal_normal.vm as follows

portal_normal.vm

<html class="#language("lang.dir")" dir="#language("lang.dir")" lang="$w3c_language_id">

<head>
    <title>$the_title - $company_name</title>
        <script src="$javascript_folder/jquery-1.7.2.min.js"></script>
        <script src="$javascript_folder/javascript.js"></script>
        <script src="$javascript_folder/jquery.tablesorter.min.js"></script>
        <script src="$javascript_folder/jquery.tablesorter.pager.js"></script>
        <script src="$javascript_folder/jquery.autocomplete.js"></script>
        <script src="$javascript_folder/jquery.simplemodal.1.4.2.min.js"></script>
         <script src="$javascript_folder/jquery.scrollTo.js"></script>
        <script src="$javascript_folder/ui.datepicker.js"></script>


    $theme.include($top_head_include)
</head>
<body></body>
</html>

sample.xhtml:

<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui"
    lang="en" xml:lang="en" style="padding-bottom: 8px;">
    <h:head>
        <script type="text/javascript" src="#{lookupBean.themePath}/js/jquery-1.7.2.min.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/javascript.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/jquery.tablesorter.min.js" />
        <script type="text/javascript" src="#{lookupBean.themePath}/js/ui.datepicker.js" />
    </h:head>
        <h:body></h:body>
</div>

Prime faces requires h:head to be included in the view. When I add the h:head to my xhtml, none of the js files are getting imported. Could you please let me know how can I add the .js to h:head?

2
jsf-2primefacesliferay-6

2 Answers

5
votes

The portal_normal.vm file is designed to be a template for the portal page, and is contained within the Liferay theme. You should not need to add any PrimeFaces or jQuery related resources to the head section of this template. Instead, simply create a PrimeFaces portlet and use h:head within your Facelet view. If you do that, then PrimeFaces will automatically add required resources during the JSF lifecycle, and Liferay Faces Bridge will take care of injecting them into the <head>...</head> section of the portal page for you. I would recommend that you look at the primefaces3-portlet demo for more information.

0
votes

JSF 2 expects all resources to be located under webapp - resources

here you can place your scripts. You might want to create a subfolder called "scripts" and then use this tag:

<h:outputScript library="js" name="common.js" />

full guide here:

http://www.mkyong.com/jsf2/how-to-include-javascript-file-in-jsf/

Edit: Yes your view do need namespaces. Try this header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui">