QuykHtml

QuykHtml

Una biblioteca de Python que le permite generar plantillas HTML rápida y fácilmente e incluso crear sitios web completos.

Si te sientes generoso o te gustaría invitarme a un café o hacer una donación, a continuación se muestra mi aplicación de efectivo:
cash app: $elmling

instalación de pip QuykHtml

Nuevas características:
- Expresar

Características clave:
- matraz
- Encadenar comandos
- Soporte Javascript/jQuery
- Creación de tablas
- Creación de Ajax
- Creación de formularios
- Boostrap
- SEO
- Ejemplo de página de destino

Ejemplo: Hola mundo en 4 líneas

 # Importar la clase de la biblioteca desde QuykHtml import qhtml# Crear una instancia de classq = qhtml()# Insertar un elemento p modificado en nuestra pantalla principalq.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# Representa la páginaq.display.render()

Ejemplo: Declaración Básica

 de QuykHtml importar qhtml# Crear una instancia de claseq = qhtml()# Crear un divdiv = q.new("div")# Crear un párrafop = q.new("p")# Crear una entradainput = q.new("input") # Representar los resultados insertando todos los objetos en displayq.display.insert([div, p, input]).render()

Ejemplo: estilo de elemento

 from QuykHtml import qhtml# Instanciar claseq = qhtml()# Declarar css, permite una lista de listas, siendo el primer valor# nombre de clase y la cadena de marcado/estilo para el segundo valorq.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# También puedes hacer lo mismo simplemente llamando al método add con dos argumentsq.css.add("div","font-size:32px;")q.css.add(".div_custom","color:gray;")# Crea un div con la clase .div_custom y configura el texto en divdiv = q.new("div").set_class("div_custom").set_text("QuykHtml Rocks!")# Puede usar estilos en línea para diseñar el elemento y establecer el texto en el divdiv2 = q.new("div").style.set("font-size:48px;color:green;").set_text("¡QuykHtml Rocks!")# Representa los resultadosq.display.insert([div, div2 ]).prestar()

Ejemplos: establecedores de elementos

 de QuykHtml importar qhtml# Instanciar claseq = qhtml()p = q.new("p")# Conjunto de elementos globalesp.style.set('color:red;')p.style.append('background-color:amarillo; ')p.add_attribute('title="Qhytml es ¡fácil!"')p.set_text('text')p.set_text_ipsum()p.set_text_ipsum_large()p.set_text_ipsum_small()p.set_class('clase1 clase2')p.set_form_button()p.set_id('mi-id ')p.set_name('algún-nombre')p.set_value('valor personalizado')p.set_tool_tip('herramienta de texto flotante simple tip')p.on_click("alert('¡Me hicieron clic derecho!');")p.on_click_goto('google.com')p.on_right_click("alert('¡Me hicieron clic derecho!');")p. on_mouse_enter("alert('¡Ratón entró!');")p.on_mouse_leave("alert('¡Ratón izquierdo!');")html = p.html()# Elemento específico settersq.new("img").set_img_src('src_url')q.new("img").set_img_placeholder(400)q.new("img").on_click_showPreview()q.new("form").set_form_ opciones('file.php','get')q.new("botón").set_form_button()q.new("iframe").set_iframe('google.com')q.new("entrada"). set_auto_complete(Falso)

Ejemplo: tablas

 de QuykHtml import qhtml# Crear una instancia de claseq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# Crear una tabla sin procesar de 1 fila y 2 columnastable = q.table(1,2)# Insertar método usando 0 índice -> insert_at(fila,columna,qhtml_object o lista de qhtml_objects)table.insert_at(0,0,q.new("p").set_text("Fila 1 columna 1"))table.insert_at(0,1,q.new("p").set_text("Fila 1 columna 2"))# También válido syntaxtable = q.table(1,2).insert_at(0,0,q.new("p").set_text("Fila 1 columna 1")).insert_at(0,1,q.new("p").set_text("Fila 1 columna 2"))# Ejemplos de manipulación de Td para i en el rango(2):
	 table.style_td_at(0,i,'text-align:center') table.set_td_class_at(0,i,'alguna-clase') table.set_td_id_at(0,i,'alguna-id' + str(i))# Asegúrese de crear la tabla # que devuelve un div con el código de la tabla en ittable = table.build()# Representa los resultadosq.display.insert(table).render()

Ejemplo: código JavaScript

 from QuykHtml import qhtml# Instanciar classq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# Agregue un script, incluso se puede leer desde un archivoq.scripts.append( 'function js_function() {'' alert("A JS Function");''}')# Agregar un script a un objeto qhtmlp = q.new("p").set_text("Elemento de texto").scripts_add( 'function js_function() {'' alert("Una función JS");''}')# Agregar el código que se ejecutará al cargar la página a un objeto qhtmlp = q.new("p").set_text("Elemento de texto ").scripts_add('alert("El código Js se ejecutó al cargar la página");', on_page_load=True)q.display.insert(p).render()

