Writing Alloy UI java script in portlet JSP

Liferay make sure Alloy UI required JS/CSS files  available for your portlets. in your portlets you can start using them

 view.jsp
=============

<h1>Using script tag</h1>
<div id="myTreeView"></div>


<h1>Using aui script jsp tag</h1>
<div id="shipping">
  <p>
    <select name="state" id="state">
      <option value="">Choose a state...</option>
    </select>
  </p>
  <p>
    <select name="city" id="city">
      <option value="">Choose a city...</option>
    </select>
  </p>
</div>

<a id="tooltip" href="#">Hover for a simple tooltip</a>

<script type="text/javascript">
AUI().ready(
          'aui-tooltip',
          function(A) {
            var tooltip = new A.Tooltip(
              {
                bodyContent: '<iframe width="500" height="280" src="http://www.youtube.com/embed/KzorZ1CO6Vs" frameborder="0" allowfullscreen></iframe>',
                trigger: '#tooltip'
              }
            ).render();
          }
        );
</script>


<script type="text/javascript">
YUI().use(
          'aui-tree-view',
          function(Y) {
            // Create an array object for the tree root and child nodes
            var children = [
              {
                children: [
                  {
                    label: 'File X'
                  },
                  {
                    label: 'File Y'
                  },
                  {
                    label: 'File Z'
                  }
                ],
                expanded: true,
                label: 'Root'
              }
            ];

            // Create a TreeView Component
            new Y.TreeView(
              {
                boundingBox: '#myTreeView',
                children: children
              }
            ).render();
          }
        );

</script>


<aui:script use="aui-io-request,node" >
        var states = [
                 {"code":"GA", "name":"Georgia"},
                 {"code":"CA", "name":"California"},
                 {"code":"MI", "name": "Michigan"}
             ];      
       
        for (i = 0; i < states.length; i++) {
            A.one('#state').append('<option value="' + states[i].code + '">' + states[i].name + '</option>');
          }
             
        var cities = [
                         { "name":"Atlanta"},
                         { "name":"Suwanee"},
                         { "name": "Georgia"}
                     ];      
         options = '';
        for (i = 0; i < cities.length; i++) {
            options += '<option value="' + cities[i].name + '">' + cities[i].name + '</option>';
          }
        A.one('#city').html(options);
</aui:script>