Adding custom Liferay portlet to Control Panel in Liferay 6.1

To add your custom portlet into Control Panel like "Wikki", Polls etc links.
Create a custom portlet using New -> Liferay Project. Choose Portlet Plugin type.
After the portlet is created open "liferay-portlet.xml"

When using Liferay’s Plugins SDK, these files are stored in a standard directory structure:

PORTLET-NAME/
build.xml
    docroot/
    css/
    js/
    WEB-INF/
        liferay-display.xml
        liferay-plugin-package.properties
        liferay-portlet.xml
        portlet.xml
    icon.png
    view.jsp

Add the following highlighted lines in that xml file and your portlet will show up in Control Panel. 

<portlet>
        <portlet-name>mycontrolpanelprtlet</portlet-name>
     <icon>/icon.png</icon>
        <control-panel-entry-category>my</control-panel-entry-category>
<control-panel-entry-class>..</control-panel-entry-class> <control-panel-entry-category>..</control-panel-entry-category>
        <layout-cacheable>true</layout-cacheable>
        <add-default-resource>true</add-default-resource>
   </portlet>

If the portlet does not show for a particular role then assign permissions accordingly.

Hope this would be of some help. Please comment.

Weather widget Jquery

Weather widget Jquery

I just wrote a code to practice how we can render a JSON data if it is available to you in an array/ key value pair format. It is using the plain Jquery. I have separated HTML, JS and CSS in different files.

Here goes the code.
HTML:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Weather</title>
  <script src="js/jquery.min.js"></script>
   <script src="js/weather.js"></script>
  <link rel="stylesheet" href="css/weather.css"  type="text/css">

<script>

 $(document).ready( function() {

 var cities = [{
     "name": "Delhi",
     "temperature": "42 Celsius",
     "humidity": "234cm"
 }, {
     "name": "Banglore",
     "temperature": "34 Celsius",
     "humidity": "230cm"
 }];

  for (var i in cities) {
  $('div#main > ul').weather({
name: cities[i].name,
temperature : cities[i].temperature,
humidity: cities[i].humidity
});
  }

});

</script>
 </head>
 <body>
<div id="main">
<p>Weather</p>
 <ul>

 </ul>
</div>

 </body>
 </html>

CSS

#main{
width:25%;
background-color:#F0F8FA;
border:2px solid #9CBFDF;
border-radius:15px;;
margin-left:20px;
  }
  #main p{
color:#37991d;
font-size:xx-large;
text-align:center;
  }
  ul li{
  list-style-type:none;
  margin-left:35px;
  padding:5px 0;
  }
  .temp{
font-size:large;
  }
  .detail{
font-size:large;
  }
  .chead
{
font-size:x-large;
list-style-image:url('../img/pertlycloud.png');
}

JS

  (function($) {
   $.fn.weather = function(options) {


var defaults = {
name: "City",
                   temperature: "10 Celsius",
                   humidity: '200cm'
            };
var options = $.extend(defaults, options);

return this.each( function() {
  var output = '<li class="chead">'+options.name+'</li><li class="temp">'+options.temperature+'</li><li class="detail">'+options.humidity+'</li>'
  $(this).append(output);
  });

   }
 

 })(jQuery);

Don't forget to add Jquery file in your js folder: I have used  jQuery v1.9.0 .
Hope this will help. It can be enhanced further to make it a Jquery plug-in or Jquery widget.

How to convert wmv to swf or fla through Flash

If you have a .wmv  file and want to know how to convert that into an swf file, here are simple steps:

1. Save your file on to your local system.
2. Open Adobe Flash Video Encoder
3. Add the file into the Video encoder. Give the name of the file at the bottom without flv extension
4. Select the file and click "Start Queue". It will encode the file and convert it in to .flv at the same location where you've saved your wmv.
5. Now open Adobe Flash and import the flv file into it.
6. It will open a wizard, select your options and click next.
7. After the file is imported, select export at movie clip.

You are done. Swf/ flash file is ready for you.

Creating bar chart using jquery.

If you want to create a bar chart using jquery, css and html. use the progressbar component of Jquery and edit the CSS as per your requirement. You can manipulate the width of the bar chart using the progressbar js. This is an excellent example: http://jqueryui.com/demos/progressbar/.
You can achieve the the functionality of progress bar as well as bar chart with same component which will inturn save the loading time of your page.

Sample code:

