Documentación

Complete Walkthrought into CodeJS framework for Code.org

Introduction

CodeJS is the first framework designed for work on Code.org App Lab. It grants tools for move your apps to the next level.

⚠️ Warning

This framework is in beta and may have some bugs

⚠️ IMPORTANT

This framework just works in Code.org App Lab. This happends because it require native functions of Code.org likebutton(),textLabel(),setPosition(), like others.

Características principales:

Componentes reutilizables con propiedades por defecto
Sistema de pantallas para organizar tu aplicación
Navegación simple entre pantallas
Manejo de eventos (onClick, onHover, onChange)
Aplicación dinámica de estilos

Instalación

Copiar y pegar el código del framework al inicio de tu proyecto en Code.org.

Pasos:

Abre tu proyecto en Code.org App Lab
Copia el código del framework desde la página principal
Pégalo al inicio de tu código
Empieza a usar Codejs()

API

El framework expone una única función Codejs() que acepta diferentes acciones.

createComponent

Crea una plantilla de componente reutilizable

Codejs("createComponent", type, id, props)

instanceComponent

Crea una instancia de un componente en la pantalla actual

Codejs("instanceComponent", id, props)

createScreen

Define una nueva pantalla con sus componentes

Codejs("createScreen", id, builder)

renderScreen

Muestra una pantalla específica (elimina componentes anteriores)

Codejs("renderScreen", id)

Componentes

Los componentes son templates que defines una vez y reutilizas múltiples veces.

Tipos de Componentes Disponibles

Code.org App Lab soporta estos tipos de componentes

// Botón
Codejs("createComponent", "button", "myBtn", {
  text: "Click",
  textColor: "white",
  backgroundColor: "blue"
});

// Etiqueta de texto
Codejs("createComponent", "label", "myLabel", {
  text: "Hola Mundo",
  textColor: "black"
});

// Campo de entrada
Codejs("createComponent", "input", "myInput", {
  text: "Escribe aquí...",
  width: 300
});

// Checkbox
Codejs("createComponent", "checkbox", "myCheck", {
  text: "Acepto"
});

// Dropdown
Codejs("createComponent", "dropdown", "myDrop", {
  options: ["Opción 1", "Opción 2", "Opción 3"]
});

// Imagen
Codejs("createComponent", "image", "myImg", {
  src: "url-de-imagen.jpg",
  width: 400,
  height: 300
});

Propiedades de Posicionamiento

Codejs("createComponent", "button", "posBtn", {
  text: "Mi Botón",
  x: 100,      // Posición X (píxeles)
  y: 200,      // Posición Y (píxeles)
  width: 200,  // Ancho (píxeles)
  height: 50   // Alto (píxeles)
});

Propiedades de Estilo CSS

Puedes usar cualquier propiedad CSS en camelCase

Codejs("createComponent", "button", "styledBtn", {
  text: "Botón Estilizado",
  textColor: "#ffffff",
  backgroundColor: "#dc2626",
  borderRadius: "4px",
  fontSize: "16px",
  fontWeight: "bold",
  padding: "10px 20px"
});

Pantallas

Las pantallas agrupan componentes y permiten navegar entre diferentes vistas.

Crear y Renderizar una Pantalla

// 1. Crear componente
Codejs("createComponent", "button", "navBtn", {
  text: "Botón",
  backgroundColor: "#000"
});

// 2. Crear pantalla
Codejs("createScreen", "home", function() {
  Codejs("instanceComponent", "navBtn", {
    x: 100,
    y: 100,
    text: "Botón 1"
  });
  
  Codejs("instanceComponent", "navBtn", {
    x: 100,
    y: 180,
    text: "Botón 2"
  });
});

// 3. Mostrar pantalla
Codejs("renderScreen", "home");

Navegación entre Pantallas

// Pantalla principal
Codejs("createScreen", "main", function() {
  Codejs("instanceComponent", "navBtn", {
    x: 100,
    y: 100,
    text: "Ir a Settings",
    onClick: {
      type: "run",
      exec: function() {
        Codejs("renderScreen", "settings");
      }
    }
  });
});

// Pantalla de settings
Codejs("createScreen", "settings", function() {
  Codejs("instanceComponent", "navBtn", {
    x: 100,
    y: 100,
    text: "Volver",
    onClick: {
      type: "run",
      exec: function() {
        Codejs("renderScreen", "main");
      }
    }
  });
});

