Converting Simple HTML form to AUI form

Converting Simple HTML form to AUI form

In this section we will see how to convert simple HTML form we have just created to an AUI form and use the AUI elements.

Insert the AUI taglib definition in init.jsp,

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>


Replace our HTML form with the AUI form,

<aui:form name="fm" method="POST" action="<%= updateBookURL.toString() %>">
<aui:input name="bookTitle" label="Book Title"/>
<aui:input name="author"/>
<aui:button type="submit" value="Save"/>
</aui:form>


1. when you use AUI, you need not have to explicitly give <portlet:namespace/>
2. ensure that you have explicitly specified the method attribute for <aui:form> tag.
3. See we have specified the “label” attribute only for bookTitle and not for author. Why?

Once our changes are deployed, you will see a more cleaner / better form,

We will see more applications of Alloy UI (AUI) in subsequent chapters.

For a detailed discussion on AUI, please refer to the below Liferay Wiki article,

http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/Alloy+UI+Forms+(aui)

Form Validation using jQuery

In this section, we are going to show you how to use jQuery in our portlet. Though we will see more
applications of jQuery and various jQuery plugins in the later chapters, here we will see how to add
some validation to our “Update Book” form using jQuery validation plugin.

1. refer to the javascript that you need in your portlet.
          1. header-portal-javascript
          2. footer-portal-javascript
          3. header-portlet-javascript
          4. footer-portlet-javascript

2. open the liferay-portlet.xml under WEB-INF and insert the below tag in the appropriate location.

<header-portlet-javascript>
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js
</header-portlet-javascript>

3. open “update.jsp”

To know more about integrating jQuery with liferay, read the following liferay Wiki articles.

http://www.liferay.com/web/jonas.yuan/blog/-/blogs/building-jquery-based-plugins-in-liferay-6
http://www.liferay.com/web/julio.camarero/blog/-/blogs/can-i-have-different-jquery-versions-inliferay
http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/using-jquery-or-any-javascript-libraryin-
liferay-6-0

Suite :  http://rsuna.blogspot.com/2013/11/liferay-creating-service-layer.html

Posted in: liferay