RE: How to use alloy UI Step by step

[Muthu RP, modificado 10 Anos atrás.]

Hi...
I wanted to use alloy ui Application....
example, I need to use tab menu from alloy UI, how can bring from alloy ui folder to my liferay page...................


Thanks
Muthu

[Vishal Panchal, modificado 10 Anos atrás.]

Hi Muthu,

You can refer below link.
http://deploy.alloyui.com/demos

And for the tab-menu refer this http://deploy.alloyui.com/demos/tabs-menu-plugin/
You can got the code for specific demo that how it has implemented by right click > view page source

Hope it helps.!

Thanks&Regards,
Vishal R. Panchal

[Johan de jong, modificado 10 Anos atrás.]

You DON'T need to include the Alloyui in your pages if you use it with Liferay.

Just visit the demo-site of alloyui, pick what you want and include it on the page you created. Liferay puts all Alloyui code in the header of every page, so you only have to create smart thingies with Alloyui.

for example (as descibed in the post above) enter this on your page:

<div id="wrapper">
	<h1>Alloy - tabs Demo</h1>

	<div id="demo">
		<h2>From markup</h2>
		<div class="aui-button-holder">
			<input id="disable1" name="disable1" type="button" value="Disable Tab 2">
			<input id="add1" name="add1" type="button" value="Add a new tab">
			<input id="remove1" name="remove1" type="button" value="Remove the last tab">
		</div>
		<div id="markupTabs">
			<ul class="aui-tabview-list aui-widget-hd" id="test">
				<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello A</a></li>
				<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello B</a></li>
				<li class="aui-tab"><a class="aui-tab-label" href="javascript:;">Hello C</a></li>
			</ul>

			<div class="aui-tabview-content aui-widget-bd" id="testContent">
				<div class="aui-tabview-content-item">
					<h3>1. New tab content</h3><br>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
				<div class="aui-tabview-content-item">
					<h3>2. New tab content</h3><br>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
				<div class="aui-tabview-content-item">
					<h3>3. New tab content</h3><br>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</div>
			</div>
		</div>

		<h2>From script</h2>
		<div id="scriptTabs"></div>
	</div>
</div>

The above will create a bunch of DIV's on your page.
After that put this Javascript code block on your page:

<script type="text/javascript" charset="utf-8">

AUI().ready(
	'aui-tabs', 'substitute',
	function(A) {
		var tabs1 = new A.TabView(
			{
				boundingBox: '#markupTabs',
				listNode: '#test',
				contentNode: '#testContent'
			}
		);

		tabs1.render();

		A.on(
			'click',
			function(event) {
				var buttonValue = this.get('value');

				if (this.hasClass('enableTab')) {
					tabs1.enableTab(1);
					buttonValue = buttonValue.replace(/Enable/, 'Disable');
				}
				else {
					tabs1.disableTab(1);
					buttonValue = buttonValue.replace(/Disable/, 'Enable');
				}

				this.toggleClass('enableTab');
				this.set('value', buttonValue);
			},
			'#disable1'
		);

		var dummyContent = '<h3>{tabNumber}. New tab content</h3><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

		A.on(
			'click',
			function(event) {
				var tabNumber = (tabs1.get('items').length + 1);

				tabs1.addTab(
					{
						label: 'Tab' + tabNumber,
						content: A.Lang.substitute(dummyContent, {tabNumber: tabNumber}),
						active: true
					}
				);
			},
			'#add1'
		);

		A.on(
			'click',
			function(event) {
				var tabNumber = (tabs1.get('items').length - 1);

				tabs1.removeTab(tabNumber);
			},
			'#remove1'
		);

		window.tabs2 = new A.TabView(
			{
				boundingBox: '#scriptTabs',
				items: [
					{label: 'Hello 1', content: 'This my content 1'},
					{label: 'Hello 2', content: 'This my content 2'},
					{label: 'Hello 3', content: 'This my content 3'}
				]
			}
		);

		tabs2.render();
	}
);

</script>

This will firestart the ALLOYUI scripts, and do the magic.

Every component of ALLOYUI has a name, if you want to use it you have to give the name of this component in the beginning:

AUI().ready(
	]'aui-tabs', 'substitute',
	function(A) {

Now you can play around with all DIV's on your page:
A.one tells the code there is one element on the page (or the first) that you want to play with
A.all tells the code there is one or more elements on the page that you want to play with.

Read more here: search Alloyui working with Ajax on google ( my post was marked as spam when i included a link)

[Subhash Pavuskar, modificado 10 Anos atrás.]

Hi ,

For your reference

Demo

Tutorial

Example

Hope this may help you !!