Vaadin focus Grid inside Panel - focus

I have two Grids (both in its own panel), and want to navigate between them using the Tab Key.
To do that I'm trying to focus the Grid inside a Panel (If Tab is pressed, the Grid should gain focus, so I can use the up/Down key to select Items).
Vaadin doesn't provide a .focus() method for Grid. Is there any solution so I can focus the Grid anyway?

Here is small example which shows working scenario with
Tab key pressed
Arrows down/up should points to a row (exactly in Valo this is presented as contour around one cell)
Space makes row selected (if Grid has enabled selection!) - row should be highlighted.
Code example:
#Theme ( ValoTheme.THEME_NAME )
public class MyUI extends UI {
public class A {
String a;
String b;
A(String a, String b) {
this.a = a;
this.b = b;
}
// getters & setters
}
#Override
protected void init ( VaadinRequest vaadinRequest )
{
Grid g = new Grid();
List<A> list = Arrays.asList(new A("a", "b"), new A("aa", "bb"),
new A("aaa", "bbb"));
BeanItemContainer<A> items = new BeanItemContainer<>(A.class, list);
g.setContainerDataSource(items);
Panel p = new Panel(g);
setContent(p);
}
}
Tested: Vaadin 7.5, Java 8, Tomcat 8.
You could try to use:
setFocusedComponent(p);
after setContent(p). This should exactly tells Vaadin to make panel focused. But you still must press tab - once or more (depending on rest of components, which you placed on screen).
But make sure:
Grid is selectable.
Maybe you should press Tab more than once.
Depending on Theme there could be different effects of getting focus (or even select state). It is also possible that you use some predefined project which has blocked grid css to make it lighter. So check if you can highlight one row by click on it.
Without more information I can't help more.

The OP write in an edit:
Solved the problem using Javascript/Jquery. Added this to my Panel that contains the Grid:
public class FileTable extends Panel
{
String id;
public FileTable(String id)
{
this.id=id;
Grid table = new Grid();
initGrid();
fileTable.setId(id);
}
public void focus()
{
JavaScript.getCurrent().execute("$(\"#"+id+" table:first td:first\").click();");
}
}

Related

Since update from vaadin 22 to 23 appending a element to the shadow root breaks the component

Original Question
I want to add a loading indicator overlay to the grid.
I tried to append the overlay element to the shadow root by using the attachShadow method.
The following code works well in vaadin 22.
final Grid<String> grid = new Grid<>();
final Element element = new Element("div");
element.setText("Hello");
add(grid);
grid.getElement().attachShadow().appendChild(element);
When I execute the same code in vaadin 23 it breaks the component.
Alternative solution
I tried to extend the grid component on the client side with the following typescript code
import { Grid } from "#vaadin/grid";
export class CustomGrid extends Grid {
static get is() {
return 'custom-grid';
}
}
customElements.define(CustomGrid.is, CustomGrid);
To use my custom grid in flow, I have extended the flow Grid class and added my custom typescript code with the #JsModule annotation.
#Tag("custom-grid")
#JsModule("./src/custom-grid/custom-grid.ts")
public class CustomGrid<T> extends Grid<T> {
}
I used the following code to add my custom grid to the layout
final CustomGrid<String> grid = new CustomGrid<>();
grid.addColumn(s -> s).setHeader("Hello");
grid.setItems(List.of("Item 1", "Item 2", "Item 3"));
add(grid);
The problem
The items are not visible. There are just blank rows.
ps: extending other components like buttons or comboboxes works pretty well.
I faced the same issue with my own customization of Vaadin's Grid.
I did exactly the same as you - and it worked with v22 but it does not with v23.
Although it's a dirty hack, it works by doing the follwing:
final Grid<String> grid = new Grid<>();
add(grid);
grid.getElement().executeJs("elem = document.createElement(\"div\"); elem.innerHTML=\"Hallo\"; this.shadowRoot.appendChild(elem);");

Vaadin 8 using an image as a button. Doesn't fire click event

I'm building a Vaadin 8 app ( first one for me ). I am using the designer to generate the UI. I've added several buttons to the dashboard which should fire a function when clicked. For some reason nothing fires when the image is clicked. Below is all the code that is involved. Can anyone see what I'm doing wrong?
This is the code from the .html file:
<vaadin-horizontal-layout responsive width-full margin>
**<vaadin-image icon="theme://images/properties.png" style-name="my-image-button" responsive alt="" _id="imagePropertyInfo"></vaadin-image>**
<vaadin-image icon="theme://images/occupants.png" responsive alt="" _id="imageOccupants"></vaadin-image>
<vaadin-image icon="theme://images/vendors.png" responsive alt="" _id="imageVendors"></vaadin-image>
</vaadin-horizontal-layout>
Here is the scss
.my-image-button
{
cursor: pointer;
}
Here is the code from the Dashboard UI
public DashboardHomeView( OnCallUI onCallUI )
{
this.onCallUI = onCallUI;
// Make it disabled until a property is selected
**imagePropertyInfo.setEnabled( false );
imagePropertyInfo.setStyleName( "my-image-button" );**
fetchPropertyBasicInfo();
}
protected void fetchPropertyBasicInfo()
{
List<PropertyProfileBasic> listOfPropertyProfiles = new ArrayList<PropertyProfileBasic>( OnCallUI.myStarService.fetchAllPropertyProfileBasicInformation() );
comboBoxGeneric.setCaption( "Select a Property" );
comboBoxGeneric.setItemCaptionGenerator( aProperty -> aProperty.toString() );
comboBoxGeneric.setItems( listOfPropertyProfiles );
comboBoxGeneric.addValueChangeListener( event -> fetchOccupantBasicInfo( event ) );
comboBoxGeneric.focus();
}
protected void fetchOccupantBasicInfo( ValueChangeEvent<PropertyProfileBasic> event )
{
// Fetch all the occupants for the selected property
if( event.getValue().getPropertyNo() != null )
{
// Fetch a list of occupant basic info for the selected property
List<OccupantProfileBasic> listOfOccupantProfiles = new ArrayList<OccupantProfileBasic>( OnCallUI.myStarService.fetchOccupantProfileBasicByPropertyNo( event.getValue().getPropertyNo() ) );
// Clear the existing grid et al
gridContainer.removeAllComponents();
// Add the occupant grid
occupantGrid = new OccupantProfileBasicGrid( listOfOccupantProfiles );
// Show the grid
gridContainer.addComponents( new Label( "Occupants" ), occupantGrid );
// Set the dashboard buttons to enabled now a property is selected
**imagePropertyInfo.setEnabled( true );
// Add the property info button
imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );**
}
}
protected void fetchPropertyInformation()
{
Notification.show( "Yo!", "You clicked!", Notification.Type.HUMANIZED_MESSAGE );
}
I assume you are using GridLayout. I am recommending another approach. Use Button, and set the button style to be borderless (apparently you want something like that. The icon of the button can be image from your theme, using ThemeResource. "Pseudo code" is something like this:
ThemeResource icon = new ThemeResource("/images/properties.png");
Button imagePropertyInfo = new Button(icon);
imagePropertyInfo.setStyleName(ValoTheme.BUTTON_BORDERLESS);
imagePropertyInfo.addClickListener( e -> fetchPropertyInformation() );
Note also, JavaDoc of Image component says.
"public Registration addClickListener(MouseEvents.ClickListener listener)
Add a click listener to the component. The listener is called whenever the user clicks inside the component. Depending on the content the event may be blocked and in that case no event is fired."
I think it does not like your way of setting image with theme, without using Resource.
If you want to remove the focus highlight of the button, it should be possible via this CSS rule:
.v-button-link:after {
content: none;
}
Also it is worth of mentioning that Image is not Focusable, while Button is. This means that even that Image can have click listener, it is not reached by keyboard navigation, Button is Focusable and is reached by tabbing etc. So using Button instead of Image makes your application more accessible.

Place .net control on the sheet

I am using spreadsheetgear, and I want to place the combobox (ComponentOne) into 1 cell. I want that when the user go to this cell, this combobox will activate and show the list to user. After user chose item on the list, it will place this item into the cell value and hide the combobox.
How to do it in Spreadsheetgear.
Thanks,
Doit
I am not familiar with ComponentOne controls, so cannot really speak for that portion of your question. However, regarding a more general approach to embedding custom controls onto a SpreadsheetGear WorkbookView UI control, this is possible by sub-classing the UIManager class, which would allow you to intercept the creation of existing shapes on a worksheet and replace them with your own custom controls.
Below is a simple example that demonstrates this with the Windows Forms WorkbookView control and a sub-class of SpreadsheetGear.Windows.Forms.UIManager. This example just replaces a rectangle AutoShape with a button. You could modify it to show a ComponentOne CheckBox instead.
Note that the UIManager.CreateCustomControl(...) method gets called anytime a shape is scrolled into view / made visible on the WorkbookView. Also note that that your custom control will be disposed of every time it is scrolled out of view or otherwise made invisible. Please see the documentation for more details on this API.
Another important point about shapes and worksheets in general--shapes are not embedded inside a cell. Instead they hover over cells. So there will be no explicit "link" between a given shape and a given cell. The closest you could come to making such an association is with the IShape.TopLeftCell or BottomRightCell properties, which will provide the ranges for which this shape's respective edges reside over. The IShape interface contains a number of other API that you might find useful in your use-case. For instance, you can hide a shape by setting the IShape.Visible property to false.
using System;
using System.Windows.Forms;
using SpreadsheetGear;
using SpreadsheetGear.Shapes;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
// Create the UIManager replacement.
new MyUIManager(workbookView1.ActiveWorkbookSet);
}
private void buttonRunSample_Click(object sender, EventArgs e)
{
// NOTE: Must acquire a workbook set lock.
workbookView1.GetLock();
try
{
// Get a reference to the active worksheet and window information.
IWorksheetWindowInfo windowInfo = workbookView1.ActiveWorksheetWindowInfo;
IWorksheet worksheet = workbookView1.ActiveWorksheet;
// Get a reference to a cell.
IRange cell = workbookView1.ActiveWorksheet.Cells["B2"];
// Add a placeholder shape to the worksheet's shape collection.
// This shape will be replaced with a custom control.
double left = windowInfo.ColumnToPoints(cell.Column) + 5;
double top = windowInfo.RowToPoints(cell.Row) + 5;
double width = 100;
double height = 30;
IShape shape = worksheet.Shapes.AddShape(AutoShapeType.Rectangle, left, top, width, height);
// Set the name of the shape for identification purposes.
shape.Name = "MyCustomControl";
}
finally
{
// NOTE: Must release the workbook set lock.
workbookView1.ReleaseLock();
}
buttonRunSample.Enabled = false;
}
// UIManager replacement class.
private class MyUIManager : SpreadsheetGear.Windows.Forms.UIManager
{
private Button _customControl;
public MyUIManager(IWorkbookSet workbookSet)
: base(workbookSet)
{
_customControl = null;
}
// Override to substitute a custom control for any existing shape in the worksheet.
// This method is called when a control is first displayed within the WorkbookView.
public override System.Windows.Forms.Control CreateCustomControl(IShape shape)
{
// If the shape name matches...
if (String.Equals(shape.Name, "MyCustomControl"))
{
// Verify that a control does not already exist.
System.Diagnostics.Debug.Assert(_customControl == null);
// Create a custom control and set various properties.
_customControl = new Button();
_customControl.Text = "My Custom Button";
// Add a Click event handler.
_customControl.Click += new EventHandler(CustomControl_Click);
// Add an event handler so that we know when the control
// has been disposed. The control will be disposed when
// it is no longer in the viewable area of the WorkbookView.
_customControl.Disposed += new EventHandler(CustomControl_Disposed);
return _customControl;
}
return base.CreateCustomControl(shape);
}
private void CustomControl_Click(object sender, EventArgs e)
{
MessageBox.Show("Custom Control was Clicked!");
}
private void CustomControl_Disposed(object sender, EventArgs e)
{
// Add any cleanup code here...
// Set the custom control reference to null.
_customControl = null;
}
}
}

