Re: TabLayoutPanel with scroll buttons

2011-02-24 Thread Eze
Hi, I modified this for gwt 2.2.0, and some minor fixes (selecting a tab was 
causing scoll to 0)

BTW thanks to Matt for the first version, it saved me a lot of work

package com.gwtscrolledtablayoutpanel.ui; 

import com.google.gwt.core.client.Scheduler;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.*;

/**
 * A {@link TabLayoutPanel} that shows scroll buttons if necessary
 */
public class ScrolledTabLayoutPanel extends TabLayoutPanel {

  private static final int IMAGE_PADDING_PIXELS = 4;

  private LayoutPanel panel;
  private FlowPanel tabBar;
  private Image scrollLeftButton;
  private Image scrollRightButton;
  private HandlerRegistration windowResizeHandler;

  private ImageResource leftArrowImage;
  private ImageResource rightArrowImage;
  private static final int SCROLL_INTERVAL = 60;
  private HandlerRegistration selectionHandler;
  private int lastScroll = 0;

  public ScrolledTabLayoutPanel(double barHeight, Unit barUnit,
ImageResource leftArrowImage, ImageResource 
rightArrowImage) {
super(barHeight, barUnit);

this.leftArrowImage = leftArrowImage;
this.rightArrowImage = rightArrowImage;

// The main widget wrapped by this composite, which is a LayoutPanel 
with the tab bar & the tab content
panel = (LayoutPanel) getWidget();

// Find the tab bar, which is the first flow panel in the LayoutPanel
for (int i = 0; i < panel.getWidgetCount(); ++i) {
  Widget widget = panel.getWidget(i);
  if (widget instanceof FlowPanel) {
tabBar = (FlowPanel) widget;
break; // tab bar found
  }
}

initScrollButtons();
  }

  @Override
  public void add(Widget w) {
super.add(w);
checkIfScrollButtonsNecessary();
  }

  @Override
  public void add(Widget child, String text) {
super.add(child, text);
checkIfScrollButtonsNecessary();
  }

  @Override
  public void add(Widget child, String text, boolean asHtml) {
super.add(child, text, asHtml);
checkIfScrollButtonsNecessary();
  }

  @Override
  public void add(Widget child, Widget tab) {
super.add(child, tab);
checkIfScrollButtonsNecessary();
  }

  @Override
  public boolean remove(Widget w) {
boolean b = super.remove(w);
checkIfScrollButtonsNecessary();
return b;
  }

  @Override
  protected void onLoad() {
super.onLoad();

if (windowResizeHandler == null) {
  windowResizeHandler = Window.addResizeHandler(new ResizeHandler() {
//@Override
public void onResize(ResizeEvent event) {
  checkIfScrollButtonsNecessary();
}
  });
}

if (selectionHandler == null) {
  selectionHandler = addSelectionHandler(new SelectionHandler() 
{
public void onSelection(SelectionEvent selectedEvent) {
  doOnSelectTab(selectedEvent.getSelectedItem());
}
  });
}
  }

  @Override
  protected void onUnload() {
super.onUnload();

if (windowResizeHandler != null) {
  windowResizeHandler.removeHandler();
  windowResizeHandler = null;
}

if (selectionHandler != null) {
  selectionHandler.removeHandler();
  selectionHandler = null;
}
  }

  private void doOnSelectTab(int selected) {
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
  public void execute() {
scrollTo(lastScroll);
  }
});

  }

  private ClickHandler createScrollClickHandler(final int diff) {
return new ClickHandler() {
  //@Override
  public void onClick(ClickEvent event) {
Widget lastTab = getLastTab();
if (lastTab == null)
  return;

int newLeft = 
parsePosition(tabBar.getElement().getStyle().getLeft()) + diff;
int rightOfLastTab = getRightOfWidget(lastTab);

// Prevent scrolling the last tab too far away form the right 
border,
// or the first tab further than the left border position
if (newLeft <= 0 && (getTabBarWidth() - newLeft < (rightOfLastTab - 
diff / 2))) {
  scrollTo(newLeft);
}
  }
};
  }

  /**
   * Create and attach the scroll button images with a click handler
   */
  private void initScrollButtons() {
scrollLeftButton = new Image(leftArrowImage);
int leftImageWidth = scrollLeftButton.getWidth();
panel.insert(scrollLeftButton, 0);
panel.setWidgetLeftWidth(scrollLeftButton, 0, Unit.PX, leftImageWidth, 
Unit.PX);
panel.setWidgetTopHeight(scrollLeftButton, 0, Unit.PX, 
scrollLeftBu

Re: TabLayoutPanel border color

2011-02-11 Thread Eze
Sorry, that was for the tabs' borders

the correct class is

.gwt-TabPanelBottom {

On 10 feb, 18:16, Eze  wrote:
> The classes are:
>
> .gwt-DecoratedTabBar .tabTopLeft {
> .gwt-DecoratedTabBar .tabTopCenter {
> .gwt-DecoratedTabBar .tabTopRight {
>
> .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
> .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
> .gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {
>
> The corners doesn't use the color #, but a background image and offset
>
>    background: 
> url(images/corner.png<http://127.0.0.1:/biframeweb2/gwt/calipso/images/corner.png>
> ) no-repeat -6px -55px;
>
> I created my own theme based on the standard to change this settings
>
> Regards
>
> Eze

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.



Re: TabLayoutPanel border color

2011-02-10 Thread Eze
The classes are:

.gwt-DecoratedTabBar .tabTopLeft {
.gwt-DecoratedTabBar .tabTopCenter {
.gwt-DecoratedTabBar .tabTopRight {


.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {

The corners doesn't use the color #, but a background image and offset
  
   background: 
url(images/corner.png<http://127.0.0.1:/biframeweb2/gwt/calipso/images/corner.png>
) no-repeat -6px -55px;

I created my own theme based on the standard to change this settings

Regards

Eze

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to 
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.