// Iniciar en main
Codejs("renderScreen", "main");

Eventos

CodeJS soporta tres tipos de eventos principales.

onClick - Ejecutar función al hacer clic

Codejs("createComponent", "button", "clickBtn", {
  text: "Click Me",
  onClick: {
    type: "run",
    exec: function() {
      console.log("Botón clickeado");
      // Puedes ejecutar cualquier código aquí
    }
  }
});

onHover - Cambiar estilos al pasar el mouse

Codejs("createComponent", "button", "hoverBtn", {
  text: "Hover Me",
  textColor: "black",
  backgroundColor: "white",
  onHover: {
    styles: {
      textColor: "white",
      backgroundColor: "red"
    }
  }
});

onChange - Detectar cambios en inputs

Codejs("createComponent", "input", "searchInput", {
  text: "Buscar...",
  onChange: {
    type: "run",
    exec: function() {
      console.log("El input ha cambiado");
    }
  }
});

Ejemplos Completos

Aplicación de Login

Sistema básico de login con navegación

// Componentes
Codejs("createComponent", "input", "field", {
  width: 300,
  height: 40
});

Codejs("createComponent", "button", "btn", {
  width: 300,
  height: 40,
  textColor: "white",
  backgroundColor: "#000"
});

Codejs("createComponent", "label", "title", {
  fontSize: "24px",
  fontWeight: "bold"
});

// Pantalla de Login
Codejs("createScreen", "login", function() {
  Codejs("instanceComponent", "title", {
    x: 50,
    y: 50,
    text: "Iniciar Sesión"
  });
  
  Codejs("instanceComponent", "field", {
    x: 50,
    y: 100,
    text: "Usuario"
  });
  
  Codejs("instanceComponent", "field", {
    x: 50,
    y: 160,
    text: "Contraseña"
  });
  
  Codejs("instanceComponent", "btn", {
    x: 50,
    y: 220,
    text: "Entrar",
    onClick: {
      type: "run",
      exec: function() {
        Codejs("renderScreen", "home");
      }
    }
  });
});

// Pantalla Principal
Codejs("createScreen", "home", function() {
  Codejs("instanceComponent", "title", {
    x: 50,
    y: 50,
    text: "¡Bienvenido!"
  });
  
  Codejs("instanceComponent", "btn", {
    x: 50,
    y: 120,
    text: "Cerrar Sesión",
    backgroundColor: "#dc2626",
    onClick: {
      type: "run",
      exec: function() {
        Codejs("renderScreen", "login");
      }
    }
  });
});

// Iniciar
Codejs("renderScreen", "login");

Menu con Opciones

Menu interactivo con múltiples opciones

// Componente de opción de menú
Codejs("createComponent", "button", "menuOption", {
  width: 250,
  height: 60,
  textColor: "white",
  backgroundColor: "#1a1a1a",
  fontSize: "18px",
  onHover: {
    styles: {
      backgroundColor: "#dc2626"
    }
  }
});

// Pantalla de menú
Codejs("createScreen", "menu", function() {
  Codejs("instanceComponent", "menuOption", {
    x: 75,
    y: 100,
    text: "Nueva Partida",
    onClick: {
      type: "run",
      exec: function() {
        console.log("Nueva partida");
      }
    }
  });
  
  Codejs("instanceComponent", "menuOption", {
    x: 75,
    y: 180,
    text: "Cargar Partida",
    onClick: {
      type: "run",
      exec: function() {
        console.log("Cargar partida");
      }
    }
  });
  
  Codejs("instanceComponent", "menuOption", {
    x: 75,
    y: 260,
    text: "Opciones",
    onClick: {
      type: "run",
      exec: function() {
        Codejs("renderScreen", "options");
      }
    }
  });
  
  Codejs("instanceComponent", "menuOption", {
    x: 75,
    y: 340,
    text: "Salir",
    backgroundColor: "#7f1d1d",
    onClick: {
      type: "run",
      exec: function() {
        console.log("Salir del juego");
      }
    }
  });
});

Codejs("createScreen", "options", function() {
  Codejs("instanceComponent", "menuOption", {
    x: 75,
    y: 100,
    text: "Volver al Menú",
    onClick: {
      type: "run",
      exec: function() {
        Codejs("renderScreen", "menu");
      }
    }
  });
});

Codejs("renderScreen", "menu");

Volver al Inicio