Eseguire il test dell'applicazione Web Oracle JET su diverse dimensioni dello schermo

Introduzione

Il layout reattivo si adatta alle diverse dimensioni dello schermo di un'ampia gamma di dispositivi. Quando si esegue l'applicazione Web Oracle JET nel browser Web di Google Chrome, è possibile testare la reattività dell'applicazione Web con dimensioni di schermo diverse selezionate in Google Chrome Developer Tools (Chrome DevTools).

Obiettivi

In questa esercitazione viene eseguito il test del design reattivo dell'applicazione Web Oracle JET sviluppata su diverse dimensioni dello schermo.

Prerequisiti

Task 1: Esecuzione dell'applicazione Web

L'applicazione Web Oracle JET dispone di un layout e di componenti reattivi e può essere eseguita su molti browser Web diversi. Per questa esercitazione, utilizzeremo il browser Chrome e DevTools per visualizzare l'applicazione in varie dimensioni dello schermo.

  1. Nella finestra del terminale, passare alla directory JET_Web_Application ed eseguire l'applicazione.

    $ ojet serve

    Gli strumenti di Oracle JET eseguono l'applicazione Web in Google Chrome.

    L'aspetto dell'applicazione finale

    Descrizione dell'illustrazione final-app.png

Task 2: Modifica delle dimensioni dello schermo

È possibile testare la reattività dell'applicazione Web per diverse dimensioni dello schermo e dispositivi nella modalità debugger del browser Google Chrome. Quando si esegue l'applicazione su dispositivi diversi, il contenuto dell'applicazione Web viene visualizzato per la dimensione dello schermo selezionata e l'allineamento del testo si basa sulla dimensione dello schermo.

  1. In Google Chrome, premere Ctrl+Shift+I per visualizzare la finestra Chrome DevTools.

    Programma di debug Google Chrome abilitato

    Descrizione dell'illustrazione chrome-debmode.png

  2. Nella barra degli strumenti Chrome DevTools fare clic su Pulsante Attiva/disattiva barra degli strumenti dispositivo per passare alla modalità dispositivo.

    Localizzatore barra degli strumenti modalità dispositivo

    Descrizione dell'illustrazione device-mode-lens.png

  3. Dall'emulatore di schermo della modalità dispositivo, selezionare un dispositivo o una dimensione di schermo specifica per eseguire il test dell'applicazione.

    Vengono visualizzati diversi viewport.

    Descrizione dell'immagine viewport.png

  4. Selezionare Pixel 5.

    Nel contenitore Attività, il contenuto viene allineato alla fine della schermata. Nel contenitore Elementi attività vengono visualizzati gli elementi dell'elenco per le schermate di piccole e medie dimensioni.

    L'applicazione visualizzata per una piccola dimensione dello schermo

    Descrizione dell'illustrazione small-screen.png

  5. Selezionare iPad Air.

    Nel contenitore Attività, il contenuto viene allineato a sinistra. Nel contenitore Elementi attività vengono visualizzati gli elementi dell'elenco per le schermate di piccole e medie dimensioni. Per il contenitore Elementi attività, viene applicata la spaziatura.

    L'applicazione visualizzata per le dimensioni medie dello schermo

    Descrizione dell'illustrazione medium-screen.png

  6. Selezionare Nest Hub Max.

    Nel contenitore Attività, il contenuto viene allineato a sinistra. Nel contenitore Elementi attività vengono visualizzati gli elementi dell'elenco per schermi di grandi e grandi dimensioni.

    L'applicazione visualizzata per una grande dimensione dello schermo

    Descrizione dell'illustrazione large-screen.png

  7. Nella barra degli strumenti Chrome DevTools fare clic su Pulsante Attiva/disattiva barra degli strumenti dispositivo per uscire dalla modalità dispositivo.

  8. Chiudere la finestra o la scheda del browser in cui viene visualizzata l'applicazione Web in esecuzione.

  9. Nella finestra del terminale premere Ctrl+C e, se richiesto, immettere y per uscire dal processo batch di strumenti Oracle JET.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di apprendimento gratuito sul canale Oracle Learning YouTube. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare il sito Oracle Help Center.