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 を使用しませんでした。ですから、それについての議論を始めないでください。ありがとう ;-)