Cómo crear fichas (con AngularJS)¶
★★★ Avanzado - Tiempo: 45 minutos
Con este tutorial aprenderá a crear fichas con AngularJS. Estas fichas serán totalmente personalizables y reutilizables en cualquier panel o elemento de contenido creado con HTML/CSS en Opendatasoft.
En este tutorial, aprenderá a utilizar 4 directivas AngularJS:
ng-ifng-clickng-classng-init
REQUISITOS PREVIOS
Para probar este tutorial o integrar las fichas en una página ya existente, debe tener acceso al back office de un portal Opendatasoft y disponer del permiso “Editar todas las páginas”.
Dado que este tutorial está categorizado con el nivel de dificultad “Avanzado”, suponemos que ya tiene los conocimientos suficientes de HTML y CSS para reconocer y entender sus estructuras y funcionamiento. No obstante, se explicarán en detalle otros elementos más técnicos.
Crear la estructura
1 + En este tutorial crearemos 3 fichas, teniendo en cuenta que cada una de las fichas consta de un título de ficha interactivo y del contenido de la ficha. En el código, gestionaremos los títulos de las fichas por una parte y el contenido de las fichas por otra. ¡Vamos a empezar con la estructura de los títulos de las fichas! Ponga cada uno de los títulos de las fichas en una etiqueta <a> y todas las etiquetas <a> dentro de una etiqueta <div>.
Nota
En este tutorial, hemos decidido poner los títulos de las fichas en una etiqueta <a> por motivos de accesibilidad. Esta etiqueta también es práctica porque permite visualizar todos los títulos en la misma línea. Si se siente lo suficientemente cómodo con HTML/CSS, puede poner los títulos de las fichas en otra etiqueta, pero tenga presente que probablemente tendrá que usar más CSS para conseguir la misma apariencia que en este tutorial.
Nota
Dependiendo de si prueba este tutorial en una página nueva o un panel ya existente, tal vez vea las etiquetas <div class="container"> y <div class="ods-box">: ambas son etiquetas predeterminadas que crean el marco predeterminado de cualquier página de Opendatasoft. Si quiere conservar este marco, asegúrese de añadir el código del tutorial entre estas etiquetas predeterminadas.
<div class="container-fluid">
<div class="ods-box">
<div>
<a>1st tab title</a>
<a>2nd tab title</a>
<a>3rd tab title</a>
</div>
</div>
</div>
2 + Justo debajo de los títulos de las fichas, vamos a añadir el contenido de las fichas. Ponga cada uno de ellos en una etiqueta <div>.
<div class="container-fluid">
<div class="ods-box">
<div>
<a>1st tab title</a>
<a>2nd tab title</a>
<a>3rd tab title</a>
</div>
<div>
Content of first tab
</div>
<div>
Content of second tab
</div>
<div>
Content of third tab
</div>
</div>
</div>
3 + Ahora que ya tenemos la base, debemos añadir CSS para que las fichas tengan la apariencia adecuada. Vaya a la sección CSS de la página en que está trabajando.
4 + En primer lugar, cree la clase CSS predeterminada que se aplicará a cada uno de los títulos de las fichas. En este caso, trabajaremos especialmente con la propiedad padding para que las fichas aparezcan como 3 elementos distintos. También cambiaremos el color del texto.
Nota
Para este tutorial, se han añadido comentarios en el código CSS. Son recordatorios acerca de qué clase o propiedad hace qué. Si se siente cómodo con CSS, puede eliminar estos comentarios. Además, se ha elegido el nombre de la clase CSS, tab, porque es fácil de leer y permite entender a qué elemento HTML se aplicará. Si lo desea, puede cambiarle el nombre.
.tab {
padding: 10px 20px; /* Gives some space to tab titles */
color: gray; /* Colors the text in gray */
}
5 + Vuelva a la sección HTML de la página en que está trabajando. Una vez creada la clase CSS, podemos aplicarla a las etiquetas HTML que contienen los títulos de las fichas.
<div class="container-fluid">
<div class="ods-box">
<div>
<a class="tab">1st tab title</a>
<a class="tab">2nd tab title</a>
<a class="tab">3rd tab title</a>
</div>
<div>
Content of first tab
</div>
<div>
Content of second tab
</div>
<div>
Content of third tab
</div>
</div>
</div>
6 + En segundo lugar, vamos a dar un poco más de estilo al contenido de las fichas. En esta ocasión, en lugar de crear una nueva clase CSS, vamos a usar una ya existente. ods-box es un estilo CSS predeterminado de Opendatasoft que delimita los elementos HTML con un borde fino. Nos ayudará a crear la impresión de que el contenido de las fichas está un poco más ‘’afuera’’ que el contenido restante de la página. Añada una etiqueta <div> para delimitar todo el contenido de las fichas, con la clase CSS ods-box dentro.
<div class="container-fluid">
<div class="ods-box">
<div>
<a class="tab">1st tab title</a>
<a class="tab">2nd tab title</a>
<a class="tab">3rd tab title</a>
</div>
<div class="ods-box">
<div>
Content of first tab
</div>
<div>
Content of second tab
</div>
<div>
Content of third tab
</div>
</div>
</div>
</div>
7 + Revise la vista previa de la página. ¡Ya hemos creado la estructura de las fichas!
Añadir AngularJS
8 + ¡Es el turno de AngularJS! Tendremos que utilizar 4 directivas AngularJS para que las fichas funcionen. Empezaremos con ng-click. Esta directiva se utiliza básicamente para indicar a AngularJS qué hacer cuando se hace clic en un elemento HTML. En este caso, ng-click nos permitirá pasar de una ficha a otra.
Antes que nada, veamos la sintaxis para entender cómo utilizar la directiva ng-click.
ng-click="myvariable = 'myvalue'"
ng-click es la directiva AngularJS. Siempre va seguida de un signo de igual = que indica que lo que va a continuación es una expresión. Esta expresión será evaluada por la directiva y debe escribirse siempre entre comillas dobles ".
En la expresión, asignaremos un valor a una variable. En este punto no existe ni la variable ni el valor, por lo que debemos crearlos.
Primero viene la variable. La variable es el vínculo entre todas las directivas AngularJS que se usarán a lo largo del tutorial. Elija un nombre descriptivo, para que el código sea comprensible para cualquier persona ajena. En este tutorial, la variable se denominará
tabselector.En segunda posición viene un signo de igual
=que separa la variable del valor.En tercera posición viene el valor. Debe escribirse siempre entre comillas simples
'. El valor es el identificador de una ficha. Cada una de las fichas creadas debe tener su propio identificador. De nuevo, cerciórese de que el nombre del valor sea descriptivo. En este tutorial, tendremos 3 valores para las 3 fichas, y las llamaremosfirsttab,secondtabythirdtab.
9 + Añada la directiva ng-click en la etiqueta HTML <a> de cada uno de los títulos de las fichas. En este punto, hemos indicado a AngularJS que tenemos 3 entidades interactivas distintas: nuestros 3 títulos de fichas.
<div class="container-fluid">
<div class="ods-box">
<div>
<a class="tab" ng-click="tabselector = 'firsttab'">1st tab title</a>
<a class="tab" ng-click="tabselector = 'secondtab'">2nd tab title</a>
<a class="tab" ng-click="tabselector = 'thirdtab'">3rd tab title</a>
</div>
<div class="ods-box">
<div>
Content of first tab
</div>
<div>
Content of second tab
</div>
<div>
Content of third tab
</div>
</div>
</div>
</div>
10 + ¡Y ahora a por ng-if! La directiva ng-if es una expresión condicional que determina si un elemento HTML debe visualizarse o no. En este caso, ng-if nos permitirá visualizar el contenido adecuado de la ficha al hacer clic en un título de ficha.
Veamos la sintaxis para entender cómo utilizar la directiva ng-if.
ng-if="myvariable == 'myvalue'"
La estructura de la directiva ng-if es la misma que la de ng-click. El nombre de la directiva va seguido de un signo de igual = y la expresión que será evaluada por la directiva ng-if se escribe entre comillas dobles ".
Pero la sintaxis varía un poco. En la expresión:
La variable es la misma que hemos creado en el paso 8.
Aquí es donde la sintaxis cambia: esta vez, la variable y el valor deben ir separados por 2 signos de igual
==. Esto indica que expresamos una condición.El valor (escrito entre comillas simples
') es el mismo que hemos creado en el paso 8.
En definitiva, la sintaxis de ng-if puede leerse así: “Si myvariable es igual a myvalue, [visualizar el contenido del elemento HTML correspondiente a myvalue]”.
11 + Añada la directiva ng-if en la etiqueta HTML <div> del contenido de cada una de las fichas. No olvide poner los 3 valores para el contenido de las 3 fichas. En este punto, hemos indicado a AngularJS qué contenido de ficha debe visualizar en función del título de ficha seleccionado.
<div class="container-fluid">
<div class="ods-box">
<div>
<a class="tab" ng-click="tabselector = 'firsttab'">1st tab title</a>
<a class="tab" ng-click="tabselector = 'secondtab'">2nd tab title</a>
<a class="tab" ng-click="tabselector = 'thirdtab'">3rd tab title</a>
</div>
<div class="ods-box">
<div ng-if="tabselector == 'firsttab'">
Content of first tab
</div>
<div ng-if="tabselector == 'secondtab'">
Content of second tab
</div>
<div ng-if="tabselector == 'thirdtab'">
Content of third tab
</div>
</div>
</div>
</div>
12 + ¡Es la hora de ng-init! Esta directiva se utiliza para inicializar una variable: en definitiva, significa que cuando se carga una página web, el código subyacente de esa página se leerá de la primera a la última línea. ng-init indicará que a partir de ahí se usará AngularJS, y qué variable se usará. En este caso, ng-init también servirá para indicar qué contenido de ficha debe visualizarse de forma predeterminada.
Veamos la sintaxis para entender cómo utilizar la directiva ng-init.
ng-init="myvariable = 'myvalue'"
La sintaxis de la directiva ng-init coincide exactamente con la de ng-click (consulte el paso 8).
En la expresión:
La variable es la misma que hemos creado en el paso 8 y hemos venido utilizando en adelante.
El valor (escrito entre comillas simples
') es el identificador de la ficha cuyo contenido se visualizará de forma predeterminada.
13 + Añada la directiva ng-init en una etiqueta HTML que delimita todo el código de las fichas. Para este tutorial, como hemos creado una página nueva, el código de la página ya está delimitado por 2 etiquetas de marco predeterminadas: <div class="container-fluid"> y <div class="ods-box">. Por consiguiente, pondremos ng-init en la etiqueta <div class="ods-box"> predeterminada. ¡Nuestras fichas ya están plenamente operativas!
Nota
Si no ha creado una página nueva para este tutorial y no tiene estas etiquetas de marco predeterminadas, puede añadir la etiqueta <div> normal para delimitar el código de las fichas y añadir la directiva ng-init dentro.
<div class="container-fluid">
<div class="ods-box" ng-init="tabselector = 'firsttab'">
<div>
<a class="tab" ng-click="tabselector = 'firsttab'">1st tab title</a>
<a class="tab" ng-click="tabselector = 'secondtab'">2nd tab title</a>
<a class="tab" ng-click="tabselector = 'thirdtab'">3rd tab title</a>
</div>
<div class="ods-box">
<div ng-if="tabselector == 'firsttab'">
Content of first tab
</div>
<div ng-if="tabselector == 'secondtab'">
Content of second tab
</div>
<div ng-if="tabselector == 'thirdtab'">
Content of third tab
</div>
</div>
</div>
</div>
14 + Revise la vista previa. Aunque en este momento las fichas ya están plenamente operativas, todavía falta algo. ¡No hay nada que indique la ficha que está seleccionada! Vamos a por ello, empezando por crear un estilo de tipo “ficha seleccionada”.
15 + Vuelva a la sección CSS de la página en que está trabajando, para crear un estilo específico que indique fácilmente qué ficha está seleccionada. En este caso, denominaremos la clase CSS activetab y jugaremos tanto con el color del texto como con un borde en negrita bajo el texto.
.activetab {
color: black; /* Colors the text in black */
border-bottom: 3px solid #2d2d2d; /* Underlines the text with a bold dark border */
}
16 + Vuelva a la sección HTML de la página en que está trabajando. Ahora aplicaremos nuestro estilo CSS con la ayuda de nuestra cuarta (¡y última!) directiva AngularJS: ng-class. Esta directiva es una expresión condicional que determina si una clase CSS se aplicará a un elemento HTML o no. En este caso, ng-class servirá para aplicar un estilo concreto a un título de ficha al seleccionarse.
Veamos la sintaxis para entender cómo utilizar la directiva ng-class.
ng-class="{'mycssclass' : myvariable == 'myvalue'}"
La estructura de la directiva ng-class es la misma que la de las demás directivas: el nombre de la directiva va seguido inmediatamente de un signo de igual = y la expresión que será evaluada por la directiva se escribe entre comillas dobles ".
Pero así es como debería ser la expresión de esta directiva:
La expresión también debe ir entre llaves
{}.Dentro de las llaves
{}, primero viene el nombre de la clase CSS que debe usarse. Debe escribirse entre comillas simples'.Justo después del nombre de la clase CSS, debe haber un carácter de dos puntos
:.A continuación viene la parte de variable/valor que es exactamente como la expresión
ng-if(consulte el paso 10). Debemos encontrar el nombre de la variable y el nombre del valor (entre comillas simples'). La variable y el valor tienen que separarse con 2 signos de igual==.
En definitiva, la sintaxis de ng-class puede leerse así: “mycssclass debe utilizarse cuando myvariable sea igual a myvalue”.
17 + Añada la directiva ng-class en la etiqueta HTML <a> de cada uno de los títulos de las fichas. No olvide poner los 3 valores correspondientes a los 3 títulos de fichas.
<div class="container-fluid">
<div class="ods-box" ng-init="tabselector = 'firsttab'">
<div>
<a class="tab" ng-click="tabselector = 'firsttab'" ng-class="{'activetab' : tabselector == 'firsttab'}">1st tab title</a>
<a class="tab" ng-click="tabselector = 'secondtab'" ng-class="{'activetab' : tabselector == 'secondtab'}">2nd tab title</a>
<a class="tab" ng-click="tabselector = 'thirdtab'" ng-class="{'activetab' : tabselector == 'thirdtab'}">3rd tab title</a>
</div>
<div class="ods-box">
<div ng-if="tabselector == 'firsttab'">
Content of first tab
</div>
<div ng-if="tabselector == 'secondtab'">
Content of second tab
</div>
<div ng-if="tabselector == 'thirdtab'">
Content of third tab
</div>
</div>
</div>
</div>
Finalizar las fichas
18 + ¡Nuestra ng-class ya funciona! Pero su apariencia no es nada bonita. ¡Regresemos a la sección CSS para darle los retoques finales! En este caso, vamos a añadir más espacio alrededor de los títulos de las fichas para evitar que el borde alcance el área del contenido de la ficha. Además, vamos a resaltar la posible selección de un título de ficha creando un estilo específico que solo esté visible cuando el cursor se desplace por encima de los títulos de las fichas.
.tabs {
margin: 1em; /* Adds lots of space around the tabs, to avoid the border to fall into the tab content area */
}
/* Only visible when the mouse is on a tab title */
.tab:hover {
color: black; /* Colors the text in black to highlight the possible selection */
text-decoration: none; /* Removes the hyperlink underline style */
}
19 + Vuelva a la sección HTML para aplicar el nuevo estilo CSS. Nuestra clase CSS tabs funcionará muy bien en la etiqueta div que delimita todos los títulos de las fichas. Como con tab:hover, puesto que se ha incorporado en la parte superior de la clase CSS tab principal, automáticamente se aplica a todos los elementos HTML con la clase CSS tab.
<div class="container">
<div class="ods-box" ng-init="tabselector = 'firsttab'">
<div class="tabs">
<a class="tab"
ng-click="tabselector = 'firsttab'"
ng-class="{'activetab' : tabselector == 'firsttab'}">1st tab title</a>
<a class="tab"
ng-click="tabselector = 'secondtab'"
ng-class="{'activetab' : tabselector == 'secondtab'}">2nd tab title</a>
<a class="tab"
ng-click="tabselector = 'thirdtab'"
ng-class="{'activetab' : tabselector == 'thirdtab'}">3rd tab title</a>
</div>
<div class="ods-box">
<div ng-if="tabselector == 'firsttab'">
Content of first tab
</div>
<div ng-if="tabselector == 'secondtab'">
Content of second tab
</div>
<div ng-if="tabselector == 'thirdtab'">
Content of third tab
</div>
</div>
</div>
</div>
20 + ¡Genial! ¡Hemos creado nuestras propias fichas! Solo resta sustituir el texto de ejemplo por contenido real.
Puede elegir los títulos de las fichas y añadir su propio contenido de las fichas. A los efectos de este tutorial, completaremos las fichas con el conjunto de datos Shanghai World University Ranking. La primera ficha contendrá la visualización de tabla; la segunda, un mapa creado con el Compilador de mapas; y la tercera, una visualización de gráfico. Por supuesto, cada uno de los títulos de las fichas dará una idea de su contenido y estará precedido de un icono Font Awesome (¡para darle un toque especial!).
<ods-dataset-context context="worlduniversityranking"
worlduniversityranking-dataset="shanghai-world-university-ranking@public">
<div class="container">
<div class="ods-box" ng-init="tabselector = 'firsttab'">
<div class="tabs">
<a class="tab"
ng-click="tabselector = 'firsttab'"
ng-class="{'activetab' : tabselector == 'firsttab'}"><i class="fa fa-list-ol" aria-hidden="true"></i>
Full list</a>
<a class="tab"
ng-click="tabselector = 'secondtab'"
ng-class="{'activetab' : tabselector == 'secondtab'}"><i class="fa fa-map" aria-hidden="true"></i>
World map</a>
<a class="tab"
ng-click="tabselector = 'thirdtab'"
ng-class="{'activetab' : tabselector == 'thirdtab'}"><i class="fa fa-area-chart" aria-hidden="true"></i>
Top 20 ranking</a>
</div>
<div class="ods-box">
<div ng-if="tabselector == 'firsttab'">
<h3>
University list
</h3>
<h5>
Sorted by rank
</h5>
<ods-table context="worlduniversityranking"></ods-table>
</div>
<div ng-if="tabselector == 'secondtab'">
<h3>
University map
</h3>
<h5>
Colored by # of university
</h5>
<ods-map no-refit="true"
scroll-wheel-zoom="false"
display-control="false"
search-box="false"
toolbar-fullscreen="false"
toolbar-geolocation="false"
basemap="mapbox.light">
<ods-map-layer-group>
<ods-map-layer context="worlduniversityranking"
color-numeric-ranges="{'15':'#FFFFFF','50':'#C8CDE3','200':'#929BC8','400':'#5C69AD','2500':'#263892'}"
color-undefined="#1B5AA5"
color-out-of-bounds="#1BA566"
color-numeric-range-min="1"
display="choropleth"
function="COUNT"
expression="total_score"
shape-opacity="0.8"
point-opacity="1"
border-color="#555555"
border-opacity="0.8"
border-size="1"
border-pattern="solid"
caption="true"
title="Shanghai world university ranking"></ods-map-layer>
</ods-map-layer-group>
</ods-map>
</div>
<div ng-if="tabselector == 'thirdtab'">
<h3>
Top 20 university
</h3>
<h5>
by average score
</h5>
<ods-chart single-y-axis="true"
single-y-axis-label="University average score"
display-legend="false"
labels-x-length="35"
align-month="true">
<ods-chart-query context="worlduniversityranking"
field-x="university_name"
maxpoints="20"
sort="serie1-1">
<ods-chart-serie expression-y="total_score"
chart-type="column"
function-y="AVG"
color="#263892"
display-units="false"
display-values="true">
</ods-chart-serie>
</ods-chart-query>
</ods-chart>
</div>
</div>
</div>
</div>
</ods-dataset-context>
¡ENHORABUENA!
Ha completado este tutorial y ahora ya sabe cómo crear fichas con AngularJS. ¡Esperamos que se sienta lo suficientemente cómodo con el uso de ng-click, ng-if, ng-init y ng-class para hacerlo por sí solo en adelante!