Alloy UI (YUI), Graphics - Draggable Circle , Ajax, Portlet

view.jsp

<!-- http://jsbin.com/utucah/1 In free form -->

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet"%>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util"%>

<portlet:defineObjects />
<!-- <link rel="stylesheet" type="text/css" href="main.css"> -->

<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=<your google api key>&sensor=true">
	
</script>

	<portlet:resourceURL var="ajaxCallResourceURL" id="jsonID" />
	
<script type="text/javascript">
	AUI().ready(
			function(X) {

				<portlet:namespace/>initialize();//google maps

				AUI().use(
						[ 'graphics', 'dd-drag' ],
						function(Y) {

							var mygraphic = new Y.Graphic({
								render : "#container"
							});

							<portlet:namespace/>resize(Y, "#container");

							var myne = new ManagedObject("Test", new Position(
									50, 20));
							myne.alarmstate = 0;
							myne.ne = myne.draw(Y, mygraphic);
							myne.makedragable(Y);
							myne.redrawtext();

							var testne = new ManagedObject("TestNe",
									new Position(44, 50));
							testne.alarmstate = 1;
							testne.ne = testne.draw(Y, mygraphic);
							testne.makedragable(Y);
							testne.redrawtext();

							//Y.on("click", handleClick, ".neicons");
							Y.delegate("click", ManagedObject.handleClick,
									"#container", ".neicons");

							var handleDrag = function() {
								testne.redrawtext();
								myne.redrawtext();
							};

							Y.DD.DDM.on('drag:drag', handleDrag);

						});//end if AUI.use

			});//end of AYU.ready

	/**----------------------------------------------
	 ** Class and function defnitions
	 **----------------------------------------------*/

	//For google maps
	function <portlet:namespace/>initialize() {
		var mapOptions = {
			center : new google.maps.LatLng(12.9715987, 77.5945627),
			zoom : 10,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		var map = new google.maps.Map(document.getElementById("map_canvas"),
				mapOptions);
	}//End Google Map Initlization

	/**
	 * Class to model Postion
	 */
	function Position(lat, longt) {

		this.x = lat;
		this.y = longt;
	};

	/**
	 *Class to model the ManagedObject/NE
	 */
	function ManagedObject(name, pos) {

		this.name = name;
		this.alarmstate = 0;
		this.connectedto = null;
		this.pos = pos;
		this.ne;
		this.item;
		this.container;

		//constants      
		var alarmedcolor = "#ff3b41";//red
		var nonalarmedcolor = "#18de75";//green
		var nefillcolor = "#f0f0f0";//grey

		//Method to draw the circle
		this.draw = function(Y, mygraphic) {

			this.container = Y.one('#container');
			var strokecolour = alarmedcolor;
			if (this.alarmstate === 0) {//no alarms
				strokecolour = nonalarmedcolor;
			}

			ne = mygraphic.addShape({
				id : this.name,
				type : "circle",
				radius : 7,
				x : pos.x,
				y : pos.y,

				fill : {
					color : nefillcolor
				},
				stroke : {
					weight : 3,
					color : strokecolour
				}
			});

			ne.addClass('neicons');
			this.item = Y.Node.create('<p>' + this.name + '</p>');

			return ne;

		};// end function draw

		//Function to make the NE image Draggable
		this.makedragable = function(Y) {

			var dd = new Y.DD.Drag({
				node : this.ne
			});

			var xy = this.ne.getXY();
			this.item.setStyle('position', 'relative');
			//this.item.setStyle('zIndex', '-1');
			this.item.setXY(xy);
			this.container.append(this.item);

		};
		//end of function make draggable

		//Function to draw the NE label text
		this.redrawtext = function(Y) {

			var xy = this.ne.getXY();
			this.item.setY(xy[1]);
			this.item.setX(xy[0] + 17);
		};

	};//End class ManagedObject    

	ManagedObject.handleClick = function(e) {
		e.preventDefault();
		var nename = this.get('id');

		alert('event: ' + nename + ' target: ' + e.target.get('tagName'));
		doAJAX('<portlet:resourceURL></portlet:resourceURL>');

	};

	//Procedure for postioning the elements based on window height
	function <portlet:namespace/>resize(Y, bounds) {

		//var myNode = Y.one(document.body);
		//var width = myNode.get('winWidth');
		//var height = myNode.get('winHeight');

		//TODO:Check if there is another way to find portal id

		var height = Y.one('#portlet_ElementView_WAR_ElementViewportlet')
				.getStyle('height');
		var width = Y.one('#portlet_ElementView_WAR_ElementViewportlet')
				.getStyle('width');

		var heightInt = parseInt(height);
		var widthInt = parseInt(width);

		var container = Y.one(bounds);
		//var width = (widthInt / 3) + 'px';
		//var height = (heightInt / 2) + 'px';
		var width = (widthInt) + 'px';
		var height = (heightInt) + 'px';

		container.setStyle('position', 'relative');
		container.setStyle('height', height);
		container.setStyle('width', width);
		container.setStyle('top', 0);
		container.setStyle('left', 0);
		container.setStyle('bottom', 0);
		container.setStyle('right', 0);

		var getnes_button = Y.one('#getnes');
		getnes_button.setStyle('position', 'relative');
		getnes_button.setStyle('top', '80%');
		getnes_button.setStyle('float', 'right');
		getnes_button.setStyle('margin', '5px');
	}

	function doAJAX(queryString) {

		console.log("queryString="+queryString);
		
		AUI().use([ 'aui-io-request', 'json-stringify' ], function(Y) {

			var data = {
				userID : "test"
			};
			
			var jsonStr = Y.JSON.stringify(data);
			console.log(jsonStr);
			
			var url = '<%= ajaxCallResourceURL.toString() %>';
			console.log("queryString="+url);
			
			Y.io.request(
				//queryString,
				url,
				{
				//data to be sent to server
				data: {
					userID: 'Alex',
				},
				dataType : 'json',
				on : {
					success : function(id, obj) {

						alert(this.get('responseData').value);
					},
					failure : function() {
						alert('Error deleting the notification.');
					}
				}
			});

		});

	};
</script>



<div id="container" style="width: 100%; height: 100%">

	<div id="map_canvas" style="width: 100%; height: 100%"></div>

	<portlet:actionURL var="actionUrl" name="getMOs" />
	<form id="getnes" action='<%=actionUrl%>' method='POST'>
		<input type='submit' value='Refresh Elements' title='<%=actionUrl%>' />
	</form>

   

	 <portlet:resourceURL var="jsonVar" id="jsonID2">
		<portlet:param name="userID" value="Alex" />
	</portlet:resourceURL>

	<a href="javascript:;" onclick="doAJAX('<%=jsonVar%>');"
		title="someTitle">Okay Ajax Test</a> 

</div>