1

Google の Web Toolkit で自分の道を見つけようとしています。そこで、高さ 100%、幅 100% のレイアウトの小さなページを作りたいと思いました。マージンもパディングもスクロールバーも必要ありませんでした。

DockPanel を使用して、次のようにページに追加しました。

package de.kuntze.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class BeginningGWT_BookExample implements EntryPoint {
  public void onModuleLoad() {
    DockPanel mainPanel = new DockPanel();
    mainPanel.setBorderWidth(5);
    mainPanel.setSize("100%", "100%");
    mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
    mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

    Widget header = new Label("Header");
    mainPanel.add(header, DockPanel.NORTH);
    mainPanel.setCellHeight(header, "30px");

    Widget footer = new Label("Footer");
    mainPanel.add(footer, DockPanel.SOUTH);
    mainPanel.setCellHeight(footer, "25px");

    Widget categories = new Label("Categories");
    mainPanel.add(categories, DockPanel.WEST);
    mainPanel.setCellWidth(categories, "150px");
    mainPanel.setCellHeight(categories, "500px");

    Widget tasks = new Label("Tasks");
    mainPanel.add(tasks, DockPanel.EAST);
    RootPanel.get().add(mainPanel);
  }

}

また、html と body タグを構成するための CSS コードをいくつか追加しました。

* {
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
}

html, body{
  height: 100%;
  width: 100%;
  min-height: 100%;
}

私が使用するhtmlページは次のようになります。

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="BeginningGWT_BookExample.css">
    <title>Web Application Starter Project</title>
    <script type="text/javascript" language="javascript" src="beginninggwt_bookexample/beginninggwt_bookexample.nocache.js"></script>
  </head>

  <body>
  </body>
</html>

ここで私の問題が発生します。コンパイルされた Web ページには、左側に 5 ~ 10 ピクセル (推定) の余白があり、これを説明したり取り除くことはできません。Chrome と firefox で確認しましたが、結果は同じでした。左側の余分なスペースを取り除くにはどうすればよいですか? 100% 埋め尽くされたウェブサイトを作りたいです。

ご回答ありがとうございます。

アンドレ

PS: 今のところ UI Binder を使わない方法を学ぶ必要があるため、意図的に UI Binder を使用しませんでした。ですから、それについての議論を始めないでください。ありがとう ;-)

4

2 に答える 2

3

10px の余白は、適用される Clean テーマの一部である clean.css から取得されます。

このテーマは、モジュール構成ファイルから標準テーマに変更できます。

削除するかコメントするだけ

  <inherits name='com.google.gwt.user.theme.clean.Clean'/>

そして追加

  <inherits name='com.google.gwt.user.theme.standard.Standard'/>

そうすることで、マージンが削除されます。

または、css のスタイルをオーバーライドすることもできます。そのため、ボディ スタイルにも「margin 0px !important;」を追加します。

html, body{
   height: 100%;
   width: 100%;
   min-height: 100%;
   margin 0px !important
}
于 2012-09-03T23:21:04.603 に答える
0

問題は:

RootPanel.get().add(メインパネル)

DockLayoutPanel では、使用する必要があります

RootLayoutPanel.get().add(メインパネル)

https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanelsをご覧ください

RootLayoutPanel

このパネルは、他のすべてのレイアウト パネルを接続する必要があるルート コンテナーとして機能するシングルトンです (詳細については、以下の RequiresResize および ProvidesResize を参照してください)。これは LayoutPanel を拡張するため、任意の制約を使用して任意の数の子を配置できます。

次のスニペットのように、RootLayoutPanel を別のパネルのコンテナーとして使用するのが最も一般的です。これにより、DockLayoutPanel がブラウザーのクライアント領域を埋めます。

DockLayoutPanel appPanel = new DockLayoutPanel(Unit.EM); RootLayoutPanel.get().add(appPanel);

これを行うと、css を取り除くことができます (DockLayoutPanel はとにかくすべてのスペースを使用します。それがどのように機能するかです)。

html, body{
  height: 100%;
  width: 100%;
  min-height: 100%;
}
于 2012-09-04T06:54:38.317 に答える