Liferay UI
link: http://alloy.liferay.com/demos.php


Creating the service.xml file
Create a file called service.xml in the WEB-INF folder of your project. This file will contain your table definitions. You'll populate this file with all the information Service Builder needs to generate the SQL for the table—for all the databases Liferay supports as well as database persistence objects you can use in your Java code.
We'll use the simplest of the tables as our example, which is the Product table. The following listing defines the table for Service Builder.
Listing 1 Defining the Product table using Service Builder

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE service-builder PUBLIC "-//Liferay//DTD Service Builder 6.0.0//EN" "http://www.liferay.com/dtd/liferay-service-builder_6_0_0.dtd">
<service-builder package-path="com.inkwell.internet.productregistration"> 1
<author>Rich Sezov</author> 2
<namespace>PR</namespace> 3
<entity name="PRProduct" local-service="true" remote-service="false"> 4
<column name="productId" type="long" primary="true" /> 5
<column name="productName" type="String" /> 6
<column name="serialNumber" type="String" />
<column name="companyId" type="long" /> 7
<column name="groupId" type="long" />
<order by="asc"> 8
<order-column name="productName" />
</order>
<finder name="G_PN" return-type="Collection"> 9
<finder-column name="groupId" />
<finder-column name="productName" />
</finder>
<finder name="GroupId" return-type="Collection">
<finder-column name="groupId" />
</finder>
<finder name="CompanyId" return-type="Collection">
<finder-column name="companyId" />
</finder>
</entity>
</service-builder>

#1 Java package for code
#2 Author for JavaDoc
#3 Namespace for tables
#4 Name of entity
#5 Primary key
#6 Additional fields
#7 Foreign Keys
#8 Order data is returned
#9 Finder methods



Liferay Alloy UI Calendar DatePicker and DatePickerSelect
2/15/12 8:30 PM
This is a simple tutorial to create an input textbox with the alloy ui calendar datepicker.
Simple DatePicker:
1. Include the below taglib directive to your jsp
<%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
2. Wrap your date field input box around a div
<h2>Start Date:<h2>                     

<div class="aui-datepicker aui-helper-clearfix" id="#<portlet:namespace />startDatePicker">

 <input type="text" name="startDate" id="<portlet:namespace />startDate" size="30" />

</div>
3. Add the aui script to your jsp
<aui:script>
    AUI().use('aui-datepicker', function(A) {
    var simpleDatepicker1 = new A.DatePicker({
        trigger: '#<portlet:namespace />startDate',
    })
    .render('##<portlet:namespace />startDatePicker');
</aui:script>
For more configuration options with the datepicker check here
4. In your portlet render or action method add the below code to get the date from the request parameter:
DateFormat df = new SimpleDateFormat("MM/dd/yyyy");
Date startDate = df.parse(actionRequest.getParameter("startDate"));
5. Build and deploy
DatePickerSelect:
1. Add the below html code.

  <div class="aui-datepicker-example aui-helper-clearfix" id="staticDatePicker">
    <h2>Start Date: from HTML Markup</h2>
    <div class="aui-datepicker aui-datepicker-display aui-helper-clearfix" id="datePickerBB">
        <div class="aui-datepicker-content" id="srcNode">
            <div class="aui-datepicker-select-
wrapper">
                <select id="yearNode" class="custom-field aui-datepicker-year">
                    <option value="2012">2012</option>
                </select>
                <select id="monthNode" class="custom-field aui-datepicker-month">
                    <option value="0">January</option>
                    <option value="1">February</option>
                    <option value="2">March</option>
                    <option value="3">April</option>
                    <option value="4">May</option>
                    <option value="5" selected>June</option>
                    <option value="6">July</option>
                    <option value="7">August</option>
                    <option value="8">September</option>
                    <option value="9">October</option>
                    <option value="10">November</option>
                    <option value="11">December</option>
                </select>
                <select id="dayNode" class="custom-field aui-datepicker-day">
                    <option value="9">9</option>
                </select>
            </div>
            <div class="aui-datepicker-button-wrapper">
                <button type="button" id="buttonTest" class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only">
                    <span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
                </button>
            </div>
        </div>
    </div>
</div>
2. Add the aui script to your jsp

<aui:script>

    AUI().use('aui-datepicker', function(A) {

    var datepicker2 = new A.DatePickerSelect({
        srcNode: '#srcNode',
        contentBox: '#srcNode',
        boundingBox: '#datePickerBB',

        appendOrder: [ 'y', 'm', 'd' ],
        calendar: {
            dates: [ '10/10/2010' ],
            dateFormat: '%m/%d/%y'
        },

        // dayNode: '#dayNode',
        // monthNode: '#monthNode',
        // yearNode: '#yearNode',

        // dayNodeName: 'dayNode',
        // monthNodeName: 'monthNode',
        // yearNodeName: 'yearNode',

        nullableDay: true,
        nullableMonth: true,
        nullableYear: true,

        // populateMonth: false,
        // populateDay: false,
        // populateYear: false,
        yearRange: [ 1980, (new Date).getFullYear() ]
    }).render();

});
</aui:script>

3. Build and deploy