Primitives

What you will learn#

In this tutorial you will learn what are Dana’s primitives and how to use them.

At the end you’ll be able to display the sample below :

Introduce primitives#

As you can see, the sample contains :

• an icon Dana Logo
• a text It's Dana!
• a grey background

Build your own loader#

What is this sample composed of ?#

To build this sample, Dana provides many primitives (RectanglePrimitive, TextPrimitive, ImagePrimitive, ContainImagePrimitive, CoverImagePrimitive, SpritePrimitive, etc…). For our sample, 3 primitives are needed :

• For the background, use RectanglePrimitive,
• Obviously for text, use the TextPrimitive,
• For icon, it will be ImagePrimitive

Build the sample with primitives#

In this part you will modify the view LoaderView.js.

Illustrating with picture#

First, open LoaderView.js, then you can see that an image is already added in children.

As previously explain, the ImagePrimitive is used for the image.

• ImagePrimitive has been imported,
• an ImagePrimitive is intanciated in children called image,
• the property url of ImagePrimitive is used to define the image’s url

import $View from "@View";
import $Theme from "@Theme";
import $ImagePrimitive from "@ImagePrimitive";

export default $View.declare("LoaderView", {
    children: {
        image: {
            class: $ImagePrimitive,
            url: ({theme}) => theme.getImageUrl($Theme.WIZTIVI_LOGO_URL)
        }
    },

    style: {
        width: $Theme.FULL_SCREEN_WIDTH,
        height: $Theme.FULL_SCREEN_HEIGHT,
        image: {
            width: 323,
            height: 140,
            x: 100,
            y: 130
        }
    }
});

Coloring with background#

Let’s begin with the background by using RectanglePrimitive.

• Import the class RectanglePrimitive. At the top of the file, add

import $RectanglePrimitive from "@RectanglePrimitive";

• Instanciate a RectanglePrimitive in children by adding an object as follow:

background: {
    class: $RectanglePrimitive,
}

To play with style, you should end up with something looking like this :

import $RectanglePrimitive from "@RectanglePrimitive";

export default $View.declare("LoaderView", {
    children: /** @lends LoaderView.prototype */ {
        background: {
            class: $RectanglePrimitive
        }
    },
    style: {
        background: {
            width: 500,
            height: 200,
            x: 100,
            y: 100,
            fillColor: "#AAAAAA",
            borderRadius: 20
        }
    }
});

Refresh your page, and you should see a grey rectangle appearing on the page.

Adding text#

Let’s repeat the operation for TextPrimitive.

• Import the class TextPrimitive,
• Instanciate a TextPrimitive by adding a new object in the property children of the view,
• You can use the property text of TextPrimitive to add the value you want

You’ll end up with something like this:

import $TextPrimitive from "@TextPrimitive";

export default $View.declare("LoaderView", {
    children: /** @lends LoaderView.prototype */ {
        title: {
            class: $TextPrimitive,
            text: "It's DANA!"
        }
    },
    style: {
        title: {
            width: 200,
            height: 200,
            x: 400,
            y: 175,
            align: "center",
            size: 40
        }
    }
});

Summary#

Here the diagram of the LoaderView implementation:

Using primitives in a View is a best practice, important to develop complexe UI.