May 28, 2015 Harmeet Singh

Animated layouts in Liferay using Isotope JS

This article will help you to learn and how we can use isotope javascript library in our project. Isotope javascript library who developed by the David DeSandro. Isotope provides animated sorting and filtering in UI elements. It uses Masonry and packery layouts in addition to other layouts.

I found both of them before some days when i started working in one of my project and it’s so amazing, I whipped up a few demos to see for myself!

Install Isotope

For installation we need to download these isotope library from isotope website.

isotope.pkgd.js un-minified, or
isotope.pkgd.min.js minified

Package managers

Install with Bower: bower install isotope –save
Install with npm: npm install isotope-layout

Configuring Isotope

Portal_nirmal.vm

Include the Isotope .js file in your Theme.

<script src="${themeDisplay.pathThemeJavaScript}/isotope.pkgd.js"></script>

1	<script src="${themeDisplay.pathThemeJavaScript}/isotope.pkgd.js"></script>

After create a theme you can create a portlet with the name of isotope-layout for writing your HTML. write initialization code in your theme main.js file.

Initializing isotope with Jquery:

$('.isotope-grid').isotope({
  // options
  itemSelector: '.items',
  layoutMode: 'fitRows'
});

$('.isotope-grid').isotope({

// options

itemSelector: '.items',

layoutMode: 'fitRows'

});

Initialize with Vanilla JavaScript:

var elem = document.querySelector('.isotope-grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.items',
  layoutMode: 'fitRows'
});

// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.isotope-grid', {
  // options
});

var elem = document.querySelector('.isotope-grid');

var iso = new Isotope( elem, {

// options

itemSelector: '.items',

layoutMode: 'fitRows'

});

// element argument can be a selector string

// for an individual element

var iso = new Isotope( '.isotope-grid', {

// options

});

Initialize in HTML:

You can initialize Isotope directly in HTML, without writing any JavaScript or Jquery. You have to just add js-isotope to the class of the container element. For adding the options you can add data-isotope-options attribute in your element.

How to use Filtering,Sorting and Layout

Using Isotope you can hide and show item elements with the filter option. Which shows the only matched items according to the filter. Here you can see how we can apply the filters on:

Selectors(Like Class and id)

$grid.isotope({ filter: '.ClassName' });

1	$grid.isotope({ filter: '.ClassName' });

jQuery selectors(if jQuery is present)

// filter .ClassName items that are NOT .transition class

$grid.isotope({ filter: ‘.ClassName:not(.transition)’ });

With Functions

$grid.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // _this_ is the item element. Get text of element's .number
    var ClassName = $(this).find('.ClassName').text();
    // return true to show, false to hide
    return parseInt( ClassName, 10 ) > 50;
  }
})

$grid.isotope({

// filter element with numbers greater than 50

filter: function() {

// _this_ is the item element. Get text of element's .number

var ClassName = $(this).find('.ClassName').text();

// return true to show, false to hide

return parseInt( ClassName, 10 ) > 50;

}

})

UI with Buttons

<button data-filter="numberGreaterThan50">number > 50</button>
<button data-filter="ium">name ends with -ium</button>

1 2	<button data-filter="numberGreaterThan50">number > 50</button> <button data-filter="ium">name ends with -ium</button>

// init Isotope

var $grid = $('.grid').isotope({
  // options
});

// filter items on button click

$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

// init Isotope

var $grid = $('.grid').isotope({

// options

});

// filter items on button click

$('.filter-button-group').on( 'click', 'button', function() {

var filterValue = $(this).attr('data-filter');

$container.isotope({ filter: filterValue });

});

Sorting

In Sorting we are using two methods getSortData() and SortBy().

For more Information: Sorting

layout

In Layout all sizing and styling of items is handled by your own CSS so when we are developing the responsive layouts then we need to set item sizes with percentages in css and also we need to change the mode of layout with masonry and set the percentage-width columnWidth with element sizing. Setting up the percentPosition option true (percentPosition: true) reduce the adjustment transitions on responsive mode.

For more Information: Layout

May 3, 2015 Harmeet Singh

Getting started AngularJS with Liferay Portal

After reading the title of this post the first question comes in your mind is “Can we use AngularJS with Liferay?”
and my answer is yes we can. Now your thinking why AngularJS? I will give the answer of your all questions in this article.

What is AngularJS?

Angular js is open source web application development framework developed by Misko Hevery and maintained by Google. AngularJS architecture based on MVC(Model – View – Controller). MVC pattern help you to manage separately presentation, data, and logic components. server-side services are offered by Angular, like view-dependent controllers, to client-side web applications.

