customizing the Upload component

dear all,
I’m trying to build an upload view with a big Upload component in the middle (image in attachments)
I used the upload component Vaadin has but I wasn’t able to make it look as I wanted. I wanna have a huge textfield with a small “Browse” button in the bottom left corner and a big “Upload” button in the bottom right corner.


What i wanna do:


Align the upload panel in the middle of the tab content area.
(for some reason the setSizeFull() on the UploadPanel component doesn’t expand it to the full tab content area)


After that Iwanna add the upload components to the panel and allign them accordingly.

I know my way around CSS but I’m not an expert so I’d appreciate any advice you could throw my way

Here some code from the UploadTab Class (vaadin 6.8)

public class UploadTab extends VerticalLayout 
{

    private Label status = new Label("Please select a file to upload");
    private ProgressIndicator pi = new ProgressIndicator();
    private HorizontalLayout progressLayout = new HorizontalLayout();
    private Upload upload = new Upload(null, counter);
    private VerticalLayout uploadPanel = new VerticalLayout();

    public UploadTab() 
    {
        setSpacing(true);

        uploadPanel.addComponent(status);
        uploadPanel.addComponent(upload);
        uploadPanel.addComponent(progressLayout);

        addComponent(uploadPanel);
        uploadPanel.setWidth("800px");
        uploadPanel.setHeight("800px");
        setComponentAlignment(uploadPanel, Alignment.MIDDLE_CENTER);

        upload.setButtonCaption("Upload");
        progressLayout.setSpacing(true);
        progressLayout.setVisible(false);
        progressLayout.setMargin(true);
        progressLayout.addComponent(pi);
        progressLayout.setComponentAlignment(pi, Alignment.MIDDLE_LEFT);\
...

15930.jpg

It is possible to create that kind of a layout, but you need to use CSS for most of it. In Vaadin, you should add proper style names to your component so that they are easily located in CSS:

upload.addStyleName("bigupload");

After which you can do:

.v-upload-bigupload {
   /* your styles here */
}

you need to change at least the positioning of the browse and upload buttons (display: block; might do it, might not), and change the size of the input element.

thanks Thomas for the quick response. I tried styling the upload components by adding a style name but I still can’t get to an element seperatley. I created a .css file in the “VAADIN/themes/app/style.css” then I added a few styles to it (also added the
@import url(…/chameleon/styles.css
); at the beginning of the css)

.v-upload-uploadStyle .v-button{  <-- I also tried without the .v-button but still nothing-->
        width: 150px;
        font-size:25px;
        background: #353637;
}

to make things easier I thought I’ll start with a less comlicated component. So I created a HorizantalLayout and added some buttons in it for styling (see attachtments).

// Initialize all the components
        HorizontalLayout interactionRow = new HorizontalLayout();        
        VerticalLayout mainLayout = new VerticalLayout();
        filterButton = new Button("Add Filter");
        clearButton = new Button("Clear Filters");
        table = new Table();
        description = new Label("");
        filterBox = new TextField("Filter");
        excelExportButton = new Button("Export");
        
        // Add components to interatcionRow
        interactionRow.addComponent(filterBox);
        interactionRow.addComponent(columnSelect);
        interactionRow.addComponent(filterButton);
        interactionRow.addComponent(clearButton);
        interactionRow.addComponent(excelExportButton);
        excelExportButton.addStyleName("exportBtn");
        interactionRow.setSpacing(true);
        interactionRow.setMargin(true);  
        interactionRow.setSizeFull();
        
        // Add rest of components to mainLayout
        mainLayout.addComponent(interactionRow);
        mainLayout.addComponent(table);
        table.setWidth(100, UNITS_PERCENTAGE); 

When I try customizing any component via css I somehow can’t get a hold of it. For the previous code I’ve addded this to my css sheet. (You could also view a screenshot of the CSS when I select the Export Button using Firebug)

.v-horizontal-exportBtn {
        width: 150px;
        font-size:25px;
        display:inline-block;
        background: #353637;
}

15933.jpg
15934.png

The filename should be styles.css, not style.css.

the correct CSS to access the button in your code would be either
.v-horizontallayout .v-button-exportBtn {
.v-horizontallayout .exportBtn { or
.exportBtn {
depending on what other styles you use. I reccomend the first one.

thanks Thomas! It works
The main issue was with my styles.css path. I was using the default ‘runo’ theme which doesn’t create anything in the themes directory of VAADIN. So instead I created my own theme and styles sheet then I referenced those in my code

setTheme("myTheme"); with the following path

\WebContent\VAADIN\themes\myTheme and created an “img” folder (for icons) and a styles sheet with

@import url(../runo/styles.css); inside it, that way I get the runo theme by default.

now that i got the css to work I’m having a minor issue when styling the Upload component. After I upload a file the position of the upload button and text box is shifted to the left (I’m using IE8) although with the other browsers (current versions of Chrome and FF) it jumps… any ideas what causing that? I know IE8 doesn’t suppport css3 but I have to use it as a requirememnt.

.v-upload-uploadStyle .v-button-wrap
{
    position: relative;
    top: 60px;
    right:150px;
    width: 100px;
    
    -moz-box-shadow: 0px 10px 14px -7px #276873;
    -webkit-box-shadow: 0px 10px 14px -7px #276873;
    box-shadow: 0px 10px 14px -7px #276873;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
    background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
    background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
    background-color:#599bb3;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:20px;
    font-weight:bold;
    padding:13px 32px;
    text-decoration:none;
    text-shadow:0px 1px 0px #3d768a;
}

.v-upload-uploadStyle .v-button-wrap:hover
{
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
    background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
    background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
    background-color:#408c99;
}

.v-upload-uploadStyle .v-button-wrap:active
{
    background:#80CCE6;
}

.v-upload-uploadStyle .gwt-FileUpload
{
    position: static;
    top: -8px;
    right: 50px;

    background: white;
    border: 1px double #DDD;
    border-radius: 5px;
    box-shadow: 0 0 5px #333;
    color: #666;
    outline: none;
    height:35px;
    width: 500px;
}

Im, sorry, but I didn’t really get what you are trying to do; what do you mean with shift vs jump? do you mean that the color changes suddenly instead of being a gradient?

thak you Thomas, it was actually just a simple CSS manipulation

Is it possible to have the upload look like an icon only using VaadinIcons instead of an image?