Tutorial 3: Style Your App

Basic to intermediate App Maker skills

About 30 minutes

Note: You can't complete this tutorial until a G Suite administrator sets up Cloud SQL for your organization.

What you’ll build

You’ll build a small part of a project tracking app. The goal is not to have a fully functional app, but also to learn about styling apps. A user of the app can:

• Create new project records and enter data in them
• Edit project records
• Navigate between records

What you’ll learn

This tutorial teaches you how to:

• Style your app in the App Maker editor without using cascading style sheets (CSS). Select an overall stylistic theme and select among built-in App Maker style variants for widgets.
• Style your app by writing CSS language in the Style Editor. Optionally, use external style sheets. CSS provides full control over the appearance of your app.

Preparation

Build a small part of a project tracking app that you will style.

Note: This tutorial abbreviates procedures you learned in the Hello App Maker and Work with Data tutorials. If you are not familiar with creating new applications and data models, refer to those tutorials.

Create your app

1. Sign in to the G Suite account provided by your employer or school.
2. Open App Maker.
3. Create a blank app:
   • If App Maker displays the welcome dialog, click Create New App.
   • Otherwise, click Menu New Blank Application.
4. Rename the app. Delete the default name, Untitled App, and enter Style Your App.

Create a data model

1. Hover over Data and click to add a model.
2. Create a Google Cloud SQL data model. Name the data model ProjectData.

Add fields to the data model

1. On the tab toolbar for the ProjectData data model, click the Fields tab.

2. Add these fields to the ProjectData data model:

   Field name	Field type
   Project	String
   Owner	String
   DueDate	Date

Rename the page for the UI and select a datasource

1. Rename NewPage to Projects.
2. In the Property Editor, set the datasource property for the Projects page to ProjectData.

Add an edit form and table

1. Click Widgets and drag a Form onto the page. Select Edit form.
2. From Widgets , drag a Table onto the page below the edit form. Horizontally align the left edges of the edit form and table.
3. Click Close to close Widgets.

Preview your app

Before you style your app, preview it. Your app now uses the default style variants for widgets in the Material theme.

1. In the top-right corner, click Preview to run your app in a new browser tab.
2. Click Allow to allow your app to use specific information.

Tip: Static style changes are visible on the canvas. Dynamic styles, for example when a user hovers over a button, are only visible in a running app. Preview to see all style changes.

Style your app without using CSS

App Maker lets you style your app without writing CSS language. You can:

• Select a theme, a built in set of styles for all widgets in your app
• Select among a set of variants (style variants for each widget type). The default theme, Material, has a large number of built-in variants. For example, for a button, you can choose among styles that have different background colors. For a label, you can choose among different font sizes. All widgets have a default variant.

Tip: You can also borrow CSS language that is already written. Take a look at the Starter App and Material Gallery templates. These templates can serve as starting points for your app.

Select a theme

App Maker has these themes:

• Material—A set of simple but elegant styles, with a choice among multiple style variants for each widget type. You can use the Material theme as is, or you can customize it further.

• Plain—A set of very plain styles, with few choices among style variants. If you are skilled with CSS and plan to use CSS to create your own styles for all widgets, then you could use the Plain theme.

  Tip: We recommend using the Material theme.

Change your app’s theme:

1. On the left sidebar, click the Projects page.
2. On the tab bar above the Property Editor, select Style Editor .
3. From the Theme drop-down, select Plain. Notice that the styles used in the form and table are simpler. For both labels and buttons, there is only one built-in variant.
4. In this tutorial, you will use the Material theme. From the Theme drop-down list, select Material.

Select style variants for specific widgets

Select style variants and observe the effects:

1. In the bottom-left corner, click Show outlines to outline widgets. When selecting variants, widgets might disappear, for example, if a white text box is on a white panel. The outlines let you find the widgets.
2. Click the Edit Projects form. Make sure the entire form is selected. The blue selection box should surround the entire form. On the Outline tab, Panel: Form1 should be selected.
3. In the top-left corner, notice the Variant drop-down list with Paper selected.
4. From the Variant drop-down list, select Primary. The entire form becomes blue. Notice that the Edit Project label automatically became white. This automatic change did not change the variant of the label. Notice that the Project, Owner, and Target Date widgets did not change automatically. (You could make those widgets white by selecting the Dark variant for them. Don’t do that now.)
5. Click the Edit Projects label.
6. From the Variant drop-down list, select DisplayOne. This increases the size of the Edit Projects label.
7. Click the Create button. This is the widget to the far right of the Edit Projects label. You can’t see the text, because it is blue on blue. With the button selected, the last item in the breadcrumbs is Button: Form1CreateButton.
8. From the Variant drop-down list, scroll through the variant choices for buttons. Notice that some variants use Material icons. Select the variant IconDark.
9. Preview your app.
10. Click Undo three times to undo your changes of variants.

Tip: To change the variant for widgets of the same type, you can select several widgets, and then select the variant.

Style your app with CSS

Tip: With the right starting point, you might need to do less styling. Take a look at the Material Starter Kit template and the Material Header and Menu template. These can serve as starting points for your app, or as references for how to use CSS to style widgets.

Here you learn how to use CSS to style your app. To style your app, you can write CSS rule-sets. Usually when developing web apps, selectors in rule-sets reference HTML elements. In App Maker, selectors reference widgets, or you use styleClasses properties to apply the rule-sets to widgets.

