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.
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>
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; }
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.
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.
Now that you’ve built and redeployed a theme, let’s see the hierarchy of theme.
What is Liferay Portal?
Liferay Portal provide you enterprise web based solutions. Collaborative websites for teams and an entire enterprise are developed with the help of portals.
Using liferay authorizing teams individuals can create their own communities,creating a web area assigning a set of collaborative tools (blog, wiki, calendar, tasks, alerts, doc sharing, etc.) through the portal to the group. All collaborations within that community can be created by an individual to which he can join and organize as well.
Summary of AlloyUI
AlloyUI provides you UI components which we can scale according to our requirements and consistent look and feel for your application. It’s a structure enclosing JavaScript extensions of Yahoo UI (YUI). YUI’s modules and add up its own components to provide you the awesomeness UI. AlloyUI also using Twitter Bootstrap to make and update the styling of components easy.
Why AlloyUI
- AlloyUI component is built on top of YUI.
- YUI help you to build high quality production-level widgets quickly.
- YUI has a flexible, elegant architecture that is easy to extend. It is useful in both small as well as large scale projects.
YUI helps to reduce the size of your up-front JavaScript’s request download, and lazily loads other modules as needed. For the developer, Liferay provides special tag libraries that let you designate JavaScript for parsing only after your page’s HTML and CSS have been loaded. This often speeds up the availability of your UI to your user.
Now a days, as we know, many of the developers in the Liferay community likes to use jQuery but in the current version of liferay 7 gives the freedom to developer to use any javascript framework. we can also use any third party libraries like angular,react , vue etc.
Note: AlloyUI Library is available to you in Liferay old versions.