11/28/2013

A Primefaces Portlet for Liferay 6.2

What´s liferay without the beauty of JSF ? Here is a little tutorial to get started with liferay 6.2 and primefaces 3.5 .

Please configure  your eclipse and liferay installation like you usually do. Start up your server, acknowledge your basic configuration and add the plugins-sdk to eclipse. Please note that the plugins-sdk you´re currently able to download does not specifically allow you to create a liferay 6.2 server. You can just select the 6.1 one, because they both use basically the same tomcat version. I suppose that liferay is going to update that.

Use the plugins-sdk portlet creating mechanism and select "JSF 2.0" and primefaces:





After you´ve done that, your portlet is created. Please run the standard build.xml "deploy" target. Liferay 6.2 will use apache ivy to download additional libs that it will put inside your portlets WEB-INF/lib container. 

But ... as you will see : it fails :


Buildfile: /Users/danielbreitner/Documents/workspaces/Ted/plugins-sdk/portlets/Test-portlet/build.xml
[ivy:resolve] :: Apache Ivy 2.3.0 - 20130110142753 :: http://ant.apache.org/ivy/ ::
[ivy:resolve] :: loading settings :: file = .../plugins-sdk/ivy-settings.xml
[ivy:resolve] :: problems summary ::
[ivy:resolve] :::: WARNINGS
[ivy:resolve] module not found: com.liferay.faces#liferay-faces-bridge-api;3.2.4-ga5
[ivy:resolve] ==== jboss-nexus: tried
[ivy:resolve]   https://repository.jboss.org/nexus/content/repositories/releases/com/liferay/faces/liferay-faces-bridge-api/3.2.4-ga5/liferay-faces-bridge-api-3.2.4-ga5.pom
[ivy:resolve]   -- artifact com.liferay.faces#liferay-faces-bridge-api;3.2.4-ga5!liferay-faces-bridge-api.jar:
[ivy:resolve]   https://repository.jboss.org/nexus/content/repositories/releases/com/liferay/faces/liferay-faces-bridge-api/3.2.4-ga5/liferay-faces-bridge-api-3.2.4-ga5.jar

[...]



It fails, because all the repositories don´t seem to have the newest version of the liferay faces bridge. We can avoid that, if we just change the version the build process is looking for.
Note: I am sure this version will be added in the next time, so be sure to check it from time to time and then revert the changes that I am proposing here:

Open the file "ivy.xml" that is in your portlet´s root folder, and change this:


<dependency name="liferay-faces-bridge-api" org="com.liferay.faces" rev="3.2.4-ga5" />
<dependency name="liferay-faces-bridge-impl" org="com.liferay.faces" rev="3.2.4-ga5" />
<dependency name="liferay-faces-portal" org="com.liferay.faces" rev="3.2.4-ga5" />

<dependency name="liferay-faces-util" org="com.liferay.faces" rev="3.2.4-ga5" />

into that:

<dependency name="liferay-faces-bridge-api" org="com.liferay.faces" rev="3.1.3-ga4" />
<dependency name="liferay-faces-bridge-impl" org="com.liferay.faces" rev="3.1.3-ga4" />
<dependency name="liferay-faces-portal" org="com.liferay.faces" rev="3.1.3-ga4" />
<dependency name="liferay-faces-util" org="com.liferay.faces" rev="3.1.3-ga4" />


That´s it. Run "deploy" again and you should now get a working primefaces portlet.

For your convenience, I´ve also uploaded a working war-file that you can try out: Primefaces Liferay 6.2 portlet

If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.

11/25/2013

New Features of Liferay 6.2 (2): Mobile preview

If you also want your liferay page to be userfriendly to iphone / ipad users then you will love that new mobile preview feature that liferay 6.2 has to offer. When you´re on your liferay page, you will notice that preview control to the left.

It will allow you to test your Liferay Page in the browser for mobile compatibility. This is so fantastic, I can´t tell you! It allows to control your page in smartphone, tablet and desktop computer mode. 





















You can do all your testing in your browser and make sure that it will look good on mobile devices. Your iPads and iPhones can stay where they are and your testing crew can use them for final integration tests, not for development testing.



If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.

New Features of Liferay 6.2 (1): Calendar portlet

As Liferay 6.2 is out now, everyone is starting to give it a test run and you might ask yourself if you should give it a try. That´s what this blog post series is for: To give you a taste of the new Liferay version. We will start with the new Calendar.

The old calendar portlet (6.1 and below) was something that I´ve redone three times for different clients. Everyone wanted to have an outlook-like behaviour, including a nice user interfaces, group management and ressource booking. Now - finally this is possible. Let´s take a look at the features:




The Calendar now looks a lot more modern, has a lightweight new style and provides all the information that you need at a glance. It reminds me a lot of the google mail calendar. On the left you can see the monthly view, your calendar, your site´s calendar and other calendars that you added to your view. You can add more calendars to your view simply by typing into that input text field that you see on the left side:




As you type, you will be presented with a dropdown list of users and ressources matching your input. Ressources, by the way, are those ressources that you normally battle for in medium sized companies: projectors, company cars, meeting rooms etc etc. You can create and manage ressources within the new liferay calendar portlet just like you would do it with microsoft outlook.
Just open the second tab called "ressources" and add them:













The members of your site will now be able to create appointments, add those ressources and have one feature less that they need costy enterprise software for. Let´s take a look at creating a calendar event. The first thing that you will notice, is how easy it is to create events. Just click anywhere in the page where you want the event to start, move down the mouse and you can create an event:
















If you dare to click on "Edit", another window will open presenting you all those integrative glory of the Liferay 6.2 Calendar. You can now manage if the event is repeatative or not, you can send out invitations and reminders you can tag it and attach liferay ressources like documents, Blog Entries, Message Board Entries, Web Contents etc.


















This opens a huge amount of configuration and collaboration possibilities and I am very excited to dive into the technical aspects of the new calendar portlet! 


If you like this post it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.

Upgrading to Liferay 6.2

If you are running an older Version of Liferay (6.1 or below), you might find this article interesting. It describes, in a very detailed and clear way, how to upgrade to Liferay 6.2:


Liferay Upgrade Article

If oyu have troubles upgrading, just contact me.

11/23/2013

Introduction to Primefaces Client - Server interaction

Primefaces is a very powerful tool when it comes to client - server interaction. It allows us to call backend methods from javascript and it also makes reacting in javascript code to the outcome of bean methods very easy. This little tutorial will show you how to implement it. And yes - this also works in liferay. And it opens some interesting views of Inter-Portlet Communication.

Calling Java Methods from JavaScript

If you want to trigger a backend method from javascript you can simply add this tag to your jsf code:

<p:remotecommand actionlistener="#{bean.method}" name="callme"/>
This creates a javascript method name 'callme', that you can call from other javascript methods or (for example) from your "oncomplete" property of your commandButtons. Calling that method will call your backing bean method that may look like this :
public void method(){
  //do important stuff
}

Returning Objects to JavaScript 

If you now want to return data from your method you can do it like that:
public void method(){
  RequestContext context = RequestContext.getCurrentInstance(); 
  context.addCallbackParam("testparmeter", new String("test"));
}
This returns our teststring to the javascript method and if you return the call from your commandlink like this :
<p:commandLink action="#{bean.method}" oncomplete="handleShow(xhr, status, args);)"/>
Then you can access your property in javascript like this:
<script type="text/javascript">  

function handleShow(xhr, status, args) { 

alert(args.testparmeter);

}
</script>
 
Executing JavaScript from Backing Bean 

If you want to execute Javascript methods from your backing bean, then you can use the RequestContext, too. Just like in this example:
public void method(){
  RequestContext context = RequestContext.getCurrentInstance(); 
  context.execute("alert('test alert')");
}
This offers a complete set of tools and techniques for you to realize almost every aspect of Client-Server interaction. Because it actually creates javascript methods you can use this to allow Inter Portlet Communication between Primefaces Portlets. Just use two primefaces remoteCommands in two different portlets and you should be able to call them from the portlet´s JSF or Java ressources. You can then send data from portlet 1 to portlet 2 :)

If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)
If you have any questions, feel free to leave a comment.

PrimeFaces 4.0 trailer

If you haven´t seen it yet: This is the trailer for the forthcoming Primefaces 4.0
It will have full JSF 2.2 support - including Client Side Validation. Oh yea ;)
Can´t wait to get my hands on it ...



If you like this post it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.

11/20/2013

Primefaces CAPTCHA and Ajax requests

If you are building primefaces GUIs and you are using the <p:captcha> tag, then you might have come across an issue, that when you are sending ajax requests, the CAPTCHA is not updated - even when it fails.
This gets ugly because the CAPTCHA then shows the wrong information to your clients. They can enter the correct CAPTCHA information and form validation will fail.

This is because the primefaces CAPTCHA uses recaptcha that doesn´t support any ajax. The only elegant way to bypass this is to call

Recaptcha.reload();

You can do this from the oncomplete() method of your commandButton that trigger your ajax call.


If you like this tutorial it would be very nice, if you could click on some of the google ads you see on the right side. It helps me run this block and motivates me ;)

If you have any questions, feel free to leave a comment.

11/05/2013

Liferay 6.2 GA1 released

Liferay released Version 6.2 GA1 CE !!!

if you want to see the future of your favourite portal server, take a look here:

http://www.liferay.com/de/downloads/liferay-portal/available-releases