Vaadin 8 Download File On Button Click
Brigitta Reik
apparently this should be very intuitive but I can't manage to make it work, when a button is clicked I should change its style, if clicked again, return the style back to what it was. My guess would be:
when using chrome inspector I see the active class added, but the button disappears. If I click on the position where the button was, I see the "active" class removed (and added if clicking again..). The button re-appears only when I click outside the area were the button was.
I've found workaround with styling :active and :focus too. It is working, but there is no real reason why it should. It should work as I intended originally I think, by adding a class, the button is rendered with that style, removing the class, style goes back to original style.
I think the problem is in the way I've build the page with the components rather than in the onClick action itself.. I'm super curious to find out what is going wrong:) The button is part of a component, which is part of other components, in particular the component with the button is represented by the following class:
I have page with filter form, a few buttons and big grid. I can search data, based on filter form, and show data in grid. Searching data provides thread, it may take about secs to mins. When I want to click button to stop searching (basically to stop thread), the action is performed always after the thread is done. But I need to perform click event while thread is working. Does somebody know how to do it? :)
The Button component is normally used for initiating some action,such as finalizing input in forms. When the user clicks a button, aButton.ClickEvent is fired, which can be handled by adding a click listenerusing either the onClick() or the addClickListener() method.
This seems to be a Vaadin bug. The cases where it doesn't work are when the buttons are in a Dialog that gets closed and then reopened. When you call setDisableOnClick(true), they're using a hack to add the event listener from the server side:
and this part of code is written at the loading time of my view. But the method getExportStream method not getting executed(Tried to Put debug in eclipse but it never executed) neither on view load nor in button click event.
Notice in the example here that the text in the Address cells is wrapped. If you click on the gray icon at the top right corner of the example, it opens the table in a separate browser tab. When you do that, can see the addresses on one line. You can also resize that window to see how it wraps and unwraps the text.
Instead of hiding columns as in the earlier example, in the example here the user can resize a truncated column to be able to read it, fully. Try doing that. Hover your mouse pointer over the space on the header row between the Street and City columns, until the mouse pointer changes to a resizing tool. Then, while holding the left mouse button, pull on the right edge of the Street column until you can see all of the street addresses.
The Grid can be sorted by multiple columns if multi-sort mode is enabled. When it is enabled, clicking a column header adds that column as a sort criterion instead of replacing the current sort column. A separate multi-sort on shift-click mode combines the two by multi-sorting only when the column header is clicked while holding the Shift key. The order in which multi-sort criteria (i.e., the columns selected) are evaluated is determined by the multi-sort priority setting.
In the example below, bold font weight is applied to the Rating column with a font-weight-bold part name, and the rows are colored red and green, based on their rating, with low-rating and high-rating part names, respectively. The styling itself is applied in a stylesheet with vaadin-grid::part() selectors (e.g., vaadin-grid::part(high-rating)).
Many of the explanations and examples above alluded to giving the focus to rows and cells. Cells can be focused by clicking on a cell, or with the keyboard. The following keyboard shortcuts are available with Grid:
The cell focus event can be used to be notified when the user changes focus between cells. By default, the focus outline is only visible when using keyboard navigation. For illustrative purposes, the example below also uses custom styles to show the focus outline when clicking on cells. Try clicking on a cell. Notice how the cell is highlighted and notice the information shown at the bottom, the information provided about the event.
Icon-only buttons should be primarily used for extremely common recurring actions with highly standardized, universally understood icons (for example: a cross for close), and for actions that are repeated (for example: in lists and tables).
Buttons representing actions that are not currently available to the user should be either hidden or disabled.A disabled button is rendered as "dimmed", and is excluded from the focus order (such as when interactive UI elements are focused using the tab key).
As an alternative to hiding or disabling buttons, unavailable actions can instead be configured to show an error message when the button is clicked (using a Notification or an adjacent inline text element).This approach is the most accessible option, but may cause frustration in users who expect unavailable actions to be somehow distinguished from available actions.
This can be especially useful for actions that take a bit longer to perform.Not only does this avoid the need for special handling of clicks while the action is in progress, but it also communicates to the user that the action was successfully received and is being processed.
Button groups representing options, such as the buttons of a Confirm Dialog, should state what each option represents, such as "Save changes" instead of "Yes", as the latter forces the user to read the question being asked, and increases the risk of selecting the wrong option.
The aria-label attribute can be used to provide a separate label for accessibility technologies (AT) like screen readers.This is important, for example, for icon-only buttons that lack a visible label.
Buttons with regular, visible labels can also benefit from separate aria-label s to provide more context that may otherwise be difficult for the AT user to perceive. In the example below, the buttons aria-label specify which email address will be removed.
In lists of selectable items (such as in a Grid) that provide actions applicable to the selected item, buttons for selection-specific actions should be placed separately from "global" non-selection-specific actions, preferably below the list of selectable items.In the example below, the global "Add user" action is separated from the selection-specific actions below the Grid.
We replaced it with a GridContextMenu and the grid is loading much faster now. But the users will miss the menu bar button to invoke the menu by clicking on it. I'm trying to find a way to trigger the opening of Context Menu from a native button render column.
So what happens in a code? At first we are creating download button and registering onClick event. Next we are setting id of a component which will be generated in html. But than something strange happens. We are removing onClick event that was just triggered. After that we tell FileDownloader which class should be used to generate file when button will be clicked.
As I have already read earlier, Vaadin uses mechanism called Extensions, to provide functionalities as downloading a file. So to return user a file, we have to register appropriate extension and provide it our resource returning a file. As we know which file we are going to generate only when button is finally is clicked, we have to create our resource in onClick method. But it still will not trigger downloading. We have to manually click button one more time.
Without thinking long I have changed Javascript call to Java one but button somehow stopped working after that simple change. Interesting indeed. What could be wrong here? After a while I found answer on official forum. It turns out that this behaviour is intended by design. Thanks to this we have finally found out why do we need to call Javascript method.
Luckily for my, all those fields were available to me and existed in the same scope as button. But what if those values would be distributed into more components? What if there were more of them than 2 or 3?
Although I don't like this solution it works. It has to do with how the download works and some restrictions by the browser. I'm sure there's a better solution but right now I simulate the first click with Javascript. If someone can find the correct answer then please post it and I'll change the selected answer, otherwise this is the only solution I found (posted in the Vaadin forums).
The solution to the second click requirement for downloading the file is the button's listener. Like in my case, i have the click listener of button in which FileDownloader extends button. But it should be without listener only as FileDownloader has its own mechanism to handle the listener actions.
Here, the first button click gets handled by the clickListener and only in that, fileDownloader extends download button which holds all the functionality of downloading the file and this functionality occurs only when click event goes through the FileDownloader. so for the next time click goes through the FileDownloader as now its extending the button.
I'm trying to identify when the view change is triggered by an user clicking the browser "back" button (as opossite as an user clicking a link to enter that view on the application), but I've been unable to get where (if it is possible) get this information.
EDIT: Huh, maybe I could add a custom parameter in every, single, call to the ViewChange so I can "mark" the "normal clicks" and identify "go back/go forward" by the absence of it, but it seems like a dirty, ugly trick...
I found a way to identify the "user has pressed the back button" on Vaadin, as it seems the framework manages the location change through the Page.updateLocation(String location, boolean fireEvents) function. I haven't, though, being able to modify the location parameter (This could be either due Vaadin's own architecture or due my own application specifics), so I've ended up using the function "changeVariables" on the UI class (on a inherited, own, UI class) to send a new ViewChangedEvent.
dca57bae1f