Loading Components: Applications
Now that we know everything about stages, levels and the load method we want to switch back to our
basic-widgets application. As you know now every component can load further components in its
always present main or root stage. So we will now explore some useful cases in which our widget
loads more components.
One usefull case for loading a component into a widgets stage is to load application components. These applications can be dragged only inside of the area of the widget. They can be used for example as toolbox-windows or permanent displaying informations.
Applications will be loaded by default into the level
foreground. So they don't collide with our
What are we learning here?
Applicationcomponents will be loaded by default into the level
- A component instance can be accessed with
First this we switch back to our first
1 2 3 4 5 6 7
Now we add two buttons into the HTML structure of the component that we have loaded into our first stage (replace the placeholder paragraph):
1 2 3 4 5 6 7 8 9
And attach some handlers:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
We load an application component with the method
load(). Please note that we are using an inner
component that is loaded in a stage of an outer widget. As we want to load the application in our
outer widget we have to use
this.env.parent.load() instead of just
this.env.parent you can access the component from which we are loaded.
For the sake of simplicity, we've wrapped
$this and use that variable
this. We also have prepared this to be determined it by the option
target. We will
use it later.
We're using a built-in application
MockApplication here that doesn't do much except display the id
of the application.
You will see new buttons:
×: Start an application without an id
✓: Start an application with an id
As you can see you can load with
× an application without an id with the load method signature
this.load(ComponentType). In this case every application (or any other component) will get a
✓ use the signature
this.load(ComponentType, Id) and load the application with an
specific id. As we already know loading components with an already existing id will front them and
not load them a second time.