gtk3-node 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,6 +1,61 @@
 # CHANGELOG - Extensión GTK3 para Node.js
 
-## [Versión 1.0.0] - 2026-02-14
+## [Versión 1.3.0] - 2026-02-15
+
+
+### Características
+- Integración nativa con GTK3
+- Sistema de eventos con callbacks
+- Soporte para interfaces gráficas completas
+- Estructura modular y extensible
+- Temporización con funcionalidad similar a TTimer de Delphi
+
+### Documentación
+- README principal
+- Documentación para cada widget
+- Ejemplos básicos, intermedios y avanzados
+- Guía de compilación (HOWTO-COMPILE.md)
+
+### Notas Técnicas
+- Basado en N-API para compatibilidad con múltiples versiones de Node.js
+- Compilación con node-gyp
+- Integración con GTK3 3.x
+- Soporte para Linux (actualmente)
+
+## [Versión 1.2.0] - 2026-02-15
+
+### Añadido
+- Widget Button con soporte para eventos y callbacks
+- Widget Window para contenedores de interfaz
+- Widget Label para mostrar texto estático
+- Widget Box para layouts horizontales y verticales
+- Widget Scroll para contenedores con barras de desplazamiento
+- Widget Entry para entrada de texto simple
+- Widget StringGrid para tablas bidimensionales de datos
+- Widget TextView para áreas de texto multilinea
+- Estructura modular para futuras expansiones
+- Ejemplos organizados por niveles de complejidad
+- Principio DRY aplicado en la arquitectura
+
+### Características
+- Integración nativa con GTK3
+- Sistema de eventos con callbacks
+- Soporte para interfaces gráficas completas
+- Estructura modular y extensible
+
+### Documentación
+- README principal
+- Documentación para cada widget
+- Ejemplos básicos, intermedios y avanzados
+- Guía de compilación (HOWTO-COMPILE.md)
+
+### Notas Técnicas
+- Basado en N-API para compatibilidad con múltiples versiones de Node.js
+- Compilación con node-gyp
+- Integración con GTK3 3.x
+- Soporte para Linux (actualmente)
+
+## [Versión 1.1.0] - 2026-02-14
 
 ### Añadido
 - Implementación inicial de la extensión GTK3 para Node.js
@@ -10,6 +65,8 @@
 - Widget Label para mostrar texto estático
 - Widget Box para layouts horizontales y verticales
 - Widget Scroll para contenedores con barras de desplazamiento
+- Widget Entry para entrada de texto simple
+- Widget StringGrid para tablas bidimensionales de datos
 - Estructura modular para futuras expansiones
 - Ejemplos organizados por niveles de complejidad
 - Principio DRY aplicado en la arquitectura
@@ -30,4 +87,20 @@
 - Basado en N-API para compatibilidad con múltiples versiones de Node.js
 - Compilación con node-gyp
 - Integración con GTK3 3.x
-- Soporte para Linux (actualmente)
+- Soporte para Linux (actualmente)
+
+## [Versión 1.0.0] - 2026-02-14
+
+### Añadido
+- Implementación inicial de la extensión GTK3 para Node.js
+- Soporte para creación de interfaces gráficas con GTK3
+- Widget Button con soporte para eventos y callbacks
+- Widget Window para contenedores de interfaz
+- Widget Label para mostrar texto estático
+- Widget Box para layouts horizontales y verticales
+- Widget Scroll para contenedores con barras de desplazamiento
+- Widget Entry para entrada de texto simple
+- Widget StringGrid para tablas bidimensionales de datos
+- Estructura modular para futuras expansiones
+- Ejemplos organizados por niveles de complejidad
+- Principio DRY aplicado en la arquitectura

package/CHANGELOG.md.backup

