Extending UX: UX Lesson 2


III. Extending UX: UX Lesson 2

UX Lesson 2: Can we display messages?

20160711a

  • 1 Extending UX
  • 2 Popup Messages: This time, we’ll add some popup messages. Such as a dialog box and toast message. Like before, make sure that the sync command is already running to sync your changes.
  • 3 Dialog Box: Now let’s add a Polymer dialog box with two Polymer buttons. Add the <link> tag to import paper-dialog. And add another <link> tag to import paper-button if you haven’t already.
  • 4 JavaScript Method: Next, add the <paper-dialog> tag beneath the selected <paper-button> tag that will open the dialog box. To call a JavaScript method when the button event is caught, wrap the <section> tag around that <paper-button> tag. Then, add the JavaScript method inside the existing <script> tag.
  • 5 Refresh View: Save the HTML file and refresh the view. Feel free to click the updated button. Do you see your dialog box? Pretty nice!
  • 6 Toast Message: Now let’s add a Polymer toast message. Add the <link> tag to import paper-toast. Add the onclick attribute inside the selected <paper-button> tag that will open the toast. And add the <paper-toast> tag with any changes to the text, duration, and style attributes.
  • 7 Refresh View: Save the HTML file and refresh the view. Feel free to open the dialog box and click the updated button. Do you see your toast? Pretty cool, right?
  • Quiz Question 1
  • Quiz Question 2

UX Lesson 3: Continue reading →

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s