gtk3-node 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -10,6 +10,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

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/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.2.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;
 }
 

package/widgets/entry/README.md

@@ -0,0 +1,46 @@
+# Widget Entry
+
+El widget Entry es parte de la colección de widgets para la extensión GTK3 para Node.js. Proporciona un campo de texto simple para la entrada de datos por parte del usuario.
+
+## Características
+
+- Campo de texto de una sola línea para entrada de datos
+- Soporta lectura y escritura de texto
+- Compatible con el principio DRY
+- Fácil integración con otros widgets
+
+## API
+
+### Constructor
+- `new Entry(textoInicial)` - Crea un nuevo campo de entrada con texto opcional inicial
+
+### Propiedades
+- `text` - El texto actual en el campo de entrada (getter/setter)
+
+### Métodos
+- `setText(texto)` - Establece el texto en el campo de entrada
+- `getText()` - Obtiene el texto actual del campo de entrada
+
+## Ejemplo de Uso
+
+```javascript
+const { Entry, Window, init, run } = require('../../index.js');
+
+init();
+const window = new Window('Ejemplo Entry', 300, 200);
+
+const entry = new Entry('Texto inicial');
+window.add(entry);
+window.show();
+
+// Leer el valor del entry
+setTimeout(() => {
+  console.log('Valor del entry:', entry.text);
+}, 2000);
+
+run();
+```
+
+## Principio DRY
+
+Este widget sigue el principio DRY (Don't Repeat Yourself) al reutilizar patrones comunes de implementación de widgets en la extensión GTK3 para Node.js.

package/widgets/entry/entry.cpp

@@ -0,0 +1,98 @@
+#include <napi.h>
+#include <gtk/gtk.h>
+
+// Estructura para almacenar datos del entry
+struct EntryData {
+  GtkWidget* entry;
+  Napi::Env env;
+  
+  EntryData(Napi::Env e) : entry(nullptr), env(e) {}
+};
+
+// Constructor de entry
+Napi::Value CreateEntry(const Napi::CallbackInfo& info) {
+  Napi::Env env = info.Env();
+  
+  std::string text = "";
+  if (info.Length() > 0 && info[0].IsString()) {
+    text = info[0].As<Napi::String>().Utf8Value();
+  }
+  
+  GtkWidget* entry = gtk_entry_new();
+  if (!text.empty()) {
+    gtk_entry_set_text(GTK_ENTRY(entry), text.c_str());
+  }
+  
+  // Crear estructura de datos para el entry
+  EntryData* entry_data = new EntryData(env);
+  entry_data->entry = entry;
+  
+  // Guardar la estructura en los datos del widget
+  g_object_set_data_full(G_OBJECT(entry), "entry_data", entry_data, 
+    GDestroyNotify([](gpointer data) {
+      EntryData* entry_data = static_cast<EntryData*>(data);
+      delete entry_data;
+    }));
+  
+  // Convertir el widget a External para pasarlo a JavaScript
+  Napi::Object obj = Napi::Object::New(env);
+  obj.Set("widget", Napi::External<GtkWidget>::New(env, entry));
+  
+  return obj;
+}
+
+// Función para establecer el texto del entry
+Napi::Value SetEntryText(const Napi::CallbackInfo& info) {
+  Napi::Env env = info.Env();
+  
+  if (info.Length() < 2 || !info[0].IsObject() || !info[1].IsString()) {
+    Napi::TypeError::New(env, "Se requiere un objeto widget y un texto").ThrowAsJavaScriptException();
+    return Napi::Boolean::New(env, false);
+  }
+  
+  Napi::Object widgetObj = info[0].As<Napi::Object>();
+  std::string newText = info[1].As<Napi::String>().Utf8Value();
+  
+  if (!widgetObj.HasOwnProperty("widget")) {
+    Napi::TypeError::New(env, "El objeto no contiene un widget válido").ThrowAsJavaScriptException();
+    return Napi::Boolean::New(env, false);
+  }
+  
+  Napi::External<GtkWidget> widgetExt = widgetObj.Get("widget").As<Napi::External<GtkWidget>>();
+  GtkWidget* entry = widgetExt.Data();
+  
+  gtk_entry_set_text(GTK_ENTRY(entry), newText.c_str());
+  
+  return Napi::Boolean::New(env, true);
+}
+
+// Función para obtener el texto del entry
+Napi::Value GetEntryText(const Napi::CallbackInfo& info) {
+  Napi::Env env = info.Env();
+  
+  if (info.Length() < 1 || !info[0].IsObject()) {
+    Napi::TypeError::New(env, "Se requiere un objeto widget").ThrowAsJavaScriptException();
+    return Napi::String::New(env, "");
+  }
+  
+  Napi::Object widgetObj = info[0].As<Napi::Object>();
+  
+  if (!widgetObj.HasOwnProperty("widget")) {
+    Napi::TypeError::New(env, "El objeto no contiene un widget válido").ThrowAsJavaScriptException();
+    return Napi::String::New(env, "");
+  }
+  
+  Napi::External<GtkWidget> widgetExt = widgetObj.Get("widget").As<Napi::External<GtkWidget>>();
+  GtkWidget* entry = widgetExt.Data();
+  
+  const gchar* text = gtk_entry_get_text(GTK_ENTRY(entry));
+  return Napi::String::New(env, text ? text : "");
+}
+
+Napi::Object InitEntry(Napi::Env env, Napi::Object exports) {
+  exports.Set("createEntry", Napi::Function::New(env, CreateEntry));
+  exports.Set("setEntryText", Napi::Function::New(env, SetEntryText));
+  exports.Set("getEntryText", Napi::Function::New(env, GetEntryText));
+  
+  return exports;
+}

package/widgets/entry/entry.h

@@ -0,0 +1,10 @@
+#ifndef ENTRY_H
+#define ENTRY_H
+
+#include <napi.h>
+#include <gtk/gtk.h>
+
+// Función para inicializar el widget Entry
+Napi::Object InitEntry(Napi::Env env, Napi::Object exports);
+
+#endif // ENTRY_H

package/widgets/stringgrid/README.md

@@ -0,0 +1,46 @@
+# Widget StringGrid
+
+El widget StringGrid es parte de la colección de widgets para la extensión GTK3 para Node.js. Proporciona una tabla bidimensional para mostrar y editar datos en formato fila-columna.
+
+## Características
+
+- Tabla bidimensional de filas y columnas
+- Soporte para edición de celdas
+- Compatible con el principio DRY
+- Fácil integración con otros widgets
+
+## API
+
+### Constructor
+- `new StringGrid(rows, cols)` - Crea una nueva tabla con el número especificado de filas y columnas
+
+### Métodos
+- `setCellValue(row, col, value)` - Establece el valor de una celda
+- `getCell(row, col)` - Obtiene el valor de una celda
+- `setHeader(headers)` - Establece los encabezados de columna
+- `addRow(data)` - Agrega una fila con los datos especificados
+
+## Ejemplo de Uso
+
+```javascript
+const { StringGrid, Window, init, run } = require('../../index.js');
+
+init();
+const window = new Window('Ejemplo StringGrid', 600, 400);
+
+const grid = new StringGrid(10, 5); // 10 filas, 5 columnas
+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']);
+
+window.add(grid);
+window.show();
+
+run();
+```
+
+## Principio DRY
+
+Este widget sigue el principio DRY (Don't Repeat Yourself) al reutilizar patrones comunes de implementación de widgets en la extensión GTK3 para Node.js.