|
|
Xpages : Redesign the filedownload component
Ferry Kranenburg
For my latest xpages project, one of the requirements was to display the filedownload component differently.
By default the component shows the headers of all enabled columns, like the filetype of filesize.
One of the requirements was to remove the headers. By using CSS only I wasn't able to completely remove those headers. I also needed to get rid of all the borders.
Next requirement was to display the filetype icon BUT NOT the filetype text! Here is how it could be done. I was finally able to do this by using the hidden gem 'columnClasses'. With this you can specify a comma seperated list of CSS classes per column. So I added some extra classes to my CSS and there you go! Add this to you CSS: .xspDataTableFileDownload{ border-collapse:none; } .xspDataTableFileDownload TBODY TR TD{ border:none; padding-right:0px; } .xspDataTableFileDownload THEAD{ display:none; } .fdownload_typeClass{ width:0px; } .fdownload_typeClass .xspTextComputedField{ display:none; padding-right:0px; } .fdownload_fileClass{ }
.fdownload_sizeClass{ color:#D3056E; } Use this for your filedownload component code <xp:fileDownload rows="30" id="fileDownload1" displayLastModified="false" displayType="true" allowDelete="false" hideWhen="true" value="#{dominoDocument1.pru_UploadFile1}" createdTitle="upload datum" sizeTitle="grootte" displayCreated="false" displaySize="false" style="width:450.0px;text-align:left;font-size:9pt;" disabled="false" columnClasses="fdownload_typeClass,fdownload_fileClass,fdownload_sizeClass," var="rowFile" indexVar="rowIndex"> <xp:this.fileNameValue><![CDATA[#{javascript:var aSizes:Array = ['bytes', 'kb', 'MB', 'GB', 'TB', 'PB']; var calcnr:Number = Math.floor(Math.log(rowFile.getLength())/Math.log(1024)); var fSize = (rowFile.getLength()/Math.pow(1024, Math.floor(calcnr))).toFixed(2)+" "+aSizes[calcnr]; rowFile.getName() + " (" + fSize + ")"}]]> </xp:this.fileNameValue>
</xp:fileDownload>
As you can see in the code I have hidden the column filesize by specifying 'displaySize' to false. When specifing a 'var' to the component (just like the repeat control) you can get a handle to the current file row. This way you can get the current filesize and display it in the filename column. I used the fileNameValue property to 'generate' my own file title and added the filesize to the title itself.
It took me quite a while to figure this one out, so for all developers not using the oneUI themes, here you go.
Click on the screenshot below how it looks. 
---------------------
http://www.bleedyellow.com/blogs/ferrykranenburg/entry/xpages_redesign_the_filedownload_component1
Jan 05, 2011
193 hits
| Recent Blog Posts |
Sorry, no records were found!
|