Horizontally centering a popup window in Vaadin

I have added a popup window to my main UI as follows:
Window component = new Window();
UI.getCurrent().addWindow(component);
Now, I want my popup to be centered horizontally and e.g. 40 pixels from the top of the screen. As far as I can see Vaadin has 4 methods for positioning my window.
component.center()
component.setPosition(x, y)
component.setPositionX(x)
component.setPositionY(y)
None of these are really what I want. I was hoping at first that setPositionY might help me. This does allow me to get the right distance from the top, but the x-position is now set to 0, where I wanted it to be centered.
The setPosition might have helped if I was able to calculate what the x-position should be, but this would require me to know the width of the component in pixels, but component.getWidth just tells me 100%.
Next I tried to use CSS styling on the component, writing and explicit css rule and adding it to the component with addStyleName. It seems though that Vaadin overrides whatever I wrote in my css with its own defaults...
Any ideas how to get my Window component positioned correctly?
I used the methods getBrowserWindowWidth() and getBrowserWindowHeight() from the com.vaadin.server.Page class for this.
I centered my "log" window horizontally in the lower part of the browser window with
myWindow.setHeight("30%");
myWindow.setWidth("96%");
myWindow.setPosition(
(int) (Page.getCurrent().getBrowserWindowWidth() * 0.02),
(int) (Page.getCurrent().getBrowserWindowHeight() * 0.65)
);
Solution 1: Use SizeReporter
Indeed, setPositionY() will reset the window's centered property to false. As the width of your pop-up and that of your browser window are not know before they appear on the screen, the only way I know to get those values is to use the SizeReporter add-on. Its use is quite straightforward:
public class MyUI extends UI {
private Window popUp;
private SizeReporter popUpSizeReporter;
private SizeReporter windowSizeReporter;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
addWindow(popUp);
popUpSizeReporter = new SizeReporter(popUp);
popUpSizeReporter.addResizeListenerOnce(this::centerPopUp);
windowSizeReporter = new SizeReporter(this);
windowSizeReporter.addResizeListenerOnce(this::centerPopUp);
}
private void centerPopUp(ComponentResizeEvent event) {
int popUpWidth = popUpSizeReporter.getWidth();
int windowWidth = windowSizeReporter.getWidth();
if (popUpWidth == -1 || windowWidth == -1) {
return;
}
popUp.setPositionX((windowWidth - popUpWidth) / 2);
}
}
This piece of code will be okay as long as you don't resize the pop-up. If you do, it will not be automatically recentered. If you replace addResizeListenerOnce() by addResizeListener() then it will automatically recenter the pop-up but you'll get some "UI glitches" as the add-on sends resize events almost continually while you're resizing your pop-up...
You could try to do it using CSS, but I personally avoid CSS as much as I can with Vaadin :).
You'll need to recompile the widgetset after you've added the add-on as a dependency.
Solution 2: Use com.vaadin.ui.JavaScript
I won't vouch for the portability of this solution but I guess it will work on most modern browsers.
public class MyUI extends UI {
private Window popUp;
#Override
protected void init(VaadinRequest request) {
Button button = new Button("Content button");
VerticalLayout layout = new VerticalLayout(button);
layout.setMargin(true);
popUp = new Window("Pop-up", layout);
popUp.setPositionY(40);
popUp.addStyleName("window-center");
addWindow(popUp);
// Add a JS function that can be called from the client.
JavaScript.getCurrent().addFunction("centerWindow", args -> {
popUp.setPositionX((int) ((args.getNumber(1) - args.getNumber(0)) / 2));
});
// Execute the function now. In real code you might want to execute the function just after the window is displayed, probably in your enter() method.
JavaScript.getCurrent().execute("centerWindow(document.getElementsByClassName('window-center')[0].offsetWidth, window.innerWidth)");
}
}

