ApplicationMask

[Arno.Nyhm]

for my use case "block all in the application" i created the class ApplicationMask



ApplicationMask.java:




package com.mycompany.myapplication.client.gui.components;

import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.core.XDOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;

/**
*
* A Class to block the full application and the Mouse and Keyevents
*
* @author Arno Nyhm
*/
public class ApplicationMask {

private static boolean disableEvents = false;
private final static NativePreviewHandler handler = new NativePreviewHandler() {

@Override
public void onPreviewNativeEvent(NativePreviewEvent event) {
if (disableEvents) {
event.cancel();
}

}
};

static {
Event.addNativePreviewHandler(handler);
}

private ApplicationMask() {
}

/**
* Puts a mask over this element to disable user interaction.
*
* @return the mask element
*/
public static El mask() {
return mask(null, null);
}

/**
* Puts a mask over this element to disable user interaction.
*
* @param message a message to display in the mask
* @return the mask element
*/
public static El mask(String message) {
return mask(message, null);
}

/**
* Puts a mask over this element to disable user interaction.
*
* @param message a message to display in the mask
* @param messageStyleName a CSS style name to be applied to the message text
* @return the mask element
*/
public static El mask(String message, String messageStyleName) {
disableEvents = true;
return XDOM.getBodyEl().mask(message, messageStyleName);
}

/**
* Removes a previously applied mask.
*
* @return the mask element
*/
public static El unmask() {
disableEvents = false;
return XDOM.getBodyEl().unmask();
}
}
additional css:



.ext-el-mask {
z-index: 100000;
cursor:wait;
}
.ext-el-mask-msg {
z-index: 100001;
cursor:wait;
}example usage:

(dont forget to include the additional css! to place the mask over all elements)




package com.mycompany.myapplication.client.customer.test;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionChangedListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Timer;
import com.mycompany.myapplication.client.gui.components.ApplicationMask;
import java.util.ArrayList;
import java.util.List;

/**
*
* @author Arno Nyhm
*/
public class LayoutClass7ApplicationMaskSample extends Window {

public LayoutClass7ApplicationMaskSample() {
createWindow();
}

private void createWindow() {
setHeading("Header");
setWidth(600);


List<ColumnConfig> configs = new ArrayList<ColumnConfig>() {

{
add(new ColumnConfig() {

{
setHeader("ID");
setId("id");
setWidth(20);
}
});
add(new ColumnConfig() {

{
setHeader("Name");
setId("name");
}
});
}
};

ColumnModel cm = new ColumnModel(configs);

ListStore<Pair> store = new ListStore<Pair>();
store.add(getPairs());

final Grid<Pair> grid = new Grid<Pair>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.setStripeRows(true);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(600, 300);
cp.add(grid);

setLayout(new FitLayout());
add(cp);



grid.addListener(Events.CellDoubleClick, new Listener<BaseEvent>() {

public void handleEvent(BaseEvent be) {

// Test for masking content on a modal window.

GridEvent ge = (GridEvent) be;
Info.display("Grid", "Doubleclick on " + ge.getRowIndex() + "/" + ge.getColIndex());
new InfoWindow() {

{
setModal(true);
show();
}
};

}
});

grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);

grid.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<Pair>() {

@Override
public void selectionChanged(SelectionChangedEvent<Pair> se) {

Info.display("Grid", "selection change selected " + se.getSelection().size() + " item " + (se.getSelectedItem() == null ? "none" : se.getSelectedItem().toString()));

ApplicationMask.mask("a very long text to see it :-)");

Timer timer = new Timer() {

@Override
public void run() {
Info.display("Grid", "mask removed");

ApplicationMask.unmask();
}
};
timer.schedule(2000);
}
});




}

public List<Pair> getPairs() {
List<Pair> pairs = new ArrayList<Pair>();
for (int i = 1; i < 20; i++) {
pairs.add(new Pair("" + i, new Character((char) (i + 64)).toString()));

}
return pairs;

}

public class Pair extends BaseModel {

private static final long serialVersionUID = 1L;

public Pair(String id, String name) {
setId(id);
setName(name);
}

public void setId(String id) {
set("id", id);
}

public String getId() {
return get("id");
}

public void setName(String name) {
set("name", name);
}

public String getName() {
return get("name");
}

@Override
public String toString() {
return getName();
}
}

public class InfoWindow extends Window {

public InfoWindow() {

add(new Text("Hello!"));

}
}
}