Skip to content

Commit 2cd953f

Browse files
spanish: add getting started guide and key concepts documentation for DynamiaTools
Signed-off-by: Mario Serrano <mario@dynamiasoluciones.com>
1 parent 5234997 commit 2cd953f

File tree

3 files changed

+569
-0
lines changed

3 files changed

+569
-0
lines changed
Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,340 @@
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+
![Primera vez ejecutando DynamiaTools](../../../assets/getting-started/first-run.png)
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+
![Vista de tabla de contacto crud](../../../assets/getting-started/contact-crud-1.png)
236+
237+
#### Vista de formulario
238+
![Vista de formulario de contacto crud](../../../assets/getting-started/contact-crud-2.png)
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+
![Configuraciones personalizadas](../../../assets/getting-started/customize.png)
265+
266+
**Responsivo**
267+
268+
![Soporte responsivo](../../../assets/getting-started/responsive.png)
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+

src/content/docs/es/index.mdx

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: DynamiaTools
3+
description: Framework Fullstack Java 21 para aplicaciones web empresariales, impulsado por Spring Boot 3.5 y ZK 10
4+
template: splash
5+
hero:
6+
tagline: Un framework Java 21 full-stack de vanguardia diseñado para construir potentes aplicaciones web empresariales, aprovechando la fuerza de Spring Boot 3 y la elegancia de ZK 10.
7+
image:
8+
file: ../../../assets/dynamia-tools-splash.webp
9+
actions:
10+
- text: Comenzando
11+
link: getting-started
12+
icon: right-arrow
13+
- text: Ver en Github
14+
link: https://github.com/dynamiatools/framework
15+
icon: external
16+
variant: minimal
17+
---
18+
19+
import {Card, CardGrid, LinkButton} from '@astrojs/starlight/components';
20+
21+
<CardGrid stagger>
22+
<Card title="¿Qué es?" icon="pencil">
23+
DynamiaTools es un framework para construir aplicaciones web Java 21 de forma rápida y sencilla usando patrones de diseño estándar,
24+
descriptores de vistas para generación automática de UI, acciones, servicios y módulos.
25+
26+
Impulsado por Spring Boot (https://spring.io), ZK (https://www.zkoss.org) para la interfaz web y JPA.
27+
</Card>
28+
<Card title="¿Qué puede hacer?" icon="add-document">
29+
* Crear aplicaciones web full-stack.
30+
* Escribir aplicaciones modulares. Sí, puedes crear un módulo (archivo jar) y reutilizarlo. Te ayuda a mantener tu
31+
proyecto DRY.
32+
* Vistas CRUD automáticas y endpoints REST para operaciones CRUD.
33+
* Extiende el framework con nuevos módulos, acciones y servicios.
34+
* Usa HTML5 en tu aplicación gracias al framework ZK, esto significa que puedes usar Bootstrap, CSS 3 y muchas tecnologías HTML5.
35+
* Personaliza tu aplicación con temas o plantillas.
36+
* Integra con otros frameworks Java y mucho más.
37+
</Card>
38+
<Card title="¿Es maduro?" icon="setting">
39+
Sí, se utiliza en muchos proyectos en producción y está impulsado por los mejores frameworks del ecosistema Java:
40+
* Spring framework para integración, REST e infraestructura.
41+
* Spring Boot para configuración y despliegue sencillo.
42+
* ZK framework para interfaces de usuario web.
43+
* JPA estándar para la capa de persistencia por defecto.
44+
* Jackson para serialización JSON/XML.
45+
* YAML para descriptores de vistas.
46+
47+
<LinkButton href="/history" variant="secondary" >
48+
Conoce nuestra historia
49+
</LinkButton>
50+
</Card>
51+
<Card title="Lee la documentación" icon="open-book">
52+
Comienza con la guía de [Comenzando](/getting-started) para empezar rápidamente. A medida que avances, explora temas avanzados
53+
para profundizar tu conocimiento.
54+
55+
Personaliza tu aplicación, extiende el framework y construye tus propias soluciones innovadoras con DynamiaTools.
56+
</Card>
57+
</CardGrid>

0 commit comments

Comments
 (0)