QuykHtml

QuykHtml

Uma biblioteca python que permite gerar modelos HTML de forma rápida e fácil e até mesmo criar sites completos.

Se você está se sentindo generoso ou gostaria de me comprar um café ou doar, abaixo está meu aplicativo de dinheiro:
cash app: $elmling

pip instalar QuykHtml

Novos recursos:
- Expresso

Principais recursos:
- Frasco
- Encadeamento de comandos
- Suporte Javascript/jQuery
- Criação de Tabela
- Criação Ajax
- Criação de formulário
- Boostrap
- SEO
- Exemplo de página de destino

Exemplo: Olá Mundo em 4 linhas

 # Importe a classe da biblioteca do QuykHtml import qhtml# Instancie classq = qhtml()# Insira um elemento p modificado em nosso display principalq.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# Renderize a páginaq.display.render()

Exemplo: Declaração Básica

 from QuykHtml import qhtml# Instancie classq = qhtml()# Crie um divdiv = q.new("div")# Crie um parágrafop = q.new("p")# Crie um inputinput = q.new("input") # Renderize os resultados inserindo todos os objetos em displayq.display.insert([div, p, input]).render()

Exemplo: estilo de elemento

 from QuykHtml import qhtml# Instantiate classq = qhtml()# Declare css, permite uma lista de listas, com o primeiro valor sendo# classname e a string de marcação/estilo para o segundo valorq.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# Você também pode fazer o mesmo chamando o método add com dois argumentosq.css.add("div","font-size:32px;")q.css.add(".div_custom","color:gray;")# Crie uma div com a classe .div_custom e defina o texto no divdiv = q.new("div").set_class("div_custom").set_text("QuykHtml Rocks!")# Você pode usar o estilo embutido para estilizar o elemento e definir o texto no divdiv2 = q.new("div").style.set("font-size:48px;color:green;").set_text("QuykHtml Rocks!")# Renderize os resultadosq.display.insert([div , div2]).render()

Exemplos: configuradores de elementos

 de QuykHtml import qhtml# Instanciar classq = qhtml()p = q.new("p")# Elemento Global Settersp.style.set('color:red;')p.style.append('background-color:yellow; ')p.add_attribute('title="Qhytml é fácil! ')p.set_name('algum-nome')p.set_value('valor personalizado')p.set_tool_tip('texto flutuante simples dica de ferramenta')p.on_click("alert('foi clicado!');")p.on_click_goto('google.com')p.on_right_click("alert('foi clicado com o botão direito!');")p .on_mouse_enter("alert('Mouse entrou!');")p.on_mouse_leave("alert('Mouse left!');")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("formulário").set_form_ options('file.php','get')q.new("botão").set_form_button()q.new("iframe").set_iframe('google.com')q.new("entrada"). set_auto_complete(Falso)

Exemplo: Tabelas

 from QuykHtml import qhtml# Instanciar classq = qhtml()# 'Importar' facilmente utilitários de bootstrapq.bootstrap.use(True)# Criar tabela bruta de 1 linha e 2 colunastable = q.table(1,2)# Inserir método usando 0 baseado índice -> insert_at(linha,coluna,qhtml_object ou lista de qhtml_objects)table.insert_at(0,0,q.new("p").set_text("Linha 1 coluna 1"))table.insert_at(0,1,q.new("p").set_text("Linha 1 coluna 2"))# Também é válida tabela de sintaxe = q.table(1,2).insert_at(0,0,q.new("p").set_text("Linha 1 coluna 1")).insert_at(0,1,q.new("p").set_text("Linha 1 coluna 2"))# Exemplos de manipulação de Td para i no intervalo(2):
	 table.style_td_at(0,i,'text-align:center') table.set_td_class_at(0,i,'some-class') table.set_td_id_at(0,i,'some-id' + str(i))# Certifique-se de construir a tabela # que retorna uma div com o código da tabela em ittable = table.build()# Renderize os resultadosq.display.insert(table).render()

