1DevDay Detroit - Open Source and the Community

Staff Blogs November 21, 2011 By Barrie Selack Staff

I recently did a talk at 1DevDay Detroit (http://1devdaydetroit.com) on Open Source and the Community. It was a great event and if you live in the greater Detroit (MI/OH) area, I'd recommend you look into attending next year. Lots of great sessions and wonderful attendees. Here are the slides from that presentation.

http://www.liferay.com/documents/5075192/11538079/1DevDay+-+Open+Source.pdf

 

 

Embedding a portlet in web content

Staff Blogs December 8, 2010 By Barrie Selack Staff

 Many people have asked, "How can I embed a portlet in web content". It's actually quite simple, once you know how. So I'll walk you through it.

It;s done via a runtime-portlet tag. The actual syntax looks like this:

<div id="embedded-welcome-portlet">
  <runtime-portlet name="47" instance="4433" queryString=""/>
</div>

(47 is the Hello World portlet)
 
The divs are not necessary, but in order to style the embeded portlet later we need them there.
 
So here is the Structure for the web content with the three pieces of information to pass to the runtime-portlet tag. (If you want, you can use hard coded values in the template of the web content)
 
 
And the template for the web content..
 
 
The template contains...
 
<p>
This is web content, with an embedded portlet!
</p>
 
<div id="embedded-welcome-portlet-$instance-id.getData()">
   <runtime-portlet name="$portlet-id.getData()" instance="$instance-id.getData()" queryString="$query-string.getData()"/>
</div>
 
Where the values from the template are passed in. We're not using the query string for this example.
 
So when rendered, it looks like this...
 
 
And there we have the Hello World portlet in our web content. But I really don't like that frame and title, so lets use CSS to style it.
 
In the web content use the configuration (little wrench) and select "Look and Feel"
 
Then we'll put the CSS under "Advanced Styling" This will use standard portlet CSS styles to change the look. Below is what gets set. Here's where we use the div id to make sure we only style out portlet.

 

 

Then the rendered web content will look like this.

 

But what if you want to use your own portlet? No problem, just use the name it is given by Liferay. In this case we'll use the Web Form portlet since it's not a Liferay built in portlet.

 

 

And now the web content looks like...

 

If the embedded portlet has a configuration option, you can configure it like any portlet to have different values on every page. You can also use the portlet's own Look and Feel to remove the borders or set a custom title. The WebForm portlet does have it's own configuration options (Hello World does not) Unfortunately at this time, you cannot use it's own configuration Look and Feel to style it, as the Web Content that contains it, overrides it's styling. 

 

Since one of the parameters is an instance-id, you can have multiple embedded instances of the same portlet on the page as below.

And there you are! A portlet embedded in web content.

If you're interested in more leave a comment. Thanks for reading.

 

Liferay 6.0, OpenSocial and Gadgets - Part 2

Staff Blogs August 22, 2010 By Barrie Selack Staff

This is the second part of a series of blogs and wiki articles on using gadgets in Liferay. In the blog we'll look at a gadget in action and in the associated wiki post we'll breakdown the gadget, as well as have downloadable source code for you to try out

In the first post in the series, we talked about how to deploy a gadget. This time we'll build a gadget that will call a web service.

The web service we are using is one at GeoNames (www.geonames.org/export/ajax-postalcode-autocomplete.html)

It is called with a postal code and country and returns a list of matching locations. It uses a simple HTTP GET to call the web service and gets JSON (Javascript Object Notation) as the result. You'll find that a web service that returns JSON is much easier to work with to parse the returned data and display to the user. Unfortunately, not all web services have JSON output as an option. In a future entry we'll look at a SOAP web service and parsing the XML returned from it. But for now, we'll keep it simpler.

The gadget looks like this on the page. It uses some external javascript from GeoNames to determine your country based on the your IP address. I'm using this to tell the user where we think they are.

gadget

If we fill in the data with a zip code of 91789 and press the Get Location we'll see the following. Normally for the US we''ll only get one result as that's how postal codes are set up. But for other countries we may get multiple results. 

Note that by default it will return up to 10 results. But we may need more. So the gadget has a configuration to set the max rows to return. We can set this higher if we need to get more results. The maxrows setting is part of your gadget definition and automatically becomes a configuration option in Liferay through the OpenSocial portlet. No programming necessary!

So after configuring it to return up to 25 rows, we see that there are more than 10 results.

The web service returns more items than we are using, so if you download the gadget and read about the GeoNames web service, you can add more items to display to the user (such as latitude and longitude).

I hope the blog and wiki article and source are helpful for you. Thanks for reading!

Liferay 6.0, OpenSocial and Gadgets - Part 1

Staff Blogs August 12, 2010 By Barrie Selack Staff

This is the first part of a series of blogs and wiki articles on using gadgets in Liferay. In this first part we'll discuss gadgets use and how to deploy a gadget. So, will gadgets replace portlets? Well, in some cases, they will be a quicker way to get information on your web site if you already have a web service available to pull the data from. There are some caveats thought, as a gadget is a client side application, any web service that needs to be secured would not be a good candidate for a gadget.

The contents of the gadget are sent to the browser as a whole, so that means any user/password information needed to call the web service would be viewable in the "view source" mode of the browser. If you are using the gadget in a secured Intranet (inside the firewall) then you could consider a gadget for your own internal use.

So what could be a good candidate for a gadget in a publicly available web site? 

Any information that you want available to customers. 

  • Company News
  • Press Releases
  • Upcoming Events

As a gadget can be put on other web site via a gadget container, your gadget xml could be used to be put on other sites. It would still be calling back to your site for information. This means you've exposed the web service making the data available to the public. This may or may not be a problem and is something you need to consider in building your application as a gadget.

So what could be a good candidate for a gadget in an Intranet web site? (behind the firewall)

This may actually where you can get the biggest bang for your gadget development. Since you are not allowing access outside the firewall, you can expose any information you would normally put on any web page on your Intranet. This could include the same information from the public list above, but could also include any company sensitive information. It could include calendar items, policies and procedures or employee  dashboard items. Just keep in mind that this information will need to be available as a web service for the gadget to retrieve it.

With all that in mind, let's see just how to get a gadget deployed in Liferay.

I've created a wiki post to walk through the deployment step by step.It shows everything from where you can put your gadget, deployment and how to configure user properties for your gadget.
 
In Part 2, we'll start building a gadget to deploy. Fell free to ask any questions!
 

 

Showing 4 results.