Alloy UI for Dummies

[XX Brain, modifié il y a 13 années.]

Hello everyone,

i'm really confused by all the new stuff i have to lern now, because I need to understand Liferay. At the moment I try to understand the using of AlloyUI, but without kwowing much about WebDevelopment it is very hard to understand. Perhaps someone can help me.

For testing I've created an Autocomplete in my jsp-File wich is filled with data from my liferay-database:

<div id="myAutoComplete"></div>

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

	//Reading States from Database and set them on JavaScript Array
        &lt;% List<alloystate> states = AlloyStateLocalServiceUtil.getAllStates(); %&gt; 
	
           
    	   var statesneu = [
		//For every entry in list make an array entry
                &lt;% for (AlloyState state: states) {  %&gt;
                 ['&lt;%=state.getStateId()%&gt;','&lt;%=state.getStateName()%&gt;','&lt;%=state.getStateText()%&gt;' ],
	        &lt;% } %&gt;         
	        ];


	
	window.AC = new A.AutoComplete(
		{	
			
			dataSource: statesneu,
			schema: {
				resultFields: ['key', 'name', 'description']
			},
			matchKey: 'name',
			delimChar: ',',
			typeAhead: true,
			contentBox: '#myAutoComplete'
		}
	
	);

	AC.render();
});
</alloystate>

The CompletBox is shown correctly. I doubt that filling the Array on this way ist clever. Perhaps you have a better way for me. But my biggest problem is, I do not know how to use the entry of the AutoCompleteField.
For example. A user makes his entry and I want to work with it. How is it possible to get the entered values from it. Perhaps there is an simple example portlet somewhere in the world wide web. Please help me.

Jan

[XX Brain, modifié il y a 13 années.]

Perhaps you can help me with an example wich is more simple.
I have a Colorpicker on my Portlet.

<div id="color"></div>

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

AUI().use('aui-color-picker', function(A) {
     window.CP = new A.ColorPicker();
     CP.render('#color');

}
</script>

How can I get the values out of the Colorpicker into my JSP. The aim is to use it within a form, readout the value an send it to an action method.

[XX Brain, modifié il y a 13 années.]

Hey folks I found a solution. I can not believe that I'm the only one without any idea and that there is no one who can help. I will post now my solution, but I'm nut sure if this is a good way. And it only works with the Colorpicker. For the AutoCompleteField i still can not get out the values. If there is anybody who can help...


In My JSP File I create first the ColorPicker Object an a button with an onClick Action. It is in a form but I don't want to post alle the code because it is just an easy example.

<div id="color"></div>

<aui:button type="submit" onClick="submitPressed()" />

We also have to add our JavaScript Code for the Colorpicker and in addition to that we need to create the "submitPressed()" function.

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


AUI().use('aui-autocomplete','aui-color-picker', function(A) {
		
	// AlloyUI Colorpicker 
	window.CP = new A.ColorPicker();
	CP.render('#color');
});


function submitPressed () {
	var hexColor = window.CP.get('hex');
	alert(hexColor);	
}

</script>

The Hex Attribute I found out with Firebug Extension for Firefox.