diff --git a/README.md b/README.md index 3e62ace..5d8d2f9 100644 --- a/README.md +++ b/README.md @@ -5,38 +5,35 @@ The main objective of this training is to familiarize yourself with concepts and Bonita Camp include both theoretical knowledge and hands on with exercises that let you build your first Bonita application. Bonita Camp comes with: -- A set of slides commented in a [series of videos](https://www.youtube.com/playlist?list=PLvvoQatxaHOMHRiP7hFayNXTJNdxIEiYp) (also available in [French](https://www.youtube.com/playlist?list=PLvvoQatxaHOPSATzZe-zPh-LrSNGfpQEf) and [Spanish](https://www.youtube.com/playlist?list=PLvvoQatxaHOOgWEMHZjk5rjc9qsCnh7bi)) or during live sessions - A set of exercises described on a [dedicated web site](http://bonitasoft-community.github.io/bonita-camp/) - [Exercises solutions](https://github.com/Bonitasoft-Community/bonita-camp/releases/latest) +- [Outdated - based on Bonita 2021.2] A set of slides commented in a [series of videos](https://www.youtube.com/playlist?list=PLvvoQatxaHOMHRiP7hFayNXTJNdxIEiYp) (also available in [French](https://www.youtube.com/playlist?list=PLvvoQatxaHOPSATzZe-zPh-LrSNGfpQEf) and [Spanish](https://www.youtube.com/playlist?list=PLvvoQatxaHOOgWEMHZjk5rjc9qsCnh7bi)) or during live sessions If you need assistance you can: -- Ask your question on our dedicated **Bonita Camp Discord channel** if you have attended a live session - Ask your question on **[Bonitasoft Community forum](https://community.bonitasoft.com/questions-and-answers)** - [Get in touch with Bonitasoft](https://www.bonitasoft.com/contact-us) to get more information about [support offering](https://www.bonitasoft.com/support) and additional features of Enterprise Edition Content is currently available in: -- English (Bonita Camp 2021.2) -- Français (Bonita Camp 2021.2) -- Español (Bonita BPM 2021.2) +- English +- Français +- Español - -## For Bonita Camp contributors +## For Bonita Camp Contributors ### Sources All sources are available on [Bonita Camp GitHub repository](https://github.com/Bonitasoft-Community/bonita-camp/): - -- Slides are created using reveal.js and are located in the [slides](https://github.com/Bonitasoft-Community/bonita-camp/tree/master/slides) folder +- Source files of slides based on h5p and generated htmls are located in the [h5p](https://github.com/Bonitasoft-Community/bonita-camp/tree/master/h5p) folder - Exercises are hosted using GitHub Pages. Source are located in the [docs](https://github.com/Bonitasoft-Community/bonita-camp/tree/master/docs) folder and content is available for users at **[http://bonitasoft-community.github.io/bonita-camp/](http://bonitasoft-community.github.io/bonita-camp/)** ### Build instructions for slides +Refer to h5p documentation at **[https://h5p.org/](https://h5p.org//)** + +### Archive +- Previous versions of slides are located in the [slides](https://github.com/Bonitasoft-Community/bonita-camp/tree/master/slides) folder + + + -1. Download and unzip [reveal.js](https://github.com/hakimel/reveal.js/archive/master.zip) -1. Paste the content of the `slides/THE_LANGUAGE/` folder into your `reveal.js` directory -1. Paste the content of the `slides/theme` folder in your `reveal.js/css/theme/source` folder -1. Run `npm install` -1. Run `npm install -g grunt-cli` -1. Run `grunt package` -1. Use the built zip package to share and run the presentation diff --git a/docs/en/images/self-contained-app-tomcat.png b/docs/en/images/self-contained-app-tomcat.png new file mode 100644 index 0000000..f946431 Binary files /dev/null and b/docs/en/images/self-contained-app-tomcat.png differ diff --git a/docs/en/images/self-contained-app.png b/docs/en/images/self-contained-app.png new file mode 100644 index 0000000..a46d9b2 Binary files /dev/null and b/docs/en/images/self-contained-app.png differ diff --git a/docs/es/00-introduction.md b/docs/es/00-introduction.md index 595b1ad..8758d64 100644 --- a/docs/es/00-introduction.md +++ b/docs/es/00-introduction.md @@ -5,15 +5,15 @@ title: Introducción El objetivo de los ejercicios es lograr producir un proceso básico de solicitud de vacaciones. El proceso será el siguiente: -1. Un empleado presenta una solicitud de licencia -1. El gerente del empleado decide si aprueba o no la solicitud. +1. Un empleado presenta una solicitud de vacaciones +1. El responsable directo del empleado decide si aprueba o no la solicitud. Para ello, tomaremos un enfoque iterativo alternando contenido teórico y ejercicios prácticos. Cada ejercicio proporciona una versión ejecutable cada vez más completa del proceso. Cada ejercicio se divide en 3 secciones: 1. **Objetivo**: presenta los conceptos claves a los que se dirige el ejercicio -1. **Resumen de instrucciones**: contiene los pasos principales para llevar a cabo el ejercicio -1. **Instrucciones paso a paso**: proporciona una descripción detallada paso a paso de los pasos para realizar el ejercicio +1. **Instrucciones resumidas**: contiene los pasos principales para llevar a cabo el ejercicio +1. **Instrucciones paso a paso**: proporciona una descripción detallada paso a paso de los pasos a seguir para realizar el ejercicio [Empezar el primer ejercicio](01-bpmn-design.md) diff --git a/docs/es/01-bpmn-design.md b/docs/es/01-bpmn-design.md index 820efce..eef61c6 100644 --- a/docs/es/01-bpmn-design.md +++ b/docs/es/01-bpmn-design.md @@ -1,5 +1,5 @@ --- -title: Ejercicio 1 - Modelado de procesos BPMN +title: Ejercicio 1 - Modelización de un proceso simple --- ## Objetivo @@ -7,15 +7,15 @@ title: Ejercicio 1 - Modelado de procesos BPMN El objetivo de este ejercicio es crear una primera versión "básica" del diagrama del proceso de solicitud de vacaciones. En esta etapa, el proceso es ejecutable pero aún no presenta interés funcional porque no tiene formularios ni datos. -Lo completaremos en los siguientes ejercicios. +Los completaremos en los siguientes ejercicios. -Nota: la validación de los diagramas en Bonita Studio debe activarse manualmente. Si corrigas un error o un mensaje de advertencia, debes ir a la pestaña **Estado de validación** y hacer clic en el botón **Refrezcar** o ir al menú **Archivo** y hacer clic en el botón **Validar**. +> Nota: la validación de los diagramas en Bonita Studio debe activarse manualmente. Si corriges un error o un mensaje de advertencia, debes ir a la pestaña **Estado de validación** y hacer clic en el botón **Refrescar** o ir al menú **Archivo**. -## Resumen de las instrucciones +## Instrucciones resumidas -Para hacer el ejercicio, crea un diagrama *DiagramaSolicitudVacaciones* que contenga un proceso *SolicitudVacaciones* en la versión *1.0.0*. +1. Crea un diagrama *DiagramaSolicitudVacaciones* que contenga un proceso *SolicitudVacaciones* en la versión *1.0.0*. -El grupo de procesos debe incluir los siguientes elementos BPMN: +1. Agrega a la definición de dicho proceso los siguientes elementos BPMN: * Un evento de inicio *Ingresar solicitud* * Una tarea humana *Validar solicitud* * Una puerta exclusiva *¿Solicitud aprobada?* @@ -29,63 +29,96 @@ El grupo de procesos debe incluir los siguientes elementos BPMN: ## Instrucciones paso a paso 1. Inicia Bonita Studio -1. En la página de inicio de Studio, haz clic en **Nuevo proyecto** en el menú Diseño. -1. Ingrese el nombre del proyecto _"SolicitudVacaciones"_. -1. Crea un nuevo diagrama de procesos +1. En la página de inicio de Studio o desde el menú **Archivo**, haz clic en **Nuevo proyecto**. +1. Ingresa el nombre del proyecto _"SolicitudVacaciones"_. +1. Deja los valores de los otros campos vacíos o los que vienen por defecto +1. Haz clic en **Crear** + +> Nota: Tienes la posbilidad de elegir de agregar *Extensiones* desde la creación del rpoyecto. Esto puede ser útil en un proyecto real pero en nuestro ejemplo, las extensiones las abordaremos más tarde. + +### Crea un diagrama *DiagramaSolicitudVacaciones* que contenga un proceso *SolicitudVacaciones* en la versión *1.0.0* + +1. Crea un nuevo diagrama de procesos. + - Ya sea desde la vista general del proyecto, sección _Diagrama de procesos_, haciendo clic en **Crear**, y después en **Crear un nuevo diagrama de procesos** + + ![Nouveau diagramme](images/ex01/ex1_11.png) + - O ya sea desde la barra de herramientas, haciendo clic en **Nuevo** y seleccionando **Diagrama de proceso**: ![nuevo diagrama de proceso](images/ex01/ex1_10.png) 1. Especifica el nombre del diagrama y el del proceso: - - Haz clic en el menú **Archivo / Renombrar Diagrama...** en la parte superior del Studio - - Ingresa *DiagramaSolicitudVacaciones* para el nombre del diagrama y *SolicitudVacaciones* para el del pool y *1.0.0* para la versión del diagrama y del pool + - En el **Explorador de proyectos**, selecciona el diagrama, da clic derecho con tu ratón y selecciona **Renombrar...** + - Ingresa *DiagramaSolicitudVacaciones* para el nombre del diagrama y *SolicitudVacaciones* para el de la *Pool* y *1.0.0* para la versión del diagrama y de la *Pool*    ![ventana emergente para cambiar el nombre y la versión del diagrama y del pool](images/ex01/ex1_01.png) -1. Cambia el nombre del evento de inicio a *Ingresar solicitud*: + +### Agrega a la definición de dicho proceso los elementos BPMN + +1. Cambia el nombre del evento de inicio : - Selecciona el evento de inicio presente en el diagrama - - Navega a la pestaña **General / General** y luego ingrese el nuevo nombre -1. Cambia el nombre de la tarea humana a *Validar solicitud* + - Navega a la pestaña **General / General** e ingresa el nuevo nombre: *Ingresar solicitud* + +1. Siguiendo los mismos pasos, cambia el nombre de la tarea humana a *Validar solicitud* + 1. Agrega una puerta exclusiva *¿Solicitud aprobada?* Después de la tarea *Validar solicitud*: - Selecciona la tarea *Validar solicitud*, arrastra y suelta desde el icono contextual de la puerta lógica -   ![creación de puerta lógica desde una tarea](images/ex01/ex1_02.png) + + ![creación de puerta lógica desde una tarea](images/ex01/ex1_02.png) - Una vez que se ha creado la puerta, usa el ícono contextual **caja de herramientas** (1) para cambiar su tipo a **Exclusivo** (2) -   ![Modificación del tipo de puerta lógica](images/ex01/ex1_03.png) -   - Cambia el nombre de la puerta a *¿Solicitud aprobada?* + + ![Modificación del tipo de puerta lógica](images/ex01/ex1_03.png) + - Cambia el nombre de la puerta a *¿Solicitud aprobada?* + 1. Crea una tarea automática *Notificar aprobación* desde la puerta lógica: - Selecciona la puerta lógica, arrastra y suelta desde el icono de tarea contextual (A) -   ![creación de una tarea desde una puerta lógica](images/ex01/ex1_04.png) -   - Una vez que se ha creado la tarea automática, cambiala el nombre + ![creación de una tarea desde una puerta lógica](images/ex01/ex1_04.png) + - Una vez creada la tarea automática, cámbiale el nombre a *Notificar aprobación* + 1. Crea una tarea automática *Notificar rechazo* desde la puerta lógica + 1. Agrega un evento de terminación *Fin - Solicitud aprobada* después de la tarea automática *Notificar aprobación*: - Selecciona la tarea automática *Notificar aprobación* - Arrastra y suelta desde el ícono de evento contextual (A) y selecciona el evento final (B) -   ![creación de un evento final](images/ex01/ex1_05.png) -   - Una vez que se ha creado el evento, cámbiale el nombre + ![creación de un evento final](images/ex01/ex1_05.png) + - Una vez el evento creado, cámbiale el nombre + 1. Agrega un evento de finalización *Fin - Solicitud rechazada* después de la tarea automática *Notificar rechazo* + 1. Nombra las 2 transiciones entre la puerta lógica y los pasos automáticos: - - Selecciona la transición -  - Navega a la pestaña **General / General** luego ingresa el nombre -  - La transición que conduce al paso *Notificar aprobación* se llamará *Sí* y la otra *No* + - Selecciona la transición a la etapa *Notificar aprobación* + - Navega a la pestaña **General / General** e ingresa *Sí* como nombre + - Repite la operación para la otra transición que se llamará *No*, para responder a la pregunta de la puerta lógica "¿Solicitud aprobada?" + - La validación es automática. Da clic en cualquier otro lado y el nuevo valor será guardado. + 1. Configura la condición en la transición *Sí* para que el flujo siga esta rama: - Selecciona la transición - Ingresa el valor `true` en el campo **Condición** (pestaña **General / General**). Si no ves el campo **Condición**, probablemente sea porque agregaste una puerta lógica paralela en lugar de una exclusiva. -   ![definición de condición en una transición](images/ex01/ex1_06.png) + ![definición de condición en una transición](images/ex01/ex1_06.png) + 1. Configura la transición *No* como el flujo por defecto: - Selecciona la transición *No* - Marca la casilla **Flujo por defecto** + 1. Actualiza la validación del diagrama: - Navega en la pestaña **Estado de validación** - Haz clic en el botón **Actualizar** - - Ignora las 3 advertencias sobre los formularios + - Por el momento, ignora las 3 advertencias sobre los formularios + +1. Si lo deseas, puedes reajustar la posición de los elementos y la froma de las transiciones para mejorar la estética y legibilidad del diagrama + 1. Verifica que el diagrama se vea así:    ![resultado final del diagrama](images/ex01/ex1_07.png) + 1. Guarda el proceso: - - Haz clic en el botón **Guardar** en la barra de menú superior de Bonita Studio + - Haz clic en el botón **Guardar** en la barra de herramientas de Bonita Studio + 1. Ejecuta el proceso para probarlo: - - Selecciona el pool de procesos (la forma rectangular que contiene las tareas y eventos) - - Haz clic en el botón ![Botón de inicio](images/ex01/ex1_08.png) en la barra de menú superior del Studio (si el botón está desactivado, asegúrate de que el grupo esté seleccionado) - - Tu navegador debe abrir y presentar un formulario de creación de instancias generado automáticamente - - Envía el formulario - - Deberías ser redirigido a la bandeja de entrada de tareas del Portal Bonita + - Selecciona la *Pool* del proceso (el área rectangular que contiene las tareas y eventos) + - Haz clic en el botón **Ejecutar** ![Botón de inicio](images/ex01/ex1_08.png) en la barra de herramientas del Studio (si el botón está desactivado, asegúrate de que el diagrama esté seleccionado) + - Tu navegador debe abrir y presentar un formulario de creación de instancias (generado automáticamente para pruebas) + - Envía el formulario. Esta acción creará una nueva instancia del proceso. + - Debes ser redirigido a la bandeja de entrada de tareas de la aplicación **Bonita User Application** - Selecciona la tarea *Validar solicitud* - - Haz clic en **Tomar** en la parte superior derecha de la pantalla ![asignar una tarea](images/ex01/ex1_09.png) + - Haz clic en **Tomar** en la parte superior derecha de la pantalla + ![asignar una tarea](images/ex01/ex1_09.png) - Envía el formulario para el paso *Validar solicitud* haciendo clic en el botón **Ejecutar** para completar el caso [Ejercicio siguiente: creación de datos y definición de contratos](02-data-contract.md) diff --git a/docs/es/02-data-contract.md b/docs/es/02-data-contract.md deleted file mode 100644 index 916e5cc..0000000 --- a/docs/es/02-data-contract.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Ejercicio 2 - Agregar datos y especificar contratos ---- - -## Objetivo - -El objetivo de este ejercicio es seguir con la implantación del proceso de solicitud de vacaciones mediante : - -1. La configuración de un modelo de datos de negocio comúnmente llamado BDM (Business Data Management) -1. La especificación de contratos para crear instancias del proceso y ejecutar tareas humanas - -Una vez completado, el proceso será ejecutable con formularios generados automáticamente que permiten la entrada de datos. - -> ⚠ Es importante respetar estrictamente el caso y la sintaxis de los nombres técnicos proporcionados en las instrucciones. - -## Resumen de las instrucciones - -Duplica el diagrama de proceso del ejercicio anterior para crear una versión 2.0.0. - -Crea un objeto BDM *SolicitudVacaciones* (este es un nombre técnico, por lo que debes omitir espacios, acentos y otros caracteres especiales) con los siguientes atributos (no usa la opción **Múltiple**): - -Nombre | Tipo | Múltiple | Requerido ---- | ---- | -------- | ----------- -*solicitanteId* | `Long` | ◻ | ☑ -*fechaInicio* | `Date only` | ◻ | ☑ -*numeroDias* | `Integer` | ◻ | ☑ -*estaAprobado* | `Boolean` | ◻ | ◻ - -Declara una variable empresarial *solicitud* de tipo *solicitudVacaciones* en el pool. - -Usando el asistente de Bonita Studio (es decir, **Añadir a partir de datos ...**), genera un contrato de creación de instancias, así como el script de inicialización para la variable de negocio utilizando la variable de negocio *solicitud* y por lo tanto incluya lo siguiente: - - fechaInicio - numeroDias - -Inicializa la BDM *solicitud* utilizando la generación automática del contrato. - -Agrega un contrato en el paso *Validar solicitud* utilizando el asistente con el siguiente elemento: - - estaAprobado - -## Instrucciones paso a paso - -1. Duplica el diagrama de proceso existente para crear una versión *2.0.0*: - - En el explorador del proyecto, haz clic derecha en el diagrama y **Duplicar** - - Actualiza los números de versión del proceso Y diagrama (pool) -1. Crea la BDM *SolicitudVacaciones*: - - Haz clic en el icono **Vista global** ![overview](images/ex02/ex2_13.png). Haz clic en **Crear** en la sección *Modelo de datos de la empresa*. - El editor del modelo de datos de negocio aparece. - - Cambia el nombre del objeto initializado por defecto **BusinessObject** en la lista de objetos de negocio a *SolicitudVacaciones* (A) (este es un nombre técnico, por lo que debes omitir espacios, acentos y otros caracteres especiales) - - Con el objeto *SolicitudVacaciones* seleccionado, agrega los siguientes atributos (B): - - Nombre | Tipo | Múltiple | Requerido - --- | ---- | -------- | ----------- - *solicitanteId* | `Long` | ◻ | ☑ - *fechaInicio* | `Date only` | ◻ | ☑ - *numeroDias* | `Integer` | ◻ | ☑ - *estaAprobado* | `Boolean` | ◻ | ◻ - - ![definición_del_modelo_de_datos_de_negocio](images/ex02/ex2_01.png) - - - Guardalo. El siguiente mensaje se muestra para indicar que la BDM debe ser desplegada - - ![mensaje de información despliegue BDM](images/ex02/ex2_09.png) - - - Haz clic en el botón ![icono despliegue](images/ex02/ex2_11.png) en el editor de BDM para desplegar el BDM. - - Se muestra el siguiente mensaje para confirmar el despliegue de la BDM - - ![Mensaje de información de despliegue de BDM](images/ex02/ex2_10.png) - - - Marca la opción **No volver a mostrar este mensaje** - - Haz clic en **Ok** - -1. Declara una variable de negocio de tipo *solicitudVacaciones* en el proceso: - - Selecciona el pool de procesos - - Navega en la pestaña **Datos / Variables del proceso** - - Haz clic en **Agregar ...** en la sección **Variables de negocio** - - Asigna un nombre a la variable *solicitud* y seleccione el tipo de objeto de negocio *com.company.model.SolicitudVacaciones* - - Haz clic en **Finalizar** - - ![déclaración de una variable de negocio](images/ex02/ex2_02.png) - -1. Configura el contrato de instanciación: - - Selecciona el pool de procesos - - Navega en la pestaña **Ejecución / Contrato / Entradas** - - Haz clic en el botón **Añadir desde datos ...** - - Selecciona la variable de negocio *solicitud* - - Mantenga el nombre predeterminado *solicitudInput* - - Haz clic en **Siguiente** - - Desmarca los atributos *solicitanteId* y *estaAprobado* - - ![asistente de definición de contrato](images/ex02/ex2_03.png) - - - Haz clic en **Finalizar** (no en **Finalizar y Añadir**) e ignora los mensajes de advertencia sobre la inicialización parcial de la variable de negocio - ![contrato definido para iniciar el proceso](images/ex02/ex2_04.png) - -1. Modifica la inicialización de la variable de negocio *solicitud* para poder recuperar el identificador del solicitante de la nueva petición: - - Selecciona el pool de procesos y navega a la pestaña **Datos / Variables de proceso** - - Selecciona la variable *solicitud* - - Haz clic en **Editar ...** - - Haz clic en el icono de **lápiz** asociado con el campo **Valor predeterminado** para abrir el editor de expresiones de script. - Ya se inicializó el script. - Ahora queremos recuperar la Id del solicitante arrancando la instancia de proceso actual. - - - En el menú de la izquierda, selecciona **Plantillas de código/Usuarios de Bonita** (A) y arrastra la plantilla *processInitiatorUser* - - El script para recuperar la instancia del proceso y el iniciador se crea automáticamente. - - Ingresa `solicitudVacacionesVar.solicitanteId = processInitiator.id` para recuperar el Id del iniciador de la instancia en el atributo *solicitanteId* (B) - - ![actualización de variable](images/ex02/ex2_12.png) - - El script inicializará la variable de negocio utilizando los datos del contrato y el identificador del solicitante.  - - > Las etiquetas `try` y `catch se inicializan para la validación del script. Es posible eliminarlos. - - - Haz clic en el botón **Aceptar** para cerrar el editor de expresiones - - Haz clic otra vez en el botón **Aceptar** para validar la modificación de la variable de negocio. - -1. Configura el contrato para el paso *Validar solicitud*: - - Selecciona el paso *Validar solicitud* - - Navega en la pestaña **Ejecución / Contrato / Entradas** - - Haz clic en el botón **Añadir desde datos ...** - - Selecciona la variable de negocio *solicitud*, mantenga el nombre de la entrada predeterminada *solicitudInput* - - Haz clic en **Siguiente** - - Selecciona solo el atributo *estaAprobado* - - Haz clic en **Finalizar** (y no en **Finalizar y Añadir**) e ignora los mensajes de advertencia sobre la inicialización parcial de la variable de negocio - - -1. Ten en cuenta que se ha generado automáticamente una operación (**Ejecución / Operaciones**) en la tarea *Validar solicitud* para actualizar la solicitud - ![operación generada automáticamente](images/ex02/ex2_06.png) - -1. Configura la condición en la transición *Sí* desde el atributo *estaAprobado* del BDM *solicitud*: - - Selecciona la transición *Sí* - - Navega en la pestaña **General / General** - - Haz clic en el ícono de lápiz junto al campo **Condición** para abrir el editor de expresiones - - En el editor de expresiones, selecciona **Variables de negocio/estaAprobado** y arrastrarlo a la pizarra para sustituir a `true`. - - ![uso de la variable de negocio para definir la condición de una transición](images/ex02/ex2_07.png) - -1. Guarda el proceso: - - Haz clic en el botón **Guardar** en la barra de menú superior de Bonita Studio -1. Ejecuta el proceso: - - Inicia el proceso y completa los formularios generados automáticamente - -> Información: -> - para el campo *fechaInicio*, el formato de fecha esperado es AAAA-MM-DD -> - para el campo *estaAprobado*, se espera un valor booleano: `true` o` false` - - ![formulario autogenerado](images/ex02/ex2_08.png) - -[Siguiente ejercicio: crear formularios](03-forms.md) diff --git a/docs/es/07-timer.md b/docs/es/02-timers.md similarity index 67% rename from docs/es/07-timer.md rename to docs/es/02-timers.md index 42c07cd..f01f5af 100644 --- a/docs/es/07-timer.md +++ b/docs/es/02-timers.md @@ -1,48 +1,54 @@ --- -title: Ejercicio 7 - Agregar un evento de tiempo al proceso +title: Ejercicio 2 - Agregar un evento de tiempo a la tarea de validación --- ## Objetivo -El objetivo de este ejercicio es enriquecer la primera versión del diagrama del proceso de solicitud de vacaciones con un **evento de tiempo** en la tarea de validación. +El objetivo de este ejercicio es enriquecer la primera versión del diagrama del proceso de solicitud de vacaciones con un **evento de tiempo no interruptor** en la tarea de validación. Este evento de tiempo enviará automáticamente un recordatorio al validador si no realiza la tarea a tiempo, sin interrumpir el proceso. -## Resumen de las instrucciones +> ⚠ Es importante respetar estrictamente la sintaxis de los nombres técnicos (incluyendo mayúsculas, minúsculas y signos) proporcionados en las instrucciones. -Duplica el diagrama de proceso del ejercicio anterior para crear una versión 7.0.0. +## Instrucciones resumidas -Agrega un evento límite de tiempo no interruptor en la tarea *Validar solicitud*. -La duración del temporizador es de **5 segundos**. +1. Duplica el diagrama de proceso del ejercicio anterior para crear una versión 1.1.0. +1. Agrega un evento límite de tiempo (timer) no interruptor en la tarea *Validar solicitud*. + La duración del temporizador es de **5 segundos** (para efectos prácticos del ejercicio). +1. Agrega una tarea de servicio llamada *Enviar recordatorio de validación* y un evento de fin llamado *Fin - Recordatorio enviado*. -Agrega una tarea de servicio llamada *Enviar recordatorio de validación* y un evento de fin llamado *Fin - Recordatorio enviado*. - -Añade un conector de correo electrónico en la tarea de servicio *Enviar recordatorio de validación*. Enviará un correo electrónico de recordatorio al validador. +## Instrucciones paso a paso +### Duplica el diagrama de proceso del ejercicio anterior para crear una versión 1.1.0. +1. En el explorador del proyecto, haz clic derecho en el diagrama y selecciona **Duplicar...** +1. Actualiza los números de versión de ambos: del proceso y de la *pool* (el diagrama) a *1.1.0* +1. Da clic en **OK** -## Instrucciones paso a paso +### Agrega un evento límite de tiempo no interruptor en la tarea *Validar solicitud* +1. Haz clic en la tarea *Validar solicitud*. -1. Agrega un evento límite de tiempo no interruptor a la tarea *Validar solicitud*: - - Haz clic en la tarea *Validar solicitud*. - - En la caja de herramientas, agrega un evento límite +1. Abajo, en medio de dicha tarea, da clic en el ícono **Agregar un evento límite** ![Caja de herramientas de eventos límite](images/ex07/ex7_01.png) - - Selecciona el **evento de tiempo no interruptor** en la lista. Se agregara automáticamente a la tarea. + +1. Selecciona el **evento de tiempo no interruptor** en la lista. Se agregara automáticamente a la tarea. ![evento de temporizador que no interrumpe](images/ex07/ex7_02.png) 1. Crea una tarea de servicio llamada *Enviar recordatorio de validación* después del evento de límite arrastrando y soltando la tarea del evento al carril. + 1. Agrega un evento de fin llamado *Fin - recordatorio enviado* junto a la tarea de servicio recién añadida. 1. Configura el evento de tiempo: - Selecciona el evento de tiempo de límite - - Vete a la pestaña **General / General**. + - Ve a la pestaña **General / General**. - Agrega el nombre del evento de tiempo *Enviar recordatorio después de 5s*. - - Establezca la condición del evento haciendo clic en **Editar**. + - Declara la condición del evento haciendo clic en **Editar**. - En el editor, selecciona **Duración** para establecer la condición del temporizador y pon *5* en el campo **Segundos** (A) - Haz clic en **Generar expresión de duración** (B) - Haz clic en **Finalizar** ![condición del temporizador](images/ex07/ex7_03.png) - La condición del temporizador se genera automáticamente y debe aparecer en la pestaña **General** + - La condición del temporizador se genera automáticamente y debe aparecer en la pestaña **General** + + +El conector para el envio de un correo electrónico cuando el temporizador expire será configurado más adelante. -[Siguiente ejercicio: agregar restricciones a un contrato](08-data-contract-constraints.md) +[Siguiente ejercicio: Agregación de datos y especificación de contratos](03-data-contract.md) diff --git a/docs/es/03-data-contract.md b/docs/es/03-data-contract.md new file mode 100644 index 0000000..f3a5ff0 --- /dev/null +++ b/docs/es/03-data-contract.md @@ -0,0 +1,200 @@ +--- +title: Ejercicio 3 - Agregación de datos y especificación de contratos +--- + +## Objetivo + +El objetivo de este ejercicio es continuar la implementación del proceso de solicitud de vacaciones mediante: + +- La creación de un modelo de datos de negocio comúnmente llamado BDM (Business Data Model) +- La especificación de variables de negocio que unan al modelo de datos de negocio y al proceso +- La especificación de contratos entre el proceso y el formulario para crear instancias del proceso y para ejecutar tareas humanas + +Una vez completado, el proceso será ejecutable y gracias a los formularios generados automáticamente se podrán capturar datos. + +> ⚠ Es importante respetar estrictamente la sintaxis de los nombres técnicos (incluyendo mayúsculas, minúsculas y signos) proporcionados en las instrucciones. + +## Instrucciones resumidas + +1. Duplica el diagrama de proceso del ejercicio anterior para crear una versión 2.0.0. +1. Crea un objeto de negocio *SolicitudVacaciones* (al ser un nombre técnico, debes omitir espacios, acentos y otros caracteres especiales) con los siguientes atributos (sin seleccionar la opción **Múltiple**): + + Nombre | Tipo | Múltiple | Requerido + --- | ---- | -------- | ----------- + *solicitanteId* | `Long` | ◻ | ☑ + *fechaInicio* | `Date only` | ◻ | ☑ + *numeroDias* | `Integer` | ◻ | ☑ + *estaAprobado* | `Boolean` | ◻ | ◻ + +1. Declara una variable de negocio *solicitud* de tipo *SolicitudVacaciones* en la *pool*. + +1. Genera un contrato de instanciación de proceso que incluya los siguientes elementos: + + - fechaInicio + - numeroDias + + Para esto, utiliza el asistente de Bonita Studio seleccionando **Añadir desde datos ...** + +1. Modifica la inicialización de la variable de negocio *solicitud* para recuperar automáticamente *solicitanteId* + +1. Agrega un contrato en la etapa *Validar solicitud* utilizando el asistente con el siguiente elemento: + + - estaAprobado +1. Configura como condición de la transición *Sí* el atributo *estaAprobado* de la variable de negocio *solicitud* + +## Instrucciones paso a paso + +### Duplica el diagrama de proceso existente para crear una versión *2.0.0* + +1. Vuelve al Studio +1. Duplica el diagrama de proceso existente para crear una versión *2.0.0*: + - En el explorador del proyecto, haz clic derecho en el diagrama y selecciona **Duplicar...** + - Actualiza los números de versión de ambos: del proceso y de la *pool* (el diagrama) a *2.0.0* + - Da clic en **OK** + +### Crea un objeto de negocio *SolicitudVacaciones*: +1. Haz clic en el ícono **Vista global** ![overview](images/ex02/ex2_13.png). Haz clic en **+ Crear** en la sección *Modelo de datos de negocio*. + El editor del modelo de datos de negocio aparece. + +1. Cambia el nombre del objeto creado por defecto **BusinessObject** a *SolicitudVacaciones* (A). + Al ser un nombre técnico, se deben omitir espacios, acentos y otros caracteres especiales. Como es un objeto, su nombre debe empezar con mayúscula. + +1. Con el objeto *SolicitudVacaciones* seleccionado, en la sección *Atributos*, selecciona el atributo inicializado por defecto **atributo** y cambia el nombre a *solicitanteId*. + Como es un atributo, su nombre debe empezar con minúscula. + +1. Como *Tipo* selecciona **LONG**, deja libre la casilla *Múltiple* y marca la casilla *Requerido* + + Nombre | Tipo | Múltiple | Requerido + --- | ---- | -------- | ----------- + *solicitanteId* | `LONG` | ◻ | ☑ + +1. Haz clic en **Añadir** para agregar igualmente los siguientes atributos (B): + + Nombre | Tipo | Múltiple | Requerido + --- | ---- | -------- | ----------- + *fechaInicio* | `DATE ONLY` | ◻ | ☑ + *numeroDias* | `INTEGER` | ◻ | ☑ + *estaAprobado* | `BOOLEAN` | ◻ | ◻ + + ![definición_del_modelo_de_datos_de_negocio](images/ex02/ex2_01.png) + +1. Guarda los cambios. El siguiente mensaje se muestra para indicar que el modelo de datos de negocio debe ser desplegado: + + ![mensaje de información despliegue BDM](images/ex02/ex2_09.png) + +1. Haz clic en el botón ![icono despliegue](images/ex02/ex2_11.png) en el editor de BDM. + - El siguiente mensaje aparece para confirmar el despliegue del modelo de datos de negocio: + + ![Mensaje de información de despliegue de BDM](images/ex02/ex2_10.png) + +1. Marca la opción **No volver a mostrar este mensaje** + +1. Haz clic en **Ok** + + > No olvides desplegar tu modelo de datos de negocio después de cada modifciación. Esto hace que los objetos y atributos estén disponibles al generar los contratos y los scripts Groovy, y también permite al motor de ejecución BPM de tomar en cuenta los cambios al momento de probar el proceso. + +### Declara una variable de negocio *solicitud* de tipo *SolicitudVacaciones* en la *pool* +1. Vuelve al diagrama *DiagramaSolicitudVacaciones (2.0.0)* + +1. En el diagrama, selecciona la *pool* del proceso + +1. Navega a la pestaña **Datos / Variables de proceso** + +1. Haz clic en **Agregar ...** en la sección **Variables de negocio** + +1. Asigna el nombre *solicitud* a la variable y selecciona el tipo de objeto de negocio **com.company.model.SolicitudVacaciones** + +1. Haz clic en **Finalizar** + + ![déclaración de una variable de negocio](images/ex02/ex2_02.png) + +### Genera un contrato de instanciación de proceso +1. En el diagrama, selecciona la *pool* del proceso + +1. Navega a la pestaña **Ejecución / Contrato / Entradas** + +1. Haz clic en el botón **Añadir desde datos ...** + +1. Las opciones **Variable de negocio** e **Instanciar** ya aparecen seleccionadas. + +1. Selecciona la variable de negocio *solicitud* + +1. Deja el nombre de entrada predeterminado *solicitudInput* + +1. Haz clic en **Siguiente** + +1. Desmarca los atributos *solicitanteId* y *estaAprobado*. El primero será recuperado automáticamente. El segundo no es necesario para inicializarlo. + + ![asistente de definición de contrato](images/ex02/ex2_03.png) + +1. Haz clic en **Finalizar** (no en **Finalizar y Añadir**). Ignora por el momento los mensajes de advertencia sobre la inicialización parcial de la variable de negocio. + ![contrato definido para iniciar el proceso](images/ex02/ex2_04.png) + + > Al crear un contrato se genera un script de inicalización de la variable en cuestión, que será ejecutado al momento de validar el contrato después de la captura de los datos via el formulario. + +### Modifica la inicialización de la variable de negocio *solicitud* para recuperar automáticamente *solicitanteId* + *solicitanteId* es el username del usuario que ha iniciado la solicitud + +1. Selecciona la *pool* del proceso y navega a la pestaña **Datos / Variables de proceso** + +1. Selecciona la variable *solicitud* + +1. Haz clic en **Editar ...** + +1. Haz clic en el icono de **lápiz** asociado al campo **Valor predeterminado**. + +1. El editor de expresiones se abre y muestra el script que ha sido inicializado cuando se ha creado el contrato con la opción "Instanciar". + +1. En el menú de la izquierda, selecciona **Plantillas de código/Usuarios de Bonita** (A). + - Selecciona la plantilla *processInitiatorUser* y arrástrala para colocarla antes de la última línea del script (que commienza por `return`). El script permite recuperar la instancia del proceso y el iniciador se crea automáticamente. + - Antes del `}catch`, ingresa `solicitudVacacionesVar.solicitanteId = processInitiator.id` para recuperar el identificador del iniciador de la instancia en el atributo *solicitanteId* (B) + + ![actualización de variable](images/ex02/ex2_12.png) + + El script inicializará la variable de negocio utilizando los datos del contrato y el identificador del solicitante.  + + > Las etiquetas `try` y `catch` se inicializan para la validación del script. Es posible eliminarlos. + + - Haz clic en el botón **Aceptar** para cerrar el editor de expresiones. + - Haz clic otra vez en el botón **Aceptar** para validar la modificación de la variable de negocio. + +### Agrega un contrato a la etapa *Validar solicitud*: +1. En la *pool*, selecciona la tarea *Validar solicitud* + +1. En la zona de propiedades, navega a la pestaña **Ejecución / Contrato / Entradas** + +1. Haz clic en el botón **Añadir desde datos ...** + +1. Las opciones *Variable de negocio* y *Editar* aparecen seleccionadas. + - La variable de negocio *solicitud* aparece seleccionada. + - Deja el valor predeterminado *solicitudInput* como nombre de la entrada + - Haz clic en **Siguiente** + - Deselecciona todos los atributos excepto *estaAprobado* + - Haz clic en **Finalizar** (y no en **Finalizar y Añadir**). Ignora por el momento los mensajes de advertencia sobre la inicialización parcial de la variable de negocio + + Nota: Ten en cuenta que se ha generado automáticamente una operación (**Ejecución / Operaciones**) en la tarea *Validar solicitud* para actualizar la solicitud + ![operación generada automáticamente](images/ex02/ex2_06.png) + +### Configura como condición de la transición *Sí* el atributo *estaAprobado* de la variable de negocio *solicitud*: +1. Selecciona la transición *Sí* +1. En la zona de propiedades, navega a la pestaña **General / General** + - Haz clic en el ícono de lápiz asociado al campo **Condición** para abrir el editor de expresiones + - En el editor de expresiones, selecciona **Variables de negocio / solicitud**. + - Selecciona **estaAprobado** y arrástrarlo a la pizarra para sustituir el `true`. + - Haz clic en **Aceptar** + + ![uso de la variable de negocio para definir la condición de una transición](images/ex02/ex2_07.png) + +1. Guarda el proceso: + - Haz clic en el botón **Guardar** en la barra de menú superior de Bonita Studio +1. Ejecuta el proceso: + - Haz clic en el botón **Ejecutar** en la barra de menú superior de Bonita Studio + - Completa los formularios generados automáticamente. Los campos mostrados sont generados a partir de los contratos creados. + +> Información: +> - para el campo *fechaInicio*, el formato de fecha esperado es AAAA-MM-DD +> - para el campo *estaAprobado*, se espera un valor booleano: `true` o` false` + + ![formulario autogenerado](images/ex02/ex2_08.png) + +[Siguiente ejercicio: crear formularios](03-forms.md) diff --git a/docs/es/03-forms.md b/docs/es/03-forms.md deleted file mode 100644 index f7cba17..0000000 --- a/docs/es/03-forms.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Ejercicio 3 - Crear formularios ---- - -## Objetivo - -El objetivo de este ejercicio es proporcionar formularios simples, fáciles de usar y adecuados para la ejecución del proceso. - -## Resumen de las instrucciones - -Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *3.0.0*. - -Crea los siguientes formularios: -- Un formulario de creación de instancias de proceso a nivel de pool que permite inicializar los atributos *fechaInicio* y *numeroDias* de la variable empresarial *solicitud* -- Se aprueba un formulario de pasos que permite mostrar la información del solicitante y los datos *fechaInicio* y *numeroDias* en modo de solo lectura y luego alimentar los datos *estaAprobado* - -## Instrucciones paso a paso -1. Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *3.0.0* -1. Crea un formulario de instanciación: - - Selecciona el pool de procesos - - Navegua en la pestaña **Formulario de ejecución / instanciación** - - Haz clic en el icono **Lápiz** en el campo **Formulario de destino** - ![creación de un formulario](images/ex03/ex3_01.png) - - Esto va a abrir el UI Designer en tu navegador web con un nuevo formulario generado automáticamente a partir de la definición del contrato de instanciación. - - ![nuevo formulario](images/ex03/ex3_02.png) -1. Cambia el nombre del formulario: - - Usa el campo de texto en la parte superior de la pantalla para cambiar el nombre del formulario de *newForm* a *ingresarSolicitudVacaciones* (este es un nombre técnico, por lo que debes omitir espacios, acentos y otros caracteres especiales) - - Haz clic en el botón **Guardar** - -1. Cambia el título del formulario: - - Selecciona el widget *Solicitud* en la parte superior del formulario. - - En la sección a la derecha de la pantalla, edita las siguientes propiedades: - - Propiedad | Valor - --------- | ------ - Texto | *Ingrese una solicitud de vacaciones* - Nivel de título | Nivel 2 - Alineación | centrado - -1. Cambia el widget *Fecha Inicio* : - - Selecciona el widget *Fecha de inicio* y edita las siguientes propiedades: - - Propiedad | Valor - --------- | ------ - Etiqueta | Fecha de inicio - Formato de fecha técnica | dd/MM/yyyy - Placeholder de la fecha | Ingrese una fecha (dd/mm/aaaa) - Etiqueta del botón Hoy: **Mostrar botón Hoy** | No - -1. Cambia el widget *Numero Dias* : - - Selecciona el widget *Numero Dias* y edite las siguientes propiedades: - - Propiedad | Valor - --------- | ------ - Etiqueta | Número de días - Valor mínimo (no debe confundirse con la propiedad **Longitud mínima**) | 1 - -1. Cambia el widget *Submit* : - - Selecciona el widget *Submit* - - Cambia su etiqueta por *Enviar* - -1. Comprueba el formulario: - - Comprueba que el formulario se ve así en el editor: - ![formulario en el UI Designer](images/ex03/ex3_05.png) - - - Haz clic en el botón **Guardar** en la parte superior de la pantalla - - Haz clic en el botón **Vista previa** en la parte superior de la pantalla - - Comprueba que la vista previa se ve así: - ![vista previa de un formulario](images/ex03/ex3_06.png) - - Ten en cuenta los siguientes puntos en la vista previa: - - El widget con el error no es visible - - Es posible probar la vista previa en diferentes dispositivos, desde teléfonos móviles hasta pantallas grandes. - - El botón *Enviar* está deshabilitado de forma predeterminada (esto se debe a la validación proporcionada por el contenedor del formulario) - - El botón *Enviar* se activa cuando el contenido del formulario es válido - - > **Nota:** no es posible enviar el formulario desde la vista previa, incluso cuando este último es válido. - -1. Cierra la ventana de vista previa. - -1. Crea un formulario para el paso *Validar solicitud*: - - En Bonita Studio, selecciona el paso *Validar solicitud* - - Navega en la pestaña **Ejecución / Formulario** - - Haz clic en el icono **Lápiz** en el campo **Formulario de destino** para abrir un nuevo formulario en el UI Designer - - Responde **Sí** a la pregunta sobre cómo agregar widgets de solo lectura - - > **Nota:** el formulario se generó automáticamente a partir de la BDM y del contrato, y muestra datos de sólo lectura de la BDM que no son esperados por el contrato en esta etapa. - - -1. Cambia el nombre del formulario: - - Desde el UI Designer, cambia el nombre del formulario a *validarSolicitudVacaciones* y guárdalo - -1. Recupera información sobre el solicitante - - Haz clic en el botón **Crear una nueva variable** para definir una variable con las siguientes propiedades: - - ![variable solicitante](images/ex03/ex3_04.png) - > **Nota:** puedes utilizar los ejemplos que te permiten recuperar automáticamente los patrones de llamadas a la API. Aquí recuperaremos `identity API` porque estamos buscando información relacionada con un usuario. - -1. Cambia el título del formulario - - Selecciona el widget **Título** (Title) ubicado en la parte superior del formulario - - Configura el widget de la siguiente manera: - - Propiedad | Valor - --------- | ------ - Texto | Validar una solicitud de vacaciones - Nivel de título | Nivel 2 - -1. Cambia el widget *Solicitante ID* para presentar el nombre y apellido del solicitante: - - Cambia el valor del campo **Etiqueta** por *Solicitante* - - Configura el widget de esta manera: `{{solicitante.firstname}} {{solicitante.lastname}}` - - ![variable solicitante nombre y apellido](images/ex03/ex3_03.png) - -1. Cambia el botón *Submit*: - - Selecciona el widget - - Cambia la etiqueta para *Validar* - -1. Comproba el formulario simple: - - Asegurate que el formulario se vea así: - ![formulario de validacion](images/ex03/ex3_07.png) ----------- -*Opción para ir más alla* -1. Agrega un widget para rechazar la solicitud: - - Arrastra un widget **Botón** y agrégualo al contenedor del formulario (área delimitada por una línea gruesa de puntos) - - Configura el widget de esta manera: - - Propiedad | Valor - --------- | ------ - Ancho | 6 - Etiqueta | Rechazar - Alineación | derecha - Estilo | danger - Datos enviados al hacer click | `{"solicitudInput":{"estaAprobado":false}}` - Valor de la respuesta fallida | `formOutput._submitError` - Dirección URL de destino en éxito | `/bonita` - -1. Borra la casilla *Está aprobado* y el botón *Submit* - -1. Añada un widget para aprobar la solicitud - - Arrastra un widget **Botón** al área "6 columnas" a la derecha del botón *Rechazar* - - Configura el widget de esta manera: - - Propiedad | Valor - --------- | ------ - Etiqueta | Aprobar - Estilo | success - Datos enviados al hacer click | `{"solicitudInput":{"estaAprobado":true}}` - Valor de la respuesta fallida | `formOutput._submitError` - Dirección URL de destino en éxito | `/bonita` - -El formulario se vera así: - ![Validación / rechazo de la solicitud de licencia](images/ex03/ex3_08.png) ---------------- - -1. Guarda el formulario: - - Usa el botón **Guardar** en el centro superior de la pantalla para guardar el formulario - -1. Prueba la ejecución del proceso: - - Inicia la ejecución del proceso a través de Bonita Studio - - Valida, a partir del historial de casos, que se ha seguido el camino correcto hasta el final del proceso - -[Ejercicio siguiente: configuración de los actores](04-actors.md) diff --git a/docs/es/04-forms.md b/docs/es/04-forms.md new file mode 100644 index 0000000..4ec54ad --- /dev/null +++ b/docs/es/04-forms.md @@ -0,0 +1,165 @@ +--- +title: Ejercicio 4 - Crear formularios +--- + +## Objetivo + +El objetivo de este ejercicio es proporcionar formularios simples, fáciles de usar y adecuados para la ejecución del proceso. + +## Instrucciones resumidas + +1. Duplica el diagrama de proceso del ejercicio anterior para crear una versión *2.1.0*. + +1. Crea un formulario de instanciación de proceso a nivel de la *pool* que permita inicializar los atributos *fechaInicio* y *numeroDias* de la variable de negocio *solicitud* +1. Crea un formulario para ejecutar la tarea de aprobacion en donde se muestre la información del solicitante y los datos *fechaInicio* y *numeroDias* en modo de solo lectura y permita la captura de *estaAprobado* + +## Instrucciones paso a paso +1. Duplica el diagrama de proceso del ejercicio anterior para crear una versión *2.1.0*: + - A partir de la versión *2.0.0, crea la versión *2.1.0* del diagrama y de la *pool*. +1. Crea un formulario de instanciación de proceso: + - Selecciona la *pool* del proceso + - en la zona de propiedades, navega a la pestaña **Ejecución / Formulario de instanciación** + - Haz clic en el ícono **lápiz** asociado al campo **Formulario de destino** + ![creación de un formulario](images/ex03/ex3_01.png) + + Esto va a abrir el UI Designer en tu navegador web con un nuevo formulario generado automáticamente a partir de la definición del contrato de instanciación. + + ![nuevo formulario](images/ex03/ex3_02.png) + - Cambia el nombre del formulario: + - Usa el campo de texto en la parte superior de la pantalla para cambiar el nombre de *newForm* a *ingresarSolicitudVacaciones*. al ser un nombre técnico, se deben omitir espacios, acentos y otros caracteres especiales. + - Haz clic en el botón **Guardar** + + - Cambia el título del formulario, visible para el usuario: + - Selecciona el widget **Title** con el valor *Solicitud* en la parte superior del formulario. + - En la sección a la derecha de la pantalla, edita las siguientes propiedades: + + Propiedad | Valor + --------- | ------ + Texto | *Ingrese una solicitud de vacaciones* + Nivel de título | Nivel 2 + Alineación | centrado + + - Cambia el widget *Fecha Inicio* : + - Selecciona el widget **Date Picker** con el valor *Fecha de inicio* y edita las siguientes propiedades: + + Propiedad | Valor + --------- | ------ + Etiqueta | Fecha de inicio + Formato de fecha técnica | dd/MM/yyyy + Placeholder | Ingrese una fecha (dd/mm/aaaa) + Etiqueta del botón Hoy: **Mostrar botón Hoy** | No + + - Cambia el widget *Numero Dias* : + - Selecciona el widget **Input** *Numero Dias* y edita las siguientes propiedades: + + Propiedad | Valor + --------- | ------ + Etiqueta | Número de días + Placeholder | Número de días a solicitar + Valor mínimo (no debe confundirse con la propiedad **Longitud mínima**) | 1 + + - Cambia el widget *Submit* : + - Selecciona el widget **Button** *Submit* + - Cambia su etiqueta por *Enviar* + + - Verifica el formulario: + - Comprueba que el formulario se ve así en el editor: + ![formulario en el UI Designer](images/ex03/ex3_05.png) + + - Haz clic en el botón **Guardar** en la parte superior de la pantalla + - Haz clic en el botón **Vista previa** en la parte superior de la pantalla + - Comprueba que la vista previa se ve así: + ![vista previa de un formulario](images/ex03/ex3_06.png) + + Ten en cuenta los siguientes puntos en la vista previa: + - El widget que muestra el error no es visible + - Es posible probar la vista previa en diferentes dispositivos, desde teléfonos móviles hasta pantallas grandes. + - El botón *Enviar* está deshabilitado de forma predeterminada (esto se debe a la validación proporcionada por el contenedor del formulario) + - El botón *Enviar* se activa cuando el contenido del formulario es válido + + > **Nota:** no es posible enviar el formulario desde la vista previa, incluso cuando este último es válido. + + - Cierra la ventana de vista previa. + +1. Crea un formulario para ejecutar la tarea *Validar solicitud*: + - En Bonita Studio, selecciona la tarea *Validar solicitud* + - En la zona de propiedades, navega a la pestaña **Ejecución / Formulario** + - Haz clic en el ícono **lápiz** relacionado con el campo **Formulario de destino** para abrir un nuevo formulario en el UI Designer + - Responde **Sí** a la pregunta sobre cómo agregar widgets de solo lectura + + > **Nota:** el formulario se generó automáticamente a partir del modelo de datos de negocio (BDM) y del contrato, y muestra los datos que no son esperados por el contrato en esta etapa en modo solo lectura. + + + - Cambia el nombre del formulario: + - Desde el UI Designer, cambia el nombre del formulario a *validarSolicitudVacaciones* y guárdalo. + + - Recupera información sobre el solicitante + - Haz clic en el botón **Crear una nueva variable** para definir una variable con las siguientes propiedades: + + ![variable solicitante](images/ex03/ex3_04.png) + > **Nota:** puedes utilizar los ejemplos que te permiten recuperar automáticamente los patrones de llamadas a la API. Aquí recuperaremos `identity API` porque estamos buscando información relacionada con un usuario. + + - Cambia el título del formulario + - Selecciona el widget **Título** (Title) ubicado en la parte superior del formulario + - Configura el widget de la siguiente manera: + + Propiedad | Valor + --------- | ------ + Texto | Validar una solicitud de vacaciones + Nivel de título | Nivel 2 + + - Cambia el widget *Solicitante ID* para presentar el nombre y apellido del solicitante: + - Cambia el valor del campo **Etiqueta** por *Solicitante* + - Configura el widget de esta manera: `{{solicitante.firstname}} {{solicitante.lastname}}` + + ![variable solicitante nombre y apellido](images/ex03/ex3_03.png) + + - Cambia el botón *Submit*: + - Selecciona el widget + - Cambia la etiqueta para *Validar* + + - Comproba el formulario simple: + - Asegurate que el formulario se vea así: + ![formulario de validacion](images/ex03/ex3_07.png) +---------- +*Opción para ir más lejos* +1. Agrega un widget para rechazar la solicitud: + - Arrastra un widget **Botón** y agrégualo al contenedor del formulario (área delimitada por una línea gruesa de puntos) + - Configura el widget de esta manera: + + Propiedad | Valor + --------- | ------ + Ancho | 6 + Etiqueta | Rechazar + Alineación | derecha + Estilo | danger + Datos enviados al hacer click | `{"solicitudInput":{"estaAprobado":false}}` + Valor de la respuesta fallida | `formOutput._submitError` + Dirección URL de destino en éxito | `/bonita` + +1. Borra la casilla *Está aprobado* y el botón *Submit* + +1. Añada un widget para aprobar la solicitud + - Arrastra un widget **Botón** al área "6 columnas" a la derecha del botón *Rechazar* + - Configura el widget de esta manera: + + Propiedad | Valor + --------- | ------ + Etiqueta | Aprobar + Estilo | success + Datos enviados al hacer click | `{"solicitudInput":{"estaAprobado":true}}` + Valor de la respuesta fallida | `formOutput._submitError` + Dirección URL de destino en éxito | `/bonita` + +El formulario se vera así: + ![Validación / rechazo de la solicitud de licencia](images/ex03/ex3_08.png) +--------------- + +1. Guarda el formulario: + - Usa el botón **Guardar** en el centro superior de la pantalla para guardar el formulario + +1. Prueba la ejecución del proceso: + - Inicia la ejecución del proceso a través de Bonita Studio + - Valida, a partir del historial de casos, que se ha seguido el camino correcto hasta el final del proceso + +[Ejercicio siguiente: configuración de los actores](04-actors.md) diff --git a/docs/es/04-actors.md b/docs/es/05-actors.md similarity index 98% rename from docs/es/04-actors.md rename to docs/es/05-actors.md index d370a46..9490ddd 100644 --- a/docs/es/04-actors.md +++ b/docs/es/05-actors.md @@ -1,5 +1,5 @@ --- -title: Ejercicio 4 - Definición de los actores +title: Ejercicio 5 - Definición de los actores --- ## Objetivo diff --git a/docs/es/05-connectors.md b/docs/es/05-connectors.md deleted file mode 100644 index acc390b..0000000 --- a/docs/es/05-connectors.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Ejercicio 5 - Notificación a través de un conector ---- - -## Objetivo - -El objetivo de este ejercicio es tratar una interacción entre el proceso y un sistema externo a través de un conector. Aquí estamos interesados en la notificación del resultado de la solicitud de licencia a través de un conector de correo electrónico. - -> ⚠ Dependiendo de la configuración de su red, su firewall o la configuración de seguridad de su servidor de correo electrónico, es posible que no esté autorizado para enviar un correo electrónico desde Bonita. -> Para evitar estas limitaciones técnicas, este ejercicio se realizará con un software que simule un servidor de correo electrónico (FakeSMTP). - -## Resumen de las instrucciones - -Recupera y inicia el servidor [FakeSMTP](http://nilhcem.github.io/FakeSMTP/downloads/fakeSMTP-latest.zip). - -Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *5.O.0*. - -Agrega un conector para enviar correos electrónicos en tareas automáticas *Notificar aprobación* y *Notificar rechazo*. Estos enviarán un correo electrónico al solicitante con el estado de validación de su solicitud. - -Hay que definir un script para recuperar el correo electrónico del solicitante en el conector. - -## Instrucciones paso a paso - -1. Implementación de FakeSMTP: - - Recupera el binario de FakeSMTP de esta URL: [http://nilhcem.github.com/FakeSMTP/downloads/fakeSMTP-latest.zip](http://nilhcem.github.com/FakeSMTP/downloads/fakeSMTP-latest.zip) - - Abre el archivo `fakeSMTP-latest.zip` - - Inicia FakeSMTP haciendo doble clic en el archivo JAR o ejecutando el siguiente comando: `java -jar fakeSMTP-2.0.jar` - - Una vez que se muestra la interfaz gráfica de FakeSMTP, configura el puerto de escucha en *2525* y haz clic en el botón **Iniciar el servidor** - -1. Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *5.0.0* - -1. Agrega un conector para enviar un correo electrónico en la tarea *Notificar aprobación*: - - Selecciona la tarea *Notificar aprobación* - - Navega en la pestaña **Ejecución / Conectores entrada** - - Haz clic en **Agregar...** - Una advertencia indica que no se ha instalado previamente ningún conector en el proyecto y pide que se haga. - - ![aviso de conector](images/ex05/ex5_00.png) - >**Nota** : Las extensiones pueden recuperarse del Bonita MarketPlace o de directorios remotos privados o públicos. Si desea ir más allá, el desarrollo y la gestión de estas extensiones se tratan en un ejercicio posterior. - - Haz clic en Aceptar para acceder al MarketPlace y selecciona el conector **Email** de la lista. - ![MarketPlace](images/ex05/ex5_02.png) - - Haz clic en **Instalar**. - - Selecciona la definición del conector **Correo electrónico**. - - Haz clic en el botón **Siguiente**. - - Especifica *enviarCorreoAprobacion* como nombre - - Vete a la página siguiente - - Completa los siguientes parámetros de conexión: - - Propiedad | Valor - --------- | ------ - Host SMTP | *localhost* - Puerto SMTP | *2525* (el puerto especificado en FakeSMTP) - SSL (en la pestaña **Seguridad**) | desmarcado - - - Haz clic en el botón **Siguiente** - - Ingresa *rh@acme.com* como dirección de correo electrónico en el campo del remitente **De** - - Usa el ícono **lápiz** para editar la expresión en el campo del destinatario **A** - - En el editor de scripts, selecciona *processInitiatorUser* en el menú **Plantillas de codigo/Usuarios de Bonita**. - - Arrastralo en la pestaña de derecha. Se crea automaticamente el script para recuperar los detalles del iniciador del proceso - ![editor script A](images/ex05/ex5_04.png) - - Selecciona *userProfessionalContaect* en el mismo menú y arrastralo en la pestaña, entre `.getStartedBy` y `}catch` - - Para poder recuperar el correo electronico del iniciador del proceso, reemplaza *userId* por *processInitiator.id* - - Tras `(processInitiator.id, false)` añade "." y selecciona *email: string* en la lista - - Cambia `def proContactData =` por `return` - - ![editor script B](images/ex05/ex5_05.png) - - - Haz clic en el botón **Aceptar** para cerrar el editor de scripts - - Vete a la página siguiente - - Especifica *Solicitud de vacaciones aprobada* como asunto - - Haz clic en **Finalizar** - - - Debería aparecer un mensaje similar al siguiente, haz clic en el botón **Aceptar**: - ![mensaje de advertencia de salida no serializable](images/ex05/ex5_00.png) - - - Asegúrate de que FakeSMTP reciba el correo electrónico como se ilustra abajo: - ![Fake SMTP con un mensaje recibido](images/ex05/ex5_01.png) - -1. Agrega un conector para enviar correo electrónico a la tarea *Notificar rechazo*: - - Repite el paso anterior nombrando el conector *enviarCorreoRechazo* y especificando *Solicitud de vacaciones rechazada* como asunto - - Alternativamente, puedes usar la funcionalidad que te permite copiar un conector configurado en una tarea a otra tarea. - -1. Prueba el proceso: - - Ejecuta el proceso dos veces para probar las diferentes rutas y asegurate de que FakeSMTP envíe e intercepte los correos electrónicos - -[Ejercicio siguiente: creación de aplicaciones](06-applications.md) diff --git a/docs/es/06-applications-en.md b/docs/es/06-applications-en.md deleted file mode 100644 index 8b644a3..0000000 --- a/docs/es/06-applications-en.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Exercise 6 - Build a leave request application ---- - -## Goal - -The goal of this exercise is to build an application for users to create and manage their leave requests. - -## Instructions overview - -Open the UI Designer and create a new **Application page** named *LeaveRequestStatus* to follow the progress of the connected user leave request. - -This page will contain one "multiple container" that list the on-going leave requests. For each request, the start date, number of days and approval status will be displayed. - -Add a link to the instantiation form to start a new leave request. - -Create a new application. Then add the *LeaveRequestStatus* page in the application. - -Deploy the application page using the **Deploy** button from the Studio. - -Access the application using the generated URL. - - -## Step by step instructions - -1. Create a new page: - - In the Studio, click on the **UI Designer** button - - Click on the **Create** button - - Select **Application page** - - Set the name to: *LeaveRequestStatus* - - Click on **Create** - - ![Application page creation](images/ex06/ex6_01.png) - - - You should now be on the designer page - -1. Add a title to your page: - - Drag the widget **Title** (A) from the palette to the top of the page (B) - - Select the widget - - On the right panel, enter *Leave request application* in the **Text** field (C) - - Select **center** for **Alignment** - - ![Widget title addition](images/ex06/ex6_02.png) - -1. Create a variable to list the leave request: - - Click on **Data model** icon ![icone-datamodel](images/ex06/ex6_00.png) - - Drag and drop *LeaveRequest* onto the page just below the main title (a dotted line should appear) - - Keep the name by default *leaveRequest* - - Select the **"Find** query - - Click on **Save** button - - A multiple container is automatically generated with a table showing the attributes of the LeaveRequest object. - ![container leaveRequest](images/ex06/ex6_14.png) - -1. Modify the container title like follows: - - Property | Value - -------- | ----- - Title | *Leave request status* - Title level | **Level 4** - Alignment | **left** - -1. Modify the labels of the widget **Table**: - - Select the widget **Table** - - In the right panel, in the **Headers** field, delete *RequestorId*. - - Replace *Leave Start* with *Start date*, *Day Count* with *Number of days*. - -1. Display the information in the columns of the table more clearly : - - In the right panel, in the field **Column keys**, delete *requestorId*. - - Delete the Input widget *RequestorId* in the details container because this information is not useful - -1. Select the **Date picker** widget called *Leave Start* and edit the following properties: - - Property | Value - -------- | ----- - Read-Only | **Yes** - Label | *Start date* - Show Today button | **No** - -1. Select the **Input** widget called *Day Count* and edit the following properties: - - Property | Value - -------- | ----- - Read-Only | **Yes** - Label | *Number of days* - - - Save the page - - The page should look like this: - - ![Application page in UI Designer](images/ex06/ex6_04.png) - - - You can preview the page at anytime by clicking on **Preview** button - - > Tip: if you are logged in the Portal in the same browser, the current leave request will be displayed. - -1. Add a new **Link** widget: - - Drag a **link** widget from the palette and place it between the two titles - - In the field **Text** enter *Create a new request* - - In the field **Type**, select **Process instanciation form** - - In the field **Process name** add *LeaveRequest* - - In the field **Alignment** select center - - In the field **Style** select **Primary** - - Save the page - -We will now deploy the application in the portal from the Studio. - -1. Add an application descriptor : - - In the Studio, in the **Development/Application Descriptor** menu select **New**. An .xml file is automatically initialized. - - Click *Add an Application Descriptor*. - - Enter *leave-request* in the field **Application URL token**. - - Enter *Leave requests application* in the field **Displayed name**. - - Click on the button **Add**. - - ![creation of an application](images/ex06/ex6_15.png) - -1. Create a new application : - - In the Navigation menu, click *Add one-page menu* (A) - - Enter *Requests follow-up* in the field **Menu**. - - Select the *custompage_LeaveRequestStatus* page in the field **Application Page** (B) - - Enter *leave-request* in the **Token** field (C) - - ![creation of an application](images/ex06/ex6_07.png) - -1. Define the *Requests follow-up* page as the application home page : - - Select the *leave-request* token from the Menu **HomePage**. - ![home page](images/ex06/ex6_16.png) - - Save - - Check that the configuration page looks like this : - - ![configuration page](images/ex06/ex6_17.png) - -1. Deploy the application in the Portal: - - Click on the link *http://localhost:8080/bonita/apps/leave-request* to access the application. (A) - - A deployment window opens. Click on *Deploy* (B) - - ![Deploy the application](images/ex06/ex6_09.png) - - - To open the application, select *Leave requests application as User*. - - Click on *Open*. - - ![opening window](images/ex06/ex6_18.png) - - The application should look like this once deployed : - - - ![application rendering](images/ex06/ex6_08.png) - -And that's it! - -You want to go further? Follow the next iteration of the project. -Next exercise: [add a timer to the process](07-timer.md) \ No newline at end of file diff --git a/docs/es/06-extensions.md b/docs/es/06-extensions.md new file mode 100644 index 0000000..efa36c1 --- /dev/null +++ b/docs/es/06-extensions.md @@ -0,0 +1,140 @@ +--- +title: Ejercicio 6 - Agregar un filtro de actor y un conector +--- + +## Objetivo + +El objetivo de este ejercicio es agregar puntos de extensión al proyecto Bonita, a través de un filtro de actor y de un conector de correo electrónico (email). + +- El filtro de actor *Gestor iniciador* será configurado para buscar dinámicamente en la organización el repsonsable del solicitante. +- El conector de correo electrónico permitirá enviar una notificación del resultado de la solicitud al solicitante. + +> ⚠ Dependiendo de la configuración de su red, su *firewall* o la configuración de seguridad de su servidor de correo electrónico, es posible que no esté autorizado para enviar un correo electrónico desde Bonita. +> Para evitar estas limitaciones técnicas, este ejercicio se realizará con un software que simule un servidor de correo electrónico (FakeSMTP). + +## Instrucciones resumidas +1. Duplica el diagrama de proceso del ejercicio anterior para crear una versión *3.1.0* +1. Configura un filtro de actor del tipo *Gestor iniciador* en la senda *Validador* +1. Agrega un conector para enviar correos electrónicos en las tareas automáticas *Notificar aprobación* y *Notificar rechazo*. + - Recupera y inicia el servidor [FakeSMTP](http://nilhcem.github.io/FakeSMTP/downloads/fakeSMTP-latest.zip). + - El suguiente código será utilizado para recuperar la dirección de correo del solicitante: + + ```groovy + BonitaUsers.getProcessInstanceInitiatorProfessionalContactInfo(apiAccessor,processInstanceId).email + ``` + +## Instrucciones paso a paso +### Duplica el diagrama de proceso del ejercicio anterior para crear una versión *3.1.0* + +### Configura un filtro de actor del tipo *Gestor iniciador* en la senda *Validador* + +1. Selecciona la senda *Validador* + +1. Navega a la pestaña **General / Actores** + +1. Selecciona el actor *Empleado actor* del menú desplegable para reemplazar el actor *validador* + +1. Un mensaje te informará de que es necesario instalar primero un filtro de actores. Haz clic en **Aceptar**. + ![filtre_extension](images/ex04/ex4_10.png) + + +1. En el Bonita MarketPlace, haz clic en *Administrador de iniciadores* y en **Instaler** + ![mercado de filtros de actores](images/ex09/ex9_01.png) + La definición del filtro es ahora parte del proyecto. + +1. En la ventana de configuración del conector en la senda, selecciona la definición del filtro **Gestor iniciador** + +1. Haz clic en **Siguiente** + +1. Nombra el filtro *responsableIniciador* + +1. Haz clic en **Finalizar** + + +### Agrega un conector para enviar correos electrónicos en las tareas automáticas *Notificar aprobación* y *Notificar rechazo* + +1. Recupera el binario e inicia el servidor FakeSMTP de esta URL: [http://nilhcem.github.com/FakeSMTP/downloads/fakeSMTP-latest.zip](http://nilhcem.github.com/FakeSMTP/downloads/fakeSMTP-latest.zip) + - Descomprimer el archivo `fakeSMTP-latest.zip` + - Inicia FakeSMTP haciendo doble clic en el archivo JAR o ejecutando el siguiente comando: `java -jar fakeSMTP-2.0.jar` + - Una vez que se muestra la interfaz gráfica de FakeSMTP, configura el puerto de escucha en *2525* y haz clic en el botón **Iniciar el servidor** + +1. Abre el diagrama de proceso versión *3.1.0* + +1. Selecciona la tarea *Notificar aprobación* + +1. Navega en la pestaña **Ejecución / Conectores entrada** +1. Haz clic en **Agregar...** + Una advertencia propone instalar un conector desde el Bonita Marketplace. + + ![aviso de conector](images/ex05/ex5_00.png) + >**Nota** : Las extensiones pueden recuperarse del Bonita MarketPlace o de directorios remotos privados o públicos. Si desea ir más allá, el desarrollo y la gestión de estas extensiones se tratan en un ejercicio posterior. + +1. Haz clic en **Aceptar** para acceder al MarketPlace y selecciona el conector **Email** de la lista. + ![MarketPlace](images/ex05/ex5_02.png) + +1. Haz clic en **Instalar**. + +1. En la ventana de configuración de la tarea *Notificar aprobación*, selecciona la definición del conector **Correo electrónico**. + +1. Haz clic en el botón **Siguiente**. + +1. Especifica *enviarCorreoAprobacion* como nombre +1. Haz clic en el botón **Siguiente**. +1. Completa los siguientes parámetros de conexión: + + Propiedad | Valor + --------- | ------ + Host SMTP | *localhost* + Puerto SMTP | *2525* (el puerto especificado en FakeSMTP) + SSL (en la pestaña *Seguridad*) | desmarcado + +1. Haz clic en el botón **Siguiente** + +1. Ingresa *rh@acme.com* como dirección de correo electrónico en el campo del remitente **De** + +1. Usa el ícono **lápiz** para editar la expresión en el campo del destinatario **A** + +1. En el editor de scripts, selecciona *processInitiatorUser* en el menú **Plantillas de codigo/Usuarios de Bonita**. + +1. Arrástralo al editor de script. Un script se agrega automaticamente para recuperar los detalles del iniciador del proceso + ![editor script A](images/ex05/ex5_04.png) + +1. Selecciona *userProfessionalContact* en el mismo menú **Plantillas de codigo/Usuarios de Bonita** y arrástralo al editor, entre `.getStartedBy` y `}catch(UserNotFoundException e){` + - Para poder recuperar el correo electronico del iniciador del proceso, reemplaza *userId* por `processInitiator.id` + - Añade "." y selecciona *email: string* en la lista + - Cambia `def proContactData =` por `return` + + ![editor script B](images/ex05/ex5_05.png) + + - Haz clic en el botón **Aceptar** para cerrar el editor de scripts + - Haz clic en el botón **Siguiente** + - Especifica *Solicitud de vacaciones aprobada* como asunto + - Haz clic en **Finalizar** + + +1. Repite el paso anterior nombrando el conector *enviarCorreoRechazo* y especificando *Solicitud de vacaciones rechazada* como asunto + + Alternativamente, puedes usar la funcionalidad que te permite copiar un conector configurado en una tarea a otra tarea. + +## Prueba el proyecto + +1. Lanza el proyecto a partir del Studio (el usuario *Walter Bates* sera utilizado) + +1. Envía el formulario de *Solicitud de vacaciones*. Los actores siendo correctamente configurados, la tarea *Validación de solicitud de vacaciones* no será propuesta a Walter Bates. + +1. En la barra superior a la izquierda, haz clic en **Walter Bates**, y después en **Cerrar sesión**: + ![desconectar del portal](images/ex04/ex4_08.png) + +1. Conéctate con el usuario *"helen.kelly"* y la contraseña *"bpm"* + +1. El filtro de actor se ha ejecutado correctamente, la tarea *Validación de solicitud de vacaciones* aparece en la lista de tareas a ejecutar. + +1. Ejecuta el proceso dos veces para probar las diferentes rutas y asegúrate de que FakeSMTP envíe e intercepte los correos electrónicos + +[Ejercicio siguiente: creación de aplicaciones](07-applications.md) diff --git a/docs/es/06-applications.md b/docs/es/07-applications.md similarity index 58% rename from docs/es/06-applications.md rename to docs/es/07-applications.md index 3f67780..b39d5a9 100644 --- a/docs/es/06-applications.md +++ b/docs/es/07-applications.md @@ -1,39 +1,41 @@ --- -title: Ejercicio 6 - Crear una aplicación de gestión de vacaciones +title: Ejercicio 7 - Crear una aplicación de gestión de vacaciones --- ## Objetivo El objetivo de este ejercicio es proporcionar a los usuarios una aplicación que permita rastrear y crear solicitudes de vacaciones. -## Resumen de las instrucciones +## Instrucciones resumidas -Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *6.O.0*. +1. Crea una nueva página en la aplicación y nómbrala *SeguimientoDeSolicitud*, que permitirá rastrear kas solicitudes creadas por el usuario conectado. + Esta página contiene un contenedor múltiple que enumera las solicitudes de vacaciones abiertas. Para cada solicitud, se muestran la fecha de inicio, el número de días y el estado de aprobación. -Abre el UI Designer y crea una nueva **Página de aplicación** llamada *SeguimientoDeSolicitud* que permite el seguimiento de las solicitudes de vacaciones iniciadas por el usuario conectado. +1. Agrega un nuevo contenedor *form container* para crear una nueva solicitud. + Este formulario contiene un widget *Fecha* y un widget *Input* para recolectar la información necesaria para la nueva solicitud. -Esta página contiene un contenedor múltiple que enumera las solicitudes de vacaciones abiertas. Para cada solicitud, se muestran la fecha de inicio, el número de días y el estado de aprobación. +1. Crea un descriptor de aplicación y agrega la nueva **Página de aplicación** llamada *SeguimientoDeSolicitud* -Agrega un enlace al formulario de instanciación para iniciar una nueva solicitud de vacaciones. +1. Despliega la aplicación y accede a ella utilizando la URL única generada. -Cree una nueva aplicación y agregue la página *SeguimientoDeSolicitud*. +## Instrucciones paso a paso -Acceda a la aplicación recién creada utilizando la URL única generada. +### Crea una nueva página en la aplicación y nómbrala *SeguimientoDeSolicitud* -## Instrucciones paso a paso +1. En tu navegador, vuelev al UI Designer + Si la ventana ha sido cerrada, vuele al Studio y haz clic en el botón **UI Designer** + +1. Haz clic en el botón **Crear** -1. Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *5.O.0*. +1. Selecciona **Página de aplicación** como tipo -1. Crea una página de aplicación: - - En el Studio, haz clic en el botón **UI Designer** - - Haz clic en el botón **Crear** - - Selecciona **Página de aplicación** - - Ingresa el nombre *SeguimientoDeSolicitudes* - - Haz clic en **Crear** +1. Ingresa el nombre *SeguimientoDeSolicitudes* + +1. Haz clic en **Crear** ![crear una página de aplicación](images/ex06/ex6_01.png) - - La vista del diseñador ahora debería mostrarse + La vista de diseñador ahora debería mostrarse 1. Agrega un título a tu página: - Arrastra el widget **Título** (A) desde la paleta y colócalo en la parte superior de la página (B) @@ -43,27 +45,58 @@ Acceda a la aplicación recién creada utilizando la URL única generada. ![agregar widget título](images/ex06/ex6_02.png) + 1. Crea una variable para guardar la información de la sesión: + - Abajo en donde se listan las variables, haz clic en **Crear una nueva variable** + - Nómbrala *"sessionInfo"* + - Elige como tipo **External API** + - En el campo **API URL**, introduce `../API/system/session/unusedId` + - Haz clic en **Guardar** + 1. Crea una variable para listar las solicitudes de vacaciones: - - Haz clic en el ícono **Modelo de datos** ![icone-datamodel](images/ex06/ex6_00.png) - - Arrastra y suelta *SolicitudVacaciones* en la página - - Mantenga el nombre predeterminado: *solicitudVacaciones* + - Haz clic en el ícono **Modelo de datos** + ![icone-datamodel](images/ex06/ex6_00.png) + - Arrastra y suelta *SolicitudVacaciones* en la página, debajo del título + - Deja el nombre predeterminado: *solicitudVacaciones* - En la sección **Consultas de "Buscar (Find)" en un atributo**, selecciona *solicitanteId* + - En la sección *Filtrar la búsqueda finByIdDemandeur* utiliza la variable: `{{sessionInfo.user_id}}` - Haz clic en el botón **Guardar** Se genera automáticamente un contenedor múltiple con una tabla que contiene los atributos del objeto SolicitudVacaciones. - + ![contenedor multiple](images/ex06/ex6_13.png) -1. Sustituir el subtítulo *SolicitudVacaciones* del contenedor y las etiquetas : - - Nómbralo *Seguimientio de solicitudes* +1. Modifica las propiedades de los widgets en el contenedor: + - Selecciona el widget subtítulo *SolicitudVacaciones* y nómbralo *Seguimientio de solicitudes* - Selecciona la opción **Nivel 4** para el parámetro **Nivel del título**. - Selecciona la opción **centrado** para el parámetro **alineación**. - - Selecciona el widget Tabla - - En el panel de la derecha, en el campo **Cabeceras**, borra *Solicitante Id*. + - Selecciona el widget Tabla, en el panel de la derecha, en el campo **Cabeceras**, borra *Solicitante Id* - Sustituye *Fecha Inicio* por *Fecha de inicio* y *Número Dias* por *Número de días*. + + + 1. Declara una nueva expresión JavaScript para formatear la columna "Estátus" de la lista: + - Haz clic en **Crear una nueva variable** + - Nómbrala *"agregarEstatusSolicitudVacaciones"* + - Elige como tipo **JavaScript expression** + - Reemplaza el valor existente por el siguiente script: + ```javascript + if($data.hasOwnProperty('solicitudVacaciones') && $data.solicitudVacaciones) { + for (let solicitud of $data.solicitudVacaciones) { + if(solicitud.esAprobada) { + demande.esAprobadaEtiqueta = "Aprobada"; + } else if(solicitud.esAprobada === false) { + demande.esAprobadaEtiqueta = "Rechazada"; + } else { + demande.esAprobadaEtiqueta = "En curso"; + } + } + } + + return $data.solicitudVacaciones; + ``` 1. Muestra la información en las columnas de la tabla de una manera más clara: - En el panel de la derecha, en el campo **Claves de columna**, elimina *solicitanteId* + - En el mismo campo, reemplaza *esAprobada* por *esAprobadaEtiqueta*, creada en la variable JavaScript - Borra el widget Input *SolicitanteId* en el contenedor de detalles porque esta información no es útil. 1. Selecciona el widget *Fecha Inicio* y cambia las siguientes propiedades: @@ -90,7 +123,7 @@ Acceda a la aplicación recién creada utilizando la URL única generada. - Puedes obtener una vista previa de la página en cualquier momento haciendo clic en **Vista previa** - > Consejo: si está conectado al portal en el mismo navegador, se mostrarán las solicitudes de vacaciones reales. + > Consejo: si estás conectado al portal en el mismo navegador, se mostrarán las solicitudes de vacaciones reales. 1. Agrega un nuevo widget de tipo **Link**: - Arrastra un widget de tipo **Link** desde la paleta y colócalo entre los dos títulos @@ -132,9 +165,5 @@ Acceda a la aplicación recién creada utilizando la URL única generada. ![vista previa de la aplicación](images/ex06/ex6_08.png) - -**¡Ya esta!** - -¿Quieres ir más allá? Sigue la siguiente iteración del proyecto. -Próximo ejercicio: [agregar un temporizador al proceso](07-timer.md) +Próximo ejercicio: [Agregar un fragmento](08-fragment.md) diff --git a/docs/es/08-fragment.md b/docs/es/08-fragment.md new file mode 100644 index 0000000..445e6d9 --- /dev/null +++ b/docs/es/08-fragment.md @@ -0,0 +1,101 @@ +--- +title: Ejercicio 8 - Agregar un fragmento +--- + +## Objetivo + +El objetivo de este ejercicio es enriquecer la aplicación para que los usuarios creen y gestionen sus solicitudes de vacaciones agregando un fragmento a la página *SeguimientoDeSolicitud*. + +## Instrucciones resumidas + +1. En el formulario *ingresarSolicitudVacaciones*, crea un fragmento con los widgets *DatePicker* et *Input* para recolectar la información al llenar una nueva solicitud. +1. Utiliza este fragmento en la página y vincula sus datos. +1. Despliega nuevamente la página de la aplicación utilizando el botón **Deploy** del descriptor de la aplicación en Bonita Studio. + +## Instrucciones paso a paso + +### En el formulario *ingresarSolicitudVacaciones*, crea un fragmento + +1. Abre el formulario + - Vuelve a la página de inicio de UI Designer + - Selecciona el formulario *ingresarSolicitudVacaciones* en la pestaña **Fomularios** y haz clic para abrirlo + +1. Crea un fragmento a partir del formulario *ingresarSolicitudVacaciones* + - Selecciona el contenedor con los 2 widgets *Fecha de ínicio* y *Número de días* + - En el panel derecho, haz clic en **...** y selecciona **Guardar como fragmento**. + ![selección de fragmentos en UI Designer](images/ex10/ex10_03.png) + + - Nómbralo *nuevaSolicitudVacacionesFragmento*. + - Haz clic en **Guardar**. Aparece una nueva pestaña de menú en la parte izquierda del UI Designer. + ![fragmento de menú en UI Designer](images/ex10/ex10_04.png) + - Guarda el formulario y vuelve a la página de inicio de UI Designer + +1. Configura el fragmento: + - Selecciona el fragmento y haz clic en **Editar...** para configurar los datos del fragmento + ![Fragmento de menú en UI Designer](images/ex10/ex10_05.png) + - Haz clic en **Crear una nueva variable** + - Nómbrala *dataExt*. + - Haz clic en **Sí** para exponer los datos del fragmento a la página y **Guardar** la variable + - Selecciona el widget *DatePicker*. + - En el campo *Valor* sustituye *formInput* por *dataExt* + - Selecciona el widget *Input* y sustituye formInput por *dataExt* en el campo *Value* + - Haz clic en **Guardar**. + +### Utiliza este fragmento en la página y vincula sus datos + +1. Utiliza este fragmento en la página + - Vuelve a la página *SeguimientoDeSolicitud* + - Borra los campos *Date Picker* e *Input* + - Arrastra y suelta el *nuevaSolicitudVacacionesFragmento* del menú de la izquierda al contenedor del formulario. + +1. Vincula los datos del fragmento con los datos de la página: + - Vuelva a la página de la aplicación *SeguimientoDeSolicitud*. + - En el panel de configuración, en *Datos de fragmento enlazable* agrega la variable *nuevaSolicitudVacaciones* + - Guarda los cambios. + - Haz clic en **Vista previa** + La página ahora debería verse así: + ![página de aplicación en UI Designer con formulario](images/ex06/ex6_05.png) + + +1. Crea una nueva variable para almacenar información relacionada con el proceso: + - Haz clic en **Crear una nueva variable** + - Nombra la variable *informacionDefinicionProceso* + - Elije el tipo **API externa** + - En el campo **API URL**, escribe: + `../API/bpm/process?p=0&c=10&f=name=SolicitudVacaciones&o=version%20desc` + +1. Agrega un botón para enviar el formulario: + - Arrastra el widget **Botón** desde la paleta y colócalo en el contenedor del formulario debajo de los dos widgets + - Ingresa *Crear una nueva solicitud* en el campo **Etiqueta** + - Selecciona **POST** de la lista desplegable **Acción** + - Haz clic en **fx** para cambiar el modo del campo **Datos enviados al hacer clic** y selecciona *nuevaSolicitudVacaciones* + - En el campo **URL para llamar**, escribe: `../API/bpm/process/{% raw %}{{informacionDefinicionProceso[0].id}}{% endraw %}/instantiation` + - En el campo **URL de destino si tiene éxito**, escribe: `/bonita/apps/solicitud-vacaciones` (de momento no se puede ir a la página porque hay que crear la aplicación de destino) + - Selecciona la opción **centrado** para el parámetro **Alineación** + - Selecciona la opción **primary** para el parámetro **Estílo** + - Guarda los cambios. La página ahora debería verse así: + + ![página de aplicación en UI Designer con formulario](images/ex06/ex6_05.png) + + - La vista previa de la página te permite verificar que funciona correctamente + + +### Despliega nuevamente la página de la aplicación utilizando el botón **Deploy** del descriptor de la aplicación en Bonita Studio. + +1. Desde Bonita Studio, haz clic en el botón **Desplegar** + Se abre una ventana de despliegue. + +1. Haz clic en *Desplegar* (B) + + ![Deploy the application](images/ex10/ex10_07.png) + +1. Para abrir la aplicación, selecciona *Aplicación de solicitud de vacaciones como usuario*. +1. Haz clic en *Abrir*. + + ![opening window](images/ex10/ex10_08.png) + +La aplicación debería tener este aspecto una vez desplegada: + + ![application rendering](images/ex06/ex6_08.png) + +¡Y ya está! ;) \ No newline at end of file diff --git a/docs/es/09-actor-filter.md b/docs/es/09-actor-filter.md deleted file mode 100644 index 16616f2..0000000 --- a/docs/es/09-actor-filter.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Ejercicio 9 - Agregar un filtro de actor ---- - -## Objetivo - -El objetivo de este ejercicio es mejorar la colaboración entre actores añadiendo un filtro de actores al carril del validador. - -## Resumen de las instrucciones - -Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *9.0.0*. - -Sustituye el actor **validador** actual por un filtro de actores de tipo **gestor de iniciadores** en el carril *Validador*. - -## Instrucciones paso a paso - -1. Dupliqua el diagrama de proceso del ejercicio anterior para crear una versión *9.0.0*. - -1. Configura un filtro de actor del tipo **Gestor iniciador** en la senda *Validador*: - - Selecciona la senda *Validador* - - Navega en la pestaña **General / Actores** - - Selecciona el actor *Empleado actor* del menú desplegable para reemplazar el actor *validador* - Un mensaje te informará de que es necesario instalar primero un filtro de actores. Haz clic en **Aceptar**. El Bonita MarketPlace se abrirá automáticamente - ![mercado de filtros de actores](images/ex09/ex9_01.png) - - Selecciona el filtro *Administrador de iniciadores*. - - Haz clic en **Instalar**. - - Selecciona la definición del filtro **Gestor iniciador** - - Haz clic en **Siguiente** - - Nombra el filtro *responsableIniciador* - - Haz clic en **Finalizar** - -1. Ejecuta el proceso con los dos actores: - - Inicia el proceso desde Studio (se usará el usuario Walter Bates) - - Envía el *Formulario de solicitud de vacaciones*. Si los actores están configurados correctamente, no se debe proponer la tarea *Validar solicitud de vacaciones* - - Cierra sesión en el portal haciendo clic en el nombre de usuario en la esquina superior derecha y luego **Cerrar sesión**: - ![cierre de sesión del portal](images/ex04/ex4_08.png) - - Conéctate con el usuario *helen.kelly* y la contraseña *bpm* - - Si el filtro de actor se ejecutó correctamente, la tarea *Validar solicitud de vacaciones* debería estar disponible en la lista de tareas - -[Último ejercicio: enriquecer una aplicación con un fragmento](10-fragment.md) diff --git a/docs/es/10-fragment.md b/docs/es/10-fragment.md deleted file mode 100644 index 48b0ad3..0000000 --- a/docs/es/10-fragment.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Ejercicio 6 - Enriquecer la aplicación con un fragmento ---- - -## Objetivo - -El objetivo de este ejercicio es enriquecer la aplicación para que los usuarios creen y gestionen sus solicitudes de vacaciones agregando un fragmento a la página *SeguimientoDeSolicitud*. - -## Resumen de las instrucciones - -Abre el UI Designer y vete a la página de la aplicación llamada *SeguimientoDeSolicitud*. - -Esta página ya contiene un "contenedor múltiple" que enumera las solicitudes de baja en curso. Vamos a configurar este contenedor para enriquecerlo. Para cada solicitud se mostrará un estado claro. - -Tambien vamos a configurar un contenedor de fragmentos para poder enviar una nueva solicitud. -Para eso, vas a crear un fragmento que contenga un widget de fecha y un widget de entrada para recoger la información de las nuevas solicitudes de vacaciones en la página. Utiliza este fragmento en la página y vincula sus datos. -A continuación, agrega un botón para iniciar una nueva solicitud de vacaciones. - -Hay que desplegar otra vez la página de la aplicación utilizando el botón **Deploy** del descriptor de la aplicación en Bonita Studio. - -## Instrucciones paso a paso - -1. Abre la página *SeguimientoDeSolicitud* en el UI Designer: - - En el Studio, haz clic en el botón **UI Designer** - - Selecciona la página ya creada *SeguimientoDeSolicitud*. Se abre el editor del UI Designer. - - Borra el widget **Link** - -1. Crea una variable para almacenar información de sesión: - - Haz clic en **Crear una nueva variable** - - Nombra la *sessionInfo* - - Elije el tipo **external API** - - Añade en el campo **API URL**: `../API/system/session/unusedId` - - ![agregar variable sessionInfo](images/ex06/ex6_03.png) - -1. Declara una nueva expresión de JavaScript para formatear la lista: - - Haz clic en **Crear una nueva variable** - - Nombra el *agregarEtiquetaEstadoSolicitud* - - Elije el tipo **JavaScript expression** - - Reemplaza el valor existente con el siguiente script: - - ```javascript - if($data.hasOwnProperty('solicitudVacaciones') && $data.solicitudVacaciones) { - for (let solicitud of $data.solicitudVacaciones) { - if(solicitud.estaAprobado) { - solicitud.estaAprobadoEtiqueta = "Aprobada"; - } else if(solicitud.estaAprobado === false) { - solicitud.estaAprobadoEtiqueta = "Rechazada"; - } else { - solicitud.estaAprobadoEtiqueta = "En curso"; - } - } - } - - return $data.solicitudVacaciones; - ``` -1. Muestra la información en las columnas de la tabla de una manera más clara: - - En el panel de la derecha, en el campo **Cabeceras** , cambia Esta Aprobado por *Estado* - - En el campo **Claves de columna**,cambia estaAprobado por *estaAprobadoEtiqueta* - -1. Añade un nuevo contenedor de formularios: - - Arrastra un contenedor de formulario desde la paleta y colóquelo entre los dos títulos - -1. Cree una nueva variable para almacenar los valores de la nueva solicitud de permiso: - - Haga clic en **Crear una nueva variable** - - Nómbrala *nuevaSolicitudDeVacaciones*. - - Elige el tipo **JSON**. - - Haga clic en **Guardar**. - -1. Crea un fragmento del formulario *ingresarSolicitudVacaciones* que se reutilizará en la página: - - Vuelve a la página de inicio de UI Designer - - Selecciona el formulario *ingresarSolicitudVacaciones* en la pestaña **Fomularios** y haz clic para abrirlo - - En el formulario *ingresarSolicitudVacaciones*, selecciona el contenedor con los 2 widgets *Fecha de ínicio* y *Número de días* - - En el panel derecho, haz clic en **...** y selecciona **Guardar como fragmento**. - ![selección de fragmentos en UI Designer](images/ex10/ex10_03.png) - - Nómbralo *nuevaSolicitudVacacionesFragmento*. - - Haz clic en **Guardar**. Aparece una nueva pestaña de menú en la parte izquierda del UI Designer. - ![fragmento de menú en UI Designer](images/ex10/ex10_04.png) - - Guarda el formulario y vuelve a la página de inicio de UI Designer - -1. Agrega el fragmento en el contenedor del formulario y configúralo: - - Vuelve a la página *SeguimientoDeSolicitud* - - Arrastra y suelta el *nuevaSolicitudVacacionesFragmento* del menú de la izquierda al contenedor del formulario. - - Selecciona el fragmento y haz clic en **Editar...** para configurar los datos del fragmento - ![Fragmento de menú en UI Designer](images/ex10/ex10_05.png) - - Haz clic en **Crear una nueva variable** - - Nómbrala *dataExt*. - - Haz clic en **Sí** para exponer los datos del fragmento a la página y **Guardar** la variable - - Selecciona el widget *DatePicker*. - - En el campo *Valor* sustituye *formInput* por *dataExt* - - Selecciona el widget *Input* y sustituye formInput por *dataExt* en el campo *Value* - - Haz clic en **Guardar**. - -1. Vincula los datos del fragmento con los datos de la página: - - Vuelva a la página de la aplicación *SeguimientoDeSolicitud*. - - En el panel de configuración, en *Datos de fragmento enlazable* agrega la variable *nuevaSolicitudVacaciones* - -1. Crea una nueva variable para almacenar información relacionada con el proceso: - - Haz clic en **Crear una nueva variable** - - Nombra la variable *informacionDefinicionProceso* - - Elije el tipo **API externa** - - En el campo **API URL**, escribe: - `../API/bpm/process?p=0&c=10&f=name=SolicitudVacaciones&o=version%20desc` - -1. Agrega un botón para enviar el formulario: - - Arrastra el widget **Botón** desde la paleta y colócalo en el contenedor del formulario debajo de los dos widgets - - Ingresa *Crear una nueva solicitud* en el campo **Etiqueta** - - Selecciona **POST** de la lista desplegable **Acción** - - Haz clic en **fx** para cambiar el modo del campo **Datos enviados al hacer clic** y selecciona *nuevaSolicitudVacaciones* - - En el campo **URL para llamar**, escribe: `../API/bpm/process/{% raw %}{{informacionDefinicionProceso[0].id}}{% endraw %}/instantiation` - - En el campo **URL de destino si tiene éxito**, escribe: `/bonita/apps/solicitud-vacaciones` (de momento no se puede ir a la página porque hay que crear la aplicación de destino) - - Selecciona la opción **centrado** para el parámetro **Alineación** - - Selecciona la opción **primary** para el parámetro **Estílo** - - Guarda los cambios. La página ahora debería verse así: - - ![página de aplicación en UI Designer con formulario](images/ex06/ex6_05.png) - - - La vista previa de la página te permite verificar que funciona correctamente - -> Consejo: si está conectado al Portal en el mismo navegador, se mostrará la solicitud de baja actual. - -1. Despliegue de nuevo la aplicación desde Bonita Studio: - - Haz clic en el botón **Desplegar** - - Se abre una ventana de despliegue. Haz clic en *Desplegar* (B) - - ![Deploy the application](images/ex10/ex10_07.png) - - - Para abrir la aplicación, selecciona *Aplicación de solicitud de vacaciones como usuario*. - - Haz clic en *Abrir*. - - ![opening window](images/ex10/ex10_08.png) - -La aplicación debería tener este aspecto una vez desplegada: - - ![application rendering](images/ex06/ex6_08.png) - -¡Y ya está! \ No newline at end of file diff --git a/docs/es/08-data-contract-constraints.md b/docs/es/100-data-contract-constraints.md similarity index 100% rename from docs/es/08-data-contract-constraints.md rename to docs/es/100-data-contract-constraints.md diff --git a/docs/es/images/ex01/ex1_02.png b/docs/es/images/ex01/ex1_02.png new file mode 100644 index 0000000..f41b5bb Binary files /dev/null and b/docs/es/images/ex01/ex1_02.png differ diff --git a/docs/es/images/ex01/ex1_10.png b/docs/es/images/ex01/ex1_10.png index bedd486..6e072d4 100644 Binary files a/docs/es/images/ex01/ex1_10.png and b/docs/es/images/ex01/ex1_10.png differ diff --git a/docs/es/images/preferences.png b/docs/es/images/preferences.png index 38d1a20..3c65853 100644 Binary files a/docs/es/images/preferences.png and b/docs/es/images/preferences.png differ diff --git a/docs/es/images/ui_designer.png b/docs/es/images/ui_designer.png new file mode 100644 index 0000000..29f0e11 Binary files /dev/null and b/docs/es/images/ui_designer.png differ diff --git a/docs/es/images/ui_designer_24x24.png b/docs/es/images/ui_designer_24x24.png index 274c37e..36b0334 100644 Binary files a/docs/es/images/ui_designer_24x24.png and b/docs/es/images/ui_designer_24x24.png differ diff --git a/docs/es/index.md b/docs/es/index.md index 4ccbd29..2b09745 100644 --- a/docs/es/index.md +++ b/docs/es/index.md @@ -4,32 +4,31 @@ title: Bonita Camp 🇪🇸 ## Presentación -Bonita Camp es una capacitación introductoria sobre el uso de Bonita Community Edition. Su propósito es permitirle familiarizarse con los conceptos y funcionalidades centrales de Bonita. -Bonita Camp incluye información teórica y una parte de puesta en práctica con ejercicios para crear una primera aplicación con Bonita. -Si necesita ayuda no dude en: -* Hacer sus preguntas en el [foro de la comunidad](https://community.bonitasoft.com/questions-and-answers) -* [Pónerse en contacto con Bonitasoft](https://es.bonitasoft.com/contactenos) para obtener más información sobre la oferta de [soporte](https://es.bonitasoft.com/soporte) y las características adicionales de la Edición Enterprise +Bonita Camp es una capacitación introductoria sobre el uso de Bonita Community Edition. Su propósito es permitirte familiarizarte con los conceptos y funcionalidades centrales de Bonita. +Bonita Camp incluye información teórica y una parte práctica con ejercicios para crear una primera aplicación con Bonita. +Si necesitas ayuda no dudes en: +* Hacer tus preguntas en el [foro de la comunidad](https://community.bonitasoft.com/questions-and-answers) +* [Ponerte en contacto con Bonitasoft](https://es.bonitasoft.com/contactenos) para obtener más información sobre la oferta de [soporte](https://es.bonitasoft.com/soporte) y las características adicionales de la edición Enterprise -Bonita Camp consiste en: +Bonita Camp contiene: * Un conjunto de diapositivas presentadas y comentadas en una [serie de videos](https://www.youtube.com/playlist?list=PLvvoQatxaHOPSATzZe-zPh-LrSNGfpQEf) o durante sesiones en vivo * Un conjunto de ejercicios descritos en este sitio web * Las [correcciones de ejercicio](https://github.com/Bonitasoft-Community/bonita-camp/releases/latest) ## Prerrequisitos -1. [Descargar](https://es.bonitasoft.com/descargas) e instalar la última versión de Studio Bonita. Para obtener más detalles, consulte la [documentación oficial](https://documentation.bonitasoft.com/bonita//bonita-studio-download-installation) +1. [Descargar](https://es.bonitasoft.com/descargas) e instalar la última versión de Bonita Studio. Para obtener más detalles, consulta la [documentación oficial](https://documentation.bonitasoft.com/bonita/latest/bonita-studio-download-installation) (en inglés). 1. Validar el correcto funcionamiento de Bonita Studio: - - Inicie el estudio - - Haga clic en el botón **Portal** ![Icono del portal](images/portal-icon.png) en la barra de herramientas de Studio: el portal debe abrirse en su navegador web - - Haga clic en el botón **UI Designer** ![Icono de UI Designer](images/ui_designer_24x24.png) en la barra de herramientas de Studio: el UI Designer debería abrirse en su navegador web - 1. También puede descargar opcionalmente las correcciones y diapositivas en formato PDF desde la [sección "release" del proyecto GitHub bonita-camp](https://github.com/Bonitasoft-Community/bonita-camp/releases/latest) - 1. Se recomienda utilizar Chrome o Firefox durante el desarrollo para beneficiarse de las herramientas de prueba de estos navegadores. Internet Explorer 11, Edge y Safari también son compatibles (soporte parcial para IE11). Para saber qué navegador Bonita Studio usa por defecto, haga clic en el botón **Portal** ![Icono del portal](images/portal-icon.png). - El portal Bonita debería abrirse con el navegador predeterminado para su sistema operativo. Puede configurar Bonita Studio para usar un navegador que no sea el predeterminado: - - En el estudio, haga clic en el botón **Preferencias** [icono de preferencias](images/preferences.png) - - En la sección **Web** haga clic en **Navegador** - - Haga clic en el botón **Nuevo...** - - Ingrese un nombre y use el botón **Examinar ...** para seleccionar el ejecutable del navegador web (por ejemplo, *C:\Archivos_de_programa(x86)\Google\Application\chrome.exe* para Chrome en Windows) + - Inicia Bonita Studio + - En el menú Ayuda, selecciona **Probar conexión con los repositorios Maven**: un mensaje de indicado prueba de conexión exitosa debe aparecer. + - Haz clic en el botón **UI Designer** ![Icono de UI Designer](images/ui_designer_24x24.png) en la barra de herramientas de Studio: el UI Designer debe abrirse en tu navegador web + + 1. Se recomienda utilizar Chrome o Firefox durante el desarrollo para beneficiar de las herramientas de prueba de estos navegadores. Internet Explorer 11, Edge y Safari también son compatibles (soporte parcial para IE11). Bonita Studio utilizará el navigador configurado como predeterminado del sistema. Si deseas que Bonita Studio utilice un navegador diferente, puedes configurarlo: + - En la barra de herramientas del Studio, haz clic en el botón **Preferencias** ![icono de preferencias](images/preferences.png) + - En la sección **Web** haz clic en **Navegador** + - Si el navegador deseado no se encuentra en la lista **Navegadores web externos**, haz clic en el botón **Nuevo...** + - Ingresa un nombre y da clic el botón **Examinar ...** para seleccionar el ejecutable del navegador web (por ejemplo, *C:\Archivos_de_programa(x86)\Google\Application\chrome.exe* para Chrome en Windows) - Haga clic en el botón **Aceptar** - - En la lista **Navegadores web externos** seleccione el navegador deseado y haga clic en el botón **Aplicar** - - Cerrar la ventana de preferencias + - En la lista **Navegadores web externos** selecciona el navegador deseado y haz clic en el botón **Aplicar** + - Cierra la ventana de preferencias [Empezar los ejercicios](00-introduction.md) diff --git a/docs/fr/01-bpmn-design.md b/docs/fr/01-bpmn-design.md index 8c79733..ff5526f 100644 --- a/docs/fr/01-bpmn-design.md +++ b/docs/fr/01-bpmn-design.md @@ -9,7 +9,7 @@ L'objectif de cet exercice est de créer une première version, simple, de la d A ce stade, le processus sera exécutable mais ne présentera pas encore "d'intérêt métier", car il ne disposera pas de données ni d'interfaces utilisateurs. Nous le compléterons dans les exercices suivants. -Note : la validation des diagrammes dans Bonita Studio doit être déclenchée manuellement : après avoir corrigé une erreur ou un avertissement, allez dans la zone de propriétés en bas du studio, puis dans l'onglet *Statut de validation* et cliquez sur le bouton **Rafraîchir**, ou allez dans le menu *Fichier* en haut du studio et cliquez sur l'option **Valider**. +> Note : la validation des diagrammes dans Bonita Studio doit être déclenchée manuellement : après avoir corrigé une erreur ou un avertissement, allez dans la zone de propriétés en bas du studio, puis dans l'onglet *Statut de validation* et cliquez sur le bouton **Rafraîchir**, ou allez dans le menu *Fichier* en haut du studio et cliquez sur l'option **Valider**. ## Instructions simples @@ -62,9 +62,9 @@ Note : la validation des diagrammes dans Bonita Studio doit être déclenchée m 1. Ajouter une porte exclusive *Demande approuvée ?* à la suite de la tâche *Valider demande* : - Depuis la tâche *Valider demande* sélectionnée, cliquer sur l'icon contextuel de porte logique, puis effectuer un glisser-déposer vers la droite. Une porte logique parallèle a été créée - ![création de porte logique depuis une tâche](images/ex01/ex1_02.png) + ![création de porte logique depuis une tâche](images/ex01/ex1_02.png) - Cliquer sur l'icon contextuel *Modifier le type de l'élément ...* (1) puis sélectionner *Porte logique exclusive* (2) - ![Modification du type de porte logique](images/ex01/ex1_03.png) + ![Modification du type de porte logique](images/ex01/ex1_03.png) - Renommer la porte exclusive ainsi créée en *Demande approuvée ?* 1. Créer une tâche automatique "Notifier approbation" à partir de la porte logique : diff --git a/docs/fr/02-timers.md b/docs/fr/02-timers.md index 3a0ebd3..ae06b87 100644 --- a/docs/fr/02-timers.md +++ b/docs/fr/02-timers.md @@ -1,11 +1,12 @@ --- title: Exercice 2 - Ajout d'une minuterie à la tâche de validation +--- ## Objectif -L'objectif de cet exercice est d'enrichir la modélisation du processus de demande de congés en créant une notification pour le valideur s'il n'a pas réalisé sa tâche à temps, sans pour autant interrompre le processus. + L'objectif de cet exercice est d'enrichir la modélisation du processus de demande de congés en créant une notification pour le valideur s'il n'a pas réalisé sa tâche à temps, sans pour autant interrompre le processus. -Cela est réalisé en ajoutant un événement de type "timer" dans le processus. + Cela est réalisé en ajoutant un événement de type "timer" dans le processus. > ⚠ Il est important de respecter strictement la casse et la syntaxe des noms techniques fournis dans les instructions. @@ -38,7 +39,7 @@ Cela est réalisé en ajoutant un événement de type "timer" dans le processus. 1. Ajouter un événement de fin après la tâche automatique et le nommer *Fin - rappel envoyé*. -1.Configurer l'événement de minuterie : +1. Configurer l'événement de minuterie : - Sélectionner l'événement de minuterie - Dans la zone de propriétés, l'onglet *Général* et sous-onglet *Général* sont déjà sélectionnés - Dans *Nom*, modifier le nom par défaut en *"Envoyer rappel après 5 sec"* @@ -47,6 +48,7 @@ Cela est réalisé en ajoutant un événement de type "timer" dans le processus. - Dans le cham *Secondes*, indiquer *"5"* - Cliquer sur **Générer l'expression d'une durée** - Cliquer sur **Terminer** + ![condition de la minuterie](images/ex07/ex7_03.png) - La condition de la minuterie va être automatiquement générée et apparaît dans l'onglet *Général* Le connecteur pour l'envoi du mail une fois la minuterie écoulée sera configuré plus tard. diff --git a/docs/fr/03-data-contract.md b/docs/fr/03-data-contract.md index bf630f4..43f5c22 100644 --- a/docs/fr/03-data-contract.md +++ b/docs/fr/03-data-contract.md @@ -19,19 +19,19 @@ Une fois complété, le processus sera exécutable, toujours en utilisant les fo 1. Dupliquer le diagramme de processus et le processus de l'exercice précédent, pour créer des versions 2.0.0. 1. Créer un objet métier *"DemandeConges"* puis les attributs suivants : -Nom | Type | Multiple | Obligatoire ---- | ---- | -------- | ----------- -*idDemandeur* | `Long` | ◻ | ☑ -*dateDebut* | `Date only` | ◻ | ☑ -*nombreJours* | `Entier` | ◻ | ☑ -*estApprouvee* | `Booléen` | ◻ | ◻ + Nom | Type | Multiple | Obligatoire + --- | ---- | -------- | ----------- + *idDemandeur* | `Long` | ◻ | ☑ + *dateDebut* | `Date only` | ◻ | ☑ + *nombreJours* | `Entier` | ◻ | ☑ + *estApprouvee* | `Booléen` | ◻ | ◻ 1. Déclarer une variable métier *demande* de type *DemandeConges* sur le pool. 1. Générer un contrat à l'instanciation du processus, en incluant les éléments suivants : -- dateDebut -- nombreJours + - dateDebut + - nombreJours Utiliser pour ce faire l'assistant *Ajouter à partir de données...*. @@ -39,7 +39,7 @@ Utiliser pour ce faire l'assistant *Ajouter à partir de données...*. 1. Ajouter un contrat sur l'étape *Valider demande* en utilisant l'assistant avec l'élément suivant : -- estApprouvee + - estApprouvee 1. Configurer la condition sur la transition *Oui* pour en faire l'attribut *estApprouvee* de l'objet *demande* @@ -64,26 +64,30 @@ Utiliser pour ce faire l'assistant *Ajouter à partir de données...*. Il s'agit d'un attribut, il débute par une minuscule. 1. Pour le *Type*, sélectionner **LONG**, pour *Multiple*, ne rien faire et pour *Obligatoire*, cocher la case. + + Nom | Type | Multiple | Obligatoire + --- | ---- | -------- | ----------- + *idDemandeur* | `LONG` | ◻ | ☑ 1. En haut du tableau, cliquer sur **Ajouter** puis ajouter les attributs suivants (B) : - Nom | Type | Multiple | Obligatoire - --- | ---- | -------- | ----------- - *dateDebut* | `DATE ONLY` | ◻ | ☑ - *nombreJours* | `INTEGER` | ◻ | ☑ - *estApprouvee* | `BOOLEAN` | ◻ | ◻ + Nom | Type | Multiple | Obligatoire + --- | ---- | -------- | ----------- + *dateDebut* | `DATE ONLY` | ◻ | ☑ + *nombreJours* | `INTEGER` | ◻ | ☑ + *estApprouvee* | `BOOLEAN` | ◻ | ◻ - ![définition du modèle de données métier](images/ex02/ex2_01.png) + ![définition du modèle de données métier](images/ex02/ex2_01.png) 1. Dans l'explorateur du projet, à gauche de l'écran, le message suivant s'est affiché pour indiquer qu'il faut déployer le Modèle de Données Métier : - ![message d'information déploiement du BDM](images/ex02/ex2_09.png) + ![message d'information déploiement du BDM](images/ex02/ex2_09.png) 1. Dans la toolbar de l'éditeur, cliquer sur le bouton ![icon déploiement](images/ex02/ex2_11.png). La fenêtre modale *Enregistrer la ressource* propose d'enregistrer les modifications avant de déployer. Cliquer sur **Enregistrer et déployer**. Le message suivant indique qu'il a été déployé avec succès. - ![message déploiement réussi du BDM](images/ex02/ex2_10.png) + ![message déploiement réussi du BDM](images/ex02/ex2_10.png) 1. Cocher l'option **Ne plus me montrer ce message** @@ -126,7 +130,7 @@ Utiliser pour ce faire l'assistant *Ajouter à partir de données...*. 1. Cliquer sur **Terminer** (pas sur **Terminer & Ajouter**). Sur la fenêtre *Génération de contrat*, cliquer **OK**. ![contrat défini pour le démarrage du processus](images/ex02/ex2_04.png) - La création du contrat crée également le script d'initialisation de la variable *demande*, exécuté lorsque le contrat est validé après remplissage du formulaire. + > La création du contrat crée également le script d'initialisation de la variable *demande*, exécuté lorsque le contrat est validé après remplissage du formulaire. ### Modifier l'initialisation de la variable métier *demande* pour récupérer automatiquement *idDemandeur* *iDemandeur* est le username de l'utilisateur initiateur de la nouvelle demande. diff --git a/docs/fr/06-extensions.md b/docs/fr/06-extensions.md index a90b1d0..b546105 100644 --- a/docs/fr/06-extensions.md +++ b/docs/fr/06-extensions.md @@ -58,11 +58,11 @@ L'objectif de cet exercice est d'ajouter des points d'extensions au projet Bonit - Lancer FakeSMTP en double cliquant sur le fichier JAR ou en lançant la commande suivante : `java -jar fakeSMTP-2.0.jar` - Une fois l'interface graphique de FakeSMTP affichée, configurer le port d'écoute sur *2525* et cliquer sur le bouton **Démarrer le serveur** - 1. Dupliquer le diagramme de processus de l'exercice précédent pour créer une version *3.1.0* + 1. Ouvrez le diagramme de processus version *3.1.0* 1. Sélectionner la tâche *Notifier approbation* - 1.Dans la zone de propriétés, cliquer sur l'onglet **Exécution**. Le sous-onglet **Connecteurs en entrée** est sélectionné. + 1. Dans la zone de propriétés, cliquer sur l'onglet **Exécution**. Le sous-onglet **Connecteurs en entrée** est sélectionné. 1. Cliquer sur **Ajouter...** Une fenêtre modale propose d'installer un connecteur à partir de la Bonita Marketplace @@ -126,7 +126,7 @@ L'objectif de cet exercice est d'ajouter des points d'extensions au projet Bonit 1. Lancer le processus à partir du studio (l'utilisateur *Walter Bates* sera utilisé) - 1 Soumettre le formulaire de *Saisie demande congés*. Les acteurs étant correctement configurés, la tâche *Valider demande de congés* n'est pas proposée à Walter Bates. + 1. Soumettre le formulaire de *Saisie demande congés*. Les acteurs étant correctement configurés, la tâche *Valider demande de congés* n'est pas proposée à Walter Bates. 1. Dans la barre de menu en haut à gauche, cliquer sur **Walter Bates**, puis sur **Déconnexion** : diff --git a/docs/fr/images/ex01/ex1_10.png b/docs/fr/images/ex01/ex1_10.png index 31db724..f72ea8c 100644 Binary files a/docs/fr/images/ex01/ex1_10.png and b/docs/fr/images/ex01/ex1_10.png differ diff --git a/docs/fr/images/preferences.png b/docs/fr/images/preferences.png index 38d1a20..3c65853 100644 Binary files a/docs/fr/images/preferences.png and b/docs/fr/images/preferences.png differ diff --git a/docs/fr/index.md b/docs/fr/index.md index b868b5b..2c2b947 100644 --- a/docs/fr/index.md +++ b/docs/fr/index.md @@ -18,9 +18,9 @@ Le Bonita Camp se compose : ## Prérequis 1. [Téléchargez](https://fr.bonitasoft.com/telechargez) et installez la dernière version du Studio Bonita. Pour plus de détails référez vous à la [documentation officielle](https://documentation.bonitasoft.com/bonita/latest/bonita-studio-download-installation) 1. Vous pouvez également optionnellement télécharger les corrections et les slides au format PDF depuis la [section "release" du projet GitHub bonita-camp](https://github.com/Bonitasoft-Community/bonita-camp/releases/latest) -1. Téléchargez [Fake SMTP](http://nilhcem.github.io/FakeSMTP/downloads/fakeSMTP-latest.zip). Cette application va être utilisée pour simuler un serveur de mail. +1. Téléchargez [Fake SMTP](https://nilhcem.com/FakeSMTP/download.html) (ou un autre serveur SMTP similaire). Ce sera utilisé pour simuler un serveur de mail. 1. Il est recommandé d'utiliser Chrome ou Firefox lors du développement pour bénéficier de l'outillage de test de ces navigateurs. - Edge et Safari sont également supportés (IE11 n'est plus supporté). Afin de savoir quel navigateur est utilisé par défaut par le Studio, cliquez sur le bouton **Lancer** ![icone lancer](images/icon-run.png). L'application utilisateur Bonita devrait s'ouvrir avec le navigateur par défaut de votre système d'exploitation. Vous pouvez configurer le Studio Bonita pour qu'il utilise un navigateur autre que celui par défaut : + Edge et Safari sont également supportés (IE11 n'est plus supporté). Afin de savoir quel navigateur est utilisé par défaut par le Studio, cliquez sur le bouton **Lancer** ![icone lancer](images/icon-run.png). L'application Bonita User devrait s'ouvrir avec le navigateur par défaut de votre système d'exploitation. Vous pouvez configurer le Studio Bonita pour qu'il utilise un navigateur autre que celui par défaut : - Dans le Studio cliquez sur le bouton **Préférences** ![icône préférences](images/preferences.png) - Dans la section **Web** cliquez sur **Navigateur** - Cliquez sur le bouton **Nouveau...** diff --git a/h5p/Bonita Camp Exercises.html b/h5p/AlternativeVersion/Bonita Camp Exercises.html similarity index 100% rename from h5p/Bonita Camp Exercises.html rename to h5p/AlternativeVersion/Bonita Camp Exercises.html diff --git a/h5p/Bonita University Camp.html b/h5p/AlternativeVersion/Bonita University Camp.html similarity index 100% rename from h5p/Bonita University Camp.html rename to h5p/AlternativeVersion/Bonita University Camp.html diff --git a/h5p/BonitaCampExercises.h5p b/h5p/AlternativeVersion/BonitaCampExercises.h5p similarity index 100% rename from h5p/BonitaCampExercises.h5p rename to h5p/AlternativeVersion/BonitaCampExercises.h5p diff --git a/h5p/BonitaUniversityCamp.h5p b/h5p/AlternativeVersion/BonitaUniversityCamp.h5p similarity index 100% rename from h5p/BonitaUniversityCamp.h5p rename to h5p/AlternativeVersion/BonitaUniversityCamp.h5p diff --git a/h5p/BonitaUniversityMakeYourOwnApp.h5p b/h5p/AlternativeVersion/BonitaUniversityMakeYourOwnApp.h5p similarity index 100% rename from h5p/BonitaUniversityMakeYourOwnApp.h5p rename to h5p/AlternativeVersion/BonitaUniversityMakeYourOwnApp.h5p diff --git a/h5p/Make your own app.html b/h5p/AlternativeVersion/Make your own app.html similarity index 100% rename from h5p/Make your own app.html rename to h5p/AlternativeVersion/Make your own app.html diff --git a/h5p/BonitaCamp-ES.h5p b/h5p/BonitaCamp-ES.h5p new file mode 100644 index 0000000..0cf59c5 Binary files /dev/null and b/h5p/BonitaCamp-ES.h5p differ diff --git a/h5p/BonitaCamp-ES.html b/h5p/BonitaCamp-ES.html new file mode 100644 index 0000000..69a56a3 --- /dev/null +++ b/h5p/BonitaCamp-ES.html @@ -0,0 +1,61 @@ + + + + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/h5p/BonitaCamp-FR.h5p b/h5p/BonitaCamp-FR.h5p new file mode 100644 index 0000000..d5e5b7f Binary files /dev/null and b/h5p/BonitaCamp-FR.h5p differ diff --git a/h5p/BonitaCamp-FR.html b/h5p/BonitaCamp-FR.html new file mode 100644 index 0000000..f5226ce --- /dev/null +++ b/h5p/BonitaCamp-FR.html @@ -0,0 +1,61 @@ + + + + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/project-overview-explorer.png b/project-overview-explorer.png deleted file mode 100644 index a723354..0000000 Binary files a/project-overview-explorer.png and /dev/null differ diff --git a/reveal.js-3.9.2/.gitignore b/reveal.js-3.9.2/.gitignore deleted file mode 100644 index 8eda50e..0000000 --- a/reveal.js-3.9.2/.gitignore +++ /dev/null @@ -1,13 +0,0 @@ -.idea/ -*.iml -*.iws -*.eml -out/ -.DS_Store -.svn -log/*.log -tmp/** -node_modules/ -.sass-cache -css/reveal.min.css -js/reveal.min.js diff --git a/reveal.js-3.9.2/.travis.yml b/reveal.js-3.9.2/.travis.yml deleted file mode 100644 index e65e0df..0000000 --- a/reveal.js-3.9.2/.travis.yml +++ /dev/null @@ -1,5 +0,0 @@ -language: node_js -node_js: - - 11 -after_script: - - npm run build -- retire diff --git a/reveal.js-3.9.2/CONTRIBUTING.md b/reveal.js-3.9.2/CONTRIBUTING.md deleted file mode 100644 index c2091e8..0000000 --- a/reveal.js-3.9.2/CONTRIBUTING.md +++ /dev/null @@ -1,23 +0,0 @@ -## Contributing - -Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**. - - -### Personal Support -If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js). - - -### Bug Reports -When reporting a bug make sure to include information about which browser and operating system you are on as well as the necessary steps to reproduce the issue. If possible please include a link to a sample presentation where the bug can be tested. - - -### Pull Requests -- Should follow the coding style of the file you work in, most importantly: - - Tabs to indent - - Single-quoted strings -- Should be made towards the **dev branch** -- Should be submitted from a feature/topic branch (not your master) - - -### Plugins -Please do not submit plugins as pull requests. They should be maintained in their own separate repository. More information here: https://github.com/hakimel/reveal.js/wiki/Plugin-Guidelines diff --git a/reveal.js-3.9.2/LICENSE b/reveal.js-3.9.2/LICENSE deleted file mode 100644 index d15cf3b..0000000 --- a/reveal.js-3.9.2/LICENSE +++ /dev/null @@ -1,19 +0,0 @@ -Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. \ No newline at end of file diff --git a/reveal.js-3.9.2/README.md b/reveal.js-3.9.2/README.md deleted file mode 100644 index 7cd8156..0000000 --- a/reveal.js-3.9.2/README.md +++ /dev/null @@ -1,1495 +0,0 @@ -# reveal.js [![Build Status](https://travis-ci.org/hakimel/reveal.js.svg?branch=master)](https://travis-ci.org/hakimel/reveal.js) Slides - -A framework for easily creating beautiful presentations using HTML. [Check out the live demo](https://revealjs.com/). - -reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown support](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). There's also a fully featured visual editor and platform for sharing reveal.js presentations at [slides.com](https://slides.com?ref=github). - -### Supporting reveal.js -This project was started and is maintained by [@hakimel](https://github.com/hakimel/) with the help of many [contributions from the community](https://github.com/hakimel/reveal.js/graphs/contributors). The best way to support the project is to [become a paying member of Slides.com](https://slides.com/pricing)—the reveal.js presentation platform that Hakim is building. - - -## Table of contents - -- [Online Editor](#online-editor) -- [Installation](#installation) - - [Basic setup](#basic-setup) - - [Full setup](#full-setup) - - [Folder Structure](#folder-structure) -- [Instructions](#instructions) - - [Markup](#markup) - - [Markdown](#markdown) - - [Element Attributes](#element-attributes) - - [Slide Attributes](#slide-attributes) -- [Configuration](#configuration) -- [Presentation Size](#presentation-size) -- [Dependencies](#dependencies) -- [Ready Event](#ready-event) -- [Auto-sliding](#auto-sliding) -- [Keyboard Bindings](#keyboard-bindings) -- [Vertical Slide Navigation](#vertical-slide-navigation) -- [Touch Navigation](#touch-navigation) -- [Lazy Loading](#lazy-loading) -- [API](#api) - - [Custom Key Bindings](#custom-key-bindings) - - [Slide Changed Event](#slide-changed-event) - - [Presentation State](#presentation-state) - - [Slide States](#slide-states) - - [Slide Backgrounds](#slide-backgrounds) - - [Parallax Background](#parallax-background) - - [Slide Transitions](#slide-transitions) - - [Internal links](#internal-links) - - [Fragments](#fragments) - - [Fragment events](#fragment-events) - - [Code syntax highlighting](#code-syntax-highlighting) - - [Slide number](#slide-number) - - [Overview mode](#overview-mode) - - [Fullscreen mode](#fullscreen-mode) - - [Embedded media](#embedded-media) - - [Stretching elements](#stretching-elements) - - [Resize Event](#resize-event) - - [postMessage API](#postmessage-api) -- [PDF Export](#pdf-export) -- [Theming](#theming) -- [Speaker Notes](#speaker-notes) - - [Share and Print Speaker Notes](#share-and-print-speaker-notes) - - [Server Side Speaker Notes](#server-side-speaker-notes) -- [Plugins](#plugins) -- [Multiplexing](#multiplexing) - - [Master presentation](#master-presentation) - - [Client presentation](#client-presentation) - - [Socket.io server](#socketio-server) -- [MathJax](#mathjax) -- [License](#license) - -#### More reading - -- [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history. -- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own! -- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks. -- [Plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware): A list of plugins that can be used to extend reveal.js. - - -## Online Editor - -Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [https://slides.com](https://slides.com?ref=github). - - -## Installation - -The **basic setup** is for authoring presentations only. The **full setup** gives you access to all reveal.js features and plugins such as speaker notes as well as the development tasks needed to make changes to the source. - -### Basic setup - -The core of reveal.js is very easy to install. You'll simply need to download a copy of this repository and open the index.html file directly in your browser. - -1. Download the latest version of reveal.js from -2. Unzip and replace the example contents in index.html with your own -3. Open index.html in a browser to view it - -### Full setup - -Some reveal.js features, like external Markdown and speaker notes, require that presentations run from a local web server. The following instructions will set up such a server as well as all of the development tasks needed to make edits to the reveal.js source code. - -1. Install [Node.js](https://nodejs.org/) (9.0.0 or later) - -1. Clone the reveal.js repository - ```sh - $ git clone https://github.com/hakimel/reveal.js.git - ``` - -1. Navigate to the reveal.js folder - ```sh - $ cd reveal.js - ``` - -1. Install dependencies - ```sh - $ npm install - ``` - -1. Serve the presentation and monitor source files for changes - ```sh - $ npm start - ``` - -1. Open to view your presentation - - You can change the port by using `npm start -- --port=8001`. - -### Folder Structure - -- **css/** Core styles without which the project does not function -- **js/** Like above but for JavaScript -- **plugin/** Components that have been developed as extensions to reveal.js -- **lib/** All other third party assets (JavaScript, CSS, fonts) - - -## Instructions - -### Markup - -Here's a barebones example of a fully working reveal.js presentation: -```html - - - - - - -
-
-
Slide 1
-
Slide 2
-
-
- - - - -``` - -The presentation markup hierarchy needs to be `.reveal > .slides > section` where the `section` represents one slide and can be repeated indefinitely. If you place multiple `section` elements inside of another `section` they will be shown as vertical slides. The first of the vertical slides is the "root" of the others (at the top), and will be included in the horizontal sequence. For example: - -```html -
-
-
Single Horizontal Slide
-
-
Vertical Slide 1
-
Vertical Slide 2
-
-
-
-``` - -### Markdown - -It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `
` elements and wrap the contents in a ` -
-``` - -#### External Markdown - -You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file. - -When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options: - -```html -
- -
-``` - -#### Element Attributes - -Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things. - -```html -
- -
-``` - -#### Slide Attributes - -Special syntax (through HTML comments) is available for adding attributes to the slide `
` elements generated by your Markdown. - -```html -
- -
-``` - -#### Configuring *marked* - -We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration): - -```javascript -Reveal.initialize({ - // Options which are passed into marked - // See https://marked.js.org/#/USING_ADVANCED.md#options - markdown: { - smartypants: true - } -}); -``` - -### Configuration - -At the end of your page you need to initialize reveal by running the following code. Note that all configuration values are optional and will default to the values specified below. - -```javascript -Reveal.initialize({ - - // Display presentation control arrows - controls: true, - - // Help the user learn the controls by providing hints, for example by - // bouncing the down arrow when they first encounter a vertical slide - controlsTutorial: true, - - // Determines where controls appear, "edges" or "bottom-right" - controlsLayout: 'bottom-right', - - // Visibility rule for backwards navigation arrows; "faded", "hidden" - // or "visible" - controlsBackArrows: 'faded', - - // Display a presentation progress bar - progress: true, - - // Display the page number of the current slide - slideNumber: false, - - // Add the current slide number to the URL hash so that reloading the - // page/copying the URL will return you to the same slide - hash: false, - - // Push each slide change to the browser history. Implies `hash: true` - history: false, - - // Enable keyboard shortcuts for navigation - keyboard: true, - - // Enable the slide overview mode - overview: true, - - // Vertical centering of slides - center: true, - - // Enables touch navigation on devices with touch input - touch: true, - - // Loop the presentation - loop: false, - - // Change the presentation direction to be RTL - rtl: false, - - // See https://github.com/hakimel/reveal.js/#navigation-mode - navigationMode: 'default', - - // Randomizes the order of slides each time the presentation loads - shuffle: false, - - // Turns fragments on and off globally - fragments: true, - - // Flags whether to include the current fragment in the URL, - // so that reloading brings you to the same fragment position - fragmentInURL: false, - - // Flags if the presentation is running in an embedded mode, - // i.e. contained within a limited portion of the screen - embedded: false, - - // Flags if we should show a help overlay when the questionmark - // key is pressed - help: true, - - // Flags if speaker notes should be visible to all viewers - showNotes: false, - - // Global override for autoplaying embedded media (video/audio/iframe) - // - null: Media will only autoplay if data-autoplay is present - // - true: All media will autoplay, regardless of individual setting - // - false: No media will autoplay, regardless of individual setting - autoPlayMedia: null, - - // Global override for preloading lazy-loaded iframes - // - null: Iframes with data-src AND data-preload will be loaded when within - // the viewDistance, iframes with only data-src will be loaded when visible - // - true: All iframes with data-src will be loaded when within the viewDistance - // - false: All iframes with data-src will be loaded only when visible - preloadIframes: null, - - // Number of milliseconds between automatically proceeding to the - // next slide, disabled when set to 0, this value can be overwritten - // by using a data-autoslide attribute on your slides - autoSlide: 0, - - // Stop auto-sliding after user input - autoSlideStoppable: true, - - // Use this method for navigation when auto-sliding - autoSlideMethod: Reveal.navigateNext, - - // Specify the average time in seconds that you think you will spend - // presenting each slide. This is used to show a pacing timer in the - // speaker view - defaultTiming: 120, - - // Specify the total time in seconds that is available to - // present. If this is set to a nonzero value, the pacing - // timer will work out the time available for each slide, - // instead of using the defaultTiming value - totalTime: 0, - - // Specify the minimum amount of time you want to allot to - // each slide, if using the totalTime calculation method. If - // the automated time allocation causes slide pacing to fall - // below this threshold, then you will see an alert in the - // speaker notes window - minimumTimePerSlide: 0; - - // Enable slide navigation via mouse wheel - mouseWheel: false, - - // Hide cursor if inactive - hideInactiveCursor: true, - - // Time before the cursor is hidden (in ms) - hideCursorTime: 5000, - - // Hides the address bar on mobile devices - hideAddressBar: true, - - // Opens links in an iframe preview overlay - // Add `data-preview-link` and `data-preview-link="false"` to customise each link - // individually - previewLinks: false, - - // Transition style - transition: 'slide', // none/fade/slide/convex/concave/zoom - - // Transition speed - transitionSpeed: 'default', // default/fast/slow - - // Transition style for full page slide backgrounds - backgroundTransition: 'fade', // none/fade/slide/convex/concave/zoom - - // Number of slides away from the current that are visible - viewDistance: 3, - - // Number of slides away from the current that are visible on mobile - // devices. It is advisable to set this to a lower number than - // viewDistance in order to save resources. - mobileViewDistance: 2, - - // Parallax background image - parallaxBackgroundImage: '', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'" - - // Parallax background size - parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - - // Number of pixels to move the parallax background per slide - // - Calculated automatically unless specified - // - Set to 0 to disable movement along an axis - parallaxBackgroundHorizontal: null, - parallaxBackgroundVertical: null, - - // The display mode that will be used to show slides - display: 'block' - -}); -``` - -The configuration can be updated after initialization using the `configure` method: - -```javascript -// Turn autoSlide off -Reveal.configure({ autoSlide: 0 }); - -// Start auto-sliding every 5s -Reveal.configure({ autoSlide: 5000 }); -``` - -### Presentation Size - -All presentations have a normal size, that is, the resolution at which they are authored. The framework will automatically scale presentations uniformly based on this size to ensure that everything fits on any given display or viewport. - -See below for a list of configuration options related to sizing, including default values: - -```javascript -Reveal.initialize({ - - // ... - - // The "normal" size of the presentation, aspect ratio will be preserved - // when the presentation is scaled to fit different resolutions. Can be - // specified using percentage units. - width: 960, - height: 700, - - // Factor of the display size that should remain empty around the content - margin: 0.1, - - // Bounds for smallest/largest possible scale to apply to content - minScale: 0.2, - maxScale: 1.5 - -}); -``` - -If you wish to disable this behavior and do your own scaling (e.g. using media queries), try these settings: - -```javascript -Reveal.initialize({ - - // ... - - width: "100%", - height: "100%", - margin: 0, - minScale: 1, - maxScale: 1 -}); -``` - -### Dependencies - -Reveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example: - -```javascript -Reveal.initialize({ - dependencies: [ - // Interpret Markdown in
elements - { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - - // Syntax highlight for elements - { src: 'plugin/highlight/highlight.js', async: true }, - - // Zoom in and out with Alt+click - { src: 'plugin/zoom-js/zoom.js', async: true }, - - // Speaker notes - { src: 'plugin/notes/notes.js', async: true }, - - // MathJax - { src: 'plugin/math/math.js', async: true } - ] -}); -``` - -You can add your own extensions using the same syntax. The following properties are available for each dependency object: -- **src**: Path to the script to load -- **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false -- **callback**: [optional] Function to execute when the script has loaded -- **condition**: [optional] Function which must return true for the script to be loaded - -### Ready Event - -A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`. - -```javascript -Reveal.addEventListener( 'ready', function( event ) { - // event.currentSlide, event.indexh, event.indexv -} ); -``` - -Note that we also add a `.ready` class to the `.reveal` element so that you can hook into this with CSS. - -### Auto-sliding - -Presentations can be configured to progress through slides automatically, without any user input. To enable this you will need to tell the framework how many milliseconds it should wait between slides: - -```javascript -// Slide every five seconds -Reveal.configure({ - autoSlide: 5000 -}); -``` - -When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »A« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying `autoSlideStoppable: false` in your reveal.js config. - -You can also override the slide duration for individual slides and fragments by using the `data-autoslide` attribute: - -```html -
-

After 2 seconds the first fragment will be shown.

-

After 10 seconds the next fragment will be shown.

-

Now, the fragment is displayed for 2 seconds before the next slide is shown.

-
-``` - -To override the method used for navigation when auto-sliding, you can specify the `autoSlideMethod` setting. To only navigate along the top layer and ignore vertical slides, set this to `Reveal.navigateRight`. - -Whenever the auto-slide mode is resumed or paused the `autoslideresumed` and `autoslidepaused` events are fired. - -### Keyboard Bindings - -If you're unhappy with any of the default keyboard bindings you can override them using the `keyboard` config option: - -```javascript -Reveal.configure({ - keyboard: { - 13: 'next', // go to the next slide when the ENTER key is pressed - 27: function() {}, // do something custom when ESC is pressed - 32: null // don't do anything when SPACE is pressed (i.e. disable a reveal.js default binding) - } -}); -``` - -### Vertical Slide Navigation - -Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action: - - - -#### Navigation Mode -You can fine tune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presentations that use a mix of horizontal and vertical slides. The following navigation modes are available: - -| Value | Description | -| :--------------------------- | :---------- | -| default | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). | -| linear | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). | -| grid | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.

Consider a deck with six slides ordered in two vertical stacks:
`1.1`    `2.1`
`1.2`    `2.2`
`1.3`    `2.3`

If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. | - -### Touch Navigation - -You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js. - -If there's some part of your content that needs to remain accessible to touch events you'll need to highlight this by adding a `data-prevent-swipe` attribute to the element. One common example where this is useful is elements that need to be scrolled. - -### Lazy Loading - -When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option. - -To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements. - -```html -
- - - -
-``` - -#### Lazy Loading Iframes - -Note that lazy loaded iframes ignore the `viewDistance` configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden. - -When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background. - -You can override this behavior with the `data-preload` attribute. The iframe below will be loaded -according to the `viewDistance`. - -```html -
- -
-``` - -You can also change the default globally with the `preloadIframes` configuration option. If set to -`true` ALL iframes with a `data-src` attribute will be preloaded when within the `viewDistance` -regardless of individual `data-preload` attributes. If set to `false`, all iframes will only be -loaded when they become visible. - -### API - -The `Reveal` object exposes a JavaScript API for controlling navigation and reading state: - -```javascript -// Navigation -Reveal.slide( indexh, indexv, indexf ); -Reveal.left(); -Reveal.right(); -Reveal.up(); -Reveal.down(); -Reveal.prev(); -Reveal.next(); -Reveal.prevFragment(); -Reveal.nextFragment(); - -// Randomize the order of slides -Reveal.shuffle(); - -// Toggle presentation states, optionally pass true/false to force on/off -Reveal.toggleOverview(); -Reveal.togglePause(); -Reveal.toggleAutoSlide(); - -// Shows a help overlay with keyboard shortcuts, optionally pass true/false -// to force on/off -Reveal.toggleHelp(); - -// Change a config value at runtime -Reveal.configure({ controls: true }); - -// Returns the present configuration options -Reveal.getConfig(); - -// Fetch the current scale of the presentation -Reveal.getScale(); - -// Retrieves the previous and current slide elements -Reveal.getPreviousSlide(); -Reveal.getCurrentSlide(); - -Reveal.getIndices(); // { h: 0, v: 0, f: 0 } -Reveal.getSlidePastCount(); -Reveal.getProgress(); // (0 == first slide, 1 == last slide) -Reveal.getSlides(); // Array of all slides -Reveal.getTotalSlides(); // Total number of slides - -// Returns an array with all horizontal/vertical slides in the deck -Reveal.getHorizontalSlides(); -Reveal.getVerticalSlides(); - -// Checks if the presentation contains two or more -// horizontal/vertical slides -Reveal.hasHorizontalSlides(); -Reveal.hasVerticalSlides(); - -// Returns the speaker notes for the current slide -Reveal.getSlideNotes(); - -// State checks -Reveal.isFirstSlide(); -Reveal.isLastSlide(); -Reveal.isOverview(); -Reveal.isPaused(); -Reveal.isAutoSliding(); - -// Returns the top-level DOM element -Reveal.getRevealElement(); //
...
-``` - -### Custom Key Bindings - -Custom key bindings can be added and removed using the following Javascript API. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the ``keyboard`` config option. - -```javascript -Reveal.addKeyBinding( binding, callback ); -Reveal.removeKeyBinding( keyCode ); -``` - -For example - -```javascript -// The binding parameter provides the following properties -// keyCode: the keycode for binding to the callback -// key: the key label to show in the help overlay -// description: the description of the action to show in the help overlay -Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() { - // start timer -} ) - -// The binding parameter can also be a direct keycode without providing the help description -Reveal.addKeyBinding( 82, function() { - // reset timer -} ) -``` - -This allows plugins to add key bindings directly to Reveal so they can - -* make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and -* be included in the help overlay (optional) - -### Slide Changed Event - -A `slidechanged` event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes. - -Some libraries, like MathJax (see [#226](https://github.com/hakimel/reveal.js/issues/226#issuecomment-10261609)), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback. - -```javascript -Reveal.addEventListener( 'slidechanged', function( event ) { - // event.previousSlide, event.currentSlide, event.indexh, event.indexv -} ); -``` - -### Presentation State - -The presentation's current state can be fetched by using the `getState` method. A state object contains all of the information required to put the presentation back as it was when `getState` was first called. Sort of like a snapshot. It's a simple object that can easily be stringified and persisted or sent over the wire. - -```javascript -Reveal.slide( 1 ); -// we're on slide 1 - -var state = Reveal.getState(); - -Reveal.slide( 3 ); -// we're on slide 3 - -Reveal.setState( state ); -// we're back on slide 1 -``` - -### Slide States - -If you set `data-state="somestate"` on a slide `
`, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide. - -Furthermore you can also listen to these changes in state via JavaScript: - -```javascript -Reveal.addEventListener( 'somestate', function() { - // TODO: Sprinkle magic -}, false ); -``` - -### Slide Backgrounds - -Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a `data-background` attribute to your `
` elements. Four different types of backgrounds are supported: color, image, video and iframe. - -#### Color Backgrounds - -All CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`. - -```html -
-

Color

-
-``` - -#### Image Backgrounds - -By default, background images are resized to cover the full page. Available options: - -| Attribute | Default | Description | -| :------------------------------- | :--------- | :---------- | -| data-background-image | | URL of the image to show. GIFs restart when the slide opens. | -| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. | -| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. | -| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. | -| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. | - -```html -
-

Image

-
-
-

This background image will be sized to 100px and repeated

-
-``` - -#### Video Backgrounds - -Automatically plays a full size video behind the slide. - -| Attribute | Default | Description | -| :--------------------------- | :------ | :---------- | -| data-background-video | | A single video source, or a comma separated list of video sources. | -| data-background-video-loop | false | Flags if the video should play repeatedly. | -| data-background-video-muted | false | Flags if the audio should be muted. | -| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. | -| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. | - -```html -
-

Video

-
-``` - -#### Iframe Backgrounds - -Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute. - -```html -
-

Iframe

-
-``` - -Iframes are lazy-loaded when they become visible. If you'd like to preload iframes ahead of time, you can append a `data-preload` attribute to the slide `
`. You can also enable preloading globally for all iframes using the `preloadIframes` configuration option. - -#### Background Transitions - -Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing `backgroundTransition: 'slide'` to the `Reveal.initialize()` call. Alternatively you can set `data-background-transition` on any section with a background to override that specific transition. - - -### Parallax Background - -If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional). - -```javascript -Reveal.initialize({ - - // Parallax background image - parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" - - // Parallax background size - parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto) - - // Number of pixels to move the parallax background per slide - // - Calculated automatically unless specified - // - Set to 0 to disable movement along an axis - parallaxBackgroundHorizontal: 200, - parallaxBackgroundVertical: 50 - -}); -``` - -Make sure that the background size is much bigger than screen size to allow for some scrolling. [View example](http://revealjs.com/?parallaxBackgroundImage=https%3A%2F%2Fs3.amazonaws.com%2Fhakim-static%2Freveal-js%2Freveal-parallax-1.jpg¶llaxBackgroundSize=2100px%20900px). - -### Slide Transitions - -The global presentation transition is set using the `transition` config value. You can override the global transition for a specific slide by using the `data-transition` attribute: - -```html -
-

This slide will override the presentation transition and zoom!

-
- -
-

Choose from three transition speeds: default, fast or slow!

-
-``` - -You can also use different in and out transitions for the same slide: - -```html -
- The train goes on … -
-
- and on … -
-
- and stops. -
-
- (Passengers entering and leaving) -
-
- And it starts again. -
-``` -You can choose from `none`, `fade`, `slide`, `convex`, `concave` and `zoom`. -### Internal links - -It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (`
`): - -```html -Link -Link -``` - -You can also add relative navigation links, similar to the built in reveal.js controls, by appending one of the following classes on any element. Note that each element is automatically given an `enabled` class when it's a valid navigation route based on the current slide. - -```html - - - - - - -``` - -### Fragments - -Fragments are used to highlight individual elements on a slide. Every element with the class `fragment` will be stepped through before moving on to the next slide. Here's an example: http://revealjs.com/#/fragments - -The default fragment style is to start out invisible and fade in. This style can be changed by appending a different class to the fragment: - -```html -
-

grow

-

shrink

-

fade-out

-

fade-up (also down, left and right!)

-

fades in, then out when we move to the next step

-

fades in, then obfuscate when we move to the next step

-

blue only once

-

highlight-red

-

highlight-green

-

highlight-blue

-
-``` - -Multiple fragments can be applied to the same element sequentially by wrapping it, this will fade in the text on the first step and fade it back out on the second. - -```html -
- - I'll fade in, then out - -
-``` - -The display order of fragments can be controlled using the `data-fragment-index` attribute. - -```html -
-

Appears last

-

Appears first

-

Appears second

-
-``` - -### Fragment events - -When a slide fragment is either shown or hidden reveal.js will dispatch an event. - -Some libraries, like MathJax (see #505), get confused by the initially hidden fragment elements. Often times this can be fixed by calling their update or render function from this callback. - -```javascript -Reveal.addEventListener( 'fragmentshown', function( event ) { - // event.fragment = the fragment DOM element -} ); -Reveal.addEventListener( 'fragmenthidden', function( event ) { - // event.fragment = the fragment DOM element -} ); -``` - -### Code Syntax Highlighting - -By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)). - -```javascript -Reveal.initialize({ - // More info https://github.com/hakimel/reveal.js#dependencies - dependencies: [ - { src: 'plugin/highlight/highlight.js', async: true }, - ] -}); -``` - -Below is an example with clojure code that will be syntax highlighted. When the `data-trim` attribute is present, surrounding whitespace is automatically removed. HTML will be escaped by default. To avoid this, for example if you are using `` to call out a line of code, add the `data-noescape` attribute to the `` element. - -```html -
- 

-(def lazy-fib
-  (concat
-   [0 1]
-   ((fn rfib [a b]
-        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
-
-
-``` - -#### Line Numbers & Highlights - -To enable line numbers, add `data-line-numbers` to your `` tags. If you want to highlight specific lines you can provide a comma separated list of line numbers using the same attribute. For example, in the following example lines 4 and 8-11 are highlighted: - -```html -

-import React, { useState } from 'react';
- 
-function Example() {
-  const [count, setCount] = useState(0);
- 
-  return (
-    

-      
You clicked {count} times

-      
-    

-  );
-}
-
-``` - -line-numbers - -#### Step-by-step Highlights - -You can step through multiple code highlights on the same code block. Delimit each of your highlight steps with the `|` character. For example `data-line-numbers="1|2-3|4,6-10"` will produce three steps. It will start by highlighting line 1, next step is lines 2-3, and finally line 4 and 6 through 10. - - - -### Slide number - -If you would like to display the page number of the current slide you can do so using the `slideNumber` and `showSlideNumber` configuration values. - -```javascript -// Shows the slide number using default formatting -Reveal.configure({ slideNumber: true }); - -// Slide number formatting can be configured using these variables: -// "h.v": horizontal . vertical slide number (default) -// "h/v": horizontal / vertical slide number -// "c": flattened slide number -// "c/t": flattened slide number / total slides -Reveal.configure({ slideNumber: 'c/t' }); - -// You can provide a function to fully customize the number: -Reveal.configure({ slideNumber: function( slide ) { - // Ignore numbering of vertical slides - return [ Reveal.getIndices( slide ).h ]; -}}); - -// Control which views the slide number displays on using the "showSlideNumber" value: -// "all": show on all views (default) -// "speaker": only show slide numbers on speaker notes view -// "print": only show slide numbers when printing to PDF -Reveal.configure({ showSlideNumber: 'speaker' }); -``` - -### Overview mode - -Press »ESC« or »O« keys to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides, -as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks: - -```javascript -Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } ); -Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } ); - -// Toggle the overview mode programmatically -Reveal.toggleOverview(); -``` - -### Fullscreen mode - -Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode. - -### Embedded media - -Add `data-autoplay` to your media element if you want it to automatically start playing when the slide is shown: - -```html - -``` - -If you want to enable or disable autoplay globally, for all embedded media, you can use the `autoPlayMedia` configuration option. If you set this to `true` ALL media will autoplay regardless of individual `data-autoplay` attributes. If you initialize with `autoPlayMedia: false` NO media will autoplay. - -Note that embedded HTML5 `