Lesson 2: Adding Components with Web Builder Lesson 2: Adding Components with Web Builder

Lesson 2: Adding Components with Web Builder

Eric Soelzer Eric Soelzer

Now that we have an app created, let's add some content to the app. Make sure the Web Builder is currently selected. firstAppL2-1.png

Navigate to "My First Card" by clicking "Canvas Flow". firstAppL2-2.png

Here we see a fundamental concept of our Web Builder. Our Web objects are grouped by Card. Conceptually you can think of a card as a a flow of views or card states. In the picture above. We have one card called "My First Card" and one card view named "Card View". This section of the builder is referred to as the "Tree". We will cover more details of the tree as we go through this tutorial and future lessons. For now, just select "Card View" and notice how the Stage (the center section of the window changes). Your window should now look like this: firstAppL2-3.png

Your "Card View" has one text label element on it. Select the label, "My First Label" and notice the Inspector on the right change. firstAppL2-4.png

Change the name of the text to "Welcome!" and notice how the stage is updated with your changes. Because this is an expression editor, your string must have quotes around it. Now click on the styles tab. Select the "Style Variant" dropdown. firstAppL2-5.png

Select the "largeHeadline" option and notice how the label on the stage changes. We will discuss Variants and theming more in Lesson 4: Branding The App. firstAppL2-6.png

Time to add a couple more items to the card view. Select the "Card View" in the tree on the left. Notice the trash can and plus icon at the edge of the frame. Select the plus icon.

Add comment

Please sign in to leave a comment.