0

PostgreSQL インスタンスのテーブルを表示する 1 つのメイン パネルを備えた GWT アプリがあります。Redis インスタンスなど、他の種類のインスタンスをアプリに表示させたい。そのため、最初にメイン パネルを DeckLayoutPanel にラップして、PostgreSQL パネルを Redis パネルと交換します。ユーザーが表示するインスタンスのタイプを選択するために使用する左側の垂直メニューがあります。

UI XML に DeckLayoutPanel を追加すると、メイン パネルが表示されなくなりますが、DOM インスペクターにはコンテンツが表示されます。

これは、元の動作する UIg:DeckLayoutPanelです。

<!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">
  <g:HTMLPanel>
    <table width="100%" border="1">
      <tr>
        <td colspan="2" align="left">
          <a href="/">Logo</a>
        </td>
        <td colspan="2" align="right">
          Hello John
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <g:VerticalPanel ui:field="instancesPanel">
            <g:Label ui:field="mainErrorLabel" />
            <g:FlexTable ui:field="flexTable" />
            <g:HorizontalPanel>
              <g:TextBox ui:field="createInstanceTextBox" />
              <g:ListBox ui:field="createInstanceVersionsListBox" />
              <g:Button ui:field="createInstanceButton">Create</g:Button>
              <g:Label ui:field="createInstanceErrorLabel" />
            </g:HorizontalPanel>
          </g:VerticalPanel>
        </td>
      </tr>
      <tr>
        <td>Help</td>
        <td>About</td>
        <td>Contact</td>
      </tr>
    </table>
  </g:HTMLPanel>
</ui:UiBinder>

と HTML テーブルを削除してg:HTMLPanelトリミングすると、次のように動作します。

<!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">
  <g:DeckLayoutPanel ui:field="deckLayoutPanel">
    <g:VerticalPanel ui:field="instancesPanel">
      <g:Label ui:field="mainErrorLabel" />
      <g:FlexTable ui:field="flexTable" />
      <g:HorizontalPanel>
        <g:TextBox ui:field="createInstanceTextBox" />
        <g:ListBox ui:field="createInstanceVersionsListBox" />
        <g:Button ui:field="createInstanceButton">Create</g:Button>
        <g:Label ui:field="createInstanceErrorLabel" />
      </g:HorizontalPanel>
    </g:VerticalPanel>
  </g:DeckLayoutPanel>
</ui:UiBinder>

私はフロントエンドのデザイナーではなく、GWT 以外の JSP ページ (JSTL タグを使用) にも同様の HTML があるため、ここでは HTML テーブルを使用しています。同じ。

テーブル以外のものを使用する必要がありますか? div代わりに配置のために s に切り替える必要がありますか? g:DeckLayoutPanelHTML テーブルでの の使用はサポートされていませんか? GWTレイアウトウィジェットのみを使用する必要がある場合、GWTページと非GWTページで同一のHTMLページを取得するにはどうすればよいですか?

ところで、RootPanel を使用してみましたが、HTML ページでも機能しませんでした。

私はそれにバインドしています：

interface Binder extends UiBinder<HTMLPanel, MyWebApp> { }
private static final Binder binder = GWT.create(Binder.class);                                                                                        

@UiField
DeckLayoutPanel deckLayoutPanel;
@UiField
VerticalPanel instancesPanel;

@Override
public void onModuleLoad() {
  HTMLPanel outer = binder.createAndBindUi(this);

  // Tweak a bunch of settings on the UI elements.
  ...

  RootLayoutPanel.get().add(outer);
  deckLayoutPanel.showWidget(instancesPanel);
}

ページをホストする HTML は次のとおりです。

<!doctype html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="MyWebApp.css">

    <title>MyWebApp</title>

    <script type="text/javascript" language="javascript" src="MyWebApp/MyWebApp.nocache.js"></script>
  </head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
  </body>
</html>
4

1 に答える 1