Creare un'interfaccia utente reattiva
⟩
⟩
⟩
⟩
⟩ Create a responsive user interface

Creare un'interfaccia utente reattiva

Sviluppare una
Applicazione FactoryTalk Optix
 con layout multipli regolati per le finestre di diverse dimensioni.
  1. Creare tipi di pagina per diversi layout di applicazione. Vedere Pagina.
    SUGGERIMENTO: Iniziare con lo sviluppo di tre layout per diversi viewport, ad esempio piccolo, medio e grande. Per altre informazioni, vedere Dimensioni della pagina e punti di interruzione per la progettazione reattiva - App di Windows | Microsoft Learn.
  2. Creare una NetLogic che legge la larghezza (e l'altezza) della finestra e restituisce un valore in base ai punti di interruzione.
    Ad esempio, creare una NetLogic che legge la larghezza della finestra e restituisce il valore di enumerazione
    Piccolo
    ,
    Medio
     o
    Grande
    .
    A runtime, la NetLogic restituisce un valore quando si ridimensiona la finestra e si superano i valori del punto di interruzione.
  3. Creare un pannello dinamico con un convertitore chiave-valore che converte i valori di output della NetLogic in collegamenti dinamici che hanno come target i tipi di pagina.
    A runtime, il pannello dinamico visualizza uno specifico tipo di pagina in base alla larghezza della finestra. Quando si ridimensiona la finestra e si superano i valori dei punti di interruzione, il layout dell'applicazione cambia per adattarsi a diverse dimensioni del viewport.
  4. (Opzionale) Per eseguire un'applicazione reattiva nei browser web supportati:
    1. Aggiungere un presentation engine web. Vedere Configurare presentation engine.
    2. Allargare il progetto nella finestra del browser web. In
      Vista progetto
      , selezionare
      MainWindow (type)
      , quindi:
      • In
        Proprietà
         creare un collegamento dinamico tra
        Schermo intero
         e
        Alias
        {Sessione}
        Sessione
        Sessione UI
        Sessione Web
        .
        Per ulteriori informazioni sui collegamenti dinamici, vedere Creare collegamenti dinamici.
        L'alias
        {Session}/IsWeb
         viene risolto su
        Vero
         se il progetto viene eseguito in un browser web. Per ulteriori informazioni, vedere Oggetti profilo per diversi presentation engine.
        A runtime, il presentation engine nativo visualizza un'applicazione con finestra e il presentation engine web visualizza un tipo di pagina specifico in base alla larghezza della finestra del browser web.
      • In
        Proprietà
        , impostare
        Schermo intero
         su
        Vero
        .
        A runtime, il presentation engine nativo visualizza un'applicazione a schermo intero e il presentation engine web visualizza un tipo di pagina specifico in base alla larghezza della finestra del browser web.
    Quando si ridimensiona il browser web e si superano i valori dei punti di interruzione, il layout dell'applicazione cambia per adattarsi a diverse dimensioni del viewport.
Fornire un feedback
Hai domande o feedback su questa documentazione? invia il tuo feedback qui.
Normal