Cómo mostrar una página de error estática en una ruta no válida en ojet.

Answer

1. 

   davy.ai

   July 29, 2023 at 7:21 pm

   Para mostrar una página de error en una aplicación Oracle Ojet cuando alguien ingresa una URL inválida, puedes crear una ruta en el archivo appController.js que capture todas las rutas inválidas y proporcione una página de error personalizada.

   Aquí tienes un ejemplo de cómo agregar esta ruta al archivo appController.js:

   // agregar ruta para capturar rutas inválidas
   define(['appController'], function(appController) {
       appController.addTransition({
           pattern: 'invalidRoute',
           redirect: 'error'
       });
   });
   

   En este ejemplo, utilizamos el método addTransition para agregar una nueva ruta. La propiedad pattern especifica el patrón de ruta a coincidir, que en este caso es invalidRoute. La propiedad redirect especifica a dónde redirigir al usuario cuando se ingresa una ruta inválida, en este caso a la ruta error.

   A continuación, puedes crear un nuevo archivo error.js en el directorio viewModels de tu aplicación, que contendrá la lógica para mostrar la página de error. Aquí tienes un ejemplo de cómo podría lucir el archivo error.js:

   define(['ojs/ojcore', 'knockout', 'ojs/ojknockout'], function(oj, ko) {
       function ErrorViewModel() {
           var self = this;
   
           // mensaje a mostrar en la página de error
           self.errorMessage = ko.observable('La página que solicitaste no existe.');
   
           // botón de navegación para regresar a la página de inicio
           self.goHome = function() {
               oj.Router.rootInstance.go('home');
           };
       }
   
       return new ErrorViewModel();
   });
   

   En este ejemplo, estamos definiendo un nuevo modelo de vista para la página de error. El modelo de vista tiene dos propiedades: errorMessage y goHome. errorMessage contiene el mensaje a mostrar al usuario en la página de error, y goHome proporciona un botón que permite al usuario regresar a la página de inicio.

   Finalmente, puedes crear un nuevo archivo HTML en el directorio views de tu aplicación que contenga el marcado para mostrar la página de error. Aquí tienes un ejemplo de cómo podría lucir el archivo error.html:

   <div class="oj-flex oj-flex-items-pad oj-sm-align-items-center oj-md-align-items-center oj-lg-align-items-center oj-xxl-align-items-center oj-margin">
       <div class="oj-flex-item oj-sm-3 oj-md-3 oj-lg-3 oj-xxl-3 oj-padding">
           <h1>¡Oops!</h1>
           <p data-bind="text: errorMessage"></p>
           <button id="home-btn" class="oj-button oj-button-secondary" data-bind="click: goHome">
               <span>Ir a Inicio</span>
           </button>
       </div>
   </div>
   

   En este ejemplo, estamos utilizando el diseño Flex de Oracle JET para centrar el mensaje de error y el botón de navegación en la página. Los atributos data-bind se utilizan para enlazar las propiedades y métodos del modelo de vista con los elementos HTML.

   Una vez que hayas creado estos archivos, cualquier ruta inválida se redireccionará a la página de error donde se mostrará el mensaje de error junto con el botón “Ir a Inicio”.

Comments are closed.