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.

I formati del Picture nativo che il motore non legge — TIFF (scansioni, fax), WMF, EMF e RLE — vengono convertiti al volo: un'applicazione ripresa da PowerBuilder conserva le sue immagini. Gli spazi attorno a un percorso vengono ignorati: una colonna CHAR letta da GetItemString arriva completata da spazi, e anche Windows li ignora; is_source si rilegge come l'ha scritto. Un'immagine ricolorata (mono:, tint:) servita da un altro sito in https viene disegnata solo se quel server autorizza le richieste di un'altra origine (intestazione Access-Control-Allow-Origin); altrimenti ue_error lo dice (REASON_FAILED). I file della postazione, le risorse di DLL e i data: non sono interessati.

Un'immagine in memoria — una foto memorizzata nel database e letta da SelectBlob — si mostra con of_set_picture(blob), come SetPicture del Picture nativo: nessun file temporaneo, nessun base64. Il formato viene riconosciuto dai byte; seguono ue_loaded o ue_error, come per is_source.

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 rowfocuschanged di dw_customer : visualizzare la foto del cliente corrente
// Local variables
string ls_customer_code

// Il codice del cliente della nuova riga
if currentrow < 1 then return
ls_customer_code = this.GetItemString(currentrow, "customer_code")

// La foto riempie la cornice ; gli spazi di una colonna CHAR vengono ignorati
uo_photo.is_source  = "photos\" + ls_customer_code + ".jpg"
uo_photo.is_stretch = uo_photo.STRETCH_UNIFORMTOFILL

// Una volta, nell'event open della finestra : l'immagine mostrata quando manca una foto
uo_photo.is_error_source = "img\photo_missing.svg"

// event ue_error di uo_photo : (string as_message, string as_reason)
// L'immagine sostitutiva e gia mostrata : qui, solo contare le foto mancanti
if as_reason = uo_photo.REASON_NOT_FOUND then
    il_missing_photos = il_missing_photos + 1
end if

is_error_source è il modo corretto di trattare una foto mancante: è inutile verificare l'esistenza del file prima di assegnarlo. Non riassegni mai is_source da ue_error: se mancasse a sua volta l'immagine sostitutiva, il fallimento rilancerebbe il caricamento senza fine.

Visualizzare una foto memorizzata nel database #

// Local variables
blob lb_photo

// La foto del dipendente, memorizzata in una colonna del database
SELECTBLOB photo INTO :lb_photo FROM employee WHERE emp_id = 4152 USING SQLCA;

// Mostrata direttamente dalla memoria : 0 = consegnata, -5 = non e un'immagine
if uo_photo.of_set_picture(/*image*/ lb_photo) <> 0 then
    uo_photo.is_source = ""
end if

Un'immagine cliccabile, in stile pulsante #

// L'immagine, il suo nome per la tastiera e i lettori di schermo, e il suo tooltip
uo_avatar.is_source    = "photos\user.png"
uo_avatar.is_alt_text  = "Il mio account"
uo_avatar.is_tooltip   = "Il mio account"

// Un pulsante anche per la tastiera : Tab lo raggiunge, Invio o Spazio sollevano ue_clicked
uo_avatar.ib_clickable = true

// event ue_clicked di uo_avatar
of_open_my_account()

Contatore e scala di grigi #

// Local variables
long ll_unread

// Una pastiglia di notifiche su un'icona di posta
ll_unread = 7
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 #

// Local variables
string ls_chosen_file, ls_name

// Show the file the user has chosen
if GetFileOpenName("Picture", ls_chosen_file, ls_name, "jpg", "Pictures (*.jpg;*.png),*.jpg;*.png", /*initdir*/ "", OFN_EXPLORER + OFN_NOCHANGEDIR) = 1 then
    uo_preview.is_source = ls_chosen_file
end if

// 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. La dimensione dell'immagine
// e in PIXEL, quella dello userobject in unita PowerBuilder : confrontarle nella stessa unita
if al_width < UnitsToPixels(uo_preview.width, XUnitsToPixels!) and al_height < UnitsToPixels(uo_preview.height, YUnitsToPixels!) 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).
• Dia un is_error_source a ogni immagine la cui sorgente dipende dai dati, e riservi ue_error al Suo registro: non vi riassegni mai is_source.
• Imposti id_zoom dopo is_source: una nuova immagine riparte dall'inquadratura.
• 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