Maven WAR plugin: Copying resources to another folder

For the purpose of building an exploded war for my application I am using the maven-war-plugin. There is a common set of UI files that are used by the applications i am working so they’ve been exported to their own SVN folder and the build process copies this folder to the final WAR or exploded war directory. After playing with my POM for a while and trying the maven-resources-plugin without much success, i ran into the <webResources> property of the maven-war-plugin. This is the maven-resources-plugin functionality adapted to the maven war plugin. I originally set up my configuration as such:


<plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-war-plugin</artifactId>
 <version>2.0</version>
 <configuration>
 <webappDirectory>c:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\${project.artifactId}-${env}</webappDirectory>
 <webResources>
 <resource>
 <targetPath>common</targetPath>
 <filtering>false</filtering>
 <directory>C:\eclipseGalileo\eclipse\workspace\common</directory>
 <includes>
 <include>**/*.*</include>
 </includes>
 <excludes>
 <exclude>**/*.svn</exclude>
 </excludes>
 </resource>
 </webResources>
 </configuration>
 </plugin>

No luck in getting it work although there were no errors in syntax, all the files in the “common” directory just were getting copied to the root of my webapp directory in my exploded war no matter what the path was i specified
for “targetPath”. The simple fix for that was to upgrade my version of the plugin to 2.1 as such:

<artifactId>maven-war-plugin</artifactId>
<version>2.1</version>

Et voila! Problem solved.

ExtJS: ComboBox display issues

I was trying to set up a couple of comboBoxes for a custom ExtJS triple input (Month/Day/Year) datefield and the comboxes would display but be cropped to 17px. No matter what the width i set on the control, the boxes would not display right. I tried a few things and finally realized that i had specified a “hiddenName” property to be the same as the field’s ” id” property. If such is the case, make sure to specify a unique “hiddenId” property and your comboBoxes will display fine.

Disappearing Ext JS RadioGroup and CheckboxGroup inputs in IE6

I ran into an issue in IE6 with a bunch of my controls not showing up when the page loaded. It was specially with the RadioGroup control in ExtJS. The radio buttons would display fine in Firefox but not appear at all in IE6 even though the HTML was present. I thought it was a width or height issue as it is often the case with ExtJS and IE6 but nothing i did could take care of the problem. I then looked at the container panels of the RadioGroups i was trying to display and realized that i was using a “layout:column” setting, which floats the items in the container left.

During my research on this bug, i stumbled upon a bug in IE6 called the “PeekABoo” bug where content inside a liquid floated bug suddenly disappears. I am not exactly sure the issue is completely related to the problems I was facing but it seems related. In order to get my radiogroups to display, i had to change the value to “layout:auto”. This worked for me and it is the default value if no layout property is specified. In general, I’ve found out that display issues in IE also are related to setting an actual width or height property on panel objects.  Well you know what to try in case you run into the issue and share in the comments whatever solution worked for you. It can be nightmarish to figure out what’s going on, and this is the reason why i decided to share my experiences on this blog.

Disappearing ExtJS buttons in IE 6

I officially hate IE6 and know the reason why now, ExtJS. Working with this library has opened my eyes to the deficiencies in the browser. Enough has been said on the topic so let me get to the meat of the matter.I spent a crazy amount of time figuring out why one button i was trying to set up would not display in IE6. It would some some kind of image, but would only show the entire button when the button was hovered on with the mouse. I tried setting the width, the height, the line height with no results. Here is how i was trying to set up my button:


var lookupButton = new Ext.Button({
text:'Lookup',
style:'float:right'
})

Doing so, i got an error in IE6 that stated:

el.owner.createDocument.createRange Object doesn’t support this property or method.

It turns out this is a bug in IE where trying to insert a block level element after a plain text creates this error. The solution for me was to add a span around the text i was creating like:


{
width: this.displayWidth,
html: '<span>' +  String(this.value) + '</span>'

}

Hope it helps!