[Zooper] expertise 02 : Texte enrichi par BBCode

Par edem84 - Le 9/02/14 - Affichages : 9850
Suite à la prise en main succincte de Zooper Widget : Personnalisez avec Zooper Widget! No limite! et pour continuer dans notre expertise sur ce formidable outil de personnalisation, je vous propose, après avoir découvert comment placer vos propres fontes et icônes dynamiques : [Zooper] expertise 01 : fontes et icônes dynamiques de poursuivre notre expertise avec la maîtrise du Texte enrichi par BBCode.

Image

La dernière version de Zooper permet d’utiliser ce nouveau module appelé “Texte enrichi”. Celui-ci intègre le langage de balisage BBCode, le multi-lignes, les marges etc...
A l’heure actuelle, les fonctions suivantes sont prises en charge :
- styles gras et italique
- taille de la police en relative et absolue
- mode de conversion de texte (minuscules,capitale, première lettre en majuscule)
- conversion de chiffres en lettres
- couleurs de chaque éléments (ce qui permet d’avoir plusieurs couleurs sur une même ligne)
- etc...

Liste des BBCode actuellement pris en compte dans Zooper :

Image

Nous allons construire un widget qui comprendra 3 groupes d’informations :
1 - heure, minutes
2 - date complète (jour de la semaine, jour du mois, mois et année)
3 - conditions météo et température

Il y a plusieurs possibilités pour construire ce widget, en séparant les modules dans chaque groupe (exemple : un module heure et un module minutes), mais cet exercice permet de travailler le BBCode pour arriver à un même résultat.
J’utiliserai les couleurs suivantes pour ce travail :
- Fond du widget : #FFEFECCA
- Texte couleur 1 : #FF4C1B1B
- Texte couleur 2 : #333333


Je ne vous rappelle pas comment partir sur un widget vide que vous aurez préalablement positionné et resizé sur un écran.

1 - donnez lui une couleur de fond (ici : #FFEFECCA (nota: le FF au début, signifie que je ne lui donne pas de transparence))
2 - clic sur “Disposition” puis sur l’icône “+” en haut pour ajouter un module. On choisi “Texte enrichi”. Par défaut, il vous place au centre du widget l’heure en blanc.
3 - nous allons modifier cette heure/minutes tout d’abord sans toucher au BBCode. Descendez jusqu’au pouvoir modifier la taille : mettre 50. Puis couleur du texte : #FF4C1B1B. Laissez la fonte du texte sur normal (vous pourrez choisir la fonte que vous voulez, mais pour cet exercice nous resterons sur la fonte Normal). Faites touche “retour” plusieurs fois sur vos appareils pour quitter l’application et voir votre widget. Pas mal, mais peu mieux faire :)
4 - rentrons de nouveaux dans notre objet pour trafiquer l’heure avec le BBCode. On clique dessus, on va dans “Disposition”, on clique sur l’objet “Texte enrichi” et on descend jusqu’à “Edition manuelle du texte”. Ici on trouve en partant du haut :
* notre heure écrite en code #DHH#:#Dmm# ce qui correspond en dessous à “00:00” (heure du sytème)
* plus bas on a un groupe “Balise / BBCode”, on clique dessus pour étendre et on découvre toutes les balises ;);
5 - je vais mettre le groupe #DHH# en GRAS, donc j’entoure celui-ci par la balise ce qui donnera en haut : #DHH# et immédiatement vous pouvez voir que la balise est prise en compte dans le cadre de visualisation en dessous.
Image
6 - je vais maintenant changer la couleur du séparateur et des minutes. Rentrez dans le module, affichez l’édition manuelle du texte, déployez le BBCode et repérez la balise couleur. Le but étant d’entourer par la balise [c=#333333]le séparateur et les chiffres des minutes[/c].
La ligne finale codée est celle-ci :
Code: Select All Code
[b]#DHH#[/b][c=#333333]:#Dmm#[/c]

Vous avez maintenant l’heure formatée comme prévue.
Image

Il vous reste à faire :
- afficher la date complète en mettant en majuscule, en gras avec la couleur #FF4C1B1B le jour de la semaine et le jour du mois, puis le mois et l’année en cours en police normale, couleur #333333, fonte plus petite et italique
Image

- afficher les conditions météo en police normale (fine et #FF4C1B1B) puis la température actuelle en gras et couleur #333333
Image

Essayez et vous aurez le plaisir de pouvoir jouer avec les BBCodes pour customiser vos widgets sans root ni mods ;) :)

Pour ceux qui auraient des difficultés, je vous livre le widget réalisé : http://www.archi3d-maroc.com/SGSTEAM/tuto-expertise-zooper-02/Tuto-expertise-Zooper-02.zw
41 réponse(s) -