Your comments

You should be able to manage this without JS, just a firm handle on classes and preferences.
Thanks for posting.
This is a pretty broad question that could potentially involve several moving parts.

I would probably create a grid template (a series of panels) where textfields and labels can be added and removed and use that as a basis for placing new things in on action.

Then select a class (which would be a pre-made textfield/label group) place it using the concept of <create> and <delete>.

Then you would need to set [preferences:] for what and in which grid panel they are placed and use that to recreate them later as a series.

I would review the above concepts in our documentations site and see if you have any questions.
You will need to download and install TextExpander in order to use this library.

http://smilesoftware.com/TextExpander...
Would you be so kind as to give me build permissions so I can look at the code? :)
You can certainly add me as a collaborator on your project and I can take a look at what you are working on. Might be easier to visualize :)

go into the WIRE editor for your App and select 'Resources > Invite Collaborators'. Then invite me by my email address icahill@rarewire.com.

Thanks.
If you are using the datasource example still, then the "main body" of the project is actually a web tag that is loading the datasource description. If you want the image inside of that area, you will need to modify the WIRE. I would start by wrapping the web tag in a panel and then putting your image inside that panel so it lives as a sibling to the web tag. Then you will need to adjust the height and widths so they can live inside of that panel together.

 <panel name="body" height="100%" width="100%" background="#000000" valign="bottom" align="center">
         <image name="background" alias="BACKGROUND" width="100%" height="100%" background="#000000" datasource="imagefeed" datasourcemapping="url=//img/@src"></image>

<!--NEW PANEL-->

       <panel name="viewing-area" width="90%" height="75%">         

         PLACE IMAGE HERE AND ADJUST HEIGHT AND WIDTH

         <web name="viewer" alias="VIEWER" html="[param:description]" width="100%" height="65%" valign="center" align="center" alpha="1"></web>

       </panel>

         <panel name="container" height="10%" width="75%" valign="bottom" align="center" borderwidth="5" bordercolor="ff0000" background="#ffffff">

             <image name="left" alias="LEFT" source="RWXML/icon.arrow.left.png" height="35" width="35" align="left" valign="center" background="#ffffff" margin="10" onclickup="move-list-back"></image>

             <list name="feed" alias="FEED" datasource="rsstest" width="70%" height="100%" align="center">  

               <object name="feed" class="rssitem" title="[param:title]" description="[param:description]" page="[param:dataSourceIndex]"/>

             </list>

             <image name="right" alias="RIGHT" source="RWXML/icon.arrow.right.png" height="35" width="35" align="right" valign="center" background="#ffffff" margin="10" onclickup="move-list-fwd"></image>

         </panel>

      </panel>

I am not understanding. Have you nested the image into the correct panel where the other content is?
Oh. In the example above the text tag within frame is set to 100% x 100% and is below the image in the zorder, reduce the size of the text tag called 'title' or put the image tag below it and let me know what you see.