Social networks
You can find me on:
   
Open sharing content

These articles are available under Creative Commons license BY-SA-3.0

Archive for February, 2013

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;
}


Lately I’ve purchased a virtual private server hosting (VPS) to deploy my liferay portal. I’ve been assigned a different port number… and I needed to understand the steps to make a ssh connection.
After some hours surfing the web and making experiment, I could make it. So now I’m posting this litte tutorial, for those that want to work by the linux shell B)

Firt of all you need to generate a public and private keys with a cryptographic algorithm:

ssh-keygen -t dsa

I’ve chosen the DSA (digital signature algorithm), but you can choose RSA, etc.

After entering the ssh-keygen command on the shell, under the folder  ~/.ssh/ you will find the following files: id_dsa, id_dsa.pub, authorized_keys and known_hosts files.

Make sure that you have all the permissions on the folder and that you’re the only one that can read and write the authorized_keys file:

sudo chmod 600 ~/.ssh/authorized_keys
 

The system will add your host to the lists of the “known hosts”, when you try to login to the remote server for the first time.

Once your keys have been generated, you need to copy the public key in the “authorized_keys” file:

cp ~/.ssh/id_dsa.pub ~/.ssh/authorized_keys

Then you need to send your public key to the server. Let’s assume that our ssh port number is 12345:

scp -P 12345 ~/.ssh/id_dsa.pub  [email protected]:~/.ssh/authorized_keys

The shell will ask you a password:

[email protected]'s password: user's passowrd

Now that you’ve sent your public key to the server you can connect:

ssh -p 12345 [email protected]

After this command you’ll be asked your passphrase password (that you set when you generate the public key),
so you can be authenticated with your private key.

That’s it! 😎

This is a short but useful tutorial. I’ve googled for 3 hours before understanding how to access a tomcat folder location.
The following example should help you.

If you want to render images from a server location in Tomcat 7, you need to create a your-web-app/META-INF/context.xml file and specify a location:

<?xml version="1.0"?>
<Context path="/images" docBase="/home/laura/gallery" reloadable="true"/>

Then in your .jsp file you will simply set the img tag like the following:

<img src="/images/picture.jpg" width="30%"  />

Alternatively you can also set the context xml file in the /tomcat-7.0.23/conf/Catalina/localhost folder, by giving it the same name of the webapp, (that is yourWebApp.xml).
I prefer to place the file in the meta-inf folder of the project so I can control il in the IDE enviroment.

I’m doing this to make my development in local host, but in the future i will need it to access an externa image folder for a database.

Discussions are welcome 🙂