Your Airkit journey starts here

Lesson 2: Adding Components with Web Builder

Now that we have an app created, lets add some content to the app. Make sure the Web Builder is currently selected.

Image

Navigate to "My First Card" by clicking "Canvas Flow".

Image

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:

Image

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

Image

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.

Image

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.

Image

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.