Posts Tagged ‘jquery’

Primefaces dialog framework: how to make it work

If you have tried some primefaces features, you have probably noticed than some of those pretty things in the official showcase don´t work straight and easy in the application you´re developing. The problem is that even the latest 4.0 version is bugged.

I have been trying to use a Dialog Framework, but there´s something missing from the JqueryUI library and I have found out that the only way to make it work was including an external one, like:

There´s something missing from the JqueryUI library and I have found out that the only way to make it work was including the jqueryUI library (with the h:outputScript component).

<!DOCTYPE composition 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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:head>
<title>Enter Product Mapping</title>
</h:head>

<h:outputScript name="js/jquery-ui-1.10.4.custom.min.js"/>

<p:commandButton value="Map"
actionListener="#{managedBean.showDialog}" />
</h:form>

</h:body>
</html>

Importing the jqueryui library is the only way to let the browser find the dialog properties (like “draggable”, “resizable”, “width”…). So I could make the following method work:

public void showDialog(){

Map<String,Object> options = new HashMap<String, Object>();
options.put("contentHeight", 340);
options.put("height", 400);
options.put("width",700);

RequestContext.getCurrentInstance().openDialog("dialog",options,null);

}

It will open the dialog that you need to put in another page (in this case the dialog.xhtml file):

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 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">
<h:head>
<title>Enter Product mapping</title>
</h:head>
<h:body>
<h:form id="form">

<h:panelGrid id="grid" columns="3">

<f:facet name="header">
<p:messages for="query" />
</f:facet>

<h:outputLabel value="Username" />
<p:inputText id="username" value="#{managedBean.userName}" />
<p:message for="username" />

<h:commandButton value="Save" id="btn" process="@form" actionListener="#{managedBean.updateDialog}" />

</h:panelGrid>
</h:form>

</h:body>

</ui:composition>

The actionListener refers to a method in the managed bean class, that will process the submitted form.

To make it work you also need to add some properties in the faces-config.xml:

..

<application>

..

<action-listener>org.primefaces.application.DialogActionListener</action-listener>
<navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
<view-handler>org.primefaces.application.DialogViewHandler</view-handler>

....

</application>

...

Jquery paginator for Liferay 6.1

This tutorial tells you how to make a custom jquery paginator in your liferay portlet.
This example is about photoalbums, but the page can contain whatever in the <div “image”>

The jquery file is specified in header-portlet tag in the liferay-portlet.xml :

<header-portlet-javascript>/js/jquery-1.8.3.js </header-portlet-javascript>

or in the jsp directly (as you can see below)

The code in the ViewPhotos.jsp is:

<script type="text/javascript" src="${renderRequest.contextPath}/js/jquery-1.8.3.js"></script>

 images = ImageLocalServiceUtil.getAllImagesbyAlbumId(albumId);
	String albumName= (String) request.getAttribute("albumName");
%>
<div id="<portlet:namespace/><br />"><span style="color: blue;">Photogallery DEMO Version 0.X </span> 

<script type="text/javascript">
 var $jq = jQuery.noConflict(true); 
 $(document).ready(function(){
   $('#content').Pagination();
 }); </script>

<div id="wrapper-content">
<h2>Photo album Paginator</h2>

<div class="pagination">
 <ul>
 <li><a href="#" id="prev"><button>Previous</button></a>
 <li><a href="#" id="next"><button>Next</button></a></li>
 </ul>
 </div>

<div id="content">
 No images found.
<div class="image">

 <img class="center" src="/<%=albumName=>/<%=path%>" alt="" width="40%" />

Image:

</div>
</div> <!--  content -->
</div> <!--  wrapper-content -->
</div>  <!--  portletnamespace -->

Remember to wrap it all with :  <strong><div id=”<portlet:namespace/>”></strong>

In my demo the “albumName” folder specified in the image attribute src is set in the xml file:
/home/laura/project/liferay-portal-6.1.0-ce-ga1/tomcat-7.0.23/conf/Catalina/localhost/albumName.xml

The content of the xml file is something the following:

<?xml version=”1.0″ encoding=”UTF-8″?>
<Context path=”/albumName” docBase=”/home/laura/albums/albumName” reloadable=”true”/>

albumName” might be something like “birthday_Party_Laura_2013

the jquery plugin (that I’ve placed in the main.js file) is the following:

(function($) {

	// Attach a new method to jQuery
	$.fn.extend({
		// PluginName - Pagination
		Pagination : function(options) {
			console.log("plugin");
			// Set the default values, use comma to separate the settings,
			// example:
			var defaults = {
					fadeSpeed : 100
			};

			// options can be extended when the plugin is invoked
			var options = $.extend(defaults, options);

			// Creating a reference to the object
			var objContent = $(this);

			// child div of the "content" one
			var imageDivList = new Array();
			var lastPage = 1;
			var paginatedPages;

			// initialization function
			init = function() { // for each div
				$('.image').each(function() {
					imageDivList.push(this);
				});

				// objContent.children().hide();
				$('.image').hide();

				console.log($(imageDivList).length);
				// show first page (lastPage=1)
				showPage(lastPage);

				// draw controls
				showPagination($(imageDivList).length);

			}; // end init function

			// show page function
			showPage = function(page) {
				i = page - 1;
				if (imageDivList[i]) {
					console.log(i);
					// hiding old page, display new one
					$(imageDivList[lastPage]).fadeOut(options.fadeSpeed);
					lastPage = i;
					$(imageDivList[lastPage]).fadeIn(options.fadeSpeed);

				}
			};

			// show pagination function (draw switching numbers)
			showPagination = function(numPages) {
				var pagins = '';
				for ( var i = 1; i <= numPages; i++) {
					pagins += '<li><a href="#" onclick="showPage(' + i
							+ '); return false;"><button>' + i + '</button></a></li>';
				} //     
	           
				// after the firt element, with id="prev", append the list with
				// the page number links
				$('.pagination li:first-child').after(pagins);
			};

			// perform initialization
			init();

			// and binding 2 events - on clicking to Prev
			$('.pagination #prev').click(function() {
				showPage(lastPage);
			});
			// and Next
			$('.pagination #next').click(function() {
				showPage(lastPage + 2);
			});

		}
	});
	// pass jQuery to the function,
})(jQuery);

The css for the paginator buttons, that I have specified in the main.css file is:

ul, li {
    list-style-type: none;
    margin-left:40px;
}

.pagination {
    clear: both;
    padding:0;
  /* width:250px; */
}

.pagination li {
    float:left;   
        margin-left: 0 auto;
}


Categories
Links: