Ce tutorial montre comment travailler avec le texte et les polices de caractères dans les applications OpenLaszlo. Les Chapitre 18, Vues de texte et Chapitre 20, Polices de caractères vous permettront d'approfondir davantage encore ces sujets.

Afficher du texte est facile avec la balise Entering text is easy with the <text> :

Exemple 9.1. La balise <text> simple

<canvas height="100" width="500" > <text> Hello, World! </text> </canvas>

Le texte à l'intérieur de la balise <text> est normalisé, ce qui signifie que les espaces avant et après sont ignorés, ainsi que les multiples espaces entre les mots, c'est à dire que si vous mettez plusieurs espaces entre des mots, à la sortie vous aurez toujours un espace simple. Si vous mettez un saut de ligne dans du texte, il sera simplement affiché comme un espace simple, et les champs de texte seront étirés pour afficher leur contenu. 

La police de caractères par défaut d'OpenLaszlo (LzTahoe) est utilisée à sa taille par défaut (10px).

La balise <text> est une vue, elle peut donc être traitée comme telle. On peut ainsi fixer tous les attributs des vues, tels que 'width', 'x', 'y' et ainsi de suite.

Exemple 9.2. <text> est une <view>

<canvas height="100" width="500"> <text x="15" y="20" width="150"> Hello, World! We would like to welcome you to the launch of the OpenLaszlo Server. </text> </canvas>

Remarquez comment le texte a été coupé en ayant précisé l'attribut width (largeur). 

Avoir des zones de texte multilignes est très simple. Tout ce que nous avons à faire est de mettre à true l'attribut multiline :

Exemple 9.3. Texte multilignes

<canvas height="100" width="500"> <text x="15" y="20" width="150" multiline="true"> Hello, World! We would like to welcome you to the launch of the OpenLaszlo Server. </text> </canvas>

Le texte suit les même règles, à savoir ici qu'il est limité à 150px de largeur (car nous avons précisé explicitement cette valeur dans la balise <text>) et qu'il s'étire verticalement autant qu'il le faut. 

Les séparateurs de lignes sont toujours ignorés, mais nous pouvons arranger cela en les ajoutant explicitement :

Exemple 9.4. Ajouter des séparateurs de lignes

<canvas height="100" width="500"> <text x="15" y="20" width="150" multiline="true"> Hello, World!<br /><br /> We would like to welcome you to the launch of the OpenLaszlo Server. </text> </canvas>

La balise The <br> est utilisée pour marquer un simple saut de ligne. Vous avez peut-être l'habitude de cela en HTML. Notez simplement que travaillant en XML, les balises vides doivent être fermées avec un caractère 'slash' final : <br/>. (La même chose qu'en XHTML.)

Si vous avez de l'expérience en HTML, vous vous demandez sûrement si vous pouvez utiliser d'autres balises HTML. La réponse est oui. Les balises suivantes sont supportées :

Exemple 9.5. Formater le texte

<canvas height="150" width="500"> <font name="default" style="bold" src="lztahoe8b.ttf"/> <text x="15" y="20" width="150" multiline="true"> <b>Hello, <font color="#ff0000">World!</font></b><br /><br /> <font size="16">We</font> would like to welcome <u>you</u> to the launch of the <a href="http://www.openlaszlo.org/" target="_blank">OpenLaszlo</a> Server. </text> </canvas>

Le mot "OpenLaszlo" est devenu un lien hypertexte grâce à la balise becomes a hyperlink because of the <a>. Il n'est pas souligné comme généralement dans les navigateurs. Nous pouvons le faire nous-mêmes en ajoutant une balise <u> à l'intérieur. Cependant, il faut inclure les balises correctement l'une dans l'autre :

<a href="..."><u>Link</u></a>

est correct, mais

<a href="..."><u>Link</a></u>

ne l'est pas car la balise <a> a été fermée avant la balise <u>.

OpenLaszlo peut travailler à la fois avec les polices embarquées, c'est à dire celles téléchargées avec votre application, et les polices du poste client qui résident nativement sur les machines où fonctionnent votre application. Par défaut, les polices du poste client sont utilisées. Les polices du poste client ont quelques limitations; par exemple, elles ne peuvent pas être tournées ou rendues transparentes (à cause d'une limitation du lecteur Flash). Voir le Chapitre 20, Polices de caractères.

OpenLaszlo supporte les polices TrueType, et la façon la plus simple de les utiliser est la suivante :

Exemple 9.6. Nommer une police de caractères

<canvas height="100" width="500"> <font name="serifFont" src="timmonsr.ttf"/> <text width="150" height="20"> <font face="serifFont" size="14">Hello, World!</font> </text> </canvas>

Nous avons appelé cette police serifFont, mais nous aurions pu lui donner n'importe quel nom, et c'est ce nom qui sera utilisé pour préciser sont utilisation plus loin dans l'application.

Les fichiers TTF des polices de caractères peuvent être placés dans le dossier courant ou un autre et référencés de façon relative (src="../fonts/..."). Sinon, ils sont placés dans le dossier d'installation de la webapp LPS sous WEB-INF/lps/fonts. timonnsr est une police fournie avec le Serveur OpenLaszlo à cet endroit. 

Un fichier TrueType est nécessaire pour chaque type de police (italique, gras, normal), car c'est ainsi que les polices sont organisées. Le code suivant ne fonctionnera donc pas :

<canvas>
   <!-- WARNING: Bad example! -->
   <font name="serifFont" src="timmonsr.ttf"/>
   <text width="150" height="20">
      <font face="serifFont" size="14">Hello, <b>World!</b></font>
   </text>
</canvas>

Pour le corriger, nous devons ajouter une ligne de code pour ajouter la police "gras" :

Exemple 9.7. Inclure la police "gras"

<canvas height="100" width="500"> <font name="serifFont"> <face src="timmonsr.ttf"/> <face src="timmonsb.ttf" style="bold"/> </font> <text width="150" height="20"> <font face="serifFont" size="14">Hello, <b>World!</b></font> </text> </canvas>

Le style standard n'a pas besoin d'être précisé explicitement; style="plain" est implicite. Cette méthode à base de balises n'est pas toujours la meilleure solution car elle oblige à écrire des balises <font>.

A la place, nous pouvons préciser à la balise <text> quelle police et taille utiliser :

Exemple 9.8. Préciser une police à la balise <text>

<canvas height="100" width="500"> <font name="serifFont"> <face src="timmonsr.ttf"/> <face src="timmonsb.ttf" style="bold"/> </font> <text width="150" height="150" font="serifFont" fontsize="15" multiline="true"> Hello, <b>World!</b><br /> Sometimes it is easier to avoid writing extra <u>font</u> tags. </text> </canvas>

En fait, nous pouvons faire cela avec n'importe quelle vue (y compris la balise <window> ), les vues filles héritant de la police :

Exemple 9.9. Vues héritant de la police

<canvas height="100" width="500"> <font name="serifFont"> <face src="timmonsr.ttf"/> <face src="timmonsb.ttf" style="bold"/> </font> <view name="grandParent" font="serifFont" fontsize="15"> <view name="firstView" bgcolor="#FFCCCC" height="20"> <text>Hello</text> </view> <view x="80" name="secondView" bgcolor="#CCCCFF" height="20"> <text>World</text> </view> </view> </canvas>

La police est précisée dans la vue 'grandParent', et les deux champs texte en héritent. 

Bien sûr, les informations de polices peuvent être écrasées plus bas dans la hiérarchie, à la fois avec la balise <font>, et en précisant la police dans des vues filles :

Exemple 9.10. Ecrasement d'informations de polices

<canvas height="100" width="500"> <font name="serifFont"> <face src="timmonsr.ttf"/> <face src="timmonsb.ttf" style="bold"/> </font> <font name="sansSerifFont" src="helmetr.ttf" /> <view name="grandParent" font="serifFont" fontsize="15"> <view name="firstView" bgcolor="#FFCCCC" height="20"> <text> <font color="#CC6600" size="12">Hello</font> </text> </view> <view x="80" name="secondView" bgcolor="#CCCCFF" height="20"> <text font="sansSerifFont">World</text> </view> </view> </canvas>

Les deux champs texte ont ici écrasé certaines des informations de polices. Celles qui ne sont pas écrasées (comme l'aspect dans l'exemple de gauche et la taille dans l'exemple de droite) sont héritées.

La balise <text> propose deux méthodes pour récupérer et définir son contenu :

La méthode text retourne le contenu du champ texte et la méthode setText() prend en argument la chaîne de texte à placer dans le champ texte :

Exemple 9.11. Récupérer et définir le texte

<canvas height="135" width="700" debug="true"> <debug x="200"/> <button x="15" y="15" onclick="Debug.write(canvas.theField.text);"> Get Text </button> <button x="100" y="15" onclick="canvas.theField.setText('Hello, Laszlo!');"> Set Text </button> <button x="180" y="115" onclick="addText();"> Add Text </button> <script> function addText() { var origText = canvas.theField.text; var newText = origText + " And on."; canvas.theField.setText(newText); } </script> <text x="45" y="60" width="150" height="75" multiline="true" name="theField">Some sample text.</text> </canvas>

En utilisant ces deux méthodes, il est possible de concaténer du texte et de travailler avec en tant que chaîne de caractères. 

Une chose importante à retenir quand on travaille avec du texte est que tout ce qui est placé entre les balises <text> est renvoyé par text.

Exemple 9.12. Texte renvoyé

<canvas height="135" width="700" debug="true"> <debug x="200"/> <font name="sansSerifFont" src="helmetr.ttf" /> <script> function writeOutBit() { var myText = canvas.theField.text; Debug.write(myText); } </script> <button x="15" y="15" onclick="writeOutBit();"> Write part of line </button> <text x="45" y="60" width="150" height="75" multiline="true" name="theField"> <font face="sansSerifFont" size="12">Some lovely sample text. </font> </text> </canvas>

Ce peut être à la fois pratique et pénible. Si vous vouliez parcourir le texte retourné par la méthode text, vous devez tenir compte des balises. Pour les éviter, définissez la police dans la balise <text>.

La façon la plus simple de saisir du texte est d'utiliser la balise <inputtext> :

Exemple 9.13. Utilisation de <inputtext>

<canvas height="135" width="700" debug="true"> <debug x="200"/> <inputtext name="myText" x="10" y="15">Enter text here</inputtext> <button x="45" y="45" onclick="Debug.write(canvas.myText.text);"> Write out text </button> </canvas>

Le champ <inputtext> ne précise pas si le texte peut être sélectionné et édité autrement qu'avec un curseur d'insersion quand l'utilisateur passe au dessus. La balise <inputtext> accepte tous les attributs de la balise <text>, ainsi que les polices :

Exemple 9.14. <inputtext> accepte les attributs de <text>

<canvas height="100" width="500"> <font name="Helmet" src="helmetr.ttf" /> <inputtext name="myText" x="10" y="15" font="Helmet" fontsize="12" width="200" height="50" multiline="true"> Enter very large quantities of text here. </inputtext> </canvas>

Les méthodes getText et setText fonctionnent également avec les champs <inputtext>.

Si vous avez besoin de champs de saisie qui doivent être identifiés, OpenLaszlo fournit la balise <edittext> :

Exemple 9.15. Utilisation de <edittext>

<canvas height="160" width="500"> <edittext name="myText" x="10" y="15">Enter text here</edittext> <edittext name="myBigText" x="10" y="45" width="250" height="100" multiline="true"> Enter a lot more text here </edittext> </canvas>

La balise <edittext> peut être multilignes et sa taille peut être modifiée.