How many times will happen to us developers to assemble in jsp graphics that come from agencies or graphics from a web designer? Of course, gorgeous graphics, with many effects and dynamic content to the right place. But more moderate html, css, js, and there are + and increases our work and our curse when we use frameworks like Struts, JSF and others who tag-library that maybe texturing css and / or pre-set td. Well of course we can rewrite the tag library classes.
Struts 2 instead comes to us in this.
It provides text files with ". ftl. In these files, using a language EL, you can customize not only the tag to render html tags but the behavior of the tag library for struts 2. All in a simple and fast.
Each tag can have one or more associated ftl and usually have the file name as the tag name, for example, the tag 's: to "there will be a" a.ftl " .
All of these tt. Ftl are contained in the jar for struts 2 in the path of the package details.
ftl For example, using the default package in struts 2 are "template.xhtml" but there are others in the jar as "template.simple" etc. ..
This is important as Struts 2 looks for the right under ftl "template" subpackage and identifying its type or group or style, say the theme, you choose to call them.
So to customize the tag just rewrite ftl and place them in our sources respecting the naming convention of the package stating then (in different ways depending on how we want to extend) to struts 2 which theme to use.
Continuing to build on the example of the previous post you'll see how to do step by step.
In this post I will show you how to customize the presentation of actionError, and the fieldsError actionMessage, but this applies to all tags in Struts2. This example will extend the theme "simple" which is to + simply renders the least because no table or div to have the content as opposed to "xhtml".
begin by extracting the folder templates / simple-core.xxx.jar contained in Struts2. Let's create a package "template.tutorial" in our sources.
As you can see I gave the name "tutorial" to our subject.
Copy in all the ftl package contained in the "simple" removed.
The customization of the messages is to display a small icon that identifies the type of massage appear, then an image tag info for actionMessage and error for actionError and fieldError.
Now open the file "actionmessage.ftl" package created, copy the following code, and replace it with the contents of the file:
\u0026lt;# if (actionMessages? & & actionMessages? size> 0 & &! parameters.isEmptyList)>
<div style="border:2px solid silver;">
<img src="img/info.png" width="30px" height="30px"/>&nbsp;&nbsp;&nbsp;<strong style="font-size:15px;">MESSAGGI INFORMATIVI</strong>
<ul<#rt/>
<#if parameters.id?if_exists != "">
id="${parameters.id?html}"<#rt/>
</#if>
<#if parameters.cssClass??>
class="${parameters.cssClass?html}"<#rt/>
<#else>
class="actionMessage"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
<#list actionMessages as message>
<#if message?if_exists != "">
<li><span><#if parameters.escape>${message!?html}<#else>${message!}</#if></span></li>
\u0026lt;/ # if>
\u0026lt;/ # list>
\u0026lt;/ ul>
\u0026lt;/ div>
\u0026lt;/ # if>
bold lines that I added with respect to the 'actionmessage.ftl "original.
I basically did this.
After that is done the control (in EL language) if there are messages to be rendered before the list of messages through the html tag "ul" I have enclosed in a div that renders a gray box with edges of 2 pixels inside and First on the list of messages the next image with the text info.png informational messages.
Same thing for "actionerror.ftl"
\u0026lt;# if (actionErrors? & & ActionErrors? Size> 0)>
\u0026lt;div style="border:2px solid red;">
\u0026lt;img src="img/errore.png" width="30px" height="30px"/> \u0026lt;strong style="font-size:15px;"> MESSAGES IN ERRORE \u0026lt;/ strong>
\u0026lt;ul \u0026lt;# rt />
\u0026lt;# if parameters.id? If_exists! = "
id =" $ {parameters.id? html} "\u0026lt;# rt />
\u0026lt;/ # if>
\u0026lt;# if parameters.cssClass??>
class =" $ {parameters.cssClass? html} "\u0026lt;# rt />
\u0026lt;# else>
class = "errorMessage" \u0026lt;# rt />
\u0026lt;/ # if>
\u0026lt;# if parameters.cssStyle??>
style = "$ {parameters.cssStyle? html}" \u0026lt;# rt />
</#if>
>
<#list actionErrors as error>
<#if error?if_exists != "">
<li><span><#if parameters.escape>${error!?html}<#else>${error!}</#if></span><#rt/></li><#rt/>
</#if>
</#list>
</ul>
</div>
</#if>
e "fielderror.ftl":
<#if fieldErrors??><#t/>
<#assign eKeys = fieldErrors.keySet()><#t/>
<#assign eKeysSize = eKeys.size()><#t/>
<#assign doneStartUlTag=false><#t/>
<#assign doneEndUlTag=false><#t/>
<#assign haveMatchedErrorField=false><#t/>
<#if (fieldErrorFieldNames?size > 0) ><#t/>
<#list fieldErrorFieldNames as fieldErrorFieldName><#t/>
<#list eKeys as eKey><#t/>
<#if (eKey = fieldErrorFieldName)><#t/>
<#assign haveMatchedErrorField=true><#t/>
<#assign eValue = fieldErrors[fieldErrorFieldName]><#t/>
<#if (haveMatchedErrorField && (!doneStartUlTag))><#t/>
<ul<#rt/>
<#if parameters.id?if_exists != "">
id="${parameters.id?html}"<#rt/>
</#if>
<#if parameters.cssClass??>
class="${parameters.cssClass?html}"<#rt/>
<#else>
class="errorMessage"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
<#assign doneStartUlTag=true><#t/>
</#if><#t/>
<#list eValue as eEachValue><#t/>
<li><span>${eEachValue}</span></li>
</#list><#t/>
</#if><#t/>
</#list><#t/>
</#list><#t/>
<#if (haveMatchedErrorField && (!doneEndUlTag))><#t/>
</ul>
<#assign doneEndUlTag=true><#t/>
</#if><#t/>
<#else><#t/>
<#if (eKeysSize > 0)><#t/>
\u0026lt;div style="border:2px solid red;">
\u0026lt;img src = "img / errore.png" width = "30px" height = "30px" /> \u0026lt;strong style="font-size:15px;"> error message \u0026lt;/ strong>
\u0026lt;ul \u0026lt;# rt />
\u0026lt;# if parameters.cssClass?>
class = "$ {parameters.cssClass? html}" \u0026lt;# rt />
\u0026lt;# else>
class="errorMessage"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
<#list eKeys as eKey><#t/>
<#assign eValue = fieldErrors[eKey]><#t/>
<#list eValue as eEachValue><#t/>
<li><span><#if parameters.escape>${eEachValue!?html}<#else>${eEachValue!}</#if></span></li>
\u0026lt;/ # list> \u0026lt;# t />
\u0026lt;/ # list> \u0026lt;# t />
\u0026lt;/ ul>
\u0026lt;/ div>
\u0026lt;/ # if> \u0026lt;# t />
\u0026lt;/ # if> \u0026lt;# t />
\u0026lt;/ # if> \u0026lt;# t />
\u0026lt;img src = "img / errore.png" width = "30px" height = "30px" /> \u0026lt;strong style="font-size:15px;"> error message \u0026lt;/ strong>
\u0026lt;ul \u0026lt;# rt />
\u0026lt;# if parameters.cssClass?>
class = "$ {parameters.cssClass? html}" \u0026lt;# rt />
\u0026lt;# else>
class="errorMessage"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
>
<#list eKeys as eKey><#t/>
<#assign eValue = fieldErrors[eKey]><#t/>
<#list eValue as eEachValue><#t/>
<li><span><#if parameters.escape>${eEachValue!?html}<#else>${eEachValue!}</#if></span></li>
\u0026lt;/ # list> \u0026lt;# t />
\u0026lt;/ # list> \u0026lt;# t />
\u0026lt;/ ul>
\u0026lt;/ div>
\u0026lt;/ # if> \u0026lt;# t />
\u0026lt;/ # if> \u0026lt;# t />
\u0026lt;/ # if> \u0026lt;# t />
only that unlike other dell'ftl linked all'actionMessage I changed the color of the box in red and the image with error.png.
For completeness I give the part of css that I changed or added in intro.css file in the folder WebContent / css:
....
div.areaMessaggi div {
margin-left: 80px;
padding-top: 10px;
padding-left: 10px;
padding-right:10px;
max-width:400px;
border:2px solid silver;
}
.actionMessage{
color:green;
}
.errorMessage {
color:red;
}
ul.actionMessage li {
list-style-image: url(../img/li_ok.png);
}
ul.errorMessage li {
list-style-image: url (.. / img / li_ko.png)
}
.. .
the css I will not comment because it is not the topic of the tutorial.
course put the pictures with names that I used in the folder WebContent / img.
If you download the project cmq tt are ready.
We can do is tell Struts 2 to use our theme.
To do this just go in and insert the struts.xml constant with the name "struts.ui.theme" value and the name of the group, in our case:
struts PUBLIC "- / / Apache Software Foundation / / DTD Struts Configuration 2.0 / / EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
\u0026lt;struts>
[ ...]
\u0026lt;constant name="struts.ui.theme" value="tutorial" />
[...]
\u0026lt;/ struts>
remember that if you do not do what struts continues to use the default which is "xhtml" content in his jar.
course in the same way you can configure Struts 2 to use but not another one of our content in his jar.
If we want to extend only a few ftl such as xhtml, just create the package
template.xhtml.pippo
Then put it in the ftl and indicate in jsp as an attribute of the tag which template to use for example:
\u0026lt;s:actionmessage template="pippo"/>
without changing the struts.xml.
However, for exploration of the template, tags and language EL I recommend the official guides.
In this post I just wanted to let you know this future Struts2.
Deploiate this is the result when actionMessage:
and in case of error messages: 
+ posts you will notice that they do not appear on the input boxes, this Since the theme "simple" do not.
0 comments:
Post a Comment