Exemplo: código JavaScript

 from QuykHtml import qhtml# Instantiate classq = qhtml()# 'Importa' facilmente utilitários de bootstrapq.bootstrap.use(True)# Anexe um script, pode até ser lido de um arquivoq.scripts.append( 'function js_function() {'' alert("Uma função JS");''}')# Anexar um script a um objeto qhtmlp = q.new("p").set_text("Texto element").scripts_add( 'function js_function() {'' alert("A JS Function");''}')# Anexar código a ser executado no carregamento da página para um objeto qhtmlp = q.new("p") .set_text("Elemento de texto").scripts_add('alert("Código Js executado no carregamento da página");', on_page_load=True)q.display.insert(p).render()

Exemplo: solicitação Ajax

 from QuykHtml import qhtml# Instancie classq = qhtml()# Facilmente 'importe' utilitários de bootstrapq.bootstrap.use(True)# Crie uma solicitação ajax no elemento p# Sempre especifique r na função de retorno de chamada, pois essa é a resposta textp = q .new("p").ajax_build('get','file.php?args=1&args2=2","_some_call_back_func(r)')# Defina rapidamente a função se necessário bep.scripts_add('function _some_call_back_func(r){alert("Response text " + r.responseText);}')# Anexe o código JS para quando a página carregar, chame a função ajax usando o elemento #. ajax_get("ponteiro") <- o método 'ajax construído por ajax_build'p.scripts_add(p.ajax_get("ponteiro"),on_page_load=True)q.display.insert(p).render()

Exemplo: Formulários

 from QuykHtml import qhtml# Instanciar classq = qhtml()# 'Importar' facilmente utilitários de bootstrapq.bootstrap.use(True)# Criar elemento de formulárioform = q.new("form").set_form_options('file.php','post' )# Crie o elemento de entrada e defina o nome como form_nameinput = q.new("input").set_name('form_name')# Crie o botão e use o método .set_form_button() para # fazer com que ele envie o formulário quando ele for clicadobutton = q.new("button").set_text("submit").set_form_button()# Insira os elementos do formulário no formform.insert([input,button ])q.display.insert(form).render()

Exemplo: Expresso

Use facilmente a linguagem de marcação oficial (usa bootstrap)
para definir objetos qhtml de forma rápida e fácil.

Regras expressas:

- 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)

crie uma linha de 3 colunas

 # Instancia classq = qhtml()# 'Importa' facilmente utilitários de bootstrapq.bootstrap.use(True)# método express retorna# um qhtml objectlayout real = q.express([
	['div','p','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render()

crie uma linha de 3 colunas e defina valores html

 # Instancia classq = qhtml()# 'Importa' facilmente utilitários de bootstrapq.bootstrap.use(True)# método express retorna# um qhtml objectlayout real = q.express([
	['div attr-class="minhaclasse"','p attr-id="meuid"','div attr-style="cor de fundo:vermelho"']
]).style.set('background-color:#45afed;')q.display.insert(layout).render()

crie uma linha de 3 colunas e chame métodos setter Qhtml no referido elemento

 # Instancie classq = qhtml()# 'Importe' facilmente utilitários de bootstrapq.bootstrap.use(True)# um objeto Qhtml tem um método chamado: set_text# e também um método chamado: set_img_src# então omitimos o prefixo 'set_'. Então, em vez de# set_text("some text"), simplesmente usamos text="some text"# para chamar o referido métodolayout = q.express([
	['div','p text="QuykHtml é demais!"','div'],
	['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render()

Exemplo expresso do mundo real

crie um formulário simples

 # Instancie classq = qhtml()# 'Importe' facilmente utilitários de bootstrapq.bootstrap.use(True)# Defina alguns cssq.css.add('.center','text-align:center;')# Crie nossos elementos de formuláriolayout = q.express([
	['div', 'p text="E-mail"', 'div'],
	['div', 'entrada', 'div'],
	['div', 'p text="Senha"', 'div'],
	['div', 'entrada', 'div'],
	['div', 'p text="Confirmar"', 'div'],
	['div', 'entrada', 'div'],
	['div', 'button text="Concluir" attr-value="submit" attr-class="margin-top-med signup"', 'div']
]).set_class("center", True)# Crie o contêiner de formulário real elementform = q.new('form').set_class('center')# Insira os elementos do formulário e defina as opções do formulárioform.insert(layout). set_form_options("register.php", "post")# Renderiza os resultadosq.display.insert(form)