How to create a custom dialog

I need to create yes/no confirmation dialog in a foreign language. I think I need to create my own class by extending Dialog ?
Thanks
this should do the trick. My apologies to any Swedish chefs watching.
int answer = Dialog.ask("Gersh gurndy morn-dee burn-dee, burn-dee, flip-flip-flip-flip-flip-flip-flip-flip-flip?", new String[] {"Hokey dokey","Bork bork bork"}, new int[] {Dialog.OK,Dialog.CANCEL}, Dialog.CANCEL);
Edits:
The above explained better:
public final static int NEGATIVE = 0;
public final static int AFIRMATIVE = 1;
public final static int DEFAULT = NEGATIVE;
int answer = Dialog.ask("question?", new String[] {"afirmative button label", "negative button label"}, new int[] {AFIRMATIVE,NEGATIVE}, DEFAULT);
As you can see from the above it is possible to change all the text (language) values on a Dialog just by using this method so you shouldn't need a custom class to create a Dialog in another language.
It's even simpler if you use the standard BB localizing approach the simpler method (Dialog.ask(res.getString(SOMEQUESTION)) will automatically have it's afirmative and negative buttons adjusted for the language set in the phones options. You will only need to add the question as a string resource.
You can find a list of valid methods and constructors here:
http://www.blackberry.com/developers/docs/5.0.0api/net/rim/device/api/ui/component/Dialog.html
More Edits below:
I thought my above answer was what you were after but if you do need to further customize the dialog in a new class you may do it like this:
public class MyDialogScreen extends MainScreen implements LocalResource {
private int exitState;
...
protected void sublayout( int width, int height ) {
setExtent( dialogWidth, dialogHeight );
setPosition( XPOS, YPOS );
layoutDelegate( dialogWidth, dialogHeight );
}
// do some stuff and assign exitState appropriately
// e.g. a button that sets exitState = 1 then pops this screen
// another button that sets exitState = 2 then pops this screen
...
public int getExitState()
{
return this.exitState;
}
In the above I've created a new screen and I have overridden the sublayout method to specify a custom width, height and xy positions in layoutDelegate. When you push this screen you will see it as a dialog like box above the previous screen on the stack at the XY positions you specified.
Make sure to use pushModal. This will allow you to access the getExitState method after the screen has been popped from the display stack.
E.g
MyDialogScreen dialog = new MyDialogScreen();
UiApplication.getUiApplication().pushModalScreen(dialog);
int result = dialog.getExitState();
Cheers
Ray

Resources