Ejemplo: solicitud Ajax

 from QuykHtml import qhtml# Instanciar classq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# Crear una solicitud ajax en el elemento p# Siempre especifique r en la función de devolución de llamada ya que ese es el texto de respuestap = q.new("p").ajax_build('get','file.php?args=1&args2=2","_some_call_back_func(r)')# Defina rápidamente la función si es necesario bep.scripts_add('function _some_call_back_func(r ){alert("Texto de respuesta " + r.responseText);}')# Agregue el código JS para cuando se cargue la página, llame al función ajax usando# element.ajax_get("pointer") <- el 'método ajax creado por ajax_build'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p).render( )

Ejemplo: formularios

 desde QuykHtml import qhtml# Instanciar claseq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# Crear elemento de formularioform = q.new("form").set_form_options('file.php','post' )# Cree el elemento de entrada y establezca el nombre en form_nameinput = q.new("input").set_name('form_name')# Cree el botón y use el método .set_form_button() para # hacer que envíe el formulario cuando se hace clic en el botón = q.new("button").set_text("submit").set_form_button()# Inserte los elementos del formulario en el formform.insert([input,button ])q.display.insert(formulario).render()

Ejemplo: expreso

Utilice fácilmente el lenguaje de marcado oficial (usa bootstrap)
para definir rápida y fácilmente objetos qhtml.

Reglas expresas:

- use attr-'attributename' to declare normal html element attributes  
- use 'attributename' to attempt to use ANY Qhtml setter methods on an element  
- you declare columns by element position in the list  
- each list item is essentially a row  
- requires bootstrap (instantiate with qhtml method)

crear una fila de 3 columnas

 # Crear una instancia de classq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# el método express devuelve# un diseño de objeto qhtml real = q.express([
	['div','p','div']
]).style.set('color de fondo:#45afed;')q.display.insert(layout).render()

cree una fila de 3 columnas y defina valores html

 # Crear una instancia de classq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# el método express devuelve# un diseño de objeto qhtml real = q.express([
	['div attr-class="miclase"','p attr-id="miid"','div attr-style="fondo-color:rojo"']
]).style.set('color de fondo:#45afed;')q.display.insert(layout).render()

cree una fila de 3 columnas y llame a los métodos de establecimiento de Qhtml en dicho elemento

 # Crear una instancia de classq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# un objeto Qhtml tiene un método llamado: set_text# y también un método llamado: set_img_src#, por lo que omitimos el prefijo 'set_'. Entonces, en lugar de# set_text("some text"), simplemente usamos text="some text"# para llamar a dicho métodolayout = q.express([
	['div','p text="¡Rocas QuykHtml!"','div'],
	['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('color de fondo:#45afed;')q.display.insert(layout).render()

Ejemplo expreso del mundo real

crear un formulario sencillo

 # Crear una instancia de classq = qhtml()# 'Importar' fácilmente utilidades de arranqueq.bootstrap.use(True)# Definir algunos cssq.css.add('.center','text-align:center;')# Crear nuestros elementos de formulariolayout = q.express([
	['div', 'p texto="Correo electrónico"', 'div'],
	['div', 'entrada', 'div'],
	['div', 'p texto="Contraseña"', 'div'],
	['div', 'entrada', 'div'],
	['div', 'p texto="Confirmar"', 'div'],
	['div', 'entrada', 'div'],
	['div', 'texto del botón="Completo" attr-value="enviar" attr-class="margin-top-med signup"', 'div']
]).set_class("center", True)# Crea el elemento contenedor del formulario realform = q.new('form').set_class('center')# Inserta los elementos del formulario y establece las opciones del formularioform.insert(layout). set_form_options("register.php", "post")# Representar los resultadosq.display.insert(form)

Ejemplo: SEO

 de QuykHtml importar qhtml# Crear una instancia de claseq = qhtml()# Definir algunos SEOq.seo.set_page_title('Título de la página')q.seo.set_page_author('Autor')q.seo.set_page_keywords('algunas palabras clave')q.seo .set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # actualiza cada 30 segundoslist_of_seo = q.seo.display_all_seo()

