|
| 1 | +--- |
| 2 | +title: Comenzando |
| 3 | +description: Comienza rápido con DynamiaTools |
| 4 | +--- |
| 5 | + |
| 6 | +import {Aside} from '@astrojs/starlight/components'; |
| 7 | + |
| 8 | +## Instalación |
| 9 | + |
| 10 | +1. Crea un nuevo proyecto SpringBoot usando https://start.spring.io y selecciona Web, JPA y un lenguaje de programación para tu app Spring Boot. |
| 11 | +DynamiaTools es compatible con Java, Groovy y Kotlin |
| 12 | + |
| 13 | +<Aside>Puedes [hacer clic |
| 14 | +aquí](https://start.spring.io/#!type=maven-project&language=java&packaging=jar&jvmVersion=21&groupId=com.example&artifactId=dynamia-tools-project&name=Dynaima&description=Demo%20project%20for%20Spring%20Boot&packageName=com.example.demo&dependencies=web,data-jpa,h2) |
| 15 | +para obtener un proyecto Spring Boot preconfigurado con Java, Maven y soporte para Web y JPA.</Aside> |
| 16 | + |
| 17 | +2. Descárgalo e impórtalo en tu IDE |
| 18 | +3. Agrega la dependencia starter de DynamiaTools. |
| 19 | + |
| 20 | +**Maven** |
| 21 | + |
| 22 | +```xml |
| 23 | +<!--pom.xml--> |
| 24 | +<dependencies> |
| 25 | + <dependency> |
| 26 | + <groupId>tools.dynamia</groupId> |
| 27 | + <artifactId>dynamia-tools-starter</artifactId> |
| 28 | + <version>LAST_VERSION</version> |
| 29 | + </dependency> |
| 30 | +</dependencies> |
| 31 | +``` |
| 32 | + |
| 33 | +**Gradle** |
| 34 | +```groovy |
| 35 | +//build.gradle |
| 36 | +compile 'tools.dynamia:dynamia-tools-starter:LAST_VERSION' |
| 37 | +``` |
| 38 | + |
| 39 | +Ve a [Maven Central](https://central.sonatype.com/artifact/tools.dynamia/tools.dynamia.app) para verificar la última versión. |
| 40 | + |
| 41 | +Este starter habilita DynamiaTools en tu aplicación y agrega soporte para ZK, JPA y vistas y rutas personalizadas. |
| 42 | + |
| 43 | +4. Ejecuta y listo |
| 44 | + |
| 45 | +```java |
| 46 | +//MyApplication.java |
| 47 | + |
| 48 | +package demo; |
| 49 | + |
| 50 | +import org.springframework.boot.SpringApplication; |
| 51 | +import org.springframework.boot.autoconfigure.SpringBootApplication; |
| 52 | + |
| 53 | +@SpringBootApplication |
| 54 | +class MyApplication { |
| 55 | + |
| 56 | + public static void main(String[] args) { |
| 57 | + SpringApplication.run(MyApplication.class, args); |
| 58 | + } |
| 59 | + |
| 60 | +} |
| 61 | +``` |
| 62 | + |
| 63 | +Después de ejecutar la aplicación, abre tu navegador y ve a http://localhost:8080. Deberías ver una página en blanco con una |
| 64 | +plantilla HTML completamente funcional llamada Dynamical. Más adelante personalizaremos esta página |
| 65 | + |
| 66 | + |
| 67 | + |
| 68 | + |
| 69 | +## Primer proyecto |
| 70 | + |
| 71 | +Vamos a crear algo útil, como un CRUD de contactos para almacenar nuestra lista de contactos. Para crear un CRUD en Dynamia Tools, sigue estos 3 pasos: |
| 72 | + |
| 73 | + |
| 74 | +1. Crea una entidad JPA |
| 75 | +2. Crea un módulo Dynamia |
| 76 | +3. Define un descriptor de vista para las vistas **form** y **table** |
| 77 | + |
| 78 | +### 1. Crear una entidad JPA |
| 79 | + |
| 80 | +Vamos a crear una nueva clase llamada `Contact` y anotarla con `@Entity` para crear una entidad JPA. Agrega los campos nombre, email y |
| 81 | +teléfono. |
| 82 | + |
| 83 | +```java |
| 84 | +//Contact.java |
| 85 | +package demo; |
| 86 | + |
| 87 | +import jakarta.persistence.Entity; |
| 88 | +import jakarta.persistence.Table; |
| 89 | +import jakarta.persistence.Id; |
| 90 | +import jakarta.validation.constraints.NotNull; |
| 91 | + |
| 92 | +import jakarta.persistence.*; |
| 93 | +import jakarta.validation.constraints.Email; |
| 94 | +import jakarta.validation.constraints.NotEmpty; |
| 95 | + |
| 96 | +@Entity |
| 97 | +@Table(name="contacts") |
| 98 | +public class Contact { |
| 99 | + |
| 100 | + @Id |
| 101 | + @GeneratedValue(strategy = GenerationType.AUTO) |
| 102 | + private Long id; |
| 103 | + |
| 104 | + @NotEmpty |
| 105 | + private String name; |
| 106 | + @Email |
| 107 | + private String email; |
| 108 | + |
| 109 | + private String phone; |
| 110 | + |
| 111 | + public Long getId() { |
| 112 | + return id; |
| 113 | + } |
| 114 | + |
| 115 | + public void setId(Long id) { |
| 116 | + this.id = id; |
| 117 | + } |
| 118 | + |
| 119 | + public String getName() { |
| 120 | + return name; |
| 121 | + } |
| 122 | + |
| 123 | + public void setName(String name) { |
| 124 | + this.name = name; |
| 125 | + } |
| 126 | + |
| 127 | + public String getEmail() { |
| 128 | + return email; |
| 129 | + } |
| 130 | + |
| 131 | + public void setEmail(String email) { |
| 132 | + this.email = email; |
| 133 | + } |
| 134 | + |
| 135 | + public String getPhone() { |
| 136 | + return phone; |
| 137 | + } |
| 138 | + |
| 139 | + public void setPhone(String phone) { |
| 140 | + this.phone = phone; |
| 141 | + } |
| 142 | + |
| 143 | + @Override |
| 144 | + public String toString() { |
| 145 | + return name; |
| 146 | + } |
| 147 | +} |
| 148 | +``` |
| 149 | + |
| 150 | +Esta es una clase POJO simple anotada con las anotaciones estándar de JPA. Ten en cuenta que también puedes usar anotaciones de validación |
| 151 | + |
| 152 | + |
| 153 | +## 2. Módulos en DynamiaTools |
| 154 | + |
| 155 | +Los módulos DynamiaTools son componentes estándar de Spring que implementan la interfaz `tools.dynamia.navigation.ModuleProvider` |
| 156 | +y devuelven un nuevo objeto `tools.dynamia.navigation.Module`. Piensa en los módulos Dynamia como enrutadores que definen la navegación para las páginas. |
| 157 | + |
| 158 | + |
| 159 | +```java |
| 160 | +//ContactModuleProvider.java |
| 161 | +package demo; |
| 162 | + |
| 163 | +import org.springframework.stereotype.Component; |
| 164 | +import tools.dynamia.crud.CrudPage; |
| 165 | +import tools.dynamia.navigation.Module; |
| 166 | +import tools.dynamia.navigation.ModuleProvider; |
| 167 | + |
| 168 | +@Component |
| 169 | +public class ContactModuleProvider implements ModuleProvider { |
| 170 | + |
| 171 | + @Override |
| 172 | + public Module getModule() { |
| 173 | + |
| 174 | + Module myModule = new Module("my-module", "My Module"); |
| 175 | + myModule.addPage(new CrudPage("contacts", "Contacts", Contact.class)); |
| 176 | + |
| 177 | + return myModule; |
| 178 | + } |
| 179 | +} |
| 180 | +``` |
| 181 | +Un `Module` incluye un ID, nombre, páginas y grupos de páginas. Por otro lado, las `Pages` incluyen ID, nombre y ruta, que |
| 182 | +en este caso está representada por una clase de entidad. Los `IDs` son cruciales porque definen la ruta para tus páginas. Por ejemplo, |
| 183 | +la página CRUD de `Contact` tiene la ruta `/pages/my-module/contacts`. |
| 184 | + |
| 185 | +## 3. View Descriptors |
| 186 | + |
| 187 | +Los descriptores de vista definen cómo se renderizarán las vistas para las entidades en tiempo de ejecución. Por defecto, DynamiaTools renderiza vistas para |
| 188 | +formularios, tablas, árboles, configuraciones y otros. En las guías avanzadas aprenderás a personalizar los renderizadores de vista e implementar |
| 189 | +tus propios tipos de vistas. |
| 190 | + |
| 191 | +Los descriptores son archivos `YML` con campos y parámetros para clases de entidad. Creamos una carpeta para ellos en `/resources/META-INF/descriptors` y creamos el archivo `ContactForm.yml`. El nombre del archivo no es especial, pero por una buena práctica, nómbralo usando el nombre de la entidad y el tipo de vista. |
| 192 | + |
| 193 | +```yaml |
| 194 | +# /resources/META-INF/descriptors/ContactForm.yml |
| 195 | +view: form # required |
| 196 | +beanClass: demo.Contact # use fully qualified class name |
| 197 | + |
| 198 | +fields: |
| 199 | + name: |
| 200 | + params: # customize component and layout |
| 201 | + span: 3 |
| 202 | + email: |
| 203 | + params: |
| 204 | + type: email # setup type attribute of ZK textbox component |
| 205 | + phone: |
| 206 | + component: textbox #optional because string field are renderer link Textbox |
| 207 | + |
| 208 | + |
| 209 | +#optional |
| 210 | +layout: |
| 211 | + columns: 3 |
| 212 | + |
| 213 | +``` |
| 214 | + |
| 215 | +Ahora crea un descriptor de vista para la vista de tabla `ContactTable.yml` |
| 216 | + |
| 217 | +```yaml |
| 218 | +# /resources/META-INF/descriptors/ContactTable.yml |
| 219 | +view: table |
| 220 | +beanClass: demo.Contact # use fully qualified class name |
| 221 | + |
| 222 | +#all field are rendered like Labels because view type is table |
| 223 | +fields: |
| 224 | + name: |
| 225 | + email: |
| 226 | + phone: |
| 227 | +``` |
| 228 | +
|
| 229 | +### 4. Ejecuta y disfruta |
| 230 | +
|
| 231 | +Ahora tu aplicación tiene un nuevo menú llamado Mi Módulo y un submenú llamado Contactos. Este es un CRUD completamente funcional con crear, |
| 232 | +leer, actualizar, eliminar y muchas más acciones listas para usar. |
| 233 | +
|
| 234 | +#### Vista de tabla |
| 235 | + |
| 236 | +
|
| 237 | +#### Vista de formulario |
| 238 | + |
| 239 | +
|
| 240 | +<Aside>No te preocupes por las etiquetas en Spanglish en los títulos y acciones, DynamiaTools y ZK tienen etiquetas localizadas, y mi navegador está configurado en español.</Aside> |
| 241 | +
|
| 242 | +### Personaliza tu primer proyecto |
| 243 | +
|
| 244 | +Usa los archivos estándar de Spring Boot `application.properties` o `application.yml` para personalizar la configuración global de los proyectos de dynamia tools. |
| 245 | +Usa el grupo de propiedades `dynamia.app` para dynamia tools. |
| 246 | + |
| 247 | +```yaml |
| 248 | +#application.yml |
| 249 | +dynamia: |
| 250 | + app: |
| 251 | + name: My First Project |
| 252 | + short-name: MFP |
| 253 | + default-skin: Green |
| 254 | + default-logo: /static/logo.png |
| 255 | + default-icon: /static/icon.png # used when navigation bar is collapsed |
| 256 | + url: https://www.dynamia.tools |
| 257 | +
|
| 258 | +#other spring boot settings |
| 259 | +
|
| 260 | +``` |
| 261 | + |
| 262 | +Vuelve a ejecutar tu aplicación y esta vez será una aplicación hermosa |
| 263 | + |
| 264 | + |
| 265 | + |
| 266 | +**Responsivo** |
| 267 | + |
| 268 | + |
| 269 | + |
| 270 | +**Dynamical** es una plantilla gratuita de Bootstrap 5 totalmente responsiva, consulta https://github.com/dynamiatools/theme-dynamical para obtener documentación |
| 271 | + |
| 272 | + |
| 273 | +### REST automático |
| 274 | + |
| 275 | +Acabas de construir un proyecto de pila completa con DynamiaTools en unos **10-15** minutos. Tu proyecto incluye algunas características especiales, |
| 276 | +una de las cuales es un endpoint RESTful automático para todos los `CrudPages`. Crea algunos contactos en el front end, luego reemplaza la URL del navegador |
| 277 | +con http://localhost:8080/api/my-module/contacts. |
| 278 | + |
| 279 | +Deberías ver una respuesta JSON con tus contactos. En mi caso, recibí la siguiente respuesta: |
| 280 | + |
| 281 | +```json |
| 282 | +//http://localhost.com:8080/api/my-module/contacts |
| 283 | +{ |
| 284 | + "data" : [ { |
| 285 | + "id" : 1, |
| 286 | + "name" : "Peter Parker", |
| 287 | + "email" : "spidy@gmail.com", |
| 288 | + "phone" : "5556565656" |
| 289 | + }, { |
| 290 | + "id" : 2, |
| 291 | + "name" : "Dr Doom", |
| 292 | + "email" : "doomed@gmail.com", |
| 293 | + "phone" : "555-6999-666" |
| 294 | + }, { |
| 295 | + "id" : 3, |
| 296 | + "name" : "Tony Iron Stark", |
| 297 | + "email" : "ceo@starksindustry.com", |
| 298 | + "phone" : "5551656565" |
| 299 | + } ], |
| 300 | + "pageable" : { |
| 301 | + "totalSize" : 3, |
| 302 | + "pageSize" : 50, |
| 303 | + "firstResult" : 0, |
| 304 | + "page" : 1, |
| 305 | + "pagesNumber" : 1 |
| 306 | + }, |
| 307 | + "response" : "OK" |
| 308 | +} |
| 309 | +``` |
| 310 | + |
| 311 | +Luego navega a http://localhost.com:8080/api/my-module/contacts/1 y obtén la información del contacto con ID = 1 |
| 312 | + |
| 313 | +```json |
| 314 | +{ |
| 315 | + "data": { |
| 316 | + "id": 1, |
| 317 | + "name": "Peter Parker", |
| 318 | + "email": "spidy@gmail.com", |
| 319 | + "phone": "5556565656" |
| 320 | + }, |
| 321 | + "response": "OK" |
| 322 | +} |
| 323 | +``` |
| 324 | + |
| 325 | +Verifica que el formulario json predeterminado de DynamiaTool tenga este formato: |
| 326 | + |
| 327 | +```json |
| 328 | +{ |
| 329 | + "data": [], |
| 330 | + "response": "", |
| 331 | + "pageable": {} |
| 332 | +} |
| 333 | +``` |
| 334 | + |
| 335 | + |
| 336 | +## Felicitaciones |
| 337 | + |
| 338 | +Con esta guía de **Comenzando**, acabas de construir una aplicación web con soporte CRUD automático, endpoints RESTful automáticos, |
| 339 | +y una plantilla responsiva. Continúa con las siguientes guías para aprender sobre temas avanzados con DynamiaTools. |
| 340 | + |
0 commit comments