cyan-air

v1.2.1

Published

13 days ago

Framework JS ligero para crear interfaces de datos y aplicaciones web escalables y orientadas a componentes.

0High
0Medium
0Low

pensadornatural

cyan-air vb6-style typescript

🟦 Cyan Air Framework

Framework JS ligero para crear interfaces de datos y aplicaciones web escalables y orientadas a componentes.

Cyan Air permite construir dashboards y aplicaciones web modernas mediante un sistema de mensajería entre componentes y una estructura de archivos .html que encapsula lógica, estilo y estructura, eliminando la necesidad de configuraciones complejas de empaquetado.

🚀 Instalación y Uso

Opción 1: Vía CDN (Recomendado para uso directo en HTML)

Incorpora esta línea en la sección <head> de tu documento HTML:

<script src="https://unpkg.com/cyan-air/dist/cyan-air.js"></script>

Opción 2: Vía NPM (Para desarrollo con TypeScript/Node)

npm install cyan-air

✨ Características Principales

Componentización Real: cada componente reside en su propio archivo .html con secciones <style>, HTML y <script>, mejorando la organización y mantenibilidad.
Eventos Automáticos (Estilo VB6): los elementos button e input no requieren listeners manuales. Se programan mediante funciones con nombre: function NombreObjeto_OnNombreEvento() { ... }.
Comunicación Desacoplada: utiliza los métodos .Talk() y .Listen() para que los componentes se comuniquen mediante mensajes globales, logrando una reutilización total.
Validación Integrada: validación automática de datos (enteros, reales, rangos, alfanuméricos).
API Ready: conexión simplificada a APIs con CyanAir.AddEndPoint(MiEndPoint) y métodos GET, POST, PUT y DELETE ejecutados como MiEndPoint.GET(urlEndPoint), que al terminar llaman automáticamente a las funciones function MiEndPoint_OnReady() o function MiEndPoint_OnError(), que es donde se escribe el código para, por ejemplo, acceder a datos retornados por la API mediante el comando MiEndPoint.GetResponse(), o mostrar un mensaje si ocurrió algún error.
Status Bar Nativa: sistema de notificaciones integrado con constantes disponibles: Success, Unsuccess, Warning y Notice.

Para incorporar la Status Bar a una página web, escribe el siguiente código JavaScript para añadirla y luego para que reaccione imprimiendo los mensajes mediante su método SetCaption, con uno u otro color de acuerdo al valor del metaMensaje recibido:

CyanAir.AddStatusBar();

function StatusBar_Listen(idObjeto, mensaje, metaMensaje) {
    switch (metaMensaje) {
        case 'Success':
            CyanAir.StatusBar.SetCaption(mensaje, CyanAir.Const.Success);
            break;
    
        case 'Warning':
            CyanAir.StatusBar.SetCaption(mensaje, CyanAir.Const.Warning);
            break;
    
        case 'Unsuccess':
            CyanAir.StatusBar.SetCaption(mensaje, CyanAir.Const.Unsuccess);
            break;
    
        case 'Notice':
            CyanAir.StatusBar.SetCaption(mensaje, CyanAir.Const.Notice);
            break;
    }
}

🛠️ Ejemplo: ¡Hola Mundo!

Este ejemplo muestra cómo un botón en el index.html controla la visibilidad de un componente externo mediante el sistema de mensajería de Cyan Air.

1. El Componente (`hola_mundo.html`)

<style>
    .fondo { 
        background-color: #ddd; 
        padding: 15px; 
        border-radius: 8px; 
        font-family: 'Poppins', sans-serif; 
    }
</style>

<div class="fondo">
    <h1>Componente hola_mundo.html</h1>
    <p>¡Hola mundo!</p>
</div>

<script>
    // Método "Listen" que escucha todos los mensajes publicados
    function hola_mundo_Listen(id, mensaje, metaMensaje) {        
        switch (mensaje) {
            case "Ocultar/mostrar detalle": // Reacción al mensaje específico
                hola_mundo.SetVisibility(!hola_mundo.GetVisibility());
                break;
        }
    }
</script>

2. Archivo Principal (`index.html`)

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Mi App con Cyan Air</title>
    <script src="https://unpkg.com/cyan-air/dist/cyan-air.js"></script>
</head>
<body>
    <button id="index_btnOcultar">Ocultar/mostrar detalle</button>

    <script>
        // Importación del componente externo
        CyanAir.Import('./hola_mundo.html');

        // Indicar a Cyan Air que el elemento es un botón para habilitar sus métodos
        CyanAir.IsButton("index_btnOcultar");

        // Fijar el botón como tipo "Toggle"
        index_btnOcultar.SetToggle(true);

        // Evento Click generado automáticamente por el nombre del ID
        function index_btnOcultar_OnClick() {
            index_btnOcultar.Talk("Ocultar/mostrar detalle"); // Publicar mensaje global
        }
    </script>
</body>
</html>

🤝 Participación y Contribución

Este es un proyecto Open Source y todas las colaboraciones son bienvenidas.

Cómo colaborar:

Fork: crea una copia del repositorio en tu propia cuenta de GitHub.
Branch: crea una rama con un nombre descriptivo, por ejemplo: feature/nueva-validacion.
Code: edita el archivo fuente en src/cyan-air.ts.
Pull Request (PR): envía una solicitud detallando tus cambios para que puedan ser integrados en la rama principal.

¡Muchísimas gracias por ayudar a mejorar Cyan Air!

📜 Licencia

Este proyecto está bajo la Licencia MIT.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme