#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



トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
目次
ダブルクリックで閉じるTOP | 閉じる
GO TO TOP