ICEsoft.org Forums: ICEfaces, ICEmobile, ICEpdf

Hello

Using the seam-comp-showcase I was able to run the ice:inputFile however it seems that the formating doent apply to this control. Changing the size and label properties doent seems to work.

I am using Seam 1.2.1 and ice DR#3

if there is DR#4 path - can you refer it ?

Thanks in advance
Amir

Amir,

DR#4 is out now, however, the file upload control has to rely on the native browser HTML widget for it's functionality (there is simply no other way to upload a file using a browser without installing a special browser plugin, e.g. Java, etc.). Unfortunately, most browsers do not support detailed styling of the file upload control, which prevents ICEfaces from being able to offer the improved styling flexibilty as we'd like to.

Not that this is not an ICEfaces-specific limitation, any library based on standard HTML + JavaScript is going to have the same styling issues with their file upload component.

Regards,
Ken

Ken,

I am not sure that its the browser fualt. Looking at the fileupload generated HTML here is what I get

Code:

 <form id="fileUploadForm" enctype="multipart/form-data" action="./uploadHtml" method="post">
 <input type="hidden" value="_id8:_id65" name="componentID"/>
 <input type="hidden" value="1" name="viewNumber"/>
 <input class="iceFileUploadText" type="file" size="35" name="upload"/>
 <input class="iceFileUploadButton" type="submit" value="Upload"/>
 </form>

It seems that this control set the size to 35 regardless of what we set in code

Amir

Ah, the SIZE of the file input element. Yes that seems like it should be a pass-through on the ice:inputFile component. Please log a JIRA issue for this.

I thought you were refering to styling the file input element itself (button styling, size, etc.), sorry for the confusion.

Regards,
Ken

There's no problem with that ... in my opinion ... To change the size of the edit control you must use

inputTextSize

.
Most of the parameters can be changed.
Just be careful. For some funny reason, if you specify sizes for the iframe (height and width) you must use just numbers, no px or cm terminations.
Why? ... Because that's how life is.
Check also in the tld documentation for buttonClass, inputTextClass, styleClass, label and other attributes of the inputFile tag.
http://www.icesoft.com/developer_guides/icefaces/tld/ice/inputFile.html

Hi,
I am loading a stylesheet of my own to override the default styles that are used for the button and inputfile text areas for the ice:inputfile tag.

I am setting the buttonClass attribute to the style I want for my button, but it doesn't work. Neither does it when I set the inputTextClass attribute.

Am I using the buttonClass and inputTextClass in the right way ?

Sounds like your applying the css correctly. Keep in mind that most browsers won't let you style the browse button but you should be able to style everything else.

If you're still having problems post your css and inputFile tag markup.

patrick.corless wrote:

Sounds like your applying the css correctly. Keep in mind that most browsers won't let you style the browse button but you should be able to style everything else.

If you're still having problems post your css and inputFile tag markup.

Nope, it's still not working.
In a CSS file I have defined the following class

.myInputFileBtn {
background-image:url(../images/someImage.PNG);
background-repeat:no-repeat;
border:0px none;
color:#E3F5F3;
cursor:pointer;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
height:22px;
padding:2px 8px;
text-align:center;
width:66px;
}

the image is 66px wide.

in my jspx class I import the file (and that works, because I can see with Firebug that the stylesheet loads on the page)

<ui:define name="styles">
<link rel="stylesheet" type="text/css"
href="#{facesContext.externalContext.requestContextPath}/css/myfile.css" />
</ui:define>

Then to the actual implementation :

further down the page :

<ice:inputFile id="inputFileName" styleClass="myInputFileBtn "
progressListener="#{x.X}"
actionListener="#{x.X}" />

The actual values of x.X are of course different .

Could it be that my style is being overriden by a default ice faces theme or something ?

You know I don't think it's being overridden from an ice faces default theme. I have taken the class that was the default for the inputfile and tried to
override it with an own style, doesn't work either.

Eg the default style for the button is called iceInpFileBtn, this is the one
I have tried to redefine in my own stylesheet - the idea is to use my own
style and not the default. Doesn't work.

I'm interested as well for the solution of this issue. Anyone would like to share to us the solution ?

TomAng wrote:

I'm interested as well for the solution of this issue. Anyone would like to share to us the solution ?

Any more ideas `?

Gustaf1234 wrote:

TomAng wrote:

I'm interested as well for the solution of this issue. Anyone would like to share to us the solution ?

Any more ideas `?

The doc api for the tag http://www.icefaces.org/docs/v1_7_0/tld/index.html

mentions that disabled styles could be commented out like this
* iceInpFile-dis
* iceInpFileBtn-dis
* iceInpFileTxt-dis

Did you try this Ang? It's not working for me, maybe it works for you?

Gustaf1234 wrote:

Gustaf1234 wrote:

TomAng wrote:

I'm interested as well for the solution of this issue. Anyone would like to share to us the solution ?

Any more ideas `?

The doc api for the tag http://www.icefaces.org/docs/v1_7_0/tld/index.html

mentions that disabled styles could be commented out like this
* iceInpFile-dis
* iceInpFileBtn-dis
* iceInpFileTxt-dis

Did you try this Ang? It's not working for me, maybe it works for you?

i think that style lines are if the button is disable in the page, doesnt mean that u can disable the style with -dis

For component ice:inputFile,
Who can help me, how to define the "button value" for Buttons "Browse…” and “Upload” ?
The default is “Browse…” and “Upload”, I want to change to “Browse file” and “Upload file.”

We can do that.

How to format FileUpload control. As far as I am consurned there is no direct formating available for formating FileUpload Control using css.

I will share one of my ideas where I implemented this and working fine. I wanted to show the button in a formate which is common in an existing application and i had to create a new form where i need to use this fileupload control and I have to change the control look and feel so that it is not different from the existing one.

What I did is I took and image of the existing formated button and placed exactly at the fileupload button. And also changed the image when ever the user clicks so that it looks real. Please find the code below.

Html:

<link rel='StyleSheet' href="Styles/UploadButton.css" type='text/css'/>

<div class="fileinputs">
<asp:FileUpload type="file" ID="ctlFileUpload" runat="server" class="UploadButton" EnableTheming="true"/>
<div class="fakefile">
<img src="http://bytes.com/images/Browse.jpg" onclick="OpenFileUpload();" class="DirectUploadImage" alt="Select file to upload."
onmouseover="FileUploadHighlightOn(this);" onmouseout="FileUploadHighlightOff(this);" onmousedown="FileUploadClick(this);"/>
</div>
</div>

<script type="text/javascript" language="Javascript">

function OpenFileUpload() {
var ctlFileUpload = document.getElementById("ctlFileUpload");
ctlFileUpload.click();
}

//These functions are used to change the image when the user points on the image.
function FileUploadHighlightOn(element)
{
element.src = "http://bytes.com/images/BrowseOver.jpg";
}

function FileUploadHighlightOff(element)
{
element.src = "http://bytes.com/images/Browse.jpg";
}

function FileUploadClick(element) {
element.src = "http://bytes.com/images/BrowseClick.jpg";
}

</script>

UploadButton.css

.UploadButton
{ font-size: 8pt;
font-family: Arial;
}

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 132px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

I used different images for the image button, onmouseover, out and click. So that it appears live for the user, and not like an image......

I think this will help you.

Thanks
Bharath Reddy VasiReddy

jun.ying25 wrote:

For component ice:inputFile,
Who can help me, how to define the "button value" for Buttons "Browse…” and “Upload” ?
The default is “Browse…” and “Upload”, I want to change to “Browse file” and “Upload file.”