PART 0 - GETTING STARTED
Download the workshop files.
View final prototype.
Walk through of brief.
PART 1 - Sign In Flow
Interface walk through, including:
Widget Style Editor
Preview vs. Axshare
Arrange > Grids and Guides
Create Sign In flow
Bring in H1, H2, Text Fields, Button and Name fields and button
Use Format Painter on Button
Use Properties Panel to Edit and Set Up Text Fields
Add Case 1 on Sign In Button for username and password
Create Error message dynamic panel and hide it
Add Case 2 on Sign In Button to show error message
PART 2 - MASTER
Create a master for the signed in state header
Copy the pre sign in header
Paste it onto the dashboard page
Add H2s for the global navigation with interaction styles
Create links for the Settings page and Sign Out page
Add the master to the dashboard and settings pages
PART 3 - ADDRESS CHANGE FLOW
On the Settings page, add a text area for the “Address” field and name it “ReadOnlyAddressArea”
Style it by hiding the border
Make it “Read Only”
Enter Aileen’s old Address into this field
Turn this field into a dynamic panel and name it “AddressArea”
Create a second state for this dynamic panel and name it “EditableAddressArea”
Make the EditableAddressArea editable and leave Aileen’s old address in it
From the Settings page, create a Save button with a cancel text link below it to the right of the text area.
Name it “SaveAndCancelButtons” and turn it into a hidden dynamic panel called “SaveAddress”
Create a second state in the SaveAddress dynamic panel that says SAVED!
Create the following event: when ReadOnlyAddressArea is clicked, EditableAddressArea and SaveAndCancelButtons are displayed
Inside of the SaveAndCancelButton state, if the SaveButton is clicked, the SAVED! button appears momentarily and text from the EditableAddressArea is passed to the ReadOnlyAddressArea.
If the CancelButton is clicked, then no text from the EditableAddressArea is passed to the ReadOnlyAdressArea, and the ReadOnlyAddressArea is displayed.
For the final .rp file, download Part_3_End.rp.
You can also view the final prototype on AxShare.