A “Hello World” Example Using the Image Tag

One of the simplest code generation tags is the Image tag.  The Image tag displays an image in the generated web page, and can reference a URL, a file name, or database table.  The example below shows an Image code generation tag in an HTML layout page and the resulting page.

<HTML>

<body>

     <GEN:Image Name=”Logo” />

</body>

</HTML>

The Image tag is placed anywhere in your HTML layout page where you wish the image to be displayed.  The Image tag has no other parameters than Name, which distinguishes one Image tag from another.

After setting the Image tag’s URL and generating the application, the resulting page looks like this.

We can build on this example by adding a second Image tag.

<HTML>

<body>

This is the first image: <br><GEN:Image Name="Logo1" /><br>

This is the second image: <br><GEN:Image Name="Logo2" />

</body>

</HTML>

Two different Name values distinguish one Image tag from the other.  This allows Iron Speed Designer to generate separate components for each tag.

After setting two Image tags to two different URLs and generating the application, the resulting page looks like this.

Use the tag’s Properties dialog to hook up the Image code generation tag to the actual image.  This process, called “property setting”, is described in Setting Code Generation Tag Properties.

See Also

Creating HTML Layout Pages