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.
Related
I created a custom dialog with my own panes and controls in it. But the dialog has a white border default which I want to remove. Here is an example with a single image:
I tried using ScenicView but couldn't find a way to catch the dialog layer and modify it:
public class MainView extends View {
Image img = new Image("https://i.stack.imgur.com/7bI1Y.jpg", 300, 500, true, true);
public MainView(String name) {
super(name);
Button b = new Button("Pop");
b.setOnAction(e -> {
Dialog<Void> dialog = new Dialog<>();
dialog.setOnShown(e2 -> {
Parent parent = getParent();
Pane p = (Pane) parent.lookup(".dialog");
p.setPadding(new Insets(0));
});
dialog.setGraphic(new ImageView(img));
dialog.showAndWait();
});
setCenter(b);
}
}
Best i got was removing the flowpane child to remove some of the lower part
dialog.setOnShown(e2 -> {
Parent parent = getParent();
Pane p = (Pane) parent.lookup(".dialog");
p.getChildren().removeIf(c -> (c instanceof FlowPane));
System.out.println(p.getChildren());
});
Removing the VBox moves the dialog which i don't want to do and changing its padding also dose nothing.
As you can see with ScenicView, the Dialog has the dialog style class.
One easy way to modify the dialog style is via css. Just add a css file to your view, and set:
.dialog {
-fx-background-color: transparent;
}
That will set the background transparent, instead of the default white color.
If you want to remove the borders instead, then you can play with padding. As you can also see with ScenicView, the dialog has a VBox with style class container for the content in the center, and the flow pane for the buttons at the bottom, with style class dialog-button-bar.
Before anything, just use the setContent method to add the image instead of the setGraphic one:
dialog.setContent(new ImageView(img));
And this will be required to remove all the borders, and let the image take the whole dialog:
.dialog,
.dialog > .container,
.dialog > .dialog-button-bar {
-fx-padding: 0;
}
When I try to load context menu in here map, it shows error in firebug as "ReferenceError: nokia is not defined"
What's it that I'm doing wrong.
Imported js files:
The code that creates the bug is:
createContextMenu(map);
function createContextMenu(map) {
contextMenu = new nokia.maps.map.component.ContextMenu();
/* Add Custom Context Menu Items */
//This adds three items with a menu separator
menuItems1 = function (contextMenuEvent, group) {
group.addEntry("Menu Item 1",
function (activationEvent) {alert("Menu Item 1 clicked"); });
group.addEntry("Menu Item 2",
function (activationEvent) {alert("Menu Item 2 clicked"); });
group.addEntry("Menu Item 3",
function (activationEvent) {alert("Menu Item 3 clicked"); });
};
contextMenu.addHandler(menuItems1);
map.components.add(contextMenu);
}
Currently working on jquery 1.9.1
and
Firefox 48
HERE Javascript API have moved to the namspace "H" with version 3.X onward hence "nokia." would not work any more. With respect to context menu functionality, it can achieved by adding an event listener on the map
Example: https://developer.here.com/documentation/examples/maps-js/events/context-menu
/**
* Adds context menus for the map and the created objects.
* Context menu items can be different depending on the target.
* That is why in this context menu on the map shows default items as well as
* the "Add circle", whereas context menu on the circle itself shows the "Remove circle".
*
* #param {H.Map} map Reference to initialized map object
*/
function addContextMenus(map) {
// First we need to subscribe to the "contextmenu" event on the map
map.addEventListener('contextmenu', function (e) {
// As we already handle contextmenu event callback on circle object,
// we don't do anything if target is different than the map.
if (e.target !== map) {
return;
}
// "contextmenu" event might be triggered not only by a pointer,
// but a keyboard button as well. That's why ContextMenuEvent
// doesn't have a "currentPointer" property.
// Instead it has "viewportX" and "viewportY" properties
// for the associates position.
// Get geo coordinates from the screen coordinates.
var coord = map.screenToGeo(e.viewportX, e.viewportY);
// In order to add menu items, you have to push them to the "items"
// property of the event object. That has to be done synchronously, otherwise
// the ui component will not contain them. However you can change the menu entry
// text asynchronously.
e.items.push(
// Create a menu item, that has only a label,
// which displays the current coordinates.
new H.util.ContextItem({
label: [
Math.abs(coord.lat.toFixed(4)) + ((coord.lat > 0) ? 'N' : 'S'),
Math.abs(coord.lng.toFixed(4)) + ((coord.lng > 0) ? 'E' : 'W')
].join(' ')
}),
// Create an item, that will change the map center when clicking on it.
new H.util.ContextItem({
label: 'Center map here',
callback: function() {
map.setCenter(coord, true);
}
}),
// It is possible to add a seperator between items in order to logically group them.
H.util.ContextItem.SEPARATOR,
// This menu item will add a new circle to the map
new H.util.ContextItem({
label: 'Add circle',
callback: addCircle.bind(map, coord)
})
);
});
}
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();");
}
}
I want to get mouse click screen coordinates (by clicking outside AIR application window)
I tried the following, but i don't get anything, it seem like the ScreenMouseEvent.CLICK event not dispatched.
public function Main():void
{
if (NativeApplication.supportsSystemTrayIcon)//testExpression return true
{
SystemTrayIcon(NativeApplication.nativeApplication.icon).
addEventListener(ScreenMouseEvent.CLICK, click);
}
}
private function click(e:ScreenMouseEvent):void
{
trace(e.screenX);//nothing displayed :(
}
The ScreenMouseEvent is dispatched by the SystemTrayIcon only (Windows/Linux only). And the SystemTrayIcon instance (DockIcon for MacOs) is retrieved from NativeApplication.nativeApplication.icon.
So this is where you should attach your event listener, after specifying the tray icon graphic:
var sti:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
// Specifying an icon is obligatory on Windows - MacOs has a default icon
sti.bitmaps = [new IconAsset()]; // IconAsset = Embedded picture
sti.addEventListener(ScreenMouseEvent.CLICK, mouseClick);
Note that the resultant screenX and screenY properties of ScreenMouseEvent are confined within the icon area in the tray and not the whole desktop screen (Not surprisingly, since this is where you added the event in the first place).
Does any one know about how to create hide and collapse content using vaadin api.
All components inherit the setVisible() method which can trigger visibility on and off. This means all components and component containers at least. This happens without animations, though.
If you like some animations, you have to rely to add-ons, e.g. Henrik Paul's Drawer does some kind of hide and show animations.
Is this what you were thinking about?
I achieved it by using TabSheet functionality of vaadin.I created two tabs '+' and '-' whenever user clicks on '-' Tab It am setting the TabSheet height to 100% and whenever the user clicks on the '+' Tab I am setting the height of the TabSheet to 20% (visible height of the tabsheet) so whatever the content in the TabSheet will be hided in user perspective.
// Create an empty tab sheet.
TabSheet tabsheet = new TabSheet();
// Defining Vertical Layout for Tab 1 content
final VerticalLayout verLayout1 = new VerticalLayout();
// Tab 2 content
VerticalLayout verLayout2 = new VerticalLayout();
verLayout2.setSizeUndefined();
verLayout2.setMargin(true);
tabsheet.addTab(verLayout1, "+", null);
tabsheet.addTab(verLayout2, "-", null);
tabsheet.addListener(listenerForTab());
/**
* Method to handle tab sheet hide/show event
*
* #return TabSheet.SelectedTabChangeListener
*/
public TabSheet.SelectedTabChangeListener listenerForTab() {
_logger.info("Entering in to tabChangeListener of WizardUtil");
// Instance of TabSheet.SelectedTabChangeListener
TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
public void selectedTabChange(SelectedTabChangeEvent event) {
TabSheet tabsheet = event.getTabSheet();
Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
// Tab content displayed on setting height to the tab sheet
if(tab.getCaption().equals("+")) {
tabsheet.setHeight("100%");
} else {
tabsheet.setHeight("33px");
}
}
};
_logger.info("Exiting from tabChangeListener of WizardUtil");
return listener;
}