picture — u_pbt_picture #

← Riferimento dei componenti · Sommario della guida

Visualizzazione di immagini: tutti i formati correnti, modalità di ritaglio, allineamento, conversione automatica in scala di grigi e pastiglia contatore.

▶ Vederlo dal vivo — Applicazione dimostrativa, riquadro Picture: l'anteprima, il codice che lo produce e questa pagina, affiancati.

In breve #

Avvio rapido #

// event open della finestra
uo_image.is_source  = "img\logo.png"
uo_image.is_stretch = uo_image.STRETCH_UNIFORM   // adatta senza deformare
uo_image.is_align   = uo_image.ALIGN_CENTER
uo_image.is_tooltip = "Logo della societa"

Da dove arriva l'immagine: is_source #

is_source accetta quattro forme, tutte intercambiabili:

Un prefisso anim: può essere posto davanti a un GIF per segnalare esplicitamente un'animazione (i GIF si animano comunque).

Quando lo stesso nome esiste sotto più tipi di risorsa in una DLL, precisi il tipo: img\packimages.dll:PNG/SAMPLE, SVG/SAMPLE, ICON/APP, RCDATA/BLOB. Vedere Immagini e icone per i prefissi mono: e tint:, che ricolorano un glifo in base al tema.

Un indirizzo http:// viene rifiutato: la pagina del componente è protetta, e il motore passerebbe l'immagine a https:// senza dire nulla — su un server intranet senza TLS fallirebbe allora con un messaggio ingannevole. Il componente la rifiuta quindi subito: glifo di errore e ue_error con REASON_INSECURE. Per un'immagine di un server non cifrato, la scarichi prima con n_pbt_restclient.of_download in una cartella temporanea, poi mostri quel percorso. Riassegnare lo stesso percorso rilegge il file: un'immagine che la Sua applicazione ha appena riscritto (foto, scansione, ritaglio) appare, come con il Picture nativo. Un'immagine su disco non supera 32 MB.

Come viene ritagliata: is_stretch #

is_align decide la posizione orizzontale dell'immagine quando è più piccola del controllo: ALIGN_CENTER (predefinito), ALIGN_START, ALIGN_END. L'asse verticale ha la sua proprietà, is_valign. Il posizionamento si legge sullo schermo: ALIGN_START resta sul bordo iniziale qualunque siano ii_rotation e ib_mirror. Un valore sconosciuto si rilegge center.

Costanti #

ALIGN_START e ALIGN_END sono logici: seguono il senso di scrittura (Lingua e RTL). I valori fisici left e right restano accettati come alias.

Proprietà #

Metodi #

Event #

Esempi #

Visualizzare la foto di una scheda #

// event ue_row_changed della datawindow : visualizzare la foto del cliente corrente
uo_photo.is_source  = "photos\" + ls_customer_code + ".jpg"
uo_photo.is_stretch = uo_photo.STRETCH_UNIFORMTOFILL   // riempie la cornice, l'eccedenza viene ritagliata
uo_photo.is_align   = uo_photo.ALIGN_CENTER

// event ue_error di 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"     // immagine sostitutiva
end if

Gestire ue_error è il modo corretto di trattare una foto mancante: è inutile verificare l'esistenza del file prima di assegnarlo.

Un'immagine cliccabile, in stile pulsante #

// L'immagine, e il tooltip mostrato quando il mouse vi si posa
uo_avatar.is_source    = "photos\user.png"
uo_avatar.is_tooltip   = "Il mio account"

// event ue_clicked di uo_avatar
of_open_my_account()

Contatore e scala di grigi #

// Una pastiglia di notifiche su un'icona di posta
uo_mail.is_source = "img\packimages.dll:SVG/MAIL"
uo_mail.ii_badge  = ll_unread       // 0 fa sparire la pastiglia

// Pastiglia rossa oltre una soglia, colore del tema altrimenti (-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

// Funzione non disponibile : l'immagine passa in scala di grigi, senza fornire una seconda immagine
uo_mail.ib_enabled = ib_mail_allowed

La scala di grigi è calcolata automaticamente: non deve fornire una seconda immagine « disattivata ».

Conoscere le dimensioni reali dell'immagine #

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

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

// Un'immagine piu piccola della cornice : non ingrandirla inutilmente
if al_width < uo_preview.width and al_height < uo_preview.height then
    uo_preview.is_stretch = uo_preview.STRETCH_NONE
end if

Un banner a tutta larghezza #

// L'immagine del banner, che riempie la sua striscia
uo_banner.is_source  = "img\banniere.jpg"
uo_banner.is_stretch = uo_banner.STRETCH_UNIFORMTOFILL   // riempie tutta la fascia, senza deformare
uo_banner.is_valign   = uo_banner.VALIGN_TOP               // mantiene visibile la parte alta dell'immagine

Buone pratiche #

• STRETCH_UNIFORM è la modalità sicura: non deforma mai. Riservi STRETCH_FILL agli sfondi decorativi, dove la deformazione è senza conseguenze.
• Per una foto in una cornice fissa (organigramma fotografico, miniatura), STRETCH_UNIFORMTOFILL dà un risultato regolare, senza margini antiestetici.
• Raggruppi le Sue icone in una DLL di risorse anziché consegnare centinaia di file; la forma pack.dll:TIPO/NOME elimina ogni ambiguità.
• Per un glifo monocromatico che deve seguire il tema chiaro e scuro, usi il prefisso mono: (Immagini e icone).
• Scriva uno script per ue_error su ogni immagine la cui sorgente dipende dai dati: è la Sua unica rete di sicurezza in caso di file mancante.
• Chiami of_reset() prima di riutilizzare il componente per un'immagine di natura diversa: senza questo, la modalità di ritaglio, la pastiglia o lo stato in scala di grigi precedenti restano attivi.

Ereditato dalla base comune #

Questi membri esistono su tutti i componenti visivi — non sono propri di questo. Sono descritti una sola volta, nei capitoli trasversali; questa tabella dice solo dove leggerli.

Due aiuti non sono ereditati: of_icon e of_escape_markup vivono su n_pbt_utils. Ne dichiari uno — n_pbt_utils lnv_utils, niente da creare — e li chiami su di esso.

← Riferimento dei componenti · Sommario della guida