GWT可调整大小的面板 [英] GWT resizable panel
问题描述
通过可调整大小,我的意思是如果你在面板边缘拖动它可以调整大小
我自己想出了一个例子:
< pre class =lang-java prettyprint-override> public class DraggablePanel extends VerticalPanel {
private boolean isBeingDragged = false;
private boolean isBeingMoved = false;
private元素movingPanelElement;
public void setMovingPanelElement(Element movingPanelElement){
this.movingPanelElement = movingPanelElement;
}
public DraggablePanel(){
super();
DOM.sinkEvents(getElement(),Event.ONMOUSEDOWN | Event.ONMOUSEMOVE
| Event.ONMOUSEUP | Event.ONMOUSEOVER);
}
@Override
public void onBrowserEvent(Event event){
final int eventType = DOM.eventGetType(event);
if(Event.ONMOUSEOVER == eventType){
if(isCursorResize(event)){
getElement()。getStyle()。setProperty(cursor,s-resize) ;
} else if(isCursorMove(event)){
getElement()。getStyle()。setProperty(cursor,move);
} else {
getElement()。getStyle()。setProperty(cursor,default); $(b)b
$ b $ if(Event.ONMOUSEDOWN == eventType){
if(isCursorResize(event)){
if(!isBeingDragged){
isBeingDragged = true;
DOM.setCapture(getElement());
}
} else if(isCursorMove(event)){
DOM.setCapture(getElement());
isBeingMoved = true;
} else if(Event.ONMOUSEMOVE == eventType){
if(!isCursorResize(event)&&!isCursorMove(event)){
getElement() .getStyle()。setProperty(cursor,default);
}
if(isBeingDragged){
int currentY = event.getClientY();
int originalY = getElement()。getAbsoluteTop();
if(currentY> originalY){
Integer height = currentY - originalY;
this.setHeight(height +px);
}
} else if(isBeingMoved){
RootPanel.get()。setWidgetPosition(this,
event.getClientX(),event.getClientY());
}
} else if(Event.ONMOUSEUP == eventType){
if(isBeingMoved){
isBeingMoved = false;
DOM.releaseCapture(getElement());
}
if(isBeingDragged){
isBeingDragged = false;
DOM.releaseCapture(getElement());
$ b protected boolean isCursorResize(Event event){
int cursor = event.getClientY();
int initial = getAbsoluteTop();
int height = getOffsetHeight();
返回初始值+高度 - 20 <光标&&光标< =初始值+高度;
}
protected boolean isCursorMove(Event event){
int cursor = event.getClientY();
int initial = movingPanelElement.getAbsoluteTop();
int height = movingPanelElement.getOffsetHeight();
返回初始值< =游标&&光标< =初始值+高度;
}
}
Is there any way to have a 'Resizable' panel in GWT.
By resizable I mean that if you you drag on the edge of Panel it can be resized accordingly.
Figured it out myself, here is an example:
public class DraggablePanel extends VerticalPanel {
private boolean isBeingDragged = false;
private boolean isBeingMoved = false;
private Element movingPanelElement;
public void setMovingPanelElement(Element movingPanelElement) {
this.movingPanelElement = movingPanelElement;
}
public DraggablePanel() {
super();
DOM.sinkEvents(getElement(), Event.ONMOUSEDOWN | Event.ONMOUSEMOVE
| Event.ONMOUSEUP | Event.ONMOUSEOVER);
}
@Override
public void onBrowserEvent(Event event) {
final int eventType = DOM.eventGetType(event);
if (Event.ONMOUSEOVER == eventType) {
if (isCursorResize(event)) {
getElement().getStyle().setProperty("cursor", "s-resize");
} else if (isCursorMove(event)) {
getElement().getStyle().setProperty("cursor", "move");
} else {
getElement().getStyle().setProperty("cursor", "default");
}
}
if (Event.ONMOUSEDOWN == eventType) {
if (isCursorResize(event)) {
if (!isBeingDragged) {
isBeingDragged = true;
DOM.setCapture(getElement());
}
} else if (isCursorMove(event)) {
DOM.setCapture(getElement());
isBeingMoved = true;
}
} else if (Event.ONMOUSEMOVE == eventType) {
if (!isCursorResize(event) && !isCursorMove(event)) {
getElement().getStyle().setProperty("cursor", "default");
}
if (isBeingDragged) {
int currentY = event.getClientY();
int originalY = getElement().getAbsoluteTop();
if (currentY > originalY) {
Integer height = currentY - originalY;
this.setHeight(height + "px");
}
} else if (isBeingMoved) {
RootPanel.get().setWidgetPosition(this,
event.getClientX(), event.getClientY());
}
} else if (Event.ONMOUSEUP == eventType) {
if (isBeingMoved) {
isBeingMoved = false;
DOM.releaseCapture(getElement());
}
if (isBeingDragged) {
isBeingDragged = false;
DOM.releaseCapture(getElement());
}
}
}
protected boolean isCursorResize(Event event) {
int cursor = event.getClientY();
int initial = getAbsoluteTop();
int height = getOffsetHeight();
return initial + height - 20 < cursor && cursor <= initial + height;
}
protected boolean isCursorMove(Event event) {
int cursor = event.getClientY();
int initial = movingPanelElement.getAbsoluteTop();
int height = movingPanelElement.getOffsetHeight();
return initial <= cursor && cursor <= initial + height;
}
}
这篇关于GWT可调整大小的面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!