Exemplo: SEO

 from QuykHtml import qhtml# Instanciar classq = qhtml()# Definir alguns SEOq.seo.set_page_title('Título da página')q.seo.set_page_author('Autor')q.seo.set_page_keywords('algumas palavras-chave')q.seo .set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # atualiza a cada 30 segundoslist_of_seo = q.seo.display_all_seo()

Exemplo: Diversos

 de QuykHtml import qhtml# Instantiate classq = qhtml()# Encadeamento de comandosq.new("p").set_text('some text').set_class('text-class').set_id('text-id').on_click( "alert('clicked me');").style.set("cursor:pointer;")# Exemplos de argumentos de renderização# output_file 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="file/path/file.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("Renderizar argumentos")).render()# ------------- -----------------# Bootstrap - Suporte # ------------------------------q.bootstrap.use(True)div = q.new("div ").set_class("linha")div_col1 = q.new("div").set_class("col").set_text("coluna1")div_col2 = q.new("div").set_class("col") .set_text("column2")div.insert([div_col1,div_col2])# Sintaxediv também válida = q.new("div").set_class("linha").insert([ q.new("div").set_class("col").set_text("coluna1"), q.new("div" ).set_class("col").set_text("coluna2")
])# ------------------------------# Anexar ao cabeçalho 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">') # Ajudantes de cores integradosc = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY,c.LIGHT_GREEN,c.DARK_GREEN] # e mais..para cores em cores: print(color) # - > #hex_value# Faça um loop através de cada objeto criado de uma instância qhtml para o elemento em q. todos: print('Tipo de elemento - > ' + element.type) element.set_text("Substituir")	
# Duplicando objetos de elementop_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p tag número 1').style.append( 'color:red;')p2 = q.dupe(p_main).set_text('p tag number 2').style.append('color:green;')# Exportando estilos css adicionados a 'q.css'q.css.add('p','tamanho da fonte:32px;')q.css.add('div','text-align:center;')q.css.export(' caminho/para/exportar.css')

Exemplo de página de destino simples1

 de QuykHtml importar qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('Exemplo de destino Cabeçalho').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;background-color:cinza;cor:branco; ')head.insert(head_text)body = 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('cinza')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])rodapé = 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('Exemplo de texto de rodapé. Todos os direitos reservados.').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([head,body, rodapé]).render()

Exemplo QuykHtml com Flask

Usando pythonanywhere.com

Servindo HTML usando o método .html()

 # Um aplicativo Flask Hello World muito simples para você começar...from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# sempre use " " como o externo string quote e ' ' dentro de if needon_click_code = "alert('Você clicou no botão!');"# Div contendo um elemento p e um botão com um eventdiv ao clicar = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Isso funciona" ),q.new('botão').style.font_size('24px').set_text('clique em mim').on_click(on_click_code)
])# Div contendo um elemento p com texto de saudação em 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('Olá do QuykHtml e do Flask!')
])@app.route('/')def hello_world(): # Use o método .html em um objeto qhtml para obter seu HTML e servi-loreturn div.html() + div2.html()

Servindo HTML usando .render('out_put_file.txt') e .file_read('file.txt')

 # Um aplicativo Flask Hello World muito simples para você começar...from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# sempre use " " como o externo string quote e ' ' dentro de if needon_click_code = "alert('Você clicou no botão!');"# Div contendo um elemento p e um botão com um eventdiv ao clicar = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Isso funciona" ),q.new('botão').style.font_size('24px').set_text('clique em mim').on_click(on_click_code)
])# Div contendo um elemento p com texto de saudação em 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('Olá do QuykHtml e do Flask!')
])# Coloque objetos no display e renderize o arquivo para test.txtq.display.insert([div,div2]).render(output_file='test.txt', only_html=True)@app.route('/ ')def hello_world(): # Use o método file_read para obter o HTML renderizado e servi-lohtml = q.file_read('test.txt')return html