SiteBlog-UI

Software escrito en typescript que genera interfaces de usuario. Front-End generator. Es imprescindible utilízar typescript para usarlo y el uso del paradigma de programacíon orientado a objetos, ya que el codigo base o core es 100% clases y orientado a objetos.

En resumen:
Este software, SiteBlog-UI en principío solo interesa a desarrolladores en typescript que quíeran desarrollar un front-end, orientado a objetos y hábil por si mismo. Por hábil entíendo capaz de ser dinámico tambíen."nadíe díjo que el resultado de usar SiteBlog-UI tenga que ser estático" aúnque ahora mísmo es lo que es el resultado una web estática sin más.

¿Qué és?

SiteBlog-UI es un simple software capaz de generar interfaces de usuario y gracias a la magia de webpack lo que define es un front-end completo o site, blog, web tal front-end que queda configurado como un sitio estático

¿Cómo se úsa?

La forma idónea u optíma de usar SiteBlog-UI -en adelante este software- depende de lo que decída el desarrollador crear y cómo estructura el código de lo nque este desarrollando, -síempre un front-end "por lo menos de momento"-.

Está/s forma/s de instánciar o usar el core o código base de este software, es algo en definicíon todavía, es decír lo estoy probando aún. Sin embargo el proceso requíere bíen crear clases bíen instánciar clases.
Explicańdolo:

1. opcíon crear clases
   • Core = clases y tipos.
     mi código, el que genero
     tambíen son clases. En ú_
     ltima instáncia la invoc_
     acíon se hace mediante la
     llamada al metodo que en_
     capsula un contenído dado
     por la clase que hemos cr_
     eado.
2. opcíon instánciar clases
   • Core = clases y tipos.
     mi código, el que genero
     son instáncias de estás
     clases, y del mísmo modo
     se úsan llamando al metodo
     que crea el contenído.
3. Ejemplos:

• Creando más clases o clases própias

// Ejemplo con la creacíon de
// un header que usa una clase
// para generar contenído

export class FirstSection extends Section {
    constructor() {
        super();
    }

    public firstColumn() {
        const container = new Div();
        const encabezado = new H1();
        const logoimage = new Img();
        const logo = new Figure();
        logoimage.setImg("./assets/img/rocketride.png", "logo", {});
        encabezado.setContent("SiteBlog-UI");
        logo.setFigcaption(encabezado.getHeading());
        logo.appendContent(logoimage.getImg());
        container.setContent(logo.getFigure());
        return this.appendContent(container.getDiv());
    }
    /**
     * Aquí
     */
    // Más metodos o seccíones
    // para la 1ª seccíon del
    // header.
}
Copy

• Obtencíon del header

// Creacíon e insercíon del header

const firstSection = new FirstSection();

export function header() {
    const header = new Header();
    header.appendContent(firstSection.firstColumn());
    document.addEventListener("DOMContentLoaded", () => {
        CreateElement.setElement(header.getHeader(), "ofRender"); // ofRender es un id que debe existír en el index.html y que es dónde va a incluírse el contenído del metodo al invocarlo. Obvía decír que es un id aleatorío y que debe escribirse con la redaccíon del metodo que genera un header con contenido.
    });
}
Copy

• Simples instáncias del codigo fuente

// Sin crear clases, es decír;
// instánciando las clases que
// componen el código fuente base.

/**
 * Este código de abajo representa
 * la generacíon de un simple for_
 * mulario de acceso.
 */

const encabezado = new H2();
encabezado.setAttributes({ id: "tituloFormularioLogin" });
encabezado.setContent("Acceder");
const iconTitle = new InlineContainer();
const icon = `<strong class="icons">&#x1f679;</strong>`;
let render = document.createElement("i");
render.innerHTML = icon;
encabezado.setContent(render);
iconTitle.setContainerHelper(encabezado.getHeading());

const inputName = new Input();
inputName.setType({ text: "text" });
const inputPassword = new Input();
inputPassword.setType({ password: "password" });

const iconCheck = new InlineContainer();
const iconChck = `<i class="icons iconCheck">&#x1f5f6;</i>`;
iconCheck.setContainer(iconChck);
const check = new Input();
check.setType({ checkbox: "checkbox" });
const checkLabel = new Label();
checkLabel.appendContent(iconCheck.getContainer());
checkLabel.setLabel("Recordarme", "persistbtn");

const lname = new Label();
lname.setLabel("Nombre de usuario:", "user");
const lpassword = new Label();
lpassword.setLabel("Clave de acceso.", "contrasenya");

const iconName = new InlineContainer();
const icon2 = `<strong class="icons">&#x1f610;</strong>`;
const render2 = document.createElement("i");
render2.innerHTML = icon2;
iconName.setContainerHelp(lname.getLabel(), render2);

const inputsBox = new Fieldset();
inputsBox.setLegend("Datos de Acceso:");
inputsBox.appendContent(iconName.getContainer());
inputsBox.appendContent(inputName.geInput());
inputsBox.appendContent(lpassword.getLabel());
inputsBox.appendContent(inputPassword.geInput());
inputsBox.appendContent(check.geInput());
inputsBox.appendContent(checkLabel.getLabel());
const buildBoxInputs = inputsBox.getElement();

const acceder = new Button();
acceder.setButton({ submit: "submit" }, { id: "acceso" });
acceder.appendContent("Acceder");
const borrar = new Button();
borrar.setButton({ reset: "reset" });
borrar.appendContent("Borrar");

const buttonsBox = new Fieldset();
buttonsBox.setLegend("Procesar acceso.");
buttonsBox.appendContent(acceder.getElement());
buttonsBox.appendContent(borrar.getElement());
const buildBoxButtons = buttonsBox.getElement();

export function accessLogin() {
    const elForm = new Form();
    elForm.setAction("");
    elForm.setMethod("get");
    elForm.appendContent(buildBoxInputs);
    elForm.appendContent(buildBoxButtons);
    document.addEventListener("DOMContentLoaded", () => {
        CreateElement.setElement(elForm.getElement(), "articleone");
    });
}

export const renderForm = document.addEventListener("DOMContentLoaded", () => {
    const verlo = new BlockContainer();
    const exit = `${accessLogin()}`;
    verlo.setContainer(exit);
    return CreateElement.setElement(verlo.getContainer());
});
Copy

---

demo con el codigo del formulario

---

Sobre el demo

Es muy simple y escueto, hasta ahora me he limitado a lo mínimo en desarrollo para poder configurar y diseñar el proyecto al máximo.
En este demo hay un link llamado LOGIN funcíona y despliega una ventana modal, así mísmo generada con el software, dentro por contenído está el formularío simple de acceso. El botón submit inicía una accíon pues he definído un action simple una vez más, y abre una nueva página html.
Cúando híce este demo no había desarrollado listas ni su posibilidad aun.