Eclipse OwnerDrawLabelProvider makes selection background dark blue - swt

I'm currently developing an Eclipse RCP application, and am in need of using an OwnerDrawLabelProvider as a CellLabelProvider for a TableViewerColumn
This is because when I use any other CellLabelProvider, the Image used is not centered.
My problem is that when the row is selected, the background of the cell that has this provider is of a darker blue than all the other cells.
This is how the "selected" state looks:
Here's my OwnerDrawLabelProvider:
class SomeLabelProvider extends OwnerDrawLabelProvider {
private static final int smallColumnSize = 70;
#Override
protected void measure( Event event, Object element ) {
Rectangle rectangle = IMAGE_CHECKED.getBounds();
event.setBounds( new Rectangle( event.x, event.y, smallColumnSize,
rectangle.height ) );
}
#Override
protected void paint( Event event, Object element ) {
Rectangle bounds = event.getBounds();
//paint icon at the center
event.gc.drawImage( getImage( element ),
bounds.x + ((smallColumnSize -
IMAGE_CHECKED.getBounds().width) / 2),
bounds.y );
}
//this is implemented somewhere else
protected abstract Image getImage( Object element );
}
Thanks in advance!

This is caused by the default erase method, the JavaDoc for this says:
Handle the erase event. The default implementation colors the
background of selected areas with SWT.COLOR_LIST_SELECTION and
foregrounds with SWT.COLOR_LIST_SELECTION_TEXT. Note that this
implementation causes non-native behavior on some platforms.
Subclasses should override this method and not call the super
implementation.
So just add an erase override which does nothing:
#Override
protected void erase(Event event, Object element)
{
// Don't call super to avoid selection draw
}

Related

How to change SWT Table Item selection background color

I have a similar use case as mentioned here. I want to change the SWT Table Item selection background color from default grey or blue to some other color. I tried using the StyledCellLabelProvider#update method but it was of no use. It simply updates the background color for all table items to the given color. But I need it to be only for the selected item. Below is the code Snippet of my label provider update method
#Override
public void update(ViewerCell cell) {
cell.setText(provider.getDisplay((T) cell.getElement(), cell.getColumnIndex()));
TableItem currentTableItem = ((TableItem) cell.getViewerRow().getItem());
if (currentTableItem.getParent().getSelectionCount() > 0) {
TableItem selectedTableItem = currentTableItem.getParent().getSelection()[0];
if(currentTableItem == selectedTableItem) {
cell.setBackground(Display.getDefault().getSystemColor(SWT.COLOR_LIST_SELECTION));
}
}
cell.setForeground(provider.getDisplayColor((T) cell.getElement(), cell.getColumnIndex()));
super.update(cell);
}
Thanks in advance for the help!
The selection colour is normally chosen by the OS, so to change the colour you have to turn off the selected flag in the StyledCellLabelProvider erase, measure and paint methods. You also have to draw the selection colour yourself in the erase method.
Something like the following:
#Override
protected void erase(final Event event, final Object element)
{
if ((event.detail & SWT.SELECTED) != 0) {
event.detail &= ~SWT.SELECTED;
Rectangle bounds = event.getBounds();
event.gc.setBackground(Display.getDefault().getSystemColor(SWT.COLOR_LIST_SELECTION));
event.gc.fillRectangle(bounds);
}
super.erase(event, element);
}
#Override
protected void measure(final Event event, final Object element)
{
event.detail &= ~SWT.SELECTED;
super.measure(event, element);
}
#Override
protected void paint(final Event event, final Object element)
{
event.detail &= ~SWT.SELECTED;
super.paint(event, element);
}

Is there a way to wrap text in a tree viewer (Eclipse) (Not a simple Tree)

viewer.getControl().addListener(SWT.MeasureItem, new Listener() {
#Override
public void handleEvent(Event event) {
TreeItem item = (TreeItem)event.item;
String text = getText(item, event.index);
Point size = event.gc.textExtent(text);
event.width = size.x;
event.height = Math.max(event.height, size.y);
}
});
In the above code snippet the listener is added but it is not coming to handleEvent method at all.
For TreeViewer do not try to add Listeners as that will interfere with the operation of the viewer.
To draw the lines yourself use a Label Provider which extends OwnerDrawLabelProvider and implement the measure, erase and paint methods.

How to get Menu or MenuItem width in JavaFX?

