tag handling

[Goran Markovic]

Hi,
does anyone can give me some references about positioning elements in Struts. I find very awkward to do such considering Struts' underlying layout mechanism (template/theme). So what do I need to do to perform issued problem, since I can not perform anything directly on the page. I know there is xhtml-which is default template, css_xhtml , .... So I would like to use css_xhtml, I know to switch to it, but how can I appropriately modify it (should I extract struts2-core-2.0.11.jar library, then somehow modify what I want, and then repack it i store in classpath, or what...?). I'm guided by "Struts 2 in Action" - manning publisher. I would very appreciate if some one provide me straight references about my issue.
Thanks in advance!

[David Newton]

You can simply extract the templates to the application or classpath as described here. You can then modify an existing template either in-place or copy it to a new theme and make changes there.

[Goran Markovic]

do I keep then all capabilities of framework, like i18n (use of key to retrieve i18n message) or object domain targeting, validation messages, and other things?

[Goran Markovic]

Does anyone can redirect me to the some sample of theme modification, where is displayed positioning of elements and such, just to see how it looks like?

[David Newton]

The locations of the templates don't matter--it's no different if they're your modified templates or the original templates.

I'd just extract them as described and start messing with them--FreeMarker is very simple to understand, the rest is just HTML.

[Goran Markovic]

Well, I try it, and find too much complicated and complex. I can not believe that ordinary html tags can not be rendered in the page where I use struts tags!?
It really huge disadvantage, and what should I do now when I can not render html tags?

[David Newton]

I have no idea what you mean; of course you can use HTML tags in both JSP and FreeMarker templates.

What, specifically, are you having a problem with?

Getting the templates out of the struts2-core library is simple: copy it to a temporary directory, un-jar it using "jar xf", find the templates directory, and copy it either to the web app, or a source directory that's deployed with the application.

You can then do whatever you want to the templates: I generally copy the "css_xhtml" or "xhtml" templates to a new directory, like "my_css" or whatever. Then I set the global default theme to "my_css". I then modify the templates in the new theme.

[Goran Markovic]

Well, that modification border me. I have a registration form like this :

 <s:textfield name="user.firstname"  key='userfirstname'/>
<s:textfield name="user.lastname" key="userlastname" />
<s:textfield name="user.username" key="userusername" />
<s:password name="user.password" key="userpassword" />
<s:textfield name="user.email" key="useremail" />
<s:textfield name="user.briefing" key="userbriefing" />
<s:textfield name="user.birthday" key="userbirthday"/>
<s:radio name="user.role" key="userrole" list='{"Premium","Regular"}'/>
<s:select name="user.country" key="countrylist" list='simple_Db.countries' />
<s:checkboxlist name="user.interests" list='simple_Db.interestslist' key="userinterests"/>
<s:checkboxlist name="user.hobbies" list='simple_Db.hobbieslist' key="userhobbies"/>
<s:checkboxlist name="user.education" list='simple_Db.educationlist' key="usereducation"/>
<s:submit value="REGISTER"/>

and, by default, it's ordered simply along left side of page with frameworks margin, paddings and rest l&f, which is quite uninteresting. So I want to add my margin spacing, the outlines around fields, the pics or color as a box background.Ok, I prepare template folder and copy the templates form .jar.Done.
Now, let say I want to perform mentioned modifications on <s:textfield> tag.
I go to template/xhtml/ and open textarea.ftl.
The textare.ftl is the file which consists of -controlheader.ftl, textarea.ftl and controlfooter.ftl.
Each of these files is comprise several file inclusion, and that is about 10-15 included file to perform <s:textfield> rendering. This is the content of tempalte/simple/textare.ftl, file :

<textarea><#rt/>
 name="${parameters.name?default("")?html}"<#rt/>
 cols="${parameters.cols?default("")?html}"<#rt/>
 rows="${parameters.rows?default("")?html}"<#rt/>
<#if parameters.wrap?exists>
 wrap="${parameters.wrap?html}"<#rt/>
</#if>
<#if parameters.disabled?default(false)>
 disabled="disabled"<#rt/>
</#if>
<#if parameters.readonly?default(false)>
 readonly="readonly"<#rt/>
</#if>
<#if parameters.tabindex?exists>
 tabindex="${parameters.tabindex?html}"<#rt/>
</#if>
<#if parameters.id?exists>
 id="${parameters.id?html}"<#rt/>
</#if>
<#if parameters.cssClass?exists>
 class="${parameters.cssClass?html}"<#rt/>
</#if>
<#if parameters.cssStyle?exists>
 style="${parameters.cssStyle?html}"<#rt/>
</#if>
<#if parameters.title?exists>
 title="${parameters.title?html}"<#rt/>
</#if>
<#include "/${parameters.templateDir}/simple/scripting-events.ftl" />
<#include "/${parameters.templateDir}/simple/common-attributes.ftl" />
><#rt/>
<#if parameters.nameValue?exists>
<@s.property value="parameters.nameValue"/><#t/>
</#if>
</textarea>

I really do not get what part of file should I change to obtain aimed look and feel or even more, I do not know what file (since there is about 15 for this tag), to change to achieve such a things. I can not simply put each tag like this ;

 <div class="myStyle"><s:textfield name="user.lastname" key="userlastname" /></div>

where in .css I would define behavior of component...
Could you maybe show me the sample, of how should I do that modification?

[David Newton]

I'd just use CSS for that; it doesn't sound like you'd have to modify any templates for that (I don't really know exactly what your requirements are, of course).

There are about 10 includes for css_xhtml/textfield, most of which aren't relevant for styling and layout: the names of the files usually indicate their functionality.

BTW, if you just use messages named the same as your "key" attribute, like "user.username", you don't need to specify the "name" attribute.

[Goran Markovic]

Ok. I would create Css and place it in template/css_xhtml folder. In css I would specified style for div. Am I right? And if I am, how could I specify that this theme/this tag should use my css? Consider the case above: How should I perform such a thing like, specifying the size of <div> block, padding, border, color, background? Could you explain me that, and the same logic I will apply on any tag element.

[David Newton]

The CSS would go in a CSS file and be completely unrelated to the template files. Just use normal CSS selectors.

[Goran Markovic]

aha. So I just provide Css, and define the attributes for the elements which theme use (is it css_xhtml-<div> or xhtml- <table>,<tr>,<td>..), it is, isn't it ?
But as I could conclude there are some limitations (for example, I cannot get visibility of borders, and such). Is there a few a things which cannot be applied by this way, as I spot (let say to control particular row, cell or division? I mean, can however specify that certain <tr> or <td> use appropriate class like <td class="one"/>,<td class="two"/>?
Or it cannot be done by this way? Thanks a lot for your patience...

[David Newton]

You can style whatever DOM elements the templates create. Depending on which version of S2 you're using you might want to wrap the entire form/tables/divs etc. inside a wrapper div to make the CSS selectors easier and more isolated from other styles you might be using.

If you need to style very specific elements you might need to modify a template, as you say, as not all browsers support the CSS selectors needed to access all the DOM elements created.

[Goran Markovic]

Ok, thanks. Enough for today, I'm overworked today tomorrow is new day..