ListViewのサンプルを追加

JavaScript-WindowFramework · Sep 11, 2019 · 8a98c9c · 8a98c9c
1 parent 668bd51
commit 8a98c9c
Show file tree

Hide file tree

Showing 8 changed files with 265 additions and 110 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.js.map b/dist/bundle.js.map
diff --git a/dist/index.html b/dist/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
 	<script type="text/javascript" src="bundle.js"></script>
 </head>
+
 <body>
 </body>
+
 </html>
diff --git a/package.json b/package.json
@@ -8,16 +8,25 @@
 		"start": "npx webpack-dev-server",
 		"build": "npx webpack"
 	},
-	"keywords": ["JWF"],
+	"keywords": [
+		"JWF"
+	],
 	"author": "",
 	"license": "MIT",
 	"dependencies": {
-		"javascript-window-framework": "0.0.6"
+		"javascript-window-framework": "0.0.9"
 	},
 	"devDependencies": {
+		"css-loader": "^2.1.1",
+		"dts-bundle": "^0.7.3",
+		"node-sass": "^4.12.0",
+		"sass-loader": "^7.1.0",
+		"source-map-loader": "^0.2.4",
+		"style-loader": "^0.23.1",
 		"ts-loader": "^6.0.1",
 		"typescript": "^3.4.5",
-		"webpack": "^4.31.0",
+		"url-loader": "^1.1.2",
+		"webpack": "^4.32.2",
 		"webpack-cli": "^3.3.2",
 		"webpack-dev-server": "^3.4.1"
 	}

diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,109 @@
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var JWF = __importStar(require("javascript-window-framework"));
+function Sample001() {
+    var win = new JWF.FrameWindow(); //フレームウインドウの作成
+    win.setTitle("Sample01 ウインドウを表示"); //タイトルの設定
+    win.setPos(); //位置を中心に設定
+}
+function Sample002() {
+    var win = new JWF.FrameWindow(); //フレームウインドウの作成
+    win.setTitle("Sample02 位置サイズ指定"); //タイトルの設定
+    win.setSize(100, 100); //サイズの変更
+    win.setPos(10, 10); //位置指定
+    var client = win.getClient(); //クライアントノードの取得
+    win.addEventListener("active", function (e) {
+        client.innerText = e.active
+            ? "アクティブになった"
+            : "非アクティブになった";
+    });
+}
+function Sample003() {
+    var listView = new JWF.ListView({ frame: true }); //リストビューをフレーム付きで作成
+    listView.setTitle("Sample03 リストビュー"); //タイトルの設定
+    listView.addHeader(["番号", "名前", "攻撃力"]); //ヘッダの作成
+    listView.addItem([1, "竹槍", 5]); //アイテムの設定
+    listView.addItem([2, "棍棒", 10]);
+    listView.addItem([3, "銅の剣", 10]);
+    listView.setPos(30, 30); //位置指定
+    listView.addEventListener("itemClick", function (e) {
+        //アイテムクリック処理
+        var name = listView.getItemText(e.itemIndex, 1); //リストビューからデータを取り出す
+        new JWF.MessageBox("メッセージ", name + "が選択された"); //メッセージボックスの表示
+    });
+}
+function Sample004() {
+    //ツリービューの作成
+    var treeView = new JWF.TreeView({ frame: true });
+    treeView.setTitle("Sample04 ツリービュー"); //タイトルの設定
+    //サイズ設定
+    treeView.setSize(300, 300);
+    //ルートアイテムに対して名前の設定
+    treeView.getRootItem().setItemText("ルートアイテム");
+    //アイテムを作成
+    var item;
+    item = treeView.addItem("アイテム1");
+    item.addItem("アイテム1-1");
+    item.addItem("アイテム1-2");
+    item = treeView.addItem("アイテム2");
+    item.addItem("アイテム2-1");
+    item.addItem("アイテム2-2");
+    item.addItem;
+    //アイテムが選択された場合のイベント
+    treeView.addEventListener("itemSelect", function (e) {
+        var name = e.item.getItemText(); //リストビューからデータを取り出す
+        new JWF.MessageBox("メッセージ", name + "が選択された"); //メッセージボックスの表示
+    });
+}
+function Sample005() {
+    var frame = new JWF.FrameWindow();
+    frame.setTitle("Sample005 分割ウインドウ"); //タイトル設定
+    var splitter = new JWF.Splitter(); //分割バーの作成
+    frame.addChild(splitter, "client"); //分割バーをフレームウインドウに乗せる
+    var tree = new JWF.TreeView(); //ツリービューの作成
+    var list = new JWF.ListView(); //リストビューの作成
+    splitter.addChild(0, tree, "client"); //splitterの分割領域0にtreeを追加
+    splitter.addChild(1, list, "client"); //splitterの分割領域1にlistを追加
+    //分割バーの分割サイズと方向設定(WestEast、左右)
+    //weは左が領域0、右が領域1
+    //nsにすると上下分割も可能
+    splitter.setSplitterPos(200, "we");
+    //表示領域が300を切ると、動的なオーバーレイ表示にする
+    splitter.setOverlay(true, 300);
+    //treeにアイテムを追加
+    tree.getRootItem().setItemText("最上位アイテム");
+    for (var j = 0; j < 5; j++) {
+        var item = tree.addItem("アイテム" + j, true);
+        for (var i = 0; i < 5; i++)
+            item.addItem("サブアイテム" + j + "-" + i, false);
+    }
+    //アイテムが選択された場合のイベント
+    tree.addEventListener("itemSelect", function (e) {
+        var value = e.item.getItemText();
+        if (value) {
+            var no = list.getItemCount();
+            var date = new Date().toLocaleString();
+            list.addItem([no.toString(), value, date]);
+        }
+    });
+    //listにヘッダを追加
+    list.addHeader(["番号", ["名前", 200], "時刻"]);
+    //位置とサイズの設定
+    frame.setSize(800, 600);
+    frame.setPos();
+}
+//ページ読み込み時に実行する処理を設定
+addEventListener("DOMContentLoaded", function () {
+    Sample001();
+    Sample002();
+    Sample003();
+    Sample004();
+    Sample005();
+});
diff --git a/src/index.ts b/src/index.ts
@@ -1,112 +1,126 @@
-import * as JWF from 'javascript-window-framework'
-//ページ読み込み時に実行する処理を設定
-addEventListener("DOMContentLoaded", Main)
-
-function Main() {
-	Sample001()
-	Sample002()
-	Sample003()
-	Sample004()
-	Sample005()
-}
+import * as JWF from "javascript-window-framework";
 