@@ -0,0 +1,115 @@
+# CHANGELOG - Extensión GTK3 para Node.js
+
+## [Versión 1.3.0] - 2026-02-15
+
+### Añadido
+- Widget TextView para áreas de texto multilinea
+- Widget Timer para funcionalidad de temporización similar a TTimer de Delphi
+- Soporte completo para eventos y callbacks en todos los widgets
+- Mejoras en la arquitectura para evitar duplicación de código
+- Correcciones de errores en la implementación de StringGrid
+- Ejemplos funcionales completos que demuestran la creación de interfaces gráficas
+- Soporte para creación de ventanas con botones interactivos
+- Implementación de bucles de eventos no bloqueantes
+
+### Características
+- Integración nativa con GTK3
+- Sistema de eventos con callbacks
+- Soporte para interfaces gráficas completas
+- Estructura modular y extensible
+- Temporización con funcionalidad similar a TTimer de Delphi
+
+### Documentación
+- README principal
+- Documentación para cada widget
+- Ejemplos básicos, intermedios y avanzados
+- Guía de compilación (HOWTO-COMPILE.md)
+
+### Notas Técnicas
+- Basado en N-API para compatibilidad con múltiples versiones de Node.js
+- Compilación con node-gyp
+- Integración con GTK3 3.x
+- Soporte para Linux (actualmente)
+
+## [Versión 1.2.0] - 2026-02-15
+
+### Añadido
+- Widget Button con soporte para eventos y callbacks
+- Widget Window para contenedores de interfaz
+- Widget Label para mostrar texto estático
+- Widget Box para layouts horizontales y verticales
+- Widget Scroll para contenedores con barras de desplazamiento
+- Widget Entry para entrada de texto simple
+- Widget StringGrid para tablas bidimensionales de datos
+- Widget TextView para áreas de texto multilinea
+- Estructura modular para futuras expansiones
+- Ejemplos organizados por niveles de complejidad
+- Principio DRY aplicado en la arquitectura
+
+### Características
+- Integración nativa con GTK3
+- Sistema de eventos con callbacks
+- Soporte para interfaces gráficas completas
+- Estructura modular y extensible
+
+### Documentación
+- README principal
+- Documentación para cada widget
+- Ejemplos básicos, intermedios y avanzados
+- Guía de compilación (HOWTO-COMPILE.md)
+
+### Notas Técnicas
+- Basado en N-API para compatibilidad con múltiples versiones de Node.js
+- Compilación con node-gyp
+- Integración con GTK3 3.x
+- Soporte para Linux (actualmente)
+
+## [Versión 1.1.0] - 2026-02-14
+
+### Añadido
+- Implementación inicial de la extensión GTK3 para Node.js
+- Soporte para creación de interfaces gráficas con GTK3
+- Widget Button con soporte para eventos y callbacks
+- Widget Window para contenedores de interfaz
+- Widget Label para mostrar texto estático
+- Widget Box para layouts horizontales y verticales
+- Widget Scroll para contenedores con barras de desplazamiento
+- Widget Entry para entrada de texto simple
+- Widget StringGrid para tablas bidimensionales de datos
+- Estructura modular para futuras expansiones
+- Ejemplos organizados por niveles de complejidad
+- Principio DRY aplicado en la arquitectura
+
+### Características
+- Integración nativa con GTK3
+- Sistema de eventos con callbacks
+- Soporte para interfaces gráficas completas
+- Estructura modular y extensible
+
+### Documentación
+- README principal
+- Documentación para cada widget
+- Ejemplos básicos, intermedios y avanzados
+- Guía de compilación (HOWTO-COMPILE.md)
+
+### Notas Técnicas
+- Basado en N-API para compatibilidad con múltiples versiones de Node.js
+- Compilación con node-gyp
+- Integración con GTK3 3.x
+- Soporte para Linux (actualmente)
+
+## [Versión 1.0.0] - 2026-02-14
+
+### Añadido
+- Implementación inicial de la extensión GTK3 para Node.js
+- Soporte para creación de interfaces gráficas con GTK3
+- Widget Button con soporte para eventos y callbacks
+- Widget Window para contenedores de interfaz
+- Widget Label para mostrar texto estático
+- Widget Box para layouts horizontales y verticales
+- Widget Scroll para contenedores con barras de desplazamiento
+- Widget Entry para entrada de texto simple
+- Widget StringGrid para tablas bidimensionales de datos
+- Estructura modular para futuras expansiones
+- Ejemplos organizados por niveles de complejidad
+- Principio DRY aplicado en la arquitectura

