Get it on Google Play

Formación Liferay: Formularios con AngularJS en Portlets Liferay

22-02-2016
 
Angularjs love Liferay :D

Angularjs love Liferay 😀

Para empezar a usar AngularJS en un portlet lo primero que deberemos hacer es incluirlo en la página. Esto lo podremos hacer poniéndolo en la cabecera del theme, y estará disponible para todas las páginas, o lo incluimos en nuestro portlet:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="/mi-portlet/js/app.js?ver=${ver}"></script>

Vemos que también he incluido el fichero ‘app.js’ donde incluiremos el código Javascript de nuestra aplicación. Fijaros que le he añadido el parámetro ‘ver’, de esta manera cuando cambiemos el código el navegador refrescará la versión del fichero Javascript.

Lo siguiente será crear nuestro formulario HTML, en mi caso, un formulario con nombre y teléfono:

<div ng-app="lostsysApp">
	<div class='form' ng-controller="mainController">

		<div class='field'>
			<label>Nombre</label>
			<input type="text" ng-model="nombre" class="form-control input-lg text-center" maxlength="255" />
		</div>
		
		<div class='field'>
			<label>Teléfono</label>
			<input type="text" ng-model="telefono" class="form-control input-lg text-center" maxlength="255" />
		</div>

		<div class='field'>
			<a id="submitbutton" href="#" ng-click="submitForm($event)" class="action loader">Enviar</a>
		</div>

	</div>
</div>
	

Esto es básicamente una vista con la estructura estándar de Angular. Ahora declararemos la URL con la que haremos las peticiones al controlador del portlet:

<portlet:actionURL name='saveForm' windowState="EXCLUSIVE" var='serverUrl' />

<script>
	serverUrl='${serverUrl}';
</script>

Ahora viene la parte donde construimos la aplicación Javascript con Angular, lo importante es ver como lo hago para usar la URL de acción:

var serverUrl='';

app.controller('mainController',function ($scope, $http) {
	$scope.nombre="";
	$scope.telefono="";

	(function init() {
		/* Inicializamos */
		})();

    $scope.submitForm = function($event) {
		$event.preventDefault();

		$http.post( serverUrl, { 
			nombre: $scope.nombre,
			telefono: $scope.telefono,
			}).success(function(data) {
				
			        if ( data.success )
			        	$("#errors").append("<div class='alert-info'>"+data.success+"</div>" );
			        
			        if ( data.err ) {
			        	$("#errors").append("<div class='alert-error'>"+data.err+"</div>" );
			        	}
	                
	                }).error(function(data) {
	                        console.log('Error: ' + data);
	                });

		}

   
	});

Finalmente, ya solo nos queda procesar el formulario en la classe controladora de nuestro portlet. La complicación aquí radica en que AngularJS envía los datos al Portlet en formato JSON y hay que obtener los campos de el(Para esto Liferay nos provee de la classe JSONFactoryUtil):

public void saveForm(ActionRequest actionRequest, ActionResponse actionResponse) {
	ThemeDisplay themeDisplay=(ThemeDisplay) actionRequest.getAttribute( WebKeys.THEME_DISPLAY );
	JSONObject params=readJSONParams(actionRequest);

	try {
		System.out.println( "Procesando formulario: "+params );
	} catch (Exception ex) {
		ex.printStackTrace();

		actionResponse.setRenderParameter("renderjson", "{ \"err":\"Error writting data. Please contact administrator.\"}");
		}

	actionResponse.setRenderParameter("renderjson", "{\"success\":\"Los datos se han procesado correctamente\"}");
	}

public JSONObject readJSONParams(ActionRequest actionRequest) {
	try {
		String encoding=actionRequest.getCharacterEncoding();

		byte[] tempStorage = new byte[1024];
	    	StringBuilder json = new StringBuilder();
			
		BufferedReader in = new BufferedReader(
				new InputStreamReader( actionRequest.getPortletInputStream(), encoding )
				);
			
		String inputLine;
		while ((inputLine = in.readLine()) != null) {
			json.append( new String( inputLine.getBytes("UTF-8") ) );
			json.append("\n");
			}
		    
        	in.close();
	        
        	return JSONFactoryUtil.createJSONObject( js );
    	} catch (Exception ex) { ex.printStackTrace(); }		
		
	return null;
	}

Conclusiones

Como veis, usar AngularJS en Liferay es muy sencillo, la única complicación extra que añade es gestionar el envío de datos por JSON(Liferay provee una clase para gestionarlo) y la gestión de las URL de acción(Que ya veis que se solventa fácil).

Además el uso del Framework AngularJS hace que nuestras aplicaciones tengan una estructura mucho mas robusta.

Interesado en formación Liferay?

 

Comments

3 Responses to “Formación Liferay: Formularios con AngularJS en Portlets Liferay”
  1. Roberto says:

    Muchas gracias por el ejemplo, es muy explicativo pero creo que te falta inicializar la variable app con ng-app en el js.

  2. Hola Albert,

    Estamos usando Liferay 6.2 como portal de nuestras apps basadas en Portlets y al ver que Liferay 7 es Responsive, quisiéramos crear algun portlet sencillo con AngularJS y encuentro a faltar en tu explicación algun link con la descarga de los ficheros indicados en tu publicación. ¿ No tendrás algun zip con ellos y dónde ubicarlos ?

    Logicamente hemos estado probando de crear uno de muy sencillo (crear una etiqueta INPUT y poner el resultado en un ) y no funciona, algo nos estamos dejando.

    Te agradeceré cualquier ayuda.

    Gracias avanzadas

  3. Hola Jordi,

    Lamentablemente ya no tengo el código de este ejemplo. Pero no debería ser difícil de reproducirlo para alguien con conocimientos de como funciona un portlet. Solamente tiene un JSP, un archivo javascript y la classe controladora del portlet.

    Saludos,

Leave a Reply

© Albert Coronado Calzada