-function Sample001() {
-	const win = new JWF.FrameWindow()			//フレームウインドウの作成
-	win.setTitle('Sample01 ウインドウを表示')	//タイトルの設定
-	win.setPos()								//位置を中心に設定
+function Sample001(): void {
+  const win = new JWF.FrameWindow(); //フレームウインドウの作成
+  win.setTitle("Sample01 ウインドウを表示"); //タイトルの設定
+  win.setPos(); //位置を中心に設定
 }
 
-function Sample002() {
-	const win = new JWF.FrameWindow()	//フレームウインドウの作成
-	win.setTitle('Sample02 位置サイズ指定')	//タイトルの設定
-	win.setSize(100, 100)				//サイズの変更
-	win.setPos(10, 10)					//位置指定
-	const client = win.getClient()		//クライアントノードの取得
-	win.addEventListener('active', (e) => {
-		client.innerText = e.active ? 'アクティブになった' : '非アクティブになった'
-	})
+function Sample002(): void {
+  const win = new JWF.FrameWindow(); //フレームウインドウの作成
+  win.setTitle("Sample02 位置サイズ指定"); //タイトルの設定
+  win.setSize(100, 100); //サイズの変更
+  win.setPos(10, 10); //位置指定
+  const client = win.getClient(); //クライアントノードの取得
+  win.addEventListener(
+    "active",
+    (e): void => {
+      client.innerText = e.active
+        ? "アクティブになった"
+        : "非アクティブになった";
+    }
+  );
 }
 
-function Sample003() {
-	const listView = new JWF.ListView({ frame: true })	//リストビューをフレーム付きで作成
-	listView.setTitle('Sample03 リストビュー')		//タイトルの設定
-	listView.addHeader(['番号', '名前', '攻撃力'])	//ヘッダの作成
-	listView.addItem([1, '竹槍', 5])				//アイテムの設定
-	listView.addItem([2, '棍棒', 10])
-	listView.addItem([3, '銅の剣', 10])
-	listView.setPos(30, 30)							//位置指定
+function Sample003(): void {
+  const listView = new JWF.ListView({ frame: true }); //リストビューをフレーム付きで作成
+  listView.setTitle("Sample03 リストビュー"); //タイトルの設定
+  listView.addHeader(["番号", "名前", "攻撃力"]); //ヘッダの作成
+  listView.addItem([1, "竹槍", 5]); //アイテムの設定
+  listView.addItem([2, "棍棒", 10]);
+  listView.addItem([3, "銅の剣", 10]);
+  listView.setPos(30, 30); //位置指定
 
-	listView.addEventListener('itemClick', (e) => {	//アイテムクリック処理
-		const name = listView.getItemText(e.itemIndex, 1)	//リストビューからデータを取り出す
-		new JWF.MessageBox('メッセージ', name + "が選択された")	//メッセージボックスの表示
-	})
+  listView.addEventListener(
+    "itemClick",
+    (e): void => {
+      //アイテムクリック処理
+      const name = listView.getItemText(e.itemIndex, 1); //リストビューからデータを取り出す
+      new JWF.MessageBox("メッセージ", name + "が選択された"); //メッセージボックスの表示
+    }
+  );
 }
-function Sample004() {
-	//ツリービューの作成
-	let treeView = new JWF.TreeView({ frame: true })
-	treeView.setTitle('Sample04 ツリービュー')		//タイトルの設定
-	//サイズ設定
-	treeView.setSize(300, 300)
-	//ルートアイテムに対して名前の設定
-	treeView.getRootItem().setItemText('ルートアイテム')
+function Sample004(): void {
+  //ツリービューの作成
+  let treeView = new JWF.TreeView({ frame: true });
+  treeView.setTitle("Sample04 ツリービュー"); //タイトルの設定
+  //サイズ設定
+  treeView.setSize(300, 300);
+  //ルートアイテムに対して名前の設定
+  treeView.getRootItem().setItemText("ルートアイテム");
 
-	//アイテムを作成
-	let item
-	item = treeView.addItem('アイテム1')
-	item.addItem('アイテム1-1')
-	item.addItem('アイテム1-2')
-	item = treeView.addItem('アイテム2')
-	item.addItem('アイテム2-1')
-	item.addItem('アイテム2-2')
+  //アイテムを作成
+  let item: JWF.TreeItem;
+  item = treeView.addItem("アイテム1");
+  item.addItem("アイテム1-1");
+  item.addItem("アイテム1-2");
+  item = treeView.addItem("アイテム2");
+  item.addItem("アイテム2-1");
+  item.addItem("アイテム2-2");
+  item.addItem;
 
-	//アイテムが選択された場合のイベント
-	treeView.addEventListener('itemSelect', function (e) {
-		const name = e.item.getItemText()	//リストビューからデータを取り出す
-		new JWF.MessageBox('メッセージ', name + "が選択された")	//メッセージボックスの表示
-	})
+  //アイテムが選択された場合のイベント
+  treeView.addEventListener("itemSelect", function(e): void {
+    const name = e.item.getItemText(); //リストビューからデータを取り出す
+    new JWF.MessageBox("メッセージ", name + "が選択された"); //メッセージボックスの表示
+  });
 }
-function Sample005() {
-	const frame = new JWF.FrameWindow()
-	frame.setTitle('Sample005 分割ウインドウ')	//タイトル設定
+function Sample005(): void {
+  const frame = new JWF.FrameWindow();
+  frame.setTitle("Sample005 分割ウインドウ"); //タイトル設定
 
-	const splitter = new JWF.Splitter()		//分割バーの作成
-	frame.addChild(splitter, 'client')		//分割バーをフレームウインドウに乗せる
+  const splitter = new JWF.Splitter(); //分割バーの作成
+  frame.addChild(splitter, "client"); //分割バーをフレームウインドウに乗せる
 
-	const tree = new JWF.TreeView()			//ツリービューの作成
-	const list = new JWF.ListView()			//リストビューの作成
+  const tree = new JWF.TreeView(); //ツリービューの作成
+  const list = new JWF.ListView(); //リストビューの作成
 
-	splitter.addChild(0, tree, 'client')	//splitterの分割領域0にtreeを追加
-	splitter.addChild(1, list, 'client')	//splitterの分割領域1にlistを追加
+  splitter.addChild(0, tree, "client"); //splitterの分割領域0にtreeを追加
+  splitter.addChild(1, list, "client"); //splitterの分割領域1にlistを追加
 
-	//分割バーの分割サイズと方向設定(WestEast、左右)
-	//weは左が領域0、右が領域1
-	//nsにすると上下分割も可能
-	splitter.setSplitterPos(200, 'we')
-	//表示領域が300を切ると、動的なオーバーレイ表示にする
-	splitter.setOverlay(true, 300)
+  //分割バーの分割サイズと方向設定(WestEast、左右)
+  //weは左が領域0、右が領域1
+  //nsにすると上下分割も可能
+  splitter.setSplitterPos(200, "we");
+  //表示領域が300を切ると、動的なオーバーレイ表示にする
+  splitter.setOverlay(true, 300);
 
-	//treeにアイテムを追加
-	tree.getRootItem().setItemText('最上位アイテム')
-	for (let j = 0; j < 5; j++) {
-		let item = tree.addItem("アイテム" + j, true)
-		for (let i = 0; i < 5; i++)
-			item.addItem("サブアイテム" + j + "-" + i, false)
-	}
-	//アイテムが選択された場合のイベント
-	tree.addEventListener('itemSelect', function (e) {
-		const value = e.item.getItemText()
-		if (value) {
-			const no = list.getItemCount()
-			const date = (new Date()).toLocaleString()
-			list.addItem([no.toString(), value, date])
-		}
-	})
+  //treeにアイテムを追加
+  tree.getRootItem().setItemText("最上位アイテム");
+  for (let j = 0; j < 5; j++) {
+    let item = tree.addItem("アイテム" + j, true);
+    for (let i = 0; i < 5; i++)
+      item.addItem("サブアイテム" + j + "-" + i, false);
+  }
+  //アイテムが選択された場合のイベント
+  tree.addEventListener(
+    "itemSelect",
+    (e): void => {
+      const value = e.item.getItemText();
+      if (value) {
+        const no = list.getItemCount();
+        const date = new Date().toLocaleString();
+        list.addItem([no.toString(), value, date]);
+      }
+    }
+  );
 
-	//listにヘッダを追加
-	list.addHeader(['番号', ['名前', 200], '時刻'])
+  //listにヘッダを追加
+  list.addHeader(["番号", ["名前", 200], "時刻"]);
 
-	//位置とサイズの設定
-	frame.setSize(800, 600)
-	frame.setPos()
+  //位置とサイズの設定
+  frame.setSize(800, 600);
+  frame.setPos();
+}
 
-}
+//ページ読み込み時に実行する処理を設定
+addEventListener(
+  "DOMContentLoaded",
+  (): void => {
+    Sample001();
+    Sample002();
+    Sample003();
+    Sample004();
+    Sample005();
+  }
+);