<script>
 $(function() {
  $( "#progressbar" ).progressbar({
   value: 37
  });
 });
 </script>



<div class="demo">

<div id="progressbar"></div>

</div><!-- End demo div -->



<div style="display: none;" class="demo-description">
<p>Default determinate progress bar.</p>
</div><!-- End demo-description -->

Alloy UI tabs and grid

Alloy UI tabs along with AUI layout

Today I want to share with you the tabs that can be created using Alloy UI 1.5.4 tabs component. I know that the demos are available when you download the latest version of the  alloy UI: http://alloyui.com/latest/alloy-latest.zip.

I had a hard time finding AUI 1.5.4 release AUI library which is compatible with Liferay 6.1 Release.

The difference is I created vertical tabs using AUI tab component. I will add the exact code later but the logic is use the grid that  gets added when you add the aui.js file on to your page.

use aui-30 in left div along with display:block and add aui-70 in right div with display as inline-block. don't forget to bind both of them in aui-100 div. This will give flexible grid structure can help in building responsive layout. With the classic theme added in the page for tabs; it will show up vertically. You've to customize few styles by overriding few CSS into your custom one.

Here you will achieve the vertical tabs via ally UI (AUI 1.5). A good reference link if you're novice to AUI: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-elements-and-events

Please respond if you find it helpful.

Implementing YUI or AlloyUI in Liferay

Implementing YUI 3.2 node menunav in Liferay

I am a novice to YUI and Alloy UI but want to share my learnings on how to implement YUI 3.2 Node MenuNav (YUI navigation) in Liferay. I am currently on Liferay 6 which has YUI 3.2 inbuilt.

 For adding YUI navigation in Liferay theme, add the following code:

1. Create a theme in Liferay.
2. Add the following code in the navigation.vm:

<div id="menu-1" class="yui3-menu"><!-- Root menu bounding box -->
<div class="yui3-menu-content"><!-- Root menu content box -->
<ul>
<li class="yui3-menuitem"><!-- Menuitem bounding box -->
<a class="yui3-menuitem-content" href="http://www.yahoo.com"><!-- Menuitem content box -->
Yahoo!
</a>
</li>
<li>
<a class="yui3-menu-label" href="#pim">PIM</a><!-- Submenu label -->
<div id="pim" class="yui3-menu"><!-- Submenu bounding box -->
<div class="yui3-menu-content"><!-- Submenu content box -->
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://mail.yahoo.com">Yahoo! Mail</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://addressbook.yahoo.com">Yahoo! Address Book</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://calendar.yahoo.com">Yahoo! Calendar</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://notepad.yahoo.com">Yahoo! Notepad</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">

YUI().use("node-menunav", function(Y) {

var menu = Y.one("#menu-1");
 menu.plug(Y.Plugin.NodeMenuNav);
// Show the menu now that it is ready
menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");

});

</script>
Build the theme and apply to check the navigation working. Don't forget to add the CSS as that is not inbuilt with Liferay.

If you are trying to use some other version of YUI node menunav then add the yui folder in webapps and call it in vm, it will work.

YUI 3.2 navigation example:
http://yuiblog.com/sandbox/yui/3.2.0pr1/examples/node-menunav/node-menunav-1.html

Hope this will help.

Achieving rounded corner in IE

Achieving rounded corner in Internet Explorer - Alternate way!

Yet another example of rounded corner in IE if do not want to use htc fix.

"DD_roundies.js" is easily available to download from Internet. DD_roundies is a JS library that makes rounded corner in Internet Explorer an easy deal.

Call DD_roundies.js on the page where you want rounded corner or include in your website template to be available on all the pages. Also, you can include its code in your existing custom js.

If you use first method, calling it on your page. Follow the steps:

1.  Add this in head section of your page:

          <script src="DD_roundies.js"></script>

2. Add the following in the <script> tag after the js is called:

           DD_roundies.addRule('.box_a ', '10px');
this will set the radius of 10px on all the corners of div having box_aCSS class.

         DD_roundies.addRule('.box_a', '10px 5px');
'10px 5px' will set the top-left and bottom-right corner radius to 10px, and top-right and bottom-left to 5px;

First parameter of DD_roundies.addRule takes the class name. The second parameter follow the normal CSS rule for giving border which you can give as per your requirement.

3. Add the div with box_a class in the HTML section your page:
<div class=".box_a"> Add your content here </div>

You're good to go. The rounded corners will work here in IE as well.