Scrims

From WebOS101

Contents 1 Introduction 2 Using a Scrim 3 Overriding the Scrim class 4 Useful Links

Introduction

For the Enyo kind, please see enyo.Scrim.

One of the built-in classes for webOS is the Scrim class. This class allows a developer to place a scrim over a scene. A scrim is a layer that pops up over the scene and darkens the background. They are often used when a dialog pops up over a scene or when activity is taking place and the scene is not ready for display.

Using a Scrim

This example creates a scrim with a large Spinner in the center.

First, include a scrim in your view (right before div id="main")

<div class="palm-scrim" id="myScrim">
    <div x-mojo-element="Spinner" id="progressSpinner"></div>
</div>

In your assistant's setup, put:

this.spinnerModel = {spinning: false};
this.controller.setupWidget("progressSpinner",
    this.attributes = {
        spinnerSize: 'large'
    },
     this.spinnerModel);

When you want to start the spinner:

$('myScrim').show();
this.spinnerModel.spinning =  true;
this.controller.modelChanged(this.spinnerModel);

And, when you want to stop the spinner:

$('myScrim').hide();
this.spinnerModel.spinning =  false;
this.controller.modelChanged(this.spinnerModel);

Overriding the Scrim class

You can override the class used for the default scrim used by Mojo when using popup Menus. To do this you must add scrimClass to the menu model parameter when calling popupSubmenu.

Useful Links

• Palm Developer Forum Scrim Post