Axure RP - Logica delle condizioni

In questo capitolo, discuteremo la logica condizionale utilizzata in Axure RP.

Se - Allora - Altro in Axure

Proprio come qualsiasi altro strumento di programmazione, Axure supporta anche la logica condizionale per creare interazioni avanzate nei prototipi. Una volta acquisita familiarità con il modo in cui è possibile fornire interazioni, fornire una logica condizionale alle interazioni è il livello successivo.

Di seguito è riportato il flusso semplice e conciso per la logica condizionale:

  • Se si fa clic su un particolare widget / schermo
  • Quindi, esegui una particolare azione / interazione
  • Altrimenti, mantieni / modifica lo stato del widget o dello schermo

Per capirlo meglio, riprendiamo il nostro flusso dall'esempio precedente. A tal fine, è necessario che conosciamo il Condition Builder.

Il generatore di condizioni

Fare doppio clic su una qualsiasi delle interazioni, ad esempio OnClick. Sarai in grado di vedere l'Editor dei casi come mostrato nello screenshot seguente.

Fare clic sul pulsante - Aggiungi condizione accanto al nome del caso. Verrà mostrato di seguito nella finestra di dialogo.

Come mostrato nella descrizione, il generatore di condizioni creerà il flusso If-Then-Else secondo le condizioni scelte nella sezione delle condizioni.

Creiamo una condizione su questo pulsante.

Vogliamo mostrare il pulsante Nascondi immagine, una volta che il pannello dinamico è visibile. Abbiamo reso visibile il pannello dinamico facendo clic sul pulsante Mostra immagine nell'esempio precedente. Ora, rendiamo visibile un altro pulsante Nascondi immagine.

Chiudi il generatore di condizioni e torna all'area di progettazione.

Inserisci il pulsante Nascondi immagine dalle Librerie nelle librerie comuni. Per ribadire, è buona norma nominare l'elemento dell'interfaccia utente subito dopo averlo inserito nell'area di progettazione.

Fare clic con il pulsante destro del mouse sul pulsante Nascondi immagine e fare clic su Imposta nascosto. Il pulsante verrà nascosto dall'area di progettazione come mostrato nella seguente schermata.

Ora, torniamo alle interazioni per il pulsante Mostra immagine.

Innanzitutto, sotto le interazioni del pulsante Mostra immagine, fai doppio clic sul caso 1, sarai in grado di vedere l'editor del caso. Utilizzare l'azione Mostra / Nascondi per selezionare hideImageButton e impostarne la visibilità da mostrare.

Allo stesso modo, usando l'azione Mostra / Nascondi, seleziona showImageButton e imposta la sua visibilità per nascondere.

Abbiamo gestito la visibilità del pulsante Nascondi immagine in modo tale che, quando facciamo clic sul pulsante Mostra immagine, verrà visualizzato il pulsante.

Una condizione completa sarà come mostrato nella seguente schermata.

Cerchiamo di costruire la condizione.

Sotto l'area di progettazione, fai clic sul pulsante Nascondi immagine. Dalla sezione Inspector, fai clic su Aggiungi caso.

In Aggiungi caso, fai clic sul pulsante Aggiungi condizione. Come per lo sfondo fornito in precedenza, creare il set di condizioni utilizzando i valori a discesa nel generatore di condizioni.

In parole semplici, con la condizione di cui sopra, stiamo controllando se il pannello dinamico showImageDynamicPanel è visibile o meno

Ora, progettiamo l'interazione per il pulsante Nascondi immagine, configuriamola come segue:

  • Seleziona Mostra / Nascondi azione.
  • Seleziona il widget showImageDynamicPanel.
  • Imposta la visibilità su Nascondi.

Allo stesso modo, ripetere il drill per mostrare showImageButton e nascondere il hideImageButton.

Al termine, fare clic su OK per chiudere Case Editor.

Quindi, fai clic su Anteprima per vedere le modifiche apportate.

I risultati positivi saranno quelli mostrati nelle schermate seguenti.

Quando si fa clic sul pulsante Mostra immagine -

Quando si fa clic sul pulsante Nascondi immagine -