Login, traduzioni e intefaccia localizzata¶
In questo tutorial si vedrà come creare una pagina di login tramite la quale sarà possibile effettuare l’accesso con diversi utenti.
Successivamente, si effettuarà una traduzione dei vari testi e verrà quindi visualizzata l’interfaccia tradotta in base al profilo utente utilizzato e alle sue impostazioni di localizzazione.
Note
Il seguente progetto è stato redatto con l’IDE in lingua inglese, quindi i valori inseriti come testo saranno in inglese, per la corretta gestione delle traduzioni. Nel caso l’IDE sia configurato in italiano, siete pregati di scrivere i valori e i termini presentati in italiano..
Creazione utenti a Design-Time
Crea un nuovo progetto chiamato Project; successivamente seleziona l’utente Guest, accessibile dalla sezione Project View sotto la cartella Users, e rinominalo in Alice.
Ora, imposta le sue proprietà Password e LocaleIds tramite la Property View, rispettivamente ad alice e it-IT.
Successivamente, si procede alla creazione di due nuovi utenti, cliccando con il tasto destro la cartella Users in Project View e seguendo il percorso New >> User. Verranno creati due nuove utenti: Bob e Charlie. Impostare quindi le loro proprietà nel seguente modo:
Bob
Password con bob
LocaleIds con en-US
Charlie
Password con charlie
LocaleIds con en-US
Il Locale andrà a definire alcune informazioni geografiche dell’utente, tra cui la lingua parlata, l’unità di misura e altro ancora. Quindi, ricapitolando, l’utente Alice visualizzerà le informazioni in italiano, mentre Bob e Charlie visualizzeranno le informazioni in inglese americano.
Creazione della MainWindow
Come primo passo, vanno aggiunte quattro label a MainWindow (type) chiamate UserName, UserLocale, NameLabel e LocaleLabel.
Impostare la proprietà Text delle precedenti label nel seguente modo:
Su NameLabel, impostare Current user
Su LocaleLabel, impostare Current locale
Per UserName, effettuare un collegamento dinamico con {Session} >> Session >> User e selezionare BrowseName come attributo.
Per UserLocale, fare click sull’icona del collegamento dinamico e successivamente cliccare Advanced. Quest’azione aprirà l’Editor Avanzato; cliccare il tasto + nella barra in alto e selezionare collegamento dinamico. Questo comporterà la creazione di una card denominata collegamento dinamico; su di essa effettuare il collegamento dinamico con {Session} >> User >> User >> LocaleIds. Infine è necessario cliccare un’ultima volta il pulsante + presente sulla card collegamento dinamico e selezionare Add source index. Verrà quindi generata una nuova card; controllare che i valore siano tutti 0. Nel nostro caso è opportuno selezionare il primo di questi valori, poiché rappresenta il Locale principale dell’utente.
Sotto MainWindow (type), aggiungere un pulsante chiamato LoginButton e impostare la proprietà Text su Login. Infine, inserire una selezione a discesa e una TextBox, denominandole rispettivamente UserBox e PasswordBox.
Per impostare questi oggetti grafici nel modo corretto, seguire i seguenti passaggi:
Selezionare UserBox ed effettuare un collegamento dinamico della sua proprietà Model con Project >> Users.
Selezionare PasswordBox e impostare entrambe le sue proprietà Content type e Placeholder text su Password.
Selezionare LoginButton e associare ad esso un evento cliccando il tasto + vicino a MouseClickEvent nella Event View e selezionando Commands >> CoreCommands >> ChangeUser. Espandere quindi la proprietà Method ed eseguire un collegamento dinamico delle proprietà Username e Password rispettivamente con Project >> UI >> MainWindow >> UserBox >> SelectedValue >> User e Project >> UI >> MainWindow >> PasswordBox >> Text .
Traduzioni
Andare in Project View e selezionare la cartella Translations; al suo interno sarà presente un oggetto denominato TranslationTable: selezionandolo si caricherà nell’editor centrale la tabella di traduzione, per procedere all’inserimento, alla rimozione e alla modifica delle traduzioni.
Per prima cosa, bisogna importare i testi già precedentemente inseriti e produrre la loro traduzione. Cliccare quindi sul link in alto View Translation References.
Verrà caricata una nuova pagina nell’editor centrale chiamata Translation Key References, dove verranno visualizzate tutte le stringhe del progetto con il path a loro associato. Per lo scopo del tutorial spuntare la colonna Synchronized relativamente alle seguenti stringhe:
Current locale:
Current user:
Login
Ritornare quindi nella Translation Table cliccando sul link in alto View Translation Table. Nella tabella appariranno le stringhe precedentemente selezionate, con le colonne Key e en-US già compilate, poiché Q Studio associa una chiave alla stringa sincronizzata, che è uguale a quest’ultima.
Procedere quindi alla compilazione della colonna it-IT con la corrispondente traduzione italiana per ogni riga, come segue:
Locale corrente: per Current locale:
Utente corrente: per Current user:
Accedi per Login
Esecuzione del progetto
Per mandare il progetto in esecuzione, cliccare il tasto play; iniziando da Alice, noteremo che i nostri contenuti saranno visualizzati in italiano; invece, se si effettua il login come Bob o Charlie i contenuti saranno automaticamente tradotti in lingua inglese.
Scarica il progetto di esempio da qui.