I am extending the default Menu and MenuItem class to add some animated effects to it.
The problem is that I need to know the width and height of the Menu and MenuItem I'm working on. This classes doesn't extend Node or Region so there are no public methods to get their size. The size is composed by the text size inside the MenuItem plus the corresponding default padding, I can calculate how much space the text takes, but I can't get how much padding the MenuItem has neither.
There is a method called impl_styleableGetNode() that returns a Node but it always returns null for me.
Is there anyway to get the size? MenuBar also doesn't seems to expose any helpful method for this.
EDIT:
Here is my class, I'm trying to implement this material design button into the Menu class. Basically I render all the button using the setGraphic() method. It's working perfectly but I'm using the Pane width which doesn't take into account the padding of the Menu so the effect is not complete.
public class MaterialDesignMenu extends Menu {
private Pane stackPane = new Pane();
private Label label = new Label();
private Circle circleRipple;
private Rectangle rippleClip = new Rectangle();
private Duration rippleDuration = Duration.millis(250);
private double lastRippleHeight = 0;
private double lastRippleWidth = 0;
private Color rippleColor = new Color(1, 0, 0, 0.3);
public MaterialDesignMenu() {
init("");
}
public MaterialDesignMenu(String text) {
init(text);
}
public MaterialDesignMenu(String text, Node graphic) {
init(text);
}
private void init(String text){
label.setText(text);
createRippleEffect();
stackPane.getChildren().addAll(circleRipple, label);
setGraphic(stackPane);
}
private void createRippleEffect() {
circleRipple = new Circle(0.1, rippleColor);
circleRipple.setOpacity(0.0);
// Optional box blur on ripple - smoother ripple effect
//circleRipple.setEffect(new BoxBlur(3, 3, 2));
// Fade effect bit longer to show edges on the end of animation
final FadeTransition fadeTransition = new FadeTransition(rippleDuration, circleRipple);
fadeTransition.setInterpolator(Interpolator.EASE_OUT);
fadeTransition.setFromValue(1.0);
fadeTransition.setToValue(0.0);
final Timeline scaleRippleTimeline = new Timeline();
final SequentialTransition parallelTransition = new SequentialTransition();
parallelTransition.getChildren().addAll(
scaleRippleTimeline,
fadeTransition
);
// When ripple transition is finished then reset circleRipple to starting point
parallelTransition.setOnFinished(event -> {
circleRipple.setOpacity(0.0);
circleRipple.setRadius(0.1);
});
stackPane.addEventHandler(MouseEvent.MOUSE_PRESSED, event -> {
parallelTransition.stop();
// Manually fire finish event
parallelTransition.getOnFinished().handle(null);
circleRipple.setCenterX(event.getX());
circleRipple.setCenterY(event.getY());
// Recalculate ripple size if size of button from last time was changed
if (stackPane.getWidth() != lastRippleWidth || stackPane.getHeight() != lastRippleHeight) {
lastRippleWidth = stackPane.getWidth();
lastRippleHeight = stackPane.getHeight();
rippleClip.setWidth(lastRippleWidth);
rippleClip.setHeight(lastRippleHeight);
/*
// try block because of possible null of Background, fills ...
try {
rippleClip.setArcHeight(stackPane.getBackground().getFills().get(0).getRadii().getTopLeftHorizontalRadius());
rippleClip.setArcWidth(stackPane.getBackground().getFills().get(0).getRadii().getTopLeftHorizontalRadius());
circleRipple.setClip(rippleClip);
} catch (Exception e) {
e.printStackTrace();
}*/
circleRipple.setClip(rippleClip);
// Getting 45% of longest button's length, because we want edge of ripple effect always visible
double circleRippleRadius = Math.max(stackPane.getHeight(), stackPane.getWidth()) * 0.45;
final KeyValue keyValue = new KeyValue(circleRipple.radiusProperty(), circleRippleRadius, Interpolator.EASE_OUT);
final KeyFrame keyFrame = new KeyFrame(rippleDuration, keyValue);
scaleRippleTimeline.getKeyFrames().clear();
scaleRippleTimeline.getKeyFrames().add(keyFrame);
}
parallelTransition.playFromStart();
});
}
public void setRippleColor(Color color) {
circleRipple.setFill(color);
}
}
First you have to listen to parentPopupProperty changes of MenuItem. When you get the instance of parent popup than register listener for skinProperty of ContextMenu (parentPopup). When you get the skin then you can get MenuItemContainer which is Node equivalent of MenuItem and you can listen to widthProperty or heightProperty changes of MenuItemContainer.
Note: skinProperty change is fired just before ContextMenu is shown on the screen.
Custom class extending MenuItem class:
public class CstMenuItem extends MenuItem {
public CstMenuItem() {
// Create custom menu item listener.
new CstMenuItemListener(this);
}
/*
* Returns MenuItemContainer node associated with this menu item
* which can contain:
* 1. label node of type Label for displaying menu item text,
* 2. right node of type Label for displaying accelerator text,
* or an arrow if it's a Menu,
* 3. graphic node for displaying menu item icon, and
* 4. left node for displaying either radio button or check box.
*
* This is basically rewritten impl_styleableGetNode() which
* should not be used since it's marked as deprecated.
*/
public ContextMenuContent.MenuItemContainer getAssociatedNode() {
ContextMenu contextMenu = getParentPopup();
ContextMenuSkin skin = (ContextMenuSkin) contextMenu.getSkin();
ContextMenuContent content = (ContextMenuContent) skin.getNode();
// Items container contains MenuItemContainer nodes and Separator nodes.
Parent itemsContainer = content.getItemsContainer();
List<Node> children = itemsContainer.getChildrenUnmodifiable();
for (Node child : children) {
if (child instanceof ContextMenuContent.MenuItemContainer) {
ContextMenuContent.MenuItemContainer menuItemContainer =
(ContextMenuContent.MenuItemContainer) child;
if (menuItemContainer.getItem() == this) {
return menuItemContainer;
}
}
}
return null;
}
}
Custom MenuItem listener class:
public class CstMenuItemListener implements ChangeListener {
private CstMenuItem menuItem;
private ContextMenu parentPopup;
private Region menuItemContainer;
public CstMenuItemListener(CstMenuItem menuItem) {
this.menuItem = menuItem;
menuItem.parentPopupProperty().addListener(this);
}
#Override
public void changed(ObservableValue observable, Object oldValue, Object newValue) {
if (observable == menuItem.parentPopupProperty()) {
parentPopup = (ContextMenu) newValue;
parentPopup.skinProperty().addListener(this);
} else if (observable == parentPopup.skinProperty()) {
menuItemContainer = menuItem.getAssociatedNode();
menuItemContainer.widthProperty().addListener(this);
menuItemContainer.heightProperty().addListener(this);
} else if (observable == menuItemContainer.widthProperty()) {
System.out.println("width: " + (double) newValue);
} else if (observable == menuItemContainer.heightProperty()) {
System.out.println("height: " + (double) newValue);
}
}
}

