Implementing UX: UX Lesson 5


II. Implementing UX: UX Lesson 5

UX Lesson 5: Can we design the view?

20160604a

  • 1 Implementing UX
  • 2 Design View: Here’s where the fun begins! Now that the metadata connections for the UX Model and UX View are in place, and you can access the starter view for the UX App, you’re ready to play with the HTML and design the view itself.
  • 3 Sync View: First, let’s start the sync process. This way, whenever you make changes to your HTML view, those same changes are pushed automatically into your TRIRIGA environment. In your command prompt, run the following sync command, where -a (dash a) synchronizes all views. When you see the message “Waiting for changes to sync”, the system is ready.
  • 4 TRIRIGA Component: Next, let’s add a TRIRIGA component. Return to the new subfolder with the starter view. And inside the subfolder, open the HTML file with your HTML editor. Add the <link> tag to import triplat-ds, the TRIRIGA component for data sources. Add the <triplat-ds> tag to declare that component. And let’s add a traditional <p> tag to write a new message.
  • 5 Refresh View: After you save the HTML file, return to your command prompt. You’ll see that your updated file was pushed into your environment. To verify the changes, return to your browser and refresh the view. Do you see your changes? If you do, that’s awesome. Let’s add some more.
  • 6 Polymer Fields: Next, let’s add some Polymer fields. Earlier, we added a few data-source fields to your model. Now we’re going to use those fields. Make sure that the sync command is still running. Add the <link> tag to import the paper-input element. And add the <paper-input> tag to declare that element, which displays the data-source field as a nice single-line text field.
  • 7 Refresh View: Save the HTML file and refresh the view. Do you see your field? If you do, that’s cool. Feel free to add a couple more <paper-input> tags on your own.
  • 8 Polymer Buttons: This time, let’s add some Polymer buttons. They won’t be hooked up to any functionality, but you’ll see what they look like. Again, make sure that the sync command is still running. Add the <link> tag to import the paper-button element. And add the <paper-button> tag to declare that element, which displays the button with a ripple effect.
  • 9 Refresh View: Save the HTML file and refresh the view. Do you see your button? If you do, feel free to add a couple more <paper-button> tags on your own. With some creativity, you can try some of the other <paper-button> attributes.
  • 10 UX App: Guess what? You’re done with the last part! It might not have much functionality. But just as planned, we built a simple application with 3 fields and 3 buttons. Congratulations! You’ve just built a UX App.
  • Quiz Question 1
  • Quiz Question 2

UX Lesson 1: 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