package/CHECKLIST.md

@@ -42,13 +42,36 @@
 - [x] Documentación completa
 - [x] Ejemplos funcionales
 
-## Widgets Pendientes
+### ✅ Entry
+- [x] Creación de campos de texto simples
+- [x] Soporte para entrada de texto
+- [x] Lectura de texto ingresado
+- [x] Escritura de texto programática
+- [x] Documentación completa
+- [x] Ejemplos funcionales
 
-### ❌ Entry
-- [ ] Campo de texto para entrada simple
+### ✅ StringGrid
+- [x] Creación de tablas bidimensionales
+- [x] Soporte para filas y columnas
+- [x] Establecimiento de encabezados
+- [x] Agregar filas de datos
+- [x] Modificación de celdas
+- [x] Edición interactiva de celdas
+- [x] Selección de filas
+- [x] Callbacks de eventos
+- [x] Documentación completa
+- [x] Ejemplos funcionales
 
-### ❌ TextView
-- [ ] Área de texto multilinea
+### ✅ TextView
+- [x] Área de texto multilinea para entradas más largas
+- [x] Soporte para texto largo y desplazamiento
+- [x] Lectura y escritura de texto
+- [x] Añadir texto al contenido existente
+- [x] Insertar texto en posiciones específicas
+- [x] Documentación completa
+- [x] Ejemplos funcionales
+
+## Widgets Pendientes
 
 ### ❌ CheckButton
 - [ ] Casilla de verificación
@@ -70,7 +93,7 @@
 
 ## Estado General
 
-- **Total Widgets Implementados:** 4/12
-- **Estado de la Extensión:** Funcional para casos básicos
+- **Total Widgets Implementados:** 6/12
+- **Estado de la Extensión:** Funcional para casos básicos e intermedios
 - **Compatibilidad:** GTK3, Linux
 - **Principio DRY:** Aplicado en toda la arquitectura

package/binding.gyp

@@ -7,7 +7,10 @@
         "src/button.cpp",
         "widgets/label/label.cpp",
         "widgets/box/box.cpp",