popuppanel show up beneath the widget

I am new to GWT and the web stuff.
I am working out my own project based on
http://code.google.com/p/cloud-tasks-io/source/browse/#svn%2Ftrunk%2FCloudTasks-AppEngine%2Fsrc%2Fcom%2Fcloudtasks%2Fclient
I am trying to use popup/dialog. The popup and dialog always show behind the widget. I keep googling around and the most relevant I found is this
http://groups.google.com/group/gwt-google-apis/browse_thread/thread/40db4fcbe10d2060 which does not provide any answer. Anyway, I have 3rd party library, bst-player 1.3, which uses flash. So I disabled it(later remove it too), the popup just won't come to the top! It is still hiding behind the widget.
I have learned that popuppanel/dialogpanel alikes do not need to get added to another widget. A different way of saying is that it is not a normal widget in a sense that it cannot attach to a parent but it attaches itself to the dom to guarantee being on top (from GWT composite widget )
I am at my wit end and I am here at SO ...
UPDATE
Here is my Popup class
public class PopUp {
static PopupPanel simplePopup;
public static void init() {
simplePopup = new PopupPanel(true);
simplePopup.hide();
simplePopup.setVisible(false);
// DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 3);
}
public static void showpopupmsg(String msg, int left, int top) {
if (simplePopup == null) {
init();
}
if (msg != null && !msg.equalsIgnoreCase("")) {
simplePopup.ensureDebugId("cwBasicPopup-simplePopup");
simplePopup.setWidget(new HTML(msg));
simplePopup.setVisible(true);
simplePopup.setPopupPosition(left, top);
simplePopup.setWidth("475px"); //575
simplePopup.setGlassEnabled(true);
simplePopup.show();
}
}
public static void show(String message){
if (simplePopup == null) {
init();
}
simplePopup.setGlassEnabled(true);
simplePopup.setTitle(message);
simplePopup.center();
}
}
Here is how I am calling
tasksTable.doneColumn.setFieldUpdater(new FieldUpdater<TaskProxy, Boolean>() {
public void update(int index, TaskProxy task, Boolean value) {
String msg = "Here is the popup. All the way underneath";
Widget source = tasksTable;
int left = source.getAbsoluteLeft() - 50;
// source.getAbsoluteLeft() + 25;
int top = source.getAbsoluteTop() - 25;
PopUp.showpopupmsg(msg, left, top); //Here is the calling method
TaskRequest request = requestFactory.taskRequest();
TaskProxy updatedTask = request.edit(task);
updatedTask.setDone(value);
request.updateTask(updatedTask).fire();
}
});
Here is how the Popup is beneath the widget.
The source of the problem has been quite elusive since I am still new to the webapp, yet, I finally solve it myself. The culprit is the CSS. It is defining the z-index for the whole thing to quite high as seen in the following code line 1333.
http://code.google.com/p/cloud-tasks-io/source/browse/trunk/CloudTasks-AppEngine/war/CloudTasks.css#1333
I have doubted about the z-index before and try it out with a paltry value 3 as seen in the commented out code segment of Popup class in question. I have to uncomment it and set it to 101.
DOM.setIntStyleAttribute(simplePopup.getElement(), "zIndex", 101);
I was , you know, #$%###$*.
z-index is only decides which widget should show on top..
the widget popup is under benath might be having z-index value high.
set the z-index for popup thru css (recomended) or DOM will work for you
According to my feeling, using static methods of your "PopUp" object is a bit strange...
In that way, I think things a relative to the top rather than caller object.
Maybe you could consider make your class 'Popup' extending 'popupanel'
and in your calling code, just make
new PopUp(msg,left,top).show() ;
I recently wrote my own solution for a popup panel that needs to be aligned with its caller. The solution consists out of an PopupPanel extension and a Button extension.
The button extension has an instance of the panel extension, and the moment it is clicked it gives its coordinates and width and height to its panel.
#Override
public void onClick(ClickEvent event) {
if (optionsPanel.isShowing()) {
optionsPanel.hide();
} else {
optionsPanel.setButtonBounds(new Bbox(
getAbsoluteLeft(), getAbsoluteTop(), getOffsetWidth(), getOffsetHeight()));
optionsPanel.show();
}
}
(The Bbox class is just a convenience class I could use for wrapping coordinates; write your own class or 4 methods for that matter)
The main work is then done in the onLoad() override of the PopupPanel, in which the coordinates of the button are used to position the panel;
#Override
protected void onLoad() {
super.onLoad();
if (null == bounds) {
super.hide();
} else {
left = (int) bounds.getX();
top = (int) bounds.getMaxY();
setPopupPosition(left, top);
}
}
(bounds are the coordinates of the button; getMaxY() == bottom coordinate of button)

how to get a GWT PopupPanel centered in a users current view port on mobile safari?

calling .center() makes the panel center on the entire page.. I'd like to have it dead center of the current view port... additionally I'd like to prevent scrolling.. but maybe I'll come back to that one.
Dead center is left for an exercise for the user, but the key component is Window.getScrollTop() and Window.getScrollLeft()
The standard center() method does not do what you want. So you have to calculate the position yourself. There is one big problem that is your popup does not have a size before it is actually shown. The size of any DOM element can not be queried until it is fully attached to the DOM. You have to inherit the GWT popup class and overriding the onLoad() method to get the size of the popup. Try something like this:
public class CenteredDialogBox extends DialogBox {
private Widget _parent;
public CenteredDialogBox(Widget parent) {
_parent = parent;
}
#Override
public void onLoad() {
super.onLoad();
int parentMiddle = _parent.getAbsoluteLeft() + _parent.getOffsetWidth() / 2;
int popupLeft = parentMiddle - getOffsetWidth() / 2;
int parentCenter = _parent.getAbsoluteTop() + _parent.getOffsetHeight() / 2;
int popupTop = parentCenter - getOffsetHeight() / 2;
setPopupPosition(popupLeft, popupTop);
}
}