The things.ujml sample application loads a list of things from a data-provider component and displays them one by one.
This sample application loads a list of things from a locale-specific data provider component and displays them in order as the user presses the 'F2' key. See Samples, Components, Interfaces. The data values are provided as a list of reference types and are cast to different interface types. If a cast fails, the result is null and that information may be used to determine what to do next.
This sample includes the ithings.ujmi and icollections.ujmi interface files.
Description<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 2.1//EN" "http://www.uievolution.com/dtd/ujml-2.1.dtd"[
<!ENTITY COLOR_APP_BG "&_COLOR_NAVY;">
<!ENTITY COLOR_HEADER_TEXT "&_COLOR_WHITE;">
<!ENTITY COLOR_HEADER_TEXT_SHADOW "&_COLOR_BLACK;">
<!ENTITY COLOR_INFO_BG "&_COLOR_TEAL;">
<!ENTITY COLOR_INFO_FG "&_COLOR_SILVER;">
<!ENTITY COLOR_INFO_TEXT "&_COLOR_YELLOW;">
<!ENTITY COLOR_INFO_TEXT_SHADOW "&_COLOR_BLACK;">
<!ENTITY COLOR_SPLASH_BG "&_COLOR_RED;">
<!ENTITY COLOR_SPLASH_FG "&_COLOR_SILVER;">
<!ENTITY COLOR_SPLASH_TEXT "&_COLOR_WHITE;">
<!ENTITY FONT_STYLE_SPLASH_TEXT "&_FONT_STYLE_ITALIC;">
<!ENTITY FONT_FACE_SPLASH_TEXT "&_FONT_FACE_SYSTEM;">
<!ENTITY FONT_SIZE_SPLASH_TEXT "&_FONT_SIZE_MEDIUM;">
<!ENTITY FONT_SIZE_HEADER_TEXT "&_FONT_SIZE_LARGE;">
<!ENTITY FONT_STYLE_HEADER_TEXT "&_FONT_STYLE_ITALIC; + &_FONT_STYLE_BOLD;">
<!ENTITY FONT_FACE_HEADER_TEXT "&_FONT_FACE_SYSTEM;">
<!ENTITY FONT_SIZE_INFO_TEXT "&_FONT_SIZE_SMALL;">
<!ENTITY FONT_STYLE_INFO_TEXT "&_FONT_STYLE_PLAIN;">
<!ENTITY FONT_STYLE_INFO_CAPTION "&_FONT_STYLE_BOLD;">
<!ENTITY FONT_FACE_INFO_TEXT "&_FONT_FACE_SYSTEM;">
<!ENTITY IMAGE_URL_DIR "img/">
<!ENTITY IMAGE_WIDTH "100">
<!ENTITY IMAGE_HEIGHT "100">
<!ENTITY STD_PADDING "2">
<!ENTITY TEXT_OFFSET "3">
<!ENTITY LOADED "6">
<!ENTITY F2_NOTHING "0">
<!ENTITY F2_LOADING "1">
<!ENTITY F2_OK "2">
<!ENTITY F2_NEXT "3">
]>
<!--
Copyright (c) 2000-2007 UIEvolution, Inc. U.S.A.
http://www.uievolution.com
All rights reserved.
Provided under the Software License Agreement for Non-commercial Use of
UIEvolution Platform Software - modification and incorporation into
applications allowed, subject to the terms thereof.
-->
<!--
things.ujml
Main application file for the 'Things' sample application.
-->
<ujml>
<interfaces>
<include file="ithings.ujmi"/>
<include interface="IEnumerable" file="../shared/icollections.ujmi"/>
</interfaces>
<application>
<interfaces>
<interface name="IThing" access="import"/>
<interface name="IAnimal" access="import"/>
<interface name="IVegetable" access="import"/>
<interface name="IMineral" access="import"/>
<interface name="IThingData" access="import"/>
<interface name="IEnumerable" access="import"/>
</interfaces>
<state-variables>
<state-var name="sLoad" type="boolean"/>
<state-var name="sLoaded" type="int"/>
<state-var name="sF2" type="int"/>
</state-variables>
<variables>
<var name="mScreenWidth" type="int"/>
<var name="mScreenHeight" type="int"/>
<var name="mHeadingWidth" type="int"/>
<var name="mHeadingHeight" type="int"/>
<var name="mNameWidth" type="int"/>
<var name="mCaptionWidth" type="int"/>
<var name="mImageTop" type="int"/>
<var name="mInfoTextHeight" type="int"/>
<var name="mInfoBoxHeight" type="int"/>
<var name="mLocale" type="string"/>
<var name="mLanguage" type="string"/>
<var name="mThingData" type="IThingData"/>
<var name="mThingEnumerator" type="IEnumerable"/>
<var name="mThingHeading" type="string"/>
<var name="mName" type="string"/>
<var name="mDescription" type="string"/>
<var name="mImageName" type="string"/>
<var name="mThingStringCaption" type="string"/>
<var name="mThingStringValue" type="string"/>
<var name="mThingBooleanValue" type="string"/>
</variables>
<functions>
<!--
Gets the values for the next thing in the enumeration.
-->
<function name="getNextThing" type="void">
<variables>
<var name="ref" type="reference"/>
<var name="thing" type="IThing"/>
<var name="animal" type="IAnimal"/>
<var name="vegetable" type="IVegetable"/>
<var name="mineral" type="IMineral"/>
</variables>
<script>
// Set default values for display items.
mThingHeading = mThingData.getUnknownHeading();
mName = mThingData.getNothingName();
mDescription = mThingData.getNothingDescription();
mImageName = mThingData.getNothingImageName();
mThingStringCaption = "";
mThingStringValue = "";
mThingBooleanValue = "";
// Get thing reference
ref = mThingEnumerator.getNextItem();
// Did we get anything?
if (!_is_null(ref))
{
// Is it an IThing?
if (_instanceOf(ref, "IThing"))
{
thing = _castInterface(ref, "IThing");
// Get thing values for display items.
mName = thing.getName();
mDescription = thing.getDescription();
mImageName = thing.getImageName();
// Is it an IAnimal?
if (_instanceOf(ref, "IAnimal"))
{
animal = _castInterface(ref, "IAnimal");
mThingHeading = mThingData.getAnimalHeading();
mThingStringCaption =
mThingData.getAnimalStringCaption();
mThingStringValue = animal.getSound();
if (animal.getIsDomesticated())
{
mThingBooleanValue =
mThingData.getAnimalBooleanTrue();
}
else
{
mThingBooleanValue =
mThingData.getAnimalBooleanFalse();
}
}
else
{
// Is it an IVegetable?
if (_instanceOf(ref, "IVegetable"))
{
vegetable = _castInterface(ref, "IVegetable");
mThingHeading = mThingData.getVegetableHeading();
mThingStringCaption =
mThingData.getVegetableStringCaption();
mThingStringValue = vegetable.getFoundIn();
if (vegetable.getIsEdible())
{
mThingBooleanValue =
mThingData.getVegetableBooleanTrue();
}
else
{
mThingBooleanValue =
mThingData.getVegetableBooleanFalse();
}
}
else
{
// Is it an IMineral?
if (_instanceOf(ref, "IMineral"))
{
mineral = _castInterface(ref, "IMineral");
mThingHeading = mThingData.getMineralHeading();
mThingStringCaption =
mThingData.getMineralStringCaption();
mThingStringValue = mineral.getIsMostly();
if (mineral.getIsManMade())
{
mThingBooleanValue =
mThingData.getMineralBooleanTrue();
}
else
{
mThingBooleanValue =
mThingData.getMineralBooleanFalse();
}
}
}
}
}
}
// Do some pre-calculations
mHeadingWidth = _text_width(mThingHeading,
&FONT_SIZE_HEADER_TEXT;, &FONT_STYLE_HEADER_TEXT;,
&FONT_FACE_HEADER_TEXT;);
if ((_strlen(mName) &_GT; 0) &_AND; (_strlen(mThingBooleanValue) &_GT; 0))
{
mName = _strcat(mName, mThingData.getCaptionSeparator());
}
mNameWidth = _text_width(mName,
&FONT_SIZE_INFO_TEXT;, &FONT_STYLE_INFO_CAPTION;,
&FONT_FACE_INFO_TEXT;);
if ((_strlen(mThingStringCaption) &_GT; 0) &_AND; (_strlen(mThingStringValue) &_GT; 0))
{
mThingStringCaption = _strcat(mThingStringCaption,
mThingData.getCaptionSeparator());
}
mCaptionWidth = _text_width(mThingStringCaption,
&FONT_SIZE_INFO_TEXT;, &FONT_STYLE_INFO_CAPTION;,
&FONT_FACE_INFO_TEXT;);
// Go back to beginning?
if (mThingEnumerator.atEnd())
{
mThingEnumerator.reset();
}
</script>
</function>
</functions>
<script>
// Get device context.
mScreenWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScreenHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
mHeadingHeight = _text_height(&FONT_SIZE_HEADER_TEXT;,
&FONT_STYLE_HEADER_TEXT;, &FONT_FACE_HEADER_TEXT;);
mInfoTextHeight = _text_height(&FONT_SIZE_INFO_TEXT;,
&FONT_STYLE_INFO_TEXT;, &FONT_FACE_INFO_TEXT;);
mInfoBoxHeight = (mInfoTextHeight * 5) + (&STD_PADDING; * 3) +
(&TEXT_OFFSET; * 2);
mImageTop = &STD_PADDING; + mHeadingHeight;
if ((mImageTop + &IMAGE_HEIGHT;) &_GT; (mScreenHeight - mInfoBoxHeight))
{
mImageTop = 0;
}
// Show the splash and loading message.
sF2 = &F2_LOADING;;
// Get the locale and language
mLocale = _getStringProperty(&_PROPERTY_STRING_LOCALE;);
mLanguage = _substring(mLocale , 0, 2);
// Start loading component code.
sLoad = true;
</script>
<display>
<!-- Draw the screen with the background color. -->
<box>
<width>
<eval>_getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;)</eval>
</width>
<height>
<eval>_getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;)</eval>
</height>
<fg>&COLOR_APP_BG;</fg>
<bg>&COLOR_APP_BG;</bg>
</box>
<!-- Handle F1 for app exit. -->
<fn>
<text>Quit</text>
<event name="onselect">
<accelerators>
<key>F1</key>
</accelerators>
<script>
_unload();
</script>
</event>
</fn>
</display>
<states>
<state var="sLoad">
<transition value="true">
<resources>
<resource type="component">
<name>Animal</name>
<url>animal.ujbc</url>
<event name="onResourceAvailable">
<script>
sLoaded++;
</script>
</event>
</resource>
<resource type="component">
<name>Vegetable</name>
<url>vegetable.ujbc</url>
<event name="onResourceAvailable">
<script>
sLoaded++;
</script>
</event>
</resource>
<resource type="component">
<name>Mineral</name>
<url>mineral.ujbc</url>
<event name="onResourceAvailable">
<script>
sLoaded++;
</script>
</event>
</resource>
<resource type="component">
<name>Unknown</name>
<url>unknown.ujbc</url>
<event name="onResourceAvailable">
<script>
sLoaded++;
</script>
</event>
</resource>
<resource type="component">
<name>ThingData</name>
<url><eval>_strcat(mLanguage,
"/thingdata.ujbc")</eval></url>
<event name="onResourceAvailable">
<script>
sLoaded++;
</script>
</event>
</resource>
<resource type="component">
<name>FlexibleList</name>
<url>shared/flexiblelist.ujbc</url>
<event name="onResourceAvailable">
<script>
sLoaded++;
</script>
</event>
</resource>
</resources>
</transition>
</state>
<state var="sLoaded">
<transition value="&LOADED;">
<script>
// Get the language appropriate data.
mThingData = _createInstance("ThingData");
// Get the thing enumerator.
mThingEnumerator = mThingData.getThingEnumerator();
// Reset the enumerator.
mThingEnumerator.reset();
// Ready
sF2 = &F2_OK;;
</script>
</transition>
</state>
<state var="sF2">
<transition value="&F2_LOADING;">
<display>
<!-- Draw empty splash box.
(Would be a good place for an animated timer.) -->
<box>
<x>&STD_PADDING;</x>
<y>&STD_PADDING;</y>
<width><eval>mScreenWidth -
(&STD_PADDING; * 2)</eval></width>
<height><eval>mScreenHeight -
(&STD_PADDING; * 2)</eval></height>
<fg>&COLOR_SPLASH_FG;</fg>
<bg>&COLOR_SPLASH_BG;</bg>
</box>
<!-- Show generic loading message. -->
<fn>
<text>Loading</text>
<event name="onSelect">
<accelerators>
<key>F2</key>
</accelerators>
</event>
</fn>
</display>
</transition>
<transition value="&F2_OK;">
<display>
<!-- Draw text splash box. -->
<box>
<x>&STD_PADDING;</x>
<y>&STD_PADDING;</y>
<width><eval>mScreenWidth -
(&STD_PADDING; * 2)</eval></width>
<height><eval>mScreenHeight -
(&STD_PADDING; * 2)</eval></height>
<fg>&COLOR_SPLASH_FG;</fg>
<bg>&COLOR_SPLASH_BG;</bg>
<multi-label>
<text><eval>mThingData.getSplashText()</eval></text>
<x>&TEXT_OFFSET;</x>
<y>&TEXT_OFFSET;</y>
<width><eval>mScreenWidth - (&STD_PADDING; * 2) -
(&TEXT_OFFSET; * 2)</eval></width>
<height><eval>mScreenHeight - (&STD_PADDING; * 2) -
(&TEXT_OFFSET; * 2)</eval></height>
<fg>&COLOR_SPLASH_TEXT;</fg>
<size>&FONT_SIZE_SPLASH_TEXT;</size>
<style>&FONT_STYLE_SPLASH_TEXT;</style>
<face>&FONT_FACE_SPLASH_TEXT;</face>
</multi-label>
</box>
<!-- Show language appropriate 'OK' message. -->
<fn>
<text><eval>mThingData.getOKText()</eval></text>
<event name="onSelect">
<accelerators>
<key>F2</key>
</accelerators>
<script>
// Get first thing
getNextThing();
// Go.
sF2 = &F2_NEXT;;
</script>
</event>
</fn>
</display>
</transition>
<transition value="&F2_NEXT;">
<display>
<!-- Draw the thing image. -->
<image>
<url><eval>_image_url(_strcat("&IMAGE_URL_DIR;",
mImageName))</eval></url>
<x><eval>(mScreenWidth - &IMAGE_WIDTH;) / 2</eval></x>
<y><eval>mImageTop</eval></y>
<width>&IMAGE_WIDTH;</width>
<height>&IMAGE_HEIGHT;</height>
</image>
<!-- Draw the thing information. -->
<box>
<x>0</x>
<y><eval>mScreenHeight - mInfoBoxHeight</eval></y>
<width><eval>mScreenWidth</eval></width>
<height><eval>mInfoBoxHeight</eval></height>
<fg>&COLOR_INFO_BG;</fg>
<bg>&COLOR_INFO_BG;</bg>
<x-clip>true</x-clip>
<line>
<x1>0</x1>
<y1>0</y1>
<x2><eval>mScreenWidth</eval></x2>
<y2>0</y2>
<fg>&COLOR_INFO_FG;</fg>
</line>
<label>
<text><eval>mName</eval></text>
<x><eval>&TEXT_OFFSET; + 1</eval></x>
<y><eval>&TEXT_OFFSET; + 1</eval></y>
<fg>&COLOR_INFO_TEXT_SHADOW;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_CAPTION;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</label>
<label>
<text><eval>mName</eval></text>
<x>&TEXT_OFFSET;</x>
<y>&TEXT_OFFSET;</y>
<fg>&COLOR_INFO_TEXT;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_CAPTION;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</label>
<label>
<text><eval>mThingBooleanValue</eval></text>
<x><eval>&TEXT_OFFSET; + mNameWidth</eval></x>
<y>&TEXT_OFFSET;</y>
<fg>&COLOR_INFO_TEXT;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_TEXT;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</label>
<label>
<text><eval>mThingStringCaption</eval></text>
<x><eval>&TEXT_OFFSET; + 1</eval></x>
<y><eval>mInfoTextHeight + 1 +
&TEXT_OFFSET; + &STD_PADDING;</eval></y>
<fg>&COLOR_INFO_TEXT_SHADOW;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_CAPTION;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</label>
<label>
<text><eval>mThingStringCaption</eval></text>
<x>&TEXT_OFFSET;</x>
<y><eval>mInfoTextHeight +
&TEXT_OFFSET; + &STD_PADDING;</eval></y>
<fg>&COLOR_INFO_TEXT;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_CAPTION;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</label>
<label>
<text><eval>mThingStringValue</eval></text>
<x><eval>&TEXT_OFFSET; + mCaptionWidth</eval></x>
<y><eval>mInfoTextHeight +
&TEXT_OFFSET; + &STD_PADDING;</eval></y>
<fg>&COLOR_INFO_TEXT;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_TEXT;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</label>
<multi-label>
<text><eval>mDescription</eval></text>
<x>&TEXT_OFFSET;</x>
<y><eval>(mInfoTextHeight * 2) + &TEXT_OFFSET; +
(&STD_PADDING; * 2)</eval></y>
<width><eval>mScreenWidth -
(&TEXT_OFFSET; * 2)</eval></width>
<height><eval>mInfoTextHeight * 3</eval></height>
<fg>&COLOR_INFO_TEXT;</fg>
<size>&FONT_SIZE_INFO_TEXT;</size>
<style><eval>&FONT_STYLE_INFO_TEXT;</eval></style>
<face>&FONT_FACE_INFO_TEXT;</face>
</multi-label>
</box>
<!-- Draw the heading. -->
<label>
<text><eval>mThingHeading</eval></text>
<x><eval>((mScreenWidth - mHeadingWidth) / 2) + 1</eval></x>
<y>1</y>
<fg>&COLOR_HEADER_TEXT_SHADOW;</fg>
<size>&FONT_SIZE_HEADER_TEXT;</size>
<style><eval>&FONT_STYLE_HEADER_TEXT;</eval></style>
<face>&FONT_FACE_HEADER_TEXT;</face>
</label>
<label>
<text><eval>mThingHeading</eval></text>
<x><eval>(mScreenWidth - mHeadingWidth) / 2</eval></x>
<y>0</y>
<fg>&COLOR_HEADER_TEXT;</fg>
<size>&FONT_SIZE_HEADER_TEXT;</size>
<style><eval>&FONT_STYLE_HEADER_TEXT;</eval></style>
<face>&FONT_FACE_HEADER_TEXT;</face>
</label>
<!-- If the user presses 'Next', show the next thing. -->
<fn>
<text><eval>mThingData.getNextText()</eval></text>
<event name="onSelect">
<accelerators>
<key>F2</key>
</accelerators>
<script>
getNextThing();
_clear_state(sF2);
sF2 = &F2_NEXT;;
</script>
</event>
</fn>
</display>
</transition>
</state>
</states>
</application>
</ujml>|
Copyright (c) 2000-2007 UIEvolution, Inc. All rights reserved.
|
|
What do you think about this topic? Send feedback!
|