Ejemplo: varios

 de QuykHtml importar qhtml# Instanciar claseq = qhtml()# Encadenamiento de comandosq.new("p").set_text('algo de texto').set_class('text-class').set_id('text-id').on_click( "alerta('me hizo clic');").style.set("cursor:pointer;")# Ejemplos de argumentos de renderizado# archivo_salida str_path, only_html boolean, set_clip_board booleanq.display.insert(q.new("p.").set_text("Renderizar argumentos")).render(output_file="file/path/file.html")q.display.insert(q.new(" p.").set_text("Renderizar argumentos")).render(only_html=True)q.display.insert(q.new("p.").set_text("Renderizar Argumentos")).render(output_file="archivo/ruta/archivo.html",set_clip_board=True)q.display.insert(q.new("p.").set_text("Renderizar argumentos")).render( only_html=True,set_clip_board=True)q.display.insert(q.new("p.").set_text("Render Arguments")).render()# ------------- -----------------# Bootstrap - Soporte# ------------------------------q.bootstrap.use(True)div = q.new("div ").set_class("fila")div_col1 = q.new("div").set_class("col").set_text("columna1")div_col2 = q.new("div").set_class("col") .set_text("columna2")div.insert([div_col1,div_col2])# También válido sintaxisdiv = q.new("div").set_class("row").insert([ q.new("div").set_class("col").set_text("columna1"), q.new("div ").set_class("col").set_text("columna2")
])# ------------------------------# Agregar al encabezado tagq.head.append('<script type=" text/javascript" src="path/to/js_code.js"></script>')q.head.append('<link rel="stylesheet" href="path/to/css.css">') # Ayudantes de color integradosc = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # y más...para color en colores: print(color) # - > #hex_value# Recorre cada objeto creado de una instancia qhtml para elemento en q.all: print(' Tipo de elemento - > ' + elemento.tipo) elemento.set_text("Sobrescribir")	
# Duplicar objetos de elementosp_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p etiqueta número 1').style.append( 'color:red;')p2 = q.dupe(p_main).set_text('p etiqueta número 2').style.append('color:green;')# Exportación de estilos CSS agregados a 'q.css'q.css.add('p','font-size:32px;')q.css.add('div','text-align:center;')q.css.export(' ruta/a/export.css')

Ejemplo de página de destino sencilla1

 de QuykHtml importar qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('Aterrizaje de ejemplo Header').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;background-color:gray;color:white; ')head.insert(head_text)cuerpo = q.new('div').style.set('width:65%;margin:auto;margin-bottom:100px;').set_class('row')body_text = q.new('p').set_text_ipsum_large().style.font_size('24px').style.align('left').style.append('margin-top:60px;margin-bottom:60px;') .style.font_color('gris')body_img_1 = q.new('img').set_class('col').set_img_placeholder(400).style.height('400px').style.append('margin-top:20px;')body_img_2 = q.dupe(body_img_1 )body.insert([body_text,body_img_1,body_img_2])pie de página = q.new('div').style.align('center').style.set('margin:0px;position:fixed;bottom:0px;width:100%;background-color:gray;padding-top: 5px;padding-bottom:5px;')footer_text = q.new('p').style.set('font-weight:bold;margin:0px;')footer_text.set_text('Ejemplo de texto de pie de página. Todos los derechos reservados.').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([cabeza,cuerpo, pie de página]).render()

Ejemplo QuykHtml con Flask

Usando pythonanywhere.com

Sirviendo HTML usando el método .html()

 # Una aplicación Flask Hello World muy simple para comenzar... from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# use siempre " " como exterior cita de cadena y ' ' dentro de if needon_click_code = "alert('¡Hiciste clic en el botón!');"# Div que contiene un elemento p y un botón con un evento al hacer clicdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Esto funciona" ),q.new('botón').style.font_size('24px').set_text('haz clic en mí').on_click(on_click_code)
])# Div que contiene un elemento p con texto de saludo en itdiv2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([q.new(' p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('¡Hola desde QuykHtml y Flask!')
])@app.route('/')def hello_world(): # Use el método .html en un objeto qhtml para obtener su HTML y servirloreturn div.html() + div2.html()

Sirviendo HTML usando .render('out_put_file.txt') y .file_read('file.txt')

 # Una aplicación Flask Hello World muy simple para comenzar... from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# use siempre " " como exterior cita de cadena y ' ' dentro de if needon_click_code = "alert('¡Hiciste clic en el botón!');"# Div que contiene un elemento p y un botón con un evento al hacer clicdiv = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Esto funciona" ),q.new('botón').style.font_size('24px').set_text('haz clic en mí').on_click(on_click_code)
])# Div que contiene un elemento p con texto de saludo en itdiv2 = q.new('div').style.set('background-color:gray;text-align:center;').insert([q.new(' p').style.set('font-size:32px;color:white;font-weight:bold;').set_text('¡Hola desde QuykHtml y Flask!')
])# Coloque objetos en la pantalla y renderice el archivo en test.txtq.display.insert([div,div2]).render(output_file='test.txt', only_html=True)@app.route('/ ')def hello_world(): # Utilice el método file_read para obtener el HTML renderizado y servirlohtml = q.file_read('test.txt')return html