QuykHtml
1.0.0
Une bibliothèque Python qui vous permet de générer rapidement et facilement des modèles HTML et même de créer des sites Web complets.
Si vous vous sentez généreux ou si vous souhaitez m'offrir un café ou faire un don, vous trouverez ci-dessous mon application Cash :
cash app: $elmling
Nouvelles fonctionnalités :
- Exprimer
Principales caractéristiques :
- Flacon
- Enchaîner les commandes
- Prise en charge Javascript/jQuery
- Création de tableaux
- Création Ajax
- Création de formulaire
-Boostrap
-Référencement
- Exemple de page de destination
# Importer la classe depuis la bibliothèque depuis QuykHtml import qhtml# Instancier classq = qhtml()# Insérer un élément p modifié dans notre displayq.display.insert(q.new('p').set_text('Hello World').set_id ('text-id').style.set('font-size:24px;'))# Rendre la pageq.display.render() from QuykHtml import qhtml# Instancier classq = qhtml()# Créer un divdiv = q.new("div")# Créer un paragraphep = q.new("p")# Créer un inputinput = q.new("input") # Rendre les résultats en insérant tous les objets dans displayq.display.insert([div, p, input]).render() from QuykHtml import qhtml# Instancier classq = qhtml()# Déclarer css, permet une liste de listes, la première valeur étant# classname et la chaîne de balisage/style pour la deuxième valeurq.css.add([["div", "font-size:32px;"],[".div_custom","color:gray;"]])# Vous pouvez également faire la même chose en appelant simplement la méthode add avec deux argumentsq.css.add("div","font-size:32px;")q.css.add(".div_custom","color:gray;")# Créez un div avec la classe .div_custom et définissez le texte dans le divdiv = q.new("div").set_class("div_custom").set_text("QuykHtml Rocks!")# Vous pouvez utiliser le style en ligne pour styliser l'élément et définir le texte dans le divdiv2 = q.new("div").style.set("font-size:48px;color:green;").set_text("QuykHtml Rocks!")# Afficher les résultatsq.display.insert([div, div2 ]).rendre() from QuykHtml import qhtml# Instancier classq = qhtml()p = q.new("p")# Global Element Settersp.style.set('color:red;')p.style.append('background-color:jaune; ')p.add_attribute('title="Qhytml est facile!"')p.set_text('text')p.set_text_ipsum()p.set_text_ipsum_large()p.set_text_ipsum_small()p.set_class('class1 class2')p.set_form_button()p.set_id('mon-id ')p.set_name('un-nom')p.set_value('valeur personnalisée')p.set_tool_tip('survol simple info-bulle texte')p.on_click("alert('j'ai fait un clic droit !');")p.on_click_goto('google.com')p.on_right_click("alert('j'ai fait un clic droit !');") p.on_mouse_enter("alert('Souris entrée !');")p.on_mouse_leave("alert('Mouse left!');")html = p.html()# Élément spécifique 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_ options('file.php','get')q.new("button").set_form_button()q.new("iframe").set_iframe('google.com')q.new("input"). set_auto_complete (Faux) depuis QuykHtml import qhtml# Instancier classq = qhtml()# "Importer" facilement les utilitaires d'amorçageq.bootstrap.use(True)# Créer un tableau brut de 1 ligne et 2 colonnestable = q.table(1,2)# Insérer une méthode en utilisant une base 0 index -> insert_at (ligne, colonne, qhtml_object ou liste de qhtml_objects)table.insert_at(0,0,q.new("p").set_text("Ligne 1, colonne 1"))table.insert_at(0,1,q.new("p").set_text("Ligne 1 colonne 2"))# Syntaxe également valide = q.table(1,2).insert_at(0,0,q.new("p").set_text("Ligne 1 colonne 1")).insert_at(0,1,q.new("p").set_text("Ligne 1 colonne 2"))# Exemples de manipulation Td pour i dans la plage (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))# Assurez-vous de construire la table # qui renvoie un div avec le code de la table dans ittable = table.build()# Rendre les résultatsq.display.insert(table).render() from QuykHtml import qhtml# Instancier classq = qhtml()# "Importer" facilement les utilitaires de bootstrapq.bootstrap.use(True)# Ajouter un script, peut même être lu à partir d'un fichierq.scripts.append( 'function js_function() {'' alert("A JS Function");''}')# Ajouter un script à un objet qhtmlp = q.new("p").set_text("Text element").scripts_add( 'function js_function() {'' alert("A JS Function");''}')# Ajouter le code à exécuter lors du chargement de la page à un objet qhtmlp = q.new("p") .set_text("Élément de texte").scripts_add('alert("Le code Js s'est exécuté au chargement de la page");', on_page_load=True)q.display.insert(p).render() from QuykHtml import qhtml# Instanciez classq = qhtml()# "Importez" facilement les utilitaires de bootstrapq.bootstrap.use(True)# Créez une requête ajax sur l'élément p# Spécifiez toujours r dans la fonction de rappel car c'est le texte de réponsep = q.new("p").ajax_build('get','file.php?args=1&args2=2","_some_call_back_func(r)')# Définir rapidement la fonction si besoin bep.scripts_add('function _some_call_back_func(r ){alert("Texte de réponse " + r.responseText);}')# Ajouter le code JS pour le chargement de la page, appelez la fonction ajax en utilisant# element.ajax_get("pointer") <- la 'méthode ajax construite par ajax_build'p.scripts_add(p.ajax_get("pointer"),on_page_load=True)q.display.insert(p). rendre() depuis QuykHtml import qhtml# Instancier classq = qhtml()# "Importer" facilement des utilitaires d'amorçageq.bootstrap.use(True)# Créer un élément de formulaireform = q.new("form").set_form_options('file.php','post' )# Créez l'élément d'entrée et définissez le nom sur form_nameinput = q.new("input").set_name('form_name')# Créez le bouton et utilisez la méthode .set_form_button() pour # lui faire envoyer le formulaire lorsqu'il est cliquébutton = q.new("button").set_text("submit").set_form_button()# Insérer les éléments du formulaire dans formform.insert([input,button ])q.display.insert(form).render() Utilisez facilement le langage de balisage officiel (utilise bootstrap)
pour définir rapidement et facilement des objets qhtml.
- 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)
# Instancier classq = qhtml()# "Importer" facilement les utilitaires d'amorçageq.bootstrap.use(True)# La méthode express renvoie# un objet qhtml réellayout = q.express([
['div','p','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Instancier classq = qhtml()# "Importer" facilement les utilitaires d'amorçageq.bootstrap.use(True)# La méthode express renvoie# un objet qhtml réellayout = q.express([
['div attr-class="maclasse"','p attr-id="monid"','div attr-style="background-color:red"']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Instanciez classq = qhtml()# "Importez" facilement les utilitaires d'amorçage q.bootstrap.use(True)# un objet Qhtml a une méthode appelée : set_text# et également une méthode appelée : set_img_src# nous omettons donc le préfixe 'set_'. Donc au lieu de# set_text("some text"), nous utilisons simplement text="some text"# pour appeler ladite méthodelayout = q.express([
['div','p text="QuykHtml Rocks!"','div'],
['div','img img_src="myimagesource.com" attr-class="myImgClass"','div']
]).style.set('background-color:#45afed;')q.display.insert(layout).render() # Instancier classq = qhtml()# "Importer" facilement des utilitaires d'amorçageq.bootstrap.use(True)# Définir des cssq.css.add('.center','text-align:center;')# Créer nos éléments de formulairelayout = q.express([
['div', 'p text="Email"', 'div'],
['div', 'entrée', 'div'],
['div', 'p text="Mot de passe"', 'div'],
['div', 'entrée', 'div'],
['div', 'p text="Confirmer"', 'div'],
['div', 'entrée', 'div'],
['div', 'button text="Complete" attr-value="submit" attr-class="margin-top-med signup"', 'div']
]).set_class("center", True)# Créez le conteneur de formulaire réel elementform = q.new('form').set_class('center')# Insérez les éléments du formulaire et définissez les options du formulaireform.insert(layout). set_form_options("register.php", "post")# Rendre les résultatsq.display.insert(form) depuis QuykHtml import qhtml# Instancier classq = qhtml()# Définir du référencementq.seo.set_page_title('Page Title')q.seo.set_page_author('Author')q.seo.set_page_keywords('quelques mots clés')q.seo .set_page_encoding('UTF-8')q.seo.set_page_auto_refresh(30) # actualiser tous les 30 secondeslist_of_seo = q.seo.display_all_seo() depuis QuykHtml import qhtml# Instancier classq = qhtml()# Chaînage de commandesq.new("p").set_text('some text').set_class('text-class').set_id('text-id').on_click( "alert('clicked me');").style.set("cursor:pointer;")# Exemples d'arguments de rendu# output_file str_path, only_html boolean, set_clip_board booleanq.display.insert(q.new("p.").set_text("Render Arguments").render(output_file="file/path/file.html")q.display.insert(q.new(" p.").set_text("Render Arguments").render(only_html=True)q.display.insert(q.new("p.").set_text("Render Arguments")).render(output_file="file/path/file.html",set_clip_board=True)q.display.insert(q.new("p.").set_text("Render Arguments")).render( only_html=True,set_clip_board=True)q.display.insert(q.new("p.").set_text("Render Arguments").render()# ------------- -----------------#Amorçage - Support# ------------------------------q.bootstrap.use(True)div = q.new("div") .set_class("row")div_col1 = q.new("div").set_class("col").set_text("column1")div_col2 = q.new("div").set_class("col").set_text ("colonne2")div.insert([div_col1,div_col2])# Également valide syntaxdiv = q.new("div").set_class("row").insert([ q.new("div").set_class("col").set_text("column1"), q.new("div ").set_class("col").set_text("colonne2")
])# ------------------------------# Ajouter au head tagq.head.append('<script type=" text/javascript" src="chemin/vers/js_code.js"></script>')q.head.append('<link rel="stylesheet" href="chemin/vers/css.css">') # Aides aux couleurs intégréesc = q.css.colorscolors = [c.LIGHT_GRAY, c.DARK_GRAY, c.LIGHT_GREEN, c.DARK_GREEN] # et plus... pour la couleur dans les couleurs : print(color) # -> #hex_value# Parcourez chaque objet créé d'un élément instancefor qhtml dans q. all: print('Type d'élément -> ' + element.type) element.set_text("Overwrite")
# Objets d'élément de duplicationp_main = q.new("p").style.set("font-size:32px;")p1 = q.dupe(p_main).set_text('p tag number 1').style.append( 'color:red;')p2 = q.dupe(p_main).set_text('p tag number 2').style.append('color:green;')# Exportation des styles CSS ajoutés à 'q.css'q.css.add('p','font-size:32px;')q.css.add('div','text-align:center;')q.css.export(' chemin/vers/export.css') depuis QuykHtml import qhtmlq = qhtml()q.bootstrap.use(True)head = q.new('div')head_text = q.new('p')head_text.set_text('Exemple d'atterrissage Header').style.align('center').style.font_size('64px;').style.append('padding-top:200px;padding-bottom:200px;background-color:gris;color:white; ')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('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])footer = q.new('div').style.align('center').style.set('margin:0px;position:fixed;bottom:0px;width:100%;background-color:gris;padding-top : 5px;padding-bottom:5px;')footer_text = q.new('p').style.set('font-weight:bold;margin:0px;')footer_text.set_text('Exemple de texte de pied de page. Tous droits réservés.').style.align('center').style.font_size('15px').style.font_color('white')footer.insert(footer_text)q.display.insert([head,body, pied de page]).render() # Une application Flask Hello World très simple avec laquelle commencer...from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# utilisez toujours " " comme extérieur chaîne de guillemets et ' ' à l'intérieur if needon_click_code = "alert('Vous avez cliqué sur le bouton !');"# Div contenant un élément p et un bouton avec un eventdiv au clic = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Cela fonctionne" ),q.new('button').style.font_size('24px').set_text('cliquez sur moi').on_click(on_click_code)
])# Div contenant un élément p avec un texte de salutation dans 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('Bonjour de QuykHtml et Flask !')
])@app.route('/')def hello_world(): # Utilisez la méthode .html sur un objet qhtml pour obtenir son code HTML et le renvoyer div.html() + div2.html() # Une application Flask Hello World très simple avec laquelle commencer...from QuykHtml import qhtmlfrom flask import Flaskq = qhtml()q.bootstrap.use(True)app = Flask(__name__)# utilisez toujours " " comme extérieur chaîne de guillemets et ' ' à l'intérieur if needon_click_code = "alert('Vous avez cliqué sur le bouton !');"# Div contenant un élément p et un bouton avec un eventdiv au clic = q.new('div').style.set('text-align:center;').insert([q.new("p").style.font_size('42px').set_text("Cela fonctionne" ),q.new('button').style.font_size('24px').set_text('cliquez sur moi').on_click(on_click_code)
])# Div contenant un élément p avec un texte de salutation dans 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('Bonjour de QuykHtml et Flask !')
])# Placez les objets dans l'affichage et affichez le fichier dans test.txtq.display.insert([div,div2]).render(output_file='test.txt', only_html=True)@app.route('/ ')def hello_world() : # Utilisez la méthode file_read pour obtenir le rendu HTML et le servirhtml = q.file_read('test.txt')return html 
