Component Resources

Component files are loaded into device memory using a resource element.

The compiled code files for a UJML component are managed just like any other resource. See Byte Code Files, Components, Resources. This means that they are loaded with a resource element inside of a resources element, may be packaged, have a similar lifetime,and are managed in the device's memory and file system cache in exactly the same way as a media file or other resource. See See resources, resource, Package Files.

Note: Unlike other resources, you must explicitly load a component file using the resource element in order to use it.

Note: Until a component resource is loaded and available you cannot create an instance of that component and attempting to do so is a runtime error.

Declaring component resources

For non-component resources the url element is the the only required sub-element of the resource element. However, components also require a name element to specify the identifier of the component being loaded. See Identifiers, name. This name is then used in code whenever you need to create an instance of the component using the _createInstance() function. See _createInstance() function. You must also specify the resource type as 'component' using the type attribute of the resource element. See resource.

Using events to determine when a component resource is available

Because you will need to wait until a component is loaded before you can create an instance of it, you should always handle an onResourceAvailable event in the resource element for the component file so you know when the component is available. See onResourceAvailable Event.

Example

The following example shows how to use the resource element to load multiple components into device memory. As each component becomes available it increments the sLoaded state variable, which has a transition that is executed once all the components are ready. It is part of the life.ujml sample.

Copy Code

<state var="sLoad">
    <transition value="true">
        <resources>
            <resource type="component">
                <name>TimerSource</name>
                <url>shared/timer.ujbc</url>
                <event name="onResourceAvailable">
                    <script>
                        sLoaded++;
                    </script>
                </event>
            </resource>
            <resource type="component">
                <name>LifeMenu</name>
                <url>lifemenu.ujbc</url>
                <event name="onResourceAvailable">
                    <script>
                        sLoaded++;
                    </script>
                </event>
            </resource>
            <resource type="component">
                <name>LifeGrid</name>
                <url>lifegrid.ujbc</url>
                <event name="onResourceAvailable">
                    <script>
                        sLoaded++;
                    </script>
                </event>
            </resource>
            <resource type="component">
                <name>LifeGridLight</name>
                <url>lifegridlight.ujbc</url>
                <event name="onResourceAvailable">
                    <script>
                        sLoaded++;
                    </script>
                </event>
            </resource>
            <resource type="component">
                <name>LifeBlock</name>
                <url>lifeblock.ujbc</url>
                <event name="onResourceAvailable">
                    <script>
                        sLoaded++;
                    </script>
                </event>
            </resource>
        </resources>
    </transition>
</state>

<state var="sLoaded">
    <transition value="5">
        <variables>
            <var name="x" type="int"/>
            <var name="y" type="int"/>
            <var name="width" type="int"/>
            <var name="height" type="int"/>
        </variables>
        <script>
            // Create menu component.
            mMenu = _createInstance("LifeMenu");

            // Initialize menu component.
            width = (&STD_PADDING; * 2) + (&TEXT_OFFSET; * 2) +
                _text_width("&MENU_ITEM_LONGEST_TEXT;",
                    &MENU_FONT_SIZE;, &MENU_FONT_STYLE;, &_FONT_FACE_SYSTEM;);
            height = (&STD_PADDING; * 2) +
                _text_height(&MENU_TITLE_FONT_SIZE;, &MENU_TITLE_FONT_STYLE;,
                    &_FONT_FACE_SYSTEM;) +
                (_text_height(&MENU_FONT_SIZE;, &MENU_FONT_STYLE;,
                    &_FONT_FACE_SYSTEM;) * &MENU_ITEM_COUNT;);
            if (width &_GT; mScreenWidth)
            {
                x = 0;
            }
            else
            {
                x = (mScreenWidth - width) / 2;
            }
            if (height &_GT; mScreenHeight)
            {
                y = 0;
            }
            else
            {
                y = (mScreenHeight - height) / 2;
            }
            mMenu.init(x, y, width, height);

            // Create grid component.
            makeGrid();

            // Ready
            sF2 = &F2_OK;;
        </script>
    </transition>
</state>