-        "widgets/scroll/scroll.cpp"
+        "widgets/scroll/scroll.cpp",
+        "widgets/entry/entry.cpp",
+        "widgets/stringgrid/stringgrid.cpp",
+        "widgets/textview/textview.cpp"
       ],
       "include_dirs": [
         "<!@(node -p \"require('node-addon-api').include\")",

package/ejemplo_funcional.js

@@ -0,0 +1,29 @@
+// ejemplo_funcional.js - Ejemplo funcional con ventana y botón visibles
+
+const { init, run } = require('./index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana usando directamente las funciones nativas
+const window = gtk3_native.createWindow('Ejemplo Funcional', 400, 300);
+
+// Crear un botón usando directamente las funciones nativas
+const button = gtk3_native.createButton('Haz clic aquí');
+
+// Conectar un callback al botón
+gtk3_native.connectClick(button, () => {
+  console.log('¡Botón presionado!');
+  gtk3_native.setButtonText(button, '¡Gracias por hacer clic!');
+});
+
+// Agregar el botón a la ventana
+gtk3_native.addToWindow(window, button);
+
+// Mostrar todos los widgets
+gtk3_native.showAll(window);
+
+console.log('Interfaz gráfica lista. Abriendo ventana con botón...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplo_funcional_corregido.js

@@ -0,0 +1,29 @@
+// ejemplo_funcional_corregido.js - Ejemplo funcional con ventana y botón visibles
+
+const { Button, Window, init, run } = require('./index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const window = new Window('Ejemplo Funcional', 400, 300);
+
+// Crear un botón
+const button = new Button('Haz clic aquí');
+
+// Agregar un manejador de eventos al botón
+button.onClick(() => {
+  console.log('¡Botón presionado!');
+  button.label = '¡Gracias por hacer clic!';
+});
+
+// Agregar el botón a la ventana
+window.add(button);
+
+// Mostrar la ventana y todos sus contenidos
+window.show();
+
+console.log('Interfaz gráfica lista. Abriendo ventana con botón...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplos/avanzados/README.md

@@ -6,6 +6,8 @@ Este directorio contiene ejemplos complejos que demuestran el uso combinado de m
 
 - `ejemplo_completo.js` - Ejemplo con botón y 35 labels organizadas en layouts horizontales y verticales
 - `ejemplo_scroll.js` - Ejemplo con Scroll, Labels y Buttons en la misma ventana
+- `ejemplo_stringgrid_completo.js` - Ejemplo completo del StringGrid con todas sus capacidades
+- `ejemplo_textview.js` - Ejemplo del widget TextView
 
 ## Objetivo
 

package/ejemplos/avanzados/ejemplo_stringgrid_completo.js

@@ -0,0 +1,95 @@
+// ejemplo_stringgrid_completo.js - Ejemplo completo del StringGrid con todas sus capacidades
+
+const { StringGrid, Entry, Label, Button, Box, Scroll, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('StringGrid Completo', 900, 700);
+
+// Crear un contenedor con scroll
+const scroll = new Scroll();
+
+// Crear un layout vertical
+const layout = new Box('vertical');
+
+// Crear un StringGrid con 15 filas y 5 columnas
+const grid = new StringGrid(15, 5);
+
+// Establecer encabezados
+grid.setHeader(['Nombre', 'Edad', 'Ciudad', 'País', 'Activo']);
+
+// Agregar algunas filas de ejemplo
+grid.addRow(['Juan Pérez', '30', 'Madrid', 'España', 'Sí']);
+grid.addRow(['Ana García', '25', 'Barcelona', 'España', 'No']);
+grid.addRow(['Carlos López', '35', 'Buenos Aires', 'Argentina', 'Sí']);
+grid.addRow(['María Rodríguez', '28', 'Ciudad de México', 'México', 'Sí']);
+grid.addRow(['Pedro Fernández', '42', 'Bogotá', 'Colombia', 'No']);
+
+// Crear controles para la interacción
+const controlsLayout = new Box('horizontal');
+
+const labelInfo = new Label('Información: ');
+const entryInput = new Entry('Texto para celda');
+const buttonUpdate = new Button('Actualizar Celda (0,0)');
+const buttonGetSelected = new Button('Obtener Selección');
+const labelSelection = new Label('Selección: Ninguna');
+
+// Variables para almacenar la selección actual
+let selectedRow = -1;
+let selectedCol = -1;
+
+// Registrar un callback para cuando se edita una celda
+grid.registerCellEditCallback((info) => {
+  console.log(`Celda editada: fila=${info.row}, col=${info.col}, nuevo_valor="${info.newValue}"`);
+  labelInfo.text = `Celda (${info.row},${info.col}) actualizada a: "${info.newValue}"`;
+});
+
+// Agregar un manejador de eventos al botón de actualizar
+buttonUpdate.onClick(() => {
+  const texto = entryInput.text;
+  console.log(`Actualizando celda (0,0) con: ${texto}`);
+  grid.setCellValue(0, 0, texto);
+  labelInfo.text = `Celda (0,0) actualizada a: "${texto}"`;
+});
+
+// Agregar un manejador de eventos al botón de obtener selección
+buttonGetSelected.onClick(() => {
+  const selection = grid.getSelectedCell();
+  selectedRow = selection.row;
+  selectedCol = selection.col;
+  
+  if (selection.row !== -1) {
+    const cellValue = grid.getCell(selection.row, 0); // Obtener valor de la primera columna
+    labelSelection.text = `Fila seleccionada: ${selection.row}, Valor: "${cellValue}"`;
+    console.log(`Fila seleccionada: ${selection.row}, Columna: ${selection.col}`);
+  } else {
+    labelSelection.text = 'Ninguna fila seleccionada';
+  }
+});
+
+// Agregar widgets al layout de controles
+controlsLayout.add(labelInfo);
+controlsLayout.add(entryInput);
+controlsLayout.add(buttonUpdate);
+controlsLayout.add(buttonGetSelected);
+controlsLayout.add(labelSelection);
+
+// Agregar widgets al layout principal
+layout.add(grid);
+layout.add(controlsLayout);
+
+// Agregar el layout al contenedor con scroll
+scroll.add(layout);
+
+// Agregar el scroll a la ventana
+ventana.add(scroll);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz con StringGrid completa lista. Abriendo ventana...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplos/avanzados/ejemplo_textview.js

@@ -0,0 +1,65 @@
+// ejemplo_textview.js - Ejemplo del widget TextView
+
+const { TextView, Button, Label, Box, Scroll, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo TextView', 600, 500);
+
+// Crear un contenedor con scroll para el TextView
+const scroll = new Scroll();
+
+// Crear un TextView con texto inicial
+const textView = new TextView('Hola,\neste es un ejemplo de TextView\ncon múltiples líneas.\n\nPuedes editar este texto directamente.');
+
+// Crear controles para interactuar con el TextView
+const controlsLayout = new Box('vertical');
+
+const labelInfo = new Label('Usa los botones para interactuar con el TextView');
+const buttonGetText = new Button('Obtener Texto');
+const buttonSetText = new Button('Establecer Texto');
+const buttonAppend = new Button('Añadir Texto');
+
+// Agregar manejadores de eventos a los botones
+buttonGetText.onClick(() => {
+  const text = textView.text;
+  console.log('Texto actual del TextView:', text);
+  labelInfo.text = `Caracteres: ${text.length}`;
+});
+
+buttonSetText.onClick(() => {
+  textView.text = 'Texto completamente nuevo\nEscrito desde JavaScript\nCon múltiples líneas';
+  labelInfo.text = 'Texto actualizado';
+});
+
+buttonAppend.onClick(() => {
+  textView.appendText('\n\nTexto añadido al final');
+  labelInfo.text = 'Texto añadido al final';
+});
+
+// Agregar widgets al layout de controles
+controlsLayout.add(labelInfo);
+controlsLayout.add(buttonGetText);
+controlsLayout.add(buttonSetText);
+controlsLayout.add(buttonAppend);
+
+// Agregar el TextView al contenedor con scroll
+scroll.add(textView);
+
+// Crear un layout principal
+const mainLayout = new Box('vertical');
+mainLayout.add(scroll);
+mainLayout.add(controlsLayout);
+
+// Agregar el layout principal a la ventana
+ventana.add(mainLayout);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz con TextView lista. Abriendo ventana...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplos/intermedios/README.md

@@ -6,6 +6,7 @@ Este directorio contiene ejemplos que muestran el uso combinado de múltiples wi
 
 - `ejemplo_label.js` - Ejemplo con widget Label y manipulación de texto
 - `ejemplo_label_boton.js` - Ejemplo con Label y Button en la misma ventana
+- `ejemplo_entry.js` - Ejemplo con Entry, Label y Button en la misma ventana
 
 ## Objetivo
 

package/ejemplos/intermedios/ejemplo_entry.js

@@ -0,0 +1,50 @@
+// ejemplo_entry.js - Ejemplo con Entry, Label y Button en la misma ventana
+
+const { Button, Label, Entry, Box, Scroll, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo Entry, Label y Button', 500, 400);
+
+// Crear un contenedor con scroll
+const scroll = new Scroll();
+
+// Crear un layout vertical
+const layout = new Box('vertical');
+
+// Crear un label para mostrar el texto del entry
+const label = new Label('Ingresa texto en el campo de abajo y haz clic en el botón');
+
+// Crear un entry
+const entry = new Entry('Texto inicial...');
+
+// Crear un botón
+const boton = new Button('Obtener texto del Entry');
+
+// Agregar un manejador de eventos al botón
+boton.onClick(() => {
+  const textoEntrada = entry.text;
+  console.log('Texto del entry:', textoEntrada);
+  label.text = `Texto ingresado: "${textoEntrada}"`;
+});
+
+// Agregar widgets al layout
+layout.add(label);
+layout.add(entry);
+layout.add(boton);
+
+// Agregar el layout al contenedor con scroll
+scroll.add(layout);
+
+// Agregar el scroll a la ventana
+ventana.add(scroll);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz con Entry, Label y Button lista. Abriendo ventana...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/index.js

@@ -66,6 +66,88 @@ class Scroll {
   }
 }
 
+class Entry {
+  constructor(text = "") {
+    this.widget = gtk3_native.createEntry(text);
+  }
+
+  set text(content) {
+    gtk3_native.setEntryText(this.widget, content);
+  }
+
+  get text() {
+    return gtk3_native.getEntryText(this.widget);
+  }
+
+  setText(content) {
+    this.text = content;
+  }
+
+  getText() {
+    return this.text;
+  }
+}
+
+class StringGrid {
+  constructor(rows = 10, cols = 5) {
+    this.widget = gtk3_native.createStringGrid(rows, cols);
+  }
+
+  setCellValue(row, col, value) {
+    return gtk3_native.setGridCellValue(this.widget, row, col, value);
+  }
+
+  getCell(row, col) {
+    return gtk3_native.getGridCell(this.widget, row, col);
+  }
+
+  setHeader(headers) {
+    return gtk3_native.setGridHeader(this.widget, headers);
+  }
+
+  addRow(data) {
+    return gtk3_native.addGridRow(this.widget, data);
+  }
+  
+  getSelectedCell() {
+    return gtk3_native.getSelectedCell(this.widget);
+  }
+  
+  registerCellEditCallback(callback) {
+    return gtk3_native.registerCellEditCallback(this.widget, callback);
+  }
+}
+
+class TextView {
+  constructor(text = "") {
+    this.widget = gtk3_native.createTextView(text);
+  }
+
+  set text(content) {
+    gtk3_native.setTextViewText(this.widget, content);
+  }
+
+  get text() {
+    return gtk3_native.getTextViewText(this.widget);
+  }
+
+  setText(content) {
+    this.text = content;
+  }
+
+  getText() {
+    return this.text;
+  }
+
+  appendText(content) {
+    return gtk3_native.appendTextViewText(this.widget, content);
+  }
+
+  insertText(position, content) {
+    return gtk3_native.insertTextViewText(this.widget, position, content);
+  }
+}
+
 class Window {
   constructor(title = "Ventana", width = 400, height = 300) {
     this.widget = gtk3_native.createWindow(title, width, height);
@@ -99,6 +181,9 @@ module.exports = {
   Label,
   Box,
   Scroll,
+  Entry,
+  StringGrid,
+  TextView,
   Window,
   // Mantener compatibilidad hacia atrás
   createWindow: gtk3_native.createWindow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtk3-node",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Native Node.js extension for creating GTK3 widgets",
   "main": "index.js",
   "scripts": {

package/src/gtk3_node.cpp

@@ -144,6 +144,18 @@ Napi::Object Init(Napi::Env env, Napi::Object exports) {
   extern Napi::Object InitScroll(Napi::Env env, Napi::Object exports);
   InitScroll(env, exports);
   
+  // Inicializar el widget Entry
+  extern Napi::Object InitEntry(Napi::Env env, Napi::Object exports);
+  InitEntry(env, exports);
+  
+  // Inicializar el widget StringGrid
+  extern Napi::Object InitStringGrid(Napi::Env env, Napi::Object exports);
+  InitStringGrid(env, exports);
+  
+  // Inicializar el widget TextView
+  extern Napi::Object InitTextView(Napi::Env env, Napi::Object exports);
+  InitTextView(env, exports);
+  
   return exports;
 }