标签: uibinder

我想用UiBinder创建一个GWT小部件.所以我做了:

UserPanel.ui.xml像这样:

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:with field="res" type="com.example.resources.UserPanelResources"  />

    <g:VerticalPanel styleNames='{res.userpanel.main}'>
      ...some other widgets go here...
    </g:VerticalPanel>
</ui:UiBinder>

UserPanel.css是这样的:

.main {
    width: 1000px;
    background-color: #f9f9fa;
    padding: 15px 10px;
    font-family: "Georgia";
}

和UserPanelResources.java一样:

public interface UserPanelResources extends ClientBundle {
    public interface UserPanelCss extends CssResource {
        String main();
    }

    @Source("css/userpanel.css")
    UserPanelCss userpanel();
}

所有文件和包都在他们的位置,因为一切编译得很好.但是当我运行开发模式时,样式不会应用!我尝试了很多不同的方法,但它仍然无效.

我注意到的是,在HTML中,VerticalPanel被赋予了由GWT模糊的类名,但是CSS没有被发送到浏览器 - 事实上,GWT甚至没有要求它.

我错过了什么吗？

在GWT + UiBinder中,您可以捕获这样的点击:

@UiHandler("cancelButton")
void onCancelButtonClicked(ClickEvent e) {
    // cancel code goes here;
}

是否按下了按键？例如,如果用户按下ESC键,则取消操作.

非常感谢.

我发现GWT选项卡面板对于我需要做的样式很笨拙,所以我正在尝试制作我自己的简单选项卡面板.基本上是<nav>标签的HTML5 元素和DeckPanel显示内容的a.让我们用CSS3来解决剩下的问题.

GWT TabLayoutPanel具有这些"特殊"标记,用于定义选项卡的内容:

<g:TabLayoutPanel>
    <g:tab>
        <g:header>Tab Title</g:header>
        <g:OtherWidget>Tab contents</g:OtherWidget>
    </g:tab>
</g:TabLayoutPanel>

我指的是<g:tab>和<g:header>.我看到在各个地方使用这些类型的标签,但我不知道如何创建它们.查看TabLayoutPanel源代码,我发现它有一个add方法需要两个小部件,然后它将一个小部件(内容)放入一个面板进行显示,将另一个小部件(标题)放入一个TabLayoutPanel.Tab实例中.但我不知道如何复制这种功能.

在我的gwt中,我有一个像下面一样的按钮来创建新的小部件

 @UiHandler("buttonfire")
  void addNewWidget(ClickEvent event) {


     htmlPanelHolder.add(new MyCustomWidget(),"placeholder");

 }

如何使用jquery以便当MyCustomWidget()在屏幕上显示时它使用jquery"fadein"效果

我已经尝试过让jsni在新的MyCustomWidget()onload()中调用jquery但是没有用.可以指导我吗？

我无法让CSS图像精灵出现在GWT UiBinder中.我确实回顾了如何在GWT中使用图像精灵？,但发现我已经做了建议.

我有一个ui.xml,ClientBundle接口与CssBundle嵌套接口,和一个CSS文件.

ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:with field="resources"
    type="edu.wts.upholdingthetruth.poweroftheword.client.resources.POWResources" />

    <g:FlowPanel width="100%" styleName="{resources.sprites.underMenuGlow}" />
</ui:UiBinder> 

ClientBundle:

public interface POWResources extends ClientBundle {
    public static final POWResources INSTANCE = GWT.create(POWResources.class);

    @Source("site1/undertopglow.png")
    ImageResource underTopGlow();

    @Source("sprites.css")
    public Sprites sprites();

    public interface Sprites extends CssResource {

            String underMenuGlow();
    }

    // other stuff
}

sprites.css:

@sprite .underMenuGlow {gwt-image: "underTopGlow"}

所以,我编译我的应用程序(没有抱怨),并在浏览器中,我的图像丢失.当我在Chrome的开发人员工具中查看该页面时,我看到相应的div引用了混淆的css类,但我无法在任何地方找到该类.

另一方面,我能够使用显示图像<g:Image resource="{resources.underTopGlow}" />.

有没有一个步骤,我想通过像这样的CSS精灵来显示图像？

我已经定义了一个ClientBundle,一个Style接口,并通过@source注释将其与我的css文件连接起来.

我有两个问题:

1. 当我<ui:with>在我的uibinder文件中使用时,我得到以下异常:Deferred binding result type MyStyle should not be abstract. 有人可以解释发生了什么吗？以及如何在我的uibinder文件中正确包含样式？

2. 我想在许多uibinder上分享资源,而不必每次都支付初始化样式的惩罚.Gwt的贫血开发指南,建议使用UiField(provided=true)或使用@uiFactory.虽然我已成功使用@uiFactory来使用我自己的自定义小部件.我不知道如何使用@uiFactory将样式注入uiBinder.

例如:

//in pojo
@UiFactory
public MyStyle getMyStyle() {
    return myStyle;
}

//in uibinder
<g:Label addStyleNames="{myStyle.defaultLable}"/>

我怎么能得到这个工作？

提前致谢.

我想知道是否有办法将gwt uibinder逻辑构建到抽象父类中,这样我就不必在每个想要绑定的类中重复代码.

例如,我希望能够做到这样的事情:

public abstract class BasePanel<Panel extends BasePanel> extends Composite {
    interface Binder<BinderPanel extends BasePanel> extends UiBinder<Widget, BinderPanel> { }
    private static final Binder binder = GWT.create(Binder<Panel>.class);

    public BasePanel() {
        initWidget(binder.createAndBindUi(this));
        init();
    }
}

基本上这会允许任何子类做这样的事情:

public MyPanel extends BasePanel<MyPanel> {
    //my code here
}

默认构造函数将处理将MyPanel绑定到MyPanel.ui.xml的所有代码.

基本上我想要懒惰,只需要构建一次接口和活页夹,以便以通用的方式完成.想法？

提前致谢.

我正在尝试在uibinder中使用GWT网格组件.它工作正常,直到我想设置列的宽度.以下是我试图做的但它似乎不起作用.

        <g:Grid width="100%">
        <g:row>
            <g:customCell width="20%">
                <g:FlowPanel width="">
                </g:FlowPanel>
            </g:customCell>
            <g:customCell width="80%">
                <g:FlowPanel width="">
                </g:FlowPanel>
            </g:customCell>
        </g:row>
    </g:Grid>

我的模型有一个CRUD表单的基类.在这个类的模板中,我有一个保存按钮.

在扩展类中,我有许多相对于特定模型的字段,但不是保存按钮.

每次我在子模型中调用createAndBindUi时,都会抛出一条错误,表示我没有保存按钮.

谁知道如何正确地做到这一点？可以发布解决方案.

编辑

我通过调整其中的组件来修复空白行为VerticalPanel,这似乎对控制台错过了某个面板的维度产生了影响.我不太明白.

但是,我仍然没有看到任何显示垂直滚动条的面板.

在GWT项目中,我有以下结构:

页

DockLayoutPanel
    North (header)
    Center (body)
    South (footer)
/DockLayoutPanel

身体

SplitLayoutPanel$1
    West
        SplitLayoutPanel$2
             North
             Center
                 TabPanel
                     ScrollPanel
                         VerticalPanel
                             -Several widgets-
                         /VerticalPanel
                     /ScrollPanel
                 /TabPanel
             /Center
        /SplitLayoutPanel$2
    /West
    Center
/SplitLayoutPanel$1

我的问题ScrollPanel在于TabPanel,它本身包含一个VerticalPanel包含几个小部件.这是每一个真正Tab的TabPanel.

我的问题是,虽然SplitLayoutPanel$2中心的所有容器的宽度都有100%的宽度,但是它ScrollPanel包含一个水平滚动条,旁边有一个相当大的白色区域VerticalPanel,而它们的绝对指标大小相同.

说明情况

TabPanel概述http://i48.tinypic.com/1fu448.png

这是TabPanel,有ScrollPanel,和VerticalPanel.请注意水平滚动条是如何存在,同时TabPanel,ScrollPanel并VerticalPanel具有相同的宽度.向右滚动会产生白色区域.

将ScrollPanel和VerticalPanel所有体育598px的绝对宽度.西部组件的DockLayoutPanel大小为600,因此匹配.还要注意如何启动开发人员控制台使滚动条消失.实际上,整个面板已经消失在其后面,并且没有垂直滚动条弹出.

当向右滚动条形时,VerticalPanel部分放置在屏幕外,并ScrollPanel显示此空白.显然,我不希望空白存在,因此根本不需要滚动条.在这种情况下,所有面板仍具有相同的宽度:598px.SplitLayoutPanel …