- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2018-05-15T13:24:39+00:00","default:haikikyou","haikikyou")
#author("2018-05-15T13:30:37+00:00","default:haikikyou","haikikyou")
#contents
* TabPane [#jc41909e]
- タブ付きのビューを提供する
#ref(javafx-container-tabpane.png)
&label(sample){サンプル}; WebViewのページをタブで表示する
&ref(./SampleTabPane.java);
#geshi(java){{{
package sample;
import org.w3c.dom.Document;
import org.w3c.dom.Element;
import org.w3c.dom.NodeList;
import org.w3c.dom.events.EventListener;
import org.w3c.dom.events.EventTarget;
import javafx.application.Application;
import javafx.concurrent.Worker;
import javafx.scene.Scene;
import javafx.scene.control.SingleSelectionModel;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.control.Tooltip;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class SampleTabPane extends Application {
TabPane tabPane = new TabPane();
/**
* Initialize stage and start scene.
*
* @param primaryStage
* @throws Exception
*/
@Override
public void start(Stage primaryStage) throws Exception {
loadContentOnNewTab("https://haikikyou.xsrv.jp/pwiki/");
// Create a scene
Scene scene = new Scene(tabPane, 700, 700);
primaryStage.setScene(scene);
// Show window.
primaryStage.show();
}
void loadContentOnNewTab(String url) {
// Create a new tab
Tab tab = new Tab(url.substring(0, Math.min(url.length(), 20)) + "...");
Tab tab = new Tab(url.substring(0, Math.min(url.length(), 20))
+ (url.length() > 20 ? "..." : ""));
tab.setTooltip(new Tooltip(url));
// Create a content in the tab.
WebView webView = new WebView();
// Load content.
WebEngine engine = webView.getEngine();
webView.getEngine().load(url);
// Set the content to the tab pane.
tab.setContent(webView);
tabPane.getTabs().add(tab);
engine.getLoadWorker().stateProperty().addListener((observable, oldState, newState) -> {
if (newState == Worker.State.SUCCEEDED) {
EventListener listener = new EventListener() {
@Override
public void handleEvent(org.w3c.dom.events.Event event) {
String href = ((Element) event.getTarget()).getAttribute("href");
// href must be a page anchor.
if (href.indexOf("#") >= 0) {
return;
}
event.preventDefault();
// Open a clicked page with a new tab.
loadContentOnNewTab(href);
}
};
Document doc = engine.getDocument();
NodeList hyperLinks = doc.getElementsByTagName("a");
for (int i = 0; i < hyperLinks.getLength(); i++) {
((EventTarget) hyperLinks.item(i)).addEventListener("click", listener, false);
}
}
});
SingleSelectionModel<Tab> selectionModel = tabPane.getSelectionModel();
selectionModel.select(tab);
}
/**
* Launch application.
*
* @param args
*/
public static void main(String[] args) {
launch(args);
}
}
}}}
&label(info){補足};
- WebViewのリンクをクリックすると新規タブでWebページを表示する。
- ページ内リンクのクリックイベントを受け取りたいため、DOMの要素にクリックハンドラを登録している。
- タブのテキスト文字数は、最大20文字とする。
- タブのマウスオーバーでツールチップを表示する。
* 参考リンク [#k355bfc6]
- https://docs.oracle.com/javase/jp/8/javafx/api/javafx/scene/control/TabPane.html
- https://docs.oracle.com/javase/jp/8/javafx/api/javafx/scene/control/Tab.html