Today’s tip is about namespaces in QML and how they can be utilized to avoid name clashes.

When importing a module in QML – bb.cascades, for example – the content is imported in to the global namespace. In practice, this means that you can use a component from the module without using a qualifier. For example:

import bb.cascades 1.0
...
Label {
    text: “Hello World”
}
...

As you can see, the Label is used without specifying a qualifier.

Let’s say you have your own Label component in the org/mydomain module. If you want to use both the Cascades Label and the org/mydomain’s Label in the same QML document, you’ve got yourself a name clash. Fortunately, this is very easy to resolve by using the import statement’s as keyword:

import bb.cascades 1.0
import “org/mydomain” as MyComponents

The uppercase letter in the namespace name is mandatory.

To use the org/mydomain Label, you simply put the qualifier in front of the component name:

// This is a 'Cascades label'
Label {
    text: “Hello Cascades Label”
}

// This is a 'MyComponents label'
MyComponents.Label {
    text: “Hello MyComponents Label”
}

That’s it! You don’t have to come up with creative names to avoid name clashes – just use namespaces. Even better, you don’t have to prefix components with all those two- or three-letter acronyms, which you often see in frameworks for languages not supporting namespaces (such as objective-c).

For a complete example, visit https://github.com/mariob/cascades-namespace-example