Como visteis en artículo anterior de navegación y enrutamiento en SAPUI5, cuando se realiza la configuración de las rutas es necesario definir un patrón. En este articulo explicaré los diferentes patrones que podremos utilizar.
Cuando el hash se añade a la url, el Router realizará la comparación con los patrones configurados y navegará a la primera coincidencia. Por ese motivo, es conveniente que los patrones sean diferentes entre sí, para un correcto funcionamiento de la navegación en nuestras aplicaciones.
A continuación, veremos los dos tipos de patrones que podremos definir:
- Patrón Hard-code
El hash deberá coincidir exactamente con el patrón. Por ejemplo, si el definimos el siguiente patrón, “producto/configuración”. Únicamente, coincidirán si el hash es exactamente igual al patrón. Con este tipo de patrón, no es posible pasar datos entre vistas.
- Patrón con parámetros
Si queremos pasar datos entre vista, deberemos utilizar los patrones con parámetros. Podremos utilizar cuatro tipos de parámetros a la hora de definir los patrones.
1. Parámetros obligatorios
Puede definir parámetros obligatorios para el patrón colocando el parámetro entre llaves “{ID del parámetro}”.
Por ejemplo, si definimos un patrón “producto/{id}”, los hash-es “producto/5” y “producto/3”, coincidirán con el patrón. En cambio, el hash “producto/” no coincidirá con el patrón porque falta el parámetro obligatorio.
2. Parámetros opcionales
Puede definir parámetros opcionales para el patrón colocando el parámetro entre dos puntos “:ID del parámetro:”.
Por ejemplo, si definimos un patrón “/producto/{id}/detalle/:idDetalle:”, “idDetalle” será el parámetro opcional y “id” será el parámetro obligatorio. Si comparamos los hash-es “producto/5/detalle” y “producto/3/detalle/2”, ambos hash-es coincidirán con el patrón.
3. Parámetros de consulta
El parámetro de consulta permite pasar consultas con cualquier parámetro dentro de él. Un parámetro de consulta comienza con ?, y puede ser definido como obligatorio “producto{?query}” u opcional “producto:?query:”.
Podremos utilizar este tipo de parámetro para enviar un número de grande de parámetros, por ejemplo, “producto?id=5&detalle=7&fecha=20181221”. En la vista destino, en manejador del evento de navegación el parámetro de consulta se convertirá en un objeto, con el resto de parámetros como atributos.
4. Parámetro “rest as string”
Un parámetro que finaliza con un asterisco * se denomina parámetro «rest as string». Es posible definir el parámetro como obligatorio “{detalle*}” u opcional “:detalle*:”.
Por ejemplo, si definimos un patrón “producto/{id}/:detalle*:”, el parámetro “id” será obligatorio y el parámetro “detalle” será opcional del tipo “rest as string”. Si comparamos los siguientes hash-es “producto/5/3” y “producto/5/detalle/3/foo”, ambos coincidirán con el patrón. Al obtener el valor del parámetro detalle, en el primer caso recibiremos el valor “3” y el segundo “detalle/3/foo”.
Gracias a los diferentes tipos, podemos crear el patrón que mejor se adecue a nuestras necesidades, de una manera sencilla y clara.
Esperamos que este artículo te haya resultado de interés para realizar la configuración de las rutas con patrones. Puedes dejarnos tu pregunta en comentarios o ponerte en contacto con nuestro departamento de User Experience e Integración.
Área User Experience e Integración