These are the some remarkable features:

HTML Declarative approach:This feature help you to declaring dynamic views in static web-applications. For your application, AngularJS facilitates you to extend HTML vocabulary. The consequential ssetting is especially expressive, readable, and quick to develop.
Easy Data Binding : AngularJS Two-way data binding is its most distinctive feature, and it reduces the amount of write dynamic code.
Reusable Components: Using AngularJS directives help you to make your component reusable.
Dependency Injection: You can easily inject dependencies of other modules in your web Application. Dependency injection is also a core to AngularJS.
End to end Integration Testing / Unit Testing: While writing a code for application, we also need write test cases. Angular is designed makes testing your application easy by using dependency Injection feature that makes testing components much easier then any other frameworks. Jasmine and Karma are the testing tool which we use in angular application
Routing: This feature allows to make your SPA website much easier.
Templating: Dynamically creating and updating HTML based on templates.
Services: you can use server side services in angular to make your web application dynamic.

If you are thinking to develop Angular Web Application in LIferay Developer Studio then Before starting to write a code you must know how to configure AngularJS in your liferay. It’s reduce your efforts to develop and maintain your Angular Web Application in Liferay. You can also write individual portlet in AngularJS. So in this article i am going to make a Independent News List portlet with the help of JSON Array in Angular.

Creating a liferay portlet

Go to the package Explorer > Right click New > Select Liferay Plugin Project

See Figure 1

If you want to setup AngularJS in Liferay developer studio. Read this article

or you can directly add the AngularJs Library in your theme or You can add directly in your portlet as well.

　　<script src="${themeDisplay.pathThemeJavaScript}/lib/angular.min.js"></script>

1	<script src="${themeDisplay.pathThemeJavaScript}/lib/angular.min.js"></script>

Now start write your code in portlet main.js file.

In this article you can see how Angular makes browsers intelligent— without the use of any other third party plugins.

What you Learn in this article:-

Examples of how to use client-side data binding to build dynamic views of data that change immediately in response to user actions.
See how Angular sync your data in view without the need for DOM manipulation.
Learn a better, easier way to create AngularJS based portlet that works independently with your application

Getting Started

AngularJS is using HTML Declarative Approach to write and extend HTML code with custom attributes and elements. It’s also helps you to in Data Binding. You have to create one pure static HTML page then examine how we can convert this HTML code into a template that angular will use to display dynamic data.

So here is Static HTML code:-

<ul>
		<li>
			<a href="#"><img src="" alt="news-img"/></a>
				<div class="news-desc">
					<h4></h4>
					<p></p>
				</div>
			</li>
			<li>
			<a href="#"><img src="" alt="news-img"/></a>
				<div class="news-desc">
					<h4></h4>
					<p></p>
				</div>
		</li>
	</ul>

<ul>

<li>

<p></p>

</div>

</li>

<li>

<p></p>

</div>

</li>

</ul>

In AngularJS, the view is a magnification of the model through the HTML template so whenever we change anything in the model angular refreshes the same binding points and updates in the view.

The view component is frame by Angular from this template:

docroot/view.jsp:

<div ng-app="NewsListApp" class="NewsListApp">
	<ul ng-controller="NewsListCtrl">
		<li ng-repeat="news in newslist">
			<a href="{{news.url}}" class="news-img">
				<img src="{{news.img}}" alt="news-img"/></a>
				<div class="news-desc">
					<h4><a href="{{news.url}}">{{news.title}}</a></h4>
					<p>{{news.desc}}</p>
				</div>
			</li>
	</ul>
</div>

<h4><a href="{{news.url}}">{{news.title}}</a></h4>

</div>

</li>

</ul>

</div>

We replaced the HTML news list with the ngRepeat directive and Angular expressions:

The ng-repeat=”news in newslist” attribute in the
tag is an Angular repeater directive. The repeater tells Angular to create a
element for each news in the list using the
tag as the template.
The expressions wrapped in curly braces {{ }} will be replaced by the value of the expressions.

We have added a new directive, called ng-controller, which attaches a NewsListCtrl controller to the parent tag.

The expressions in curly braces {{ }} show bindings, which are referring to our NewsListApp model, which is set up in our NewsListCtrl controller.

Now Build your portlet. After completing successful build go to your browser open your localhost site and just drag the portlet in layout to see the result.

Note: We have specified to load Angular Module using ng-app=”NewsListApp”, where NewsListApp is the name of our module. This module will contain the NewsListCtrl.