About CSS

CSS consists mostly of language units called rule-sets, which define where to apply styles and which styles to apply.

This is an example of a rule-set:

.app-Projects-Form1CreateButton {
  background-color: #B2FF59;
  color: #03A9F4;
}

In a rule-set:

• One or more selectors define where to apply the style. In the example above, the selector is .app-Projects-Form1CreateButton. This tells App Maker to apply the styles to the Form1CreateButton button on the Projects page.
• The declarations define the styles to apply. In the example above, declarations set the background color and the color.

Style sheets cascade in three ways:

• App Maker evaluates rule-sets from top to bottom, for both external CSS files and the contents of the Style Editor. If more than one selector applies the same declaration to a specific widget, then declarations in the rule-sets that are farther down in a CSS file override the declarations above them.

  For example, in these two rule-sets, you first specify that all buttons are light blue, but then you specify that the Form1CreateButton button is orange. So the Form1CreateButton button will be orange. The color of the text on all buttons is a dark gray. That color is not overriden for the Form1CreateButton button.

  .app-Button {
    background-color: #A1C2FA;
    color: #212121;
   }
  .app-Projects-Form1CreateButton {
    background-color: #FFB74D;
  }
  

• App Maker evaluates external CSS files in the order in which you add them in General Settings.

• App Maker evaluates the contents of the Style Editor last, after evaluating external CSS files.

Note: The styles used below are not chosen for their stylishness or subtlety. They are chosen to have clearly visible effects.

Create a custom style variant

You can create custom style variants for widget types, for example, to provide custom appearances of buttons or panels. After you define a custom variant, you select it from the Variant drop-down list.

The syntax for a class selector for a custom variant is:

.app-widget_type--widget_style

Notice the double hyphen. This is a signal to App Maker that what follows is the name of the variant.

For example:

.app-Button--Orange

To create a custom style variant for a widget type:

1. On the tab bar above the Property Editor, select Style Editor to open the Style Editor. This is where you can create a CSS style sheet that styles your app. In some cases, code completion is present while you type. You can also press Ctrl+Space to view code completion.

2. Add an Orange variant for buttons. Copy and paste this code into the Style Editor:

   .app-Button--Orange {
     background-color: #FFB74D;
   }
   

3. On the app, click the Create button.

4. From the Variant drop-down list, select the variant Orange. The Create button turns orange.

5. From the Variant drop-down list, select the variant FlatColor.

   Tip: As an alternative to creating a custom variant, you can override an existing variant. For example for buttons, add a rule-set with the selector .app-Button--Icon and specify a different background color (for example, cyan):

   .app-Button--Icon {
     background-color: #4DD0E1;
   }
   

   All buttons for which you choose the variant Icon will have a cyan background color.

Style a specific widget using a styles property

The styles property of widgets provides an easy way to apply one or more styles to a specific widget. In the value of the styles property, you reference CSS rule-sets by class name. You can define the styles in the Style Editor, in external style sheets, or both.

1. Add rule-sets for styles in the Style Editor. Give the styles class names that do not style parts of the app directly (that is, do not reference app-). For example, add these CSS rule-sets:

   .Green {
     background-color: #0F9D58;
     border-style: double;
     border-width: 4px;
     border-color: #000000;
     border-radius: 7px;
   }
   .Border {
     border: 4px solid #000000;
     box-shadow: 5px 5px 10px #BDBDBD;
     margin: 15px;
   }
   

2. Select the widget you want to style. On the edit form, click the Create button.

3. As the value of the styles property, enter the class names of the styles you want to apply (separated by spaces):

   1. In the Property Editor , expand the Display section. You should see value already selected next to the drop-down list icon .
   2. In the styles property, enter the class names Green and Border.
      Tip: Alternatively, the styles property can contain a binding expression. This permits data-driven styling.

Use external style sheets

You can use external style sheets to style widgets. As in the Style Editor, external style sheets must contain CSS rule-sets that apply styles to widgets, or that you apply to widgets using the styleClasses properties of widgets. External style sheets with rule-sets that apply styles to HTML elements will not style App Maker widgets.

An external style sheet must be located at a URL that App Maker can access in Google Cloud. You provide the URL in General Settings. For example, you can provide the URL of a CSS file for a Google font:

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

Place a style sheet at a URL in the Google Cloud

Note: These procedures are provided for completeness. For this tutorial, you don't need to use an external style sheet.

If your CSS file is not already in the Google cloud, App Maker provides an easy way to put it there:

1. In a file manager, locate the CSS file.
2. In App Maker, click Settings Resources.
3. Drag the text file to the Add area.
4. Click Copy resource URL .
5. Click Settings General settings.
6. In CSS URLs, paste the resource URL and click Add CSS.
7. For additional CSS files, repeat steps 2 through 6.

Add a reference from your app to a style sheet

To use an external style sheet located at a URL in the Google cloud:

1. Obtain the resource URL of the CSS file.
2. Click Settings General settings.
3. In CSS URLs, paste the resource URL and click Add CSS.
4. For additional CSS files, repeat steps 1 through 3.

Next steps

• Learn more about cascading style sheets.
• Take Tutorial 4 and learn about calling scripts.