 |
| Photo by Hello I'm Nik 馃嚞馃嚙 on Unsplash |
Antes de esto vale la pena destacar que al ser Sling un web framework orientado a recursos, toda petici贸n Http debe apuntar a un recurso (ya sea un nodo JCR, un archivo o una base de datos), por lo tanto, si al momento de resolver la petici贸n http Sling no encuentra un recurso para esa petici贸n, devolver谩 un error 404 indicando que el recurso no se encuentra disponible.
Una vez explicado esto procedamos con la creacion de nuestro ejmplo, para esto vamos a usar CRXDE-Lite, el cual es un entorno de desarrollo o un visualizar de nodos JCR que AEM trae integrado.
Podemos acceder a este desde la pagina de inicio de AEM, ingresando a localhost (http://localhost:4502/aem/start.html), luego hacemos clic en el icono de herramientas, luego clic en General y finalmente clic en la tarjeta CRXDE-Lite, como se muestra en la siguiente imagen:
o simplemente digitamos en nuestro navegador: http://localhost:4502/crx/de/index.jsp#, esto nos llevara a una pagina como la que se muestra a continuaci贸n:
Una vez aqu铆, procedemos a crear una carpeta la cual contendr谩 nuestro ejemplo, para esto expandimos el nodo apps, hacemos clic derecho y luego en crear nuevo folder, y le ponemos el nombre miejemplo:
Realizando este mismo proceso, vamos a crear varias carpetas mas dentro de la carpeta miejemplo, primero creamos la template, luego creamos carpeta components, dentro de esta creamos la carpeta structure, y la carpeta con el nombre content, nos quedar铆a algo as铆, (RECUERDA DALER CLIC EN SAVE ALL UNA VEZ HAGAS TUS CAMBIOS):
->miejemplo
-> componentes
-> structure
-> content
-> template
Una vez creamos la estructura de nuestras carpetas, procedemos a crear nuestro componente, para esto hacemos clic derecho sobre la carpeta structure, luego clic en crear, crear component:
Procedemos a llenar la information que nos solicita:
En Label: ponemos mipagina, la cual sera el nombre del node JCR
En Title: para simplicidad ponemos mipagina
En Descipction: ponemos una breve descripci贸n de nuestro component y
Finalmente en Super Type ponemos el component que se va a renderizar en nuestra pagina web que en este caso es un componete page del core wcm/foundation de AEM
Finalmente nos quedar谩 algo como se muestra en la siguiente imagen:
Como podemos observar CRXDE nos crea por defecto un scritp jsp con el mismo nombre de nuestro componente. Adobe a partir de las nuevas versiones de AEM introdujo HTL como nuevo lenguaje de programaci贸n para la creaci贸n de los componentes, es bueno seguir esta recomendaci贸n por lo tanto procedemos a renombrar este archivo mipagina.jsp a mipagina.html, y reemplazamos su contenido por el siguiente:
<html>
<head>
</head>
<body>
<h1>Hola desde el componete mipagina en AEM</h1>
</body>
</html>
Para poder renderizar nuestro componente necesitamos crear un nodo que apunte a nuestro componente, para esto vamos a la carpeta content en la raiz de CRXDE-Lite, y creamos un nuevo nodo como lo indica la siguiente imagen:
Hay que recordar que toda petici贸n http debe estar mapeada a un recurso en AEM, por esto es necesario indicarle al nodo que acabamos de crear que el componente que va a renderizar es el componente mipagina, esto lo hacemos asignandole a la propiedad sling:resourceType la ruta de nuestro componente mipagina (/apps/miejemplo/components/structure/mipagina):
Una vez hecho esto, podemos ver nuestro componente renderizado en el navegador, para esto, vamos a nuestro navegador y en nuestra instancia local de AEM le agregamos la ruta del nodo que creamos previamente, agregandole la extension que queremos renderizar /content/muestramipagina.html que en este caso es .html, nuestra ruta final quedar铆a de la siguiente manera: http://localhost:4502/content/muestramipagina.html
Y es de as铆 como finalmente podemos ver nuestro componente renderizado:
Una vez tenemos listo nuestro componentes, vamos a explicar como sling resuelve estas peticiones a trav茅s de una series de pasos:
- Primero Sling descompone la URL(http://localhost:4502/content/muestramipagina.html)
- primero determina el protocolo http
- luego el host y el puerto localhost:4502
- luego la ruta del nodo en la carpeta content content/muestramipagina
- Si hay selectores extrae los selectores, en este caso no tenemos selectores pero si los hubiera seria todo lo que hay antes de la extension .html y despu茅s de content/muestramipagina, ser铆a algo como: content/muestramipagina.selector1.selector2.html
- y por ultimo la extension, cabe destacar que aparte de la extension pueden haber sufijos y parametros de la forma content/muestramipagina.selector1.selector2.html/sf1?id=123
- Seguido de esto Sling buscar铆a una URL o Servlet que redireccionar铆a nuestra petici贸n pero como este no es el caso pasamos al siguiente paso
- El cual seria buscar el nodo indicado en la URL el cual ser铆a content/muestramipagina
- Si el nodo existe Sling procede a resolver el recurso solicitado usando la propiedad sling:resourceType
- Finalmente Sling procede a resolver el script de renderizado e imprimirlo en nuestro navegador, para este caso ser铆a el script por defecto mipagina.html
En resumen, estos son los pasos b谩sicos que lleva a cabo Sling para resolver las peticiones Http, falta mencionar el caso cuando hay selectores, este caso lo veremos en futuros pots.
Muchas gracias por su atenci贸n, sientanse libres de corregirme cualquier error o solicitarme alguna mejora.
Lecturas recomendadas