March 31, 2015 Harmeet Singh

How to configure AngularJS Plugin in Liferay

AngularJS IDE plugin is based on tern.java to manage powerful completion on HTML files (AngularsJS Expression, directive, modules) and Javascripts files.

Configure AngularJS Plugin in Liferay

AngularJS IDE Plugin help you to extend Liferay web development tool and enhance the capabilities of UI development in liferay:

HTML editor which supports AngularJS expression and directive.

Angular Explorer view which displays modules, controllers of your project in a tree structure.

Javascript editor which supports AngularJS features (modules, etc).

Follow this below steps to configure the angularjs plugin in liferay

Go to : Help > Click on Install New Software

Copy and paste this URL in Work with textbox “Anularjs – http://oss.opensagres.fr/angularjs-eclipse/0.7.0/”

Anularjs – http://oss.opensagres.fr/angularjs-eclipse/0.7.0/

We need to select only those components who are not installed on you Liferay Developer Studio.

Click on checkbox “Hide items that already installed”

Click on Next Button.

After installation of all the components you can convert your Project.

Right click on your project > Configure > Convert to AngularJS Project

AngularJS Eclipse is based on the javascript inference engine tern.js is written in JavaScript. To use it You must configure node.js. You can also do it this with Rhino but it’s too slow for that .To do that you can :

Now Go to Window > Prefrences > Select Tern:

when the native node is selected, in default folders installation, it explores node binary (ex : “C:\Program Files\nodejs\node.exe” for Windows) and if it doesn’t locate, it seeks in your node in your “PATH” environment. For that you have to set PATH enviroment in your system.

You can download node.js from this link. you must install the node.js according your OS Configuration :

Right Click on your Project properties and verify the angular plugin

Angular plugin will offer you to recover controllers,module, (custom) directives while writing a code. Here you can also see the list of other modules are available which we can select and enable as per the project requirement.

Set your Script path:

Settings of AngularJS Directives Syntax

Angular is using several syntax of declaring directives like starting with ‘x-‘, ‘data-‘ and use ‘:’, ‘-‘, ‘_’ delimiters.

Here ,we have finished to configure AngularJS IDE Plugin, now it’s time to write the code and start your first web application with Liferay.

March 24, 2015 Harmeet Singh

Color schemes in liferay theme

Creating a color schemes in liferay will help you to change the look and feel immediately with a CSS class name, which of course also help you to choose different background images, different border colors, and more.

Creating a Color Schemes

Here’s how you can define your color schemes in liferay-look-and-feel.xml:

<theme id="hm-blue" name="HM Blue">
    <settings>
        <setting key="my-setting" value="my-value" />
    </settings>
    <color-scheme id="01" name="Blue">
        <css-class>blue</css-class>
        <color-scheme-images-path>
            ${images-path}/color_schemes/${css-class}
        </color-scheme-images-path>
    </color-scheme>
    <color-scheme id="02" name="Grey">
        <css-class>grey</css-class>
    </color-scheme>
</theme>

</settings>

<color-scheme id="01" name="Blue">

<css-class>blue</css-class>

<color-scheme-images-path>

${images-path}/color_schemes/${css-class}

</color-scheme-images-path>

</color-scheme>

<color-scheme id="02" name="Grey">

<css-class>grey</css-class>

</color-scheme>

</theme>

Create a color_schemes folder inside your _diffs/css folder, and place a .css file in it for each color scheme. we can have either one file called grey.css or we can use both blue.css and grey.css to specify each scheme. Let’s use the better option here, creating both files to define our color schemes.

Place the following lines at the bottom of your custom.css file:

@import url(color_schemes/blue.css);
@import url(color_schemes/grey.css);
The color scheme CSS class is placed on the <body> element, so you can use it to identify your styling. In blue.css, prefix all your CSS styles like this:
body.blue { background-color: #0000FF; }
.blue a { color: #fff; }
In grey.css, prefix all your CSS styles like this:
body.grey{ background-color: #E4E4E4;; color: #000; }
.grey a { color: #000; }

@import url(color_schemes/blue.css);

@import url(color_schemes/grey.css);

The color scheme CSS class is placed on the <body> element, so you can use it to identify your styling. In blue.css, prefix all your CSS styles like this:

body.blue { background-color: #0000FF; }

.blue a { color: #fff; }

In grey.css, prefix all your CSS styles like this:

body.grey{ background-color: #E4E4E4;; color: #000; }

.grey a { color: #000; }

You can create separate thumbnail images for your color schemes. The element tells Liferay where to look for these images (you only have to place this element in one color scheme for it to affect both). For our example, create the folders _diffs/images/color_schemes/blue and_diffs/images/color_schemes/grey. In each folder place a thumbnail.png and screenshot.png file, according to the specifications defined in the Thumbnails section in Liferay Theme.

March 21, 2015 Harmeet Singh

Theme Development in Liferay

LiferayUI blog will help you make you own theme to customize your liferay’s portal appearance and impression. With themes, you can alter the user interface completely that it becomes difficult yet impossible to identify that the site is running on Liferay.

Liferay’s theme inherits the styling, images, and templates from any of the built-in themes. This saves your time and keeps your themes smaller and less cluttered, because your theme contains only its own resources, using defaults for the rest, like Templates,Js,Images and CSS.

Theme Development in liferay is easy to create. You can start by making changes in the CSS files. When you need to customize themes more extensively, you can change the HTML Templates.

If you hope to become a Liferay theme development and customization expert, there are several technologies you should know:

CSS: Create a new theme simply by modifying a CSS file.

Velocity: Customize the markup generated by the theme.

JavaScript: Add special behaviors to your theme.

XML: Some theme settings are specified in XML.

Creating a Theme

Our theme will be named HM Blue, so the project name (without spaces) is hm-blue, and the display name (which can have spaces) is HM-Blue. Let’s create the theme using Liferay Developer Studio first, and then with the terminal (Command Prompt).

Using Developer Studio:

Go to File → New → Liferay Project.

Fill in HM-blue for the Project name and HM Blue for the Display name.

Select the build type, Plugins SDK, and Liferay runtime.

See this link if you Using Liferay IDE with Maven for more information. Otherwise, select the Ant build type.
For more information, see sections Installing the SDK and Setting Up Liferay IDE.

Select Theme for your Plugin type.

Click Next.

Figure 1 : Make sure to select the Theme plugin type for your theme.

Setting a base Theme

Now you have to Select a theme parent. In Liferay you have two base theme, all themes are built on the top of it, which is assign style and unstyled. Your newly created theme is based on these by default, but they contain very limited styling. You can take advantage of an existing theme’s styling by setting the theme of your choice as the base for your theme. styled theme providing the most basic elements. When you set a different base theme, it’s added on top of styled and overrides the default styling wherever there are differences. After the base themes are added, your own custom styling is affixed on top.

Figure 1.1 : Make sure to select the Theme plugin type for your theme.

By Default it’s select _styled theme. Adding together in to the _styled theme, from the unstyled theme you can select the inherit, which includes no styling. There’s also the classic theme that has a smooth look and feel and works well. For now, select _styled as the theme parent.

Select your theme’s framework. You can select the Freemarker or Velocity template frameworks for your theme. Or you can select JSP as your theme’s framework. For now, select _Velocity framework template framework. See figure 1.1

Click Finish.

To specify a base theme, edit the build.xml file for your theme and change _styled in to the name of any existing theme that’s installed or in your Plugins SDK. Now that your base theme is set, let’s deploy the theme to your portal instance.

Theme Deployment

If you’re already familiar with portlet deployment then theme deployment will be a piece of cake! You can deploy your theme in Developer Studio or the terminal (Command Prompt).

Deploying in Developer Studio: Click and drag your theme project onto your server.

After deploying, your server outputs messages in console to indicating your plugin is available for use.

Reading plugin package for hm-blue-theme

Registering themes for hm-blue-theme

1 theme for hm-blue-theme is available for use

Let’s apply your theme to a page:

Go to your web browser and log in to the portal.

Hover over Manage at the top of the page and click on Page.

Directly underneath the words Manage Pages, select the Look and Feel tab. Click on your theme to activate it.

Redploy

Now that you’ve built and redeployed a theme, let’s see the hierarchy of theme.

LIFERAY UI

LIFERAY UI

Animated layouts in Liferay using Isotope JS

Install Isotope

Package managers

Configuring Isotope

How to use Filtering,Sorting and Layout

Sorting

layout

Getting started AngularJS with Liferay Portal

What is AngularJS?

These are the some remarkable features:

Creating a liferay portlet

Getting Started

How to configure AngularJS Plugin in Liferay

Configure AngularJS Plugin in Liferay

Set your Script path:

Settings of AngularJS Directives Syntax

Color schemes in liferay theme

Creating a Color Schemes

Theme Development in Liferay

Creating a Theme

Setting a base Theme

Theme Deployment