Aim of this article: Understand the basics of Liferay Alloy UI.
Alloy UI:
AlloyUI is a UI framework built on the top of YUI3 (Yahoo UI) that provides a simple API for building high scalable applications.It incorporates three design languages: HTML, CSS, and JavaScript.
Official site of Alloy UI:
Why we need Alloy UI:
Some of you might know jQuery, Ext JS, Dojo etc. These javascript framework can easily be used in Liferay. Then you might be thinking why you need to learn new javascript framework. The answer is simple. Alloy UI provides all the features or facilities that we have with jQuery, Ext JS, Dojo etc. And another advantage is that to use Alloy UI in liferay you no need to download js files and integrate in Liferay. If you are a liferay developer then this framework will make your life easy. Because all the UI components are under one roof. You no need to bother about js files, integration etc.
How to use Liferay Alloy UI:
In this article we will try to learn Alloy UI without using Liferay. That means in stand alone html file we will learn basics of Alloy UI. However if you use Liferay no need to download any JS as well as CSS files.
In your HTML file you need to use the below 2 lines
<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link> <script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
If you want to work offline you can download bootstrap.min.css and aui-min.js in your local drive.To work with Alloy UI the minimum code would look like
<html>
<head>
<title>Alloy</title>
<link href="bootstrap.min.css" rel="stylesheet"></link>
<script src="aui-min.js"></script>
<script>
YUI().use(function(Y){
//All code goes here
});
</script>
</head>
<body>
</body>
</html>
Alloy UI Modules: Alloy UI has many modules. We can consider module is just like java import. We use only those modules which are required. To know various modules visit the Alloy UI home page. Some examples of alloy modules are
event
node
aui-button
aui-carousel ….. and many more.
How to use modules:
Say we need to use modules event and node. Then our code will look like below
<script>
YUI().use('event','node',function(Y){
//All code goes here
});
</script>
We can use many modules as we want inside use() but only one thing to remember the last argument of use() should be a function.
Whats function(Y)?
This is a callback function and Y will represent real object of Alloy UI. Y will contains alloy UI objects as well as classes.
Selectors in Alloy UI:
<html>
<head>
<title>Alloy</title>
<link href="bootstrap.min.css" rel="stylesheet"></link>
<script src="aui-min.js"></script>
<script>
YUI().use('event', 'node',function(Y){
var var1 = Y.one('#custom-id');// Get refrence of element with id custom-id
var var2 = Y.one('.custom-class'); // Get refrence of element with class custom-class
var var3 = Y.one('input[type=checkbox]'); // Get refrence of element of type check box
});
</script>
</head>
<body>
<div id="custom-id">This is a sample text id selector</div>
<div class="custom-class">This is a sample text to represent class selector</div>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</body>
</html>
Y.one method will refer only one element at a time and return null if it does not get the element.If this matches multiple elements then it will return the first element. If we need multiple reference we can use Y.all(). For example
A.all(‘#myID’)
Will return all the elements with id myID. Y.all() will always return a NodeList and if it doesn’t match any elements it will return an empty collection.
Click Event:
<html>
<head>
<title>Alloy</title>
<link href="bootstrap.min.css" rel="stylesheet"></link>
<script src="aui-min.js"></script>
<script>
YUI().use('event', 'node',function(Y){
// Get the button reference
var buttonObject = Y.one('#myButton');
//Call click event on the object
buttonObject.on('click', function(event){
alert('You clicked the button');
});
});
</script>
</head>
<body>
<input type="button" id="myButton" value="Click Me">
</body>
</html>
Hello Hamidul,
I’m Heinrich and living in Germany (Area of Cologne). I’m established a micro company and starting with Liferay, as my my business-communication platform. It is very important and useful for me to start on developments for Liferay too – but I’ve anay experience.
Alloy UI/Framework will be the basic for Liferay development.
Now my question to you:
I saw same Themes based on bootstramp 3. Some useful/fast Themes are at https://wrapbootstrap.com/ for sale. I prefer this Theme INSPINIA or UNIFY and don’t know, if these Themes are “working” without problems in Liferay’s actual CE-version. Could you tell me if posiible? In Liferay 7 beta?
BR Heinrich