picture — u_pbt_picture #

← Référence des composants · Sommaire du guide

Affichage d'image : tous les formats courants, modes de cadrage, alignement, grisage automatique et pastille de compteur.

▶ Le voir en vrai — Application de démonstration, tuile Picture : l'aperçu, le code qui le produit et cette page, côte à côte.

En bref #

Démarrage rapide #

// event open de la fenetre
uo_image.is_source  = "img\logo.png"
uo_image.is_stretch = uo_image.STRETCH_UNIFORM   // adapte sans deformer
uo_image.is_align   = uo_image.ALIGN_CENTER
uo_image.is_tooltip = "Logo de la societe"

D'où vient l'image : is_source #

is_source accepte quatre formes, toutes interchangeables :

Un préfixe anim: peut être posé devant un GIF pour signaler explicitement une animation (les GIF s'animent de toute façon).

Quand le même nom existe sous plusieurs types de ressource dans une DLL, précisez le type : img\packimages.dll:PNG/SAMPLE, SVG/SAMPLE, ICON/APP, RCDATA/BLOB. Voir Images et icônes pour les préfixes mono: et tint:, qui recolorent un glyphe selon le thème.

Une adresse http:// est refusée : la page du composant est sécurisée, et le moteur basculerait l'image en https:// sans rien dire — sur un serveur intranet sans TLS, elle échouerait avec un message trompeur. Le composant la refuse donc d'emblée : pictogramme d'erreur et ue_error avec REASON_INSECURE. Pour une image d'un serveur non chiffré, téléchargez-la d'abord avec n_pbt_restclient.of_download dans un dossier temporaire, puis affichez ce chemin. Réaffecter le même chemin relit le fichier : une image que votre application vient de réécrire (photo, scan, recadrage) s'affiche, comme avec le Picture natif. Une image du disque ne dépasse pas 32 Mo.

Comment elle est cadrée : is_stretch #

is_align décide de la position horizontale de l'image lorsqu'elle est plus petite que le contrôle : ALIGN_CENTER (défaut), ALIGN_START, ALIGN_END. L'axe vertical a sa propre propriété, is_valign. Le placement se lit à l'écran : ALIGN_START reste sur le bord de début quels que soient ii_rotation et ib_mirror. Une valeur inconnue se relit center.

Constantes #

ALIGN_START et ALIGN_END sont logiques : ils suivent le sens d'écriture (Langue et RTL). Les valeurs physiques left et right restent acceptées comme alias.

Propriétés #

Méthodes #

Événements #

Exemples #

Afficher la photo d'une fiche #

// event ue_row_changed du datawindow : afficher la photo du client courant
uo_photo.is_source  = "photos\" + ls_customer_code + ".jpg"
uo_photo.is_stretch = uo_photo.STRETCH_UNIFORMTOFILL   // remplit le cadre, le debordement est rogne
uo_photo.is_align   = uo_photo.ALIGN_CENTER

// event ue_error de uo_photo : (string as_message, string as_reason)
if as_reason = uo_photo.REASON_NOT_FOUND then
    uo_photo.is_source = "img\photo_missing.svg"     // image de remplacement
end if

Traiter ue_error est la bonne façon de gérer une photo manquante : inutile de tester l'existence du fichier avant de l'affecter.

Une image cliquable, façon bouton #

// L'image, et l'infobulle montree quand la souris s'y pose
uo_avatar.is_source    = "photos\user.png"
uo_avatar.is_tooltip   = "Mon compte"

// event ue_clicked de uo_avatar
of_open_my_account()

Compteur et grisage #

// Une pastille de notifications sur une icone de messagerie
uo_mail.is_source = "img\packimages.dll:SVG/MAIL"
uo_mail.ii_badge  = ll_unread       // 0 fait disparaitre la pastille

// Pastille rouge au-dela d'un seuil, couleur du theme sinon (-1)
if ll_unread > 20 then
    uo_mail.il_badge_color = RGB(/*red*/ 200, /*green*/ 30, /*blue*/ 30)
else
    uo_mail.il_badge_color = -1
end if

// Fonction indisponible : l'image passe en niveaux de gris, sans autre image a fournir
uo_mail.ib_enabled = ib_mail_allowed

Le grisage est calculé automatiquement : vous n'avez pas à fournir une seconde image « désactivée ».

Connaître les dimensions réelles de l'image #

// Show the file the user has chosen
uo_preview.is_source = ls_chosen_file

// event ue_loaded de uo_preview : (long al_width, long al_height)
uo_status.of_panel(/*key*/ "main").is_text = String(al_width) + " x " + String(al_height) + " px"

// Une image plus petite que le cadre : ne pas l'agrandir inutilement
if al_width < uo_preview.width and al_height < uo_preview.height then
    uo_preview.is_stretch = uo_preview.STRETCH_NONE
end if

Une bannière pleine largeur #

// L'image de la banniere, qui remplit sa bande
uo_banner.is_source  = "img\banniere.jpg"
uo_banner.is_stretch = uo_banner.STRETCH_UNIFORMTOFILL   // remplit toute la bande, sans deformer
uo_banner.is_valign   = uo_banner.VALIGN_TOP               // garde le haut de l'image visible

Bonnes pratiques #

• STRETCH_UNIFORM est le mode sûr : il ne déforme jamais. Réservez STRETCH_FILL aux fonds décoratifs où la déformation est sans conséquence.
• Pour une photo dans un cadre fixe (trombinoscope, vignette), STRETCH_UNIFORMTOFILL donne un rendu régulier, sans marges disgracieuses.
• Regroupez vos icônes dans une DLL de ressources plutôt que de livrer des centaines de fichiers ; la forme pack.dll:TYPE/NOM lève toute ambiguïté.
• Pour un glyphe monochrome qui doit suivre le thème clair et sombre, utilisez le préfixe mono: (Images et icônes).
• Scriptez ue_error sur toute image dont la source dépend des données : c'est votre seul filet en cas de fichier manquant.
• Appelez of_reset() avant de réutiliser le composant pour une image de nature différente : sans cela, le mode de cadrage, la pastille ou l'état grisé précédents restent en place.

Hérité du socle commun #

Ces membres existent sur tous les composants visuels — ils ne sont pas propres à celui-ci. Ils sont détaillés une seule fois, dans les chapitres transverses ; cette table dit seulement où les lire.

Deux aides ne sont pas héritées : of_icon et of_escape_markup vivent sur n_pbt_utils. Déclarez-en une — n_pbt_utils lnv_utils, rien à créer — et appelez-les dessus.

← Référence des composants · Sommaire du guide