Leçons de niveau 10

Initiation au Lua avec Scribunto/Librairie HTML

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
Début de la boite de navigation du chapitre
Librairie HTML
Icône de la faculté
Chapitre no 15
Leçon : Initiation au Lua avec Scribunto
Chap. préc. :L'objet URI
Chap. suiv. :Librairie Language

Exercices :

Sur les librairies Scribunto
fin de la boite de navigation du chapitre
Icon falscher Titel.svg
En raison de limitations techniques, la typographie souhaitable du titre, « Initiation au Lua avec Scribunto : Librairie HTML
Initiation au Lua avec Scribunto/Librairie HTML
 », n'a pu être restituée correctement ci-dessus.

Présentation[modifier | modifier le wikicode]

mw.html est une interface fluide pour construire du code HTML complexe pour Lua. Le code est ainsi à la fois plus concis et plus clair. Un objet mw.html peut être créé en utilisant mw.html.create.

Un exemple de base pourrait ressembler à ceci :

local div = mw.html.create( 'div' )
div
	:attr( 'id', 'testdiv' )
	:css( 'width', '100%' )
	:wikitext( 'Du texte' )
	:tag( 'hr' )
return tostring( div )
-- Sortie : <div id="testdiv" style="width:100%;">Du texte<hr /></div>


Fonctions de la librairie HTML[modifier | modifier le wikicode]

Les exemples de ce chapitre se trouveront dans le Module:Html


Nous commencerons par visualiser le contenu de la librairie HTML grâce au programme suivant :

local p = {}

function p.visualisation(frame)
	reponse = ""
	for index, objet in pairs(mw.html) do
		reponse = reponse.."</br>À la clé "..index..", on trouve un objet de type : "..type(objet)
	end
	return reponse
end

return p


{{#invoke:Html|visualisation}} nous donne :
À la clé create, on trouve un objet de type : function


Nous voyons qu’il y a une seule fonction directement accessible, mais il y a aussi plusieurs méthodes.


Étudions en détail cette fonctions :

mw.html.create[modifier | modifier le wikicode]

mw.html.create( tagName, args )

Crée un nouvel objet mw.html contenant un élément html tagName. Vous pouvez également passer une chaîne vide au paramètre tagName afin de créer un objet mw.html vide.

args peut être une table avec les clés suivantes :

  • args.selfClosing : Forcer la balise courante à se fermer, même si mw.html ne la reconnaît pas comme autofermante
  • args.parent : Parent de l'instance de mw.html actuel (destiné à un usage interne)


Méthodes de la librairie HTML[modifier | modifier le wikicode]

mw.html:node[modifier | modifier le wikicode]

html:node( builder )

Ajoute un nœud enfant (builder) à l'instance mw.html actuelle.


mw.html:wikitext[modifier | modifier le wikicode]

html:wikitext( ... )

Ajoute un nombre indéterminé de wikitexte à l’objet mw.html.


mw.html:newline[modifier | modifier le wikicode]

html:newline()

Ajoute une nouvelle ligne à l’objet mw.html.


mw.html:tag[modifier | modifier le wikicode]

html:tag( tagName, args )

Ajoute un nouveau nœud enfant tagName, et renvoie une instance mw.html représentant le nouveau nœud. Le paramètre args est identique à celui de mw.html.create


mw.html:attr[modifier | modifier le wikicode]

html:attr( name, value )
html:attr( table )

Définie un attribut HTML name avec comme valeur value sur le noeud. Alternativement, une table contenant le couple d'attribut nom->valeur peut être passée.


mw.html:getAttr[modifier | modifier le wikicode]

html:getAttr( name )

Obtiens la valeur d'un attribut HTML précédemment définie en utilisant html:attr() avec le nom (name) donné.


mw.html:addClass[modifier | modifier le wikicode]

html:addClass( class )

Ajoute un nom de classe à l'attribut de classe du noeud.


mw.html:css[modifier | modifier le wikicode]

html:css( name, value )
html:css( table )

Définie une propriété CSS name avec comme valeur value sur le noeud. Alternativement, une table contenant le couple de propriété nom->valeur peut être passée.


mw.html:cssText[modifier | modifier le wikicode]

html:cssText( css )

Ajoute du code CSS brut à l'attribut du nœud courant.


mw.html:done[modifier | modifier le wikicode]

html:done()

Renvoie le noeud parent dans lequel le nœud courant a été créé. Comme jQuery.end, il s'agit d'une fonction pratique pour permettre la construction de plusieurs nœuds enfants pour être chainés en une seule déclaration.


mw.html:allDone[modifier | modifier le wikicode]

html:allDone()

Comme html:done(), mais traverse tout le chemin vers le noeud racine de l'arbre et le retourne.


Étude du contenu d'un objet mw.html[modifier | modifier le wikicode]

Nous commencerons par visualiser le contenu d'un objet mw.html grâce au programme suivant :

local p = {}

function p.visualise(frame)
	reponse = ""
	html = mw.html.create(essai)
	for index, objet in pairs(html) do
		reponse = reponse.."</br>À la clé "..index..", on trouve un objet de type : "..type(objet)
	end
	return reponse
end

return p


{{#invoke:Html|visualise}} nous donne :
À la clé nodes, on trouve un objet de type : table
À la clé styles, on trouve un objet de type : table
À la clé attributes, on trouve un objet de type : table
À la clé selfClosing, on trouve un objet de type : boolean


Étudions ces objets :

html.nodes[modifier | modifier le wikicode]


html.styles[modifier | modifier le wikicode]


html.attributes[modifier | modifier le wikicode]


html.selfClosing[modifier | modifier le wikicode]