SImage
From TechWiki
Contents |
Introduction
The sImage Semantic Component is used to place images on the canvas.
The first thing an sImage component checks when it is created is whether something has been defined for its "source" property and that no targetAttributes have been defined. If something has been defined for this variable, it means that the developer wants to directly specify the location of the image to display. In such a case, the sImage component considers that this Semantic Component is not required in the layout. (See the (Require section of the sHBox page for more information about the require property of a Semantic Component.)
source of a sImage will only be used directly if no targetAttributes are defined is simple. If the sImage is part of an itemRenderer that get recycled when a list scroll, then the source that was empty is not empty anymore when it gets recycled. Since there were targetAttributes, the control won't remove itself. If this rule won't be in place, then it means that the images would be repeated one after the other, in a loop, when the list would get scrolled.
If something has been defined for the semanticSource property, the control tries to find a bound attribute within the value of this property. If a bound(s) attribute(s) has been defined within the value of the semanticSource, but that no value for these attributes have been found in the target record description, the sImage removes itself from the application layout.
If the semanticSource variable is null/empty, or if no bound attribute has been defined in the text of the component, the component then checks to see if targetAttributes have been specified. If no such targetAttributes have been defined, the sImage component removes itself from the application layout.
Bound Attribute
If an sImage is defined in a MXML file, developers can directly bind a record's description attributes to it (instead of using the targetAttributes parameter). A special markup has been introduced in the Semantic Component Library to give the possibility to bind an attribute value to a particular semantic control, directly in MXML.
The markup that has been introduced uses double brackets with the name of the attribute to bind in the middle, such as:
"[[foaf_thumnail]]"
For the sImage Semantic Component, variables can be bound within the semanticSource property of the sImage component. A bound variable can be the only value of the semanticSource property, or it can be part of a complete string.
Here is an example of a bound attribute to an sImage component that is used without any other character:
<sImage semanticSource="[[foaf_thumbnail]"
semanticDataProvider="{data.semanticDataProvider}" />
/** in the Flex user interface, the value "Bob Garon" will appear for this sText component */
Styles
| Style Name | Description |
| sImage | Style for the main sImage component |
AS3 Usage Examples
var resultset:Resultset = new Resultset(XML(inputData));
/** Create the sImage component */
var semanticImage:sImage = new sImage();
/** Initialize the semantic control */
semanticImage.semanticDataProvider = resultset;
semanticImage.targetAttributes = ["foaf_thumbnail"];
/** Add the sImage to the main application */
this.addChild(semanticImage);
MXML Usage Examples
semanticDataProvider="{semanticDataProvider}" />
In this example, we assume that the {semanticDataProvider} variable is a Resultset, where the record description is defined, accessible at the creation time of the sImage.
Related Libraries
No related external libraries.
