SQLの窓 イラストAC フリー素材

2012年03月19日

Win8 Metro(JS) : Split Application : categoryPage.js


(function () {
	'use strict';

	// Custom event raised after the fragment is appended to the DOM.
	WinJS.Application.addEventListener('fragmentappended', function handler(e) {
		if (e.location === '/html/categoryPage.html') { fragmentLoad(e.fragment, e.state); }
	});

	function updateForLayout(lv, layout) {
		var layoutState = Windows.UI.ViewManagement.ApplicationLayoutState;
		if (layout === layoutState.snapped) {
			lv.layout = new WinJS.UI.ListLayout();
		} else {
			lv.layout = new WinJS.UI.GridLayout();
		}
		lv.refresh();
	}

	function layoutChanged(e) {
		var list = document.querySelector('.categoryList');
		if (list) {
			var lv = WinJS.UI.getControl(list);
			updateForLayout(lv, e.layout);
		}
	}

	function fragmentLoad(elements, options) {
		try {
			var appLayout = Windows.UI.ViewManagement.ApplicationLayout.getForCurrentView();
			if (appLayout) {
				appLayout.addEventListener('layoutchanged', layoutChanged);
			}
		} catch(e) { }

		WinJS.UI.processAll(elements)
			.then(function () {
				var lv = WinJS.UI.getControl(elements.querySelector('.categoryList'));
				WinJS.UI.setOptions(lv, {
					dataSource: pageData.groups,
					itemRenderer: elements.querySelector('.itemTemplate'),
					oniteminvoked: itemInvoked,
				});
				updateForLayout(lv, Windows.UI.ViewManagement.ApplicationLayout.value);
			});

		return;
	}
	
	function itemInvoked(e) {
		var group = pageData.groups[e.detail.itemIndex];
		WinJS.Navigation.navigate('/html/splitPage.html', { group: group });
	}

	// The getGroups() and getItems() functions contain sample data.
	// TODO: Replace with custom data.
	function getGroups() {
		var colors = ['rgba(209, 211, 212, 1)', 'rgba(147, 149, 152, 1)', 'rgba(65, 64, 66, 1)'];
		var groups = [];

		for (var i = 0; i < 12; i++) {
			var even = (i % 2) === 0;
			groups.push({
				key: 'group' + i,
				title: 'Collection title lorem ' + i,
				backgroundColor: colors[i % colors.length],
				label: 'Eleifend posuere',
				description: even ? '?Sed nisl nibh, eleifend posuere.' : '?Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem.',
				fullDescription: '? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.' + (even ? '' : ' ? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.')
			});
		}

		return groups;
	}

	function getItems() {
		var colors = ['rgba(209, 211, 212, 1)', 'rgba(147, 149, 152, 1)', 'rgba(65, 64, 66, 1)'];
		var items = [];

		for (var g = 0, gl = pageData.groups.length; g < gl; g++) {
			var numItems = g % 2 === 0 ? 12 : 9;
			for (var i = 0; i < numItems; i++) {
				items.push({
					group: pageData.groups[g],
					key: 'item' + i,
					title: g + '.' + i + (i % 2 === 0 ? ' ?Sed nisl nibh, eleifend posuere.' : ' ?Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem.'),
					subtitle: 'Phasellus faucibus',
					backgroundColor: colors[i % colors.length],
					content: (new Array(5)).join('<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>'),
					description: '? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
				});
			}
		}

		return items;
	}

	var pageData = {};
	pageData.groups = getGroups();
	pageData.items = getItems();

	WinJS.Namespace.define('categoryPage', {
		fragmentLoad: fragmentLoad,
		itemInvoked: itemInvoked
	});
})();



posted by at 2012-03-19 18:07 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Win8 Metro(JS) : Split Application : categoryPage.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>categoryPage</title>
	
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="ms-deferred/javascript" src="/winjs/js/base.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/ui.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/binding.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/controls.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/animations.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/uicollections.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/wwaapp.js"></script>
	
<link rel="stylesheet" href="/css/default.css" />
<link rel="stylesheet" href="/css/categoryPage.css" />
<script type="ms-deferred/javascript" src="/js/categoryPage.js"></script>
</head>
<body>
	<!-- This template is used to display each item in the ListView declared below. -->
	<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
		<div class="largeTileTextTemplate">
			<div class="largeTileTextTemplateBackground" data-win-bind="style.backgroundColor: backgroundColor"></div>
			<div class="largeTileTextTemplateOverlay">
				<div class="largeTileTextTemplateLargeText" data-win-bind="textContent: title"></div>
				<div class="largeTileTextTemplateSmallText" data-win-bind="textContent: description"></div>
			</div>
		</div>
	</div>

	<!-- The content that will be loaded and displayed. -->
	<div class="categoryPage fragment">
		<header role="banner" aria-label="Header content">
			<button disabled class="win-backbutton" aria-label="Back"></button>
			<div class="titleArea">
				<h1 class="pageTitle win-title">splitApp</h1>
			</div>
		</header>
		<section role="main" aria-label="Main content">
			<div class="categoryList"
				 data-win-control="WinJS.UI.ListView"
				 data-win-options="{layout: {type: WinJS.UI.GridLayout}, selectionMode: 'none'}"
				 aria-label="Categories">
			</div>
		</section>
	</div>
</body>
</html>




posted by at 2012-03-19 18:06 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Win8 Metro(JS) : Split Application : splitPage.js




(function () {
	'use strict';

	WinJS.Application.addEventListener('fragmentappended', function handler(e) {
		if (e.location === '/html/splitPage.html') { fragmentLoad(e.fragment, e.state); }
	});

	function updateForLayout(lv, layout) {
		lv.layout = new WinJS.UI.ListLayout();
		lv.refresh();
	}

	function layoutChanged(e) {
		var list = document.querySelector('.itemList');
		if (list) {
			var lv = WinJS.UI.getControl(list);
			updateForLayout(lv, e.layout);
		}
	}

	function fragmentLoad(elements, options) {
		if (!WinJS.Navigation.canGoBack) {
			WinJS.Navigation.history.backStack[0] = { location: '/html/categoryPage.html' };
			var backButton = document.querySelector('header[role=banner] .win-backbutton');
			if (backButton) {
				backButton.removeAttribute('disabled');
			}
		}

		try {
			var appLayout = Windows.UI.ViewManagement.ApplicationLayout.getForCurrentView();
			if (appLayout) {
				appLayout.addEventListener('layoutchanged', layoutChanged);
			}
		} catch (e) { }

		splitPage.groups = pageData.groups;
		var group = (options && 'group' in options) ? options.group : pageData.groups[0];
		splitPage.items = pageData.items.filter(function (item) { return item.group.key === group.key }),
		splitPage.selectedItem = splitPage.items[0];

		elements.querySelector('.pageTitle').textContent = group.title;

		WinJS.UI.processAll(elements)
			.then(function () {
				var lv = WinJS.UI.getControl(elements.querySelector('.itemList'));
				lv.itemRenderer = elements.querySelector('.itemTemplate');
				updateForLayout(lv, Windows.UI.ViewManagement.ApplicationLayout.value);

				var details = elements.querySelector('.articleSection');
				return WinJS.Binding.processAll(details, splitPage.selectedItem);
			});

	}

	function itemInvoked(e) {
		var details = document.querySelector('.articleSection');
		splitPage.selectedItem = splitPage.items[e.detail.itemIndex];
		WinJS.Binding.processAll(details, splitPage.selectedItem);
		details.scrollTop = 0;
	}

	// *************************************************
	// データ作成本体
	// *************************************************
	function getGroups() {
		var colors = ['rgba(209, 211, 212, 1)', 'rgba(147, 149, 152, 1)', 'rgba(65, 64, 66, 1)'];
		var groups = [];

		for (var i = 0; i < 12; i++) {
			var even = (i % 2) === 0;
			groups.push({
				key: 'group' + i,
				title: 'Collection title lorem ' + i,
				backgroundColor: colors[i % colors.length],
				label: 'Eleifend posuere',
				description: even ? '?Sed nisl nibh, eleifend posuere.' : '?Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem.',
				fullDescription: '? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.' + (even ? '' : ' ? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.')
			});
		}

		return groups;
	}

	function getItems() {
		var colors = ['rgba(209, 211, 212, 1)', 'rgba(147, 149, 152, 1)', 'rgba(65, 64, 66, 1)'];
		var items = [];

		for (var g = 0, gl = pageData.groups.length; g < gl; g++) {
			var numItems = g % 2 === 0 ? 12 : 9;
			for (var i = 0; i < numItems; i++) {
				items.push({
					group: pageData.groups[g],
					key: 'item' + i,
					title: g + '.' + i + (i % 2 === 0 ? ' ?Sed nisl nibh, eleifend posuere.' : ' ?Sed nisl nibh, eleifend posuere laoreet egestas, porttitor quis lorem.'),
					subtitle: 'Phasellus faucibus',
					backgroundColor: colors[i % colors.length],
					content: (new Array(5)).join('<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>'),
					description: '? Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'
				});
			}
		}

		return items;
	}

	// データ作成
	var pageData = {};
	pageData.groups = getGroups();
	pageData.items = getItems();

	// 参照用の Namespace 定義
	WinJS.Namespace.define('splitPage', {
		fragmentLoad: fragmentLoad,
		itemInvoked: itemInvoked
	});
})();



posted by at 2012-03-19 18:01 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Win8 Metro(JS) : Split Application : splitPage.html

リストビューが使用されています


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>splitPage</title>

<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script type="ms-deferred/javascript" src="/winjs/js/base.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/ui.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/binding.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/controls.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/animations.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/uicollections.js"></script>
<script type="ms-deferred/javascript" src="/winjs/js/wwaapp.js"></script>
	
<link rel="stylesheet" href="/css/default.css" />
<link rel="stylesheet" href="/css/splitPage.css" />
<script type="ms-deferred/javascript" src="/js/splitPage.js"></script>
</head>
<body>
	<!-- This template is used to display each item in the ListView declared below. -->
	<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
		<div class="largeIconTextTemplate">
			<div class="largeIconTextTemplateImage" data-win-bind="style.backgroundColor: backgroundColor"></div>
			<div class="largeIconTextTemplateBackground">
				<div class="largeIconTextTemplateLargeText win-itemTextStrong" data-win-bind="textContent: title"></div>
				<div class="largeIconTextTemplateSmallText win-itemTextTertiary" data-win-bind="textContent: subtitle"></div>
				<div class="largeIconTextTemplateMediumText win-itemText" data-win-bind="textContent: description"></div>
			</div>
		</div>
	</div>

	<!-- The content that will be loaded and displayed. -->
	<div class="splitPage fragment">
		<header role="banner" aria-label="Header content">
			<button disabled class="win-backbutton" aria-label="Back"></button>
			<h1 class="pageTitle win-title"></h1>
		</header>
		<section class="itemListSection">
			<div class="itemList"
					data-win-control="WinJS.UI.ListView" 
					data-win-options="{dataSource: splitPage.items, oniteminvoked: splitPage.itemInvoked,  layout: {type: WinJS.UI.ListLayout}, selectionMode: 'none' }"></div>
		</section>
		<section class="articleSection" aria-live="assertive" aria-atomic="true" aria-label="Item detail">
			<header class="header">
				<div class="image" data-win-bind="style.backgroundColor: backgroundColor; style.backgroundImage: backgroundImage; alt: title"></div>
				<div class="text">
					<h1 class="title win-contentTitle" data-win-bind="textContent: title"></h1>
					<h2 class="subtitle win-itemText" data-win-bind="textContent: subtitle"></h2>
					<p class="description" data-win-bind="textContent: description"></p>
				</div>
			</header>
			<article class="content" data-win-bind="innerHTML: content"></article>
		</section>
	</div>
</body>
</html>



posted by at 2012-03-19 17:50 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Win8 Metro(JS) : Split Application : default.js

どうも navigate の意味が不明です。そのページを単純に表示するのかと
思ったら、URL から clone して、default.html に追加しています。

(function () {
	'use strict';

	var homePage;

	// ***********************************************************
	// home ボタンに対する click イベント
	// ***********************************************************
	function navigateHome() {
		var loc = WinJS.Navigation.location;
		var home = WinJS.Navigation.history.backStack.length > 0 ? WinJS.Navigation.history.backStack[0] : null;
		if (loc !== '' && home && loc !== home.location) {
			WinJS.Navigation.navigate(home.location, home.state);
		}

		// アプリケーションバーの非表示
		WinJS.UI.getControl(document.getElementById('appbar')).hide();
	}

	// ***********************************************************
	// ページを default.html に組み込む ???
	// ***********************************************************
	function navigated(e) {
		WinJS.UI.Fragments.clone(e.detail.location, e.detail.state)
			.then(function (frag) {
				var host = document.getElementById('contentHost');
				host.innerHTML = '';
				host.appendChild(frag);
				document.body.focus();

				var backButton = document.querySelector('header[role=banner] .win-backbutton');
				if (backButton) {
					backButton.addEventListener('click', function () {
						WinJS.Navigation.back();
					}, false);
					if (WinJS.Navigation.canGoBack) {
						backButton.removeAttribute('disabled');
					}
					else {
						backButton.setAttribute('disabled', 'true');
					}
				}
				WinJS.Application.queueEvent({
					type: 'fragmentappended',
					location: e.detail.location,
					fragment: host,
					state: e.detail.state
				 });

			});
		}

	// ***********************************************************
	// 初期処理
	// ***********************************************************
	WinJS.Application.onmainwindowactivated = function (e) {
		if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

			// ここでは、/html/splitPage.html
			homePage = document.body.getAttribute('data-homePage');

			document.body.addEventListener('keyup', function (e) {
				if (e.altKey) {
					if (e.keyCode === WinJS.Utilities.Key.leftArrow) {
						WinJS.Navigation.back();
					}
					else if (e.keyCode === WinJS.Utilities.Key.rightArrow) {
						WinJS.Navigation.forward();
					}
				}
			}, false);

			// 要素にコントロールを適用
			WinJS.UI.process(document.getElementById('appbar'))
				.then(function () {
					// 適用終了後 home ボタンに対する click イベントを登録
					document.getElementById('home').addEventListener('click', navigateHome, false);
				});

			// ページ作成
			WinJS.Navigation.navigate(homePage);
		}
	}

	WinJS.Navigation.addEventListener('navigated', navigated);
	WinJS.Application.start();

})();



posted by at 2012-03-19 17:37 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Win8 Metro(JS) : Split Application : default.html



■ 左下の home の上の図形が &#xE10F; に相当します
■ position は bottom か top (右クリックでアプリケーションバーが表示されます)

WinJS.UI.getControl(document.getElementById('appbar')).show();
WinJS.UI.getControl(document.getElementById('appbar')).hide();

で アプリケーションバー を表示・非表示可能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>splitApp</title>

<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/ui.js"></script>
<script src="/winjs/js/binding.js"></script>
<script src="/winjs/js/controls.js"></script>
<script src="/winjs/js/animations.js"></script>
<script src="/winjs/js/uicollections.js"></script>
<script src="/winjs/js/wwaapp.js"></script>

<link rel="stylesheet" href="/css/default.css" />
<script src="/js/default.js"></script>
</head>
<body data-homePage="/html/splitPage.html">
	<div id="contentHost"></div>
	<div
		id="appbar"
		data-win-control="WinJS.UI.AppBar"
		aria-label="Command Bar"
		data-win-options="{
			position:'bottom',
			transient:true,
			autoHide:0,
			lightDismiss:false
		}"
	>
		<div class="win-left">
			<button id="home" class="win-command">
				<span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
			</button>
		</div>
	</div>
</body>
</html>



posted by at 2012-03-19 16:41 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

Win8 Metro(JS) : Role 属性

あまり深い意味はなさそうですが、資料です。

XHTML Role 属性モジュール

《role はユーザーの判断を助けるため、文書の領域を定義することを目的としています》
banner 
complementary 
contentinfo 
main 
navigation 
note 
search 

CSS で対象を限定する為に使われていました
.fragment header[role=banner] {
    display: -ms-grid;
    -ms-grid-columns: 120px 1fr;
    -ms-grid-rows: 1fr;
}

.fragment header[role=banner] .win-backbutton {
    margin-left: 40px;
    margin-top: 60px;
}

.fragment header[role=banner] .titleArea {
    -ms-grid-column: 2;
}

.fragment header[role=banner] .pageTitle {
    margin-top: 44px;
    height: 60pt;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-left: -4px;
    display: inline-block;
}

.fragment section[role=main] {
    -ms-grid-row: 2;
    width: 100%;
    height: 100%;
}



posted by at 2012-03-19 10:31 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月13日

Windows8 Metro(JS) : ListView の処理

サンプルコードからしか正しい情報を得る事ができない事が解りました。
Microsoft のサイトのドキュメントは相当古いようです。VS11 もまだまだ
未完成の部分が多いようです。

プロパティはデバッグ中に探す事ができますが、構文は勘です。サンプル
のパターンをあてはめるか、直接API のコードを読むしか無いようです。
default.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ListView</title>
    <!-- WinJS references -->
    <link href="winjs/Css/ui-dark.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="WinJS/js/base.js"></script>
    <script type="text/javascript" src="WinJS/js/ui.js"></script>
    <script type="text/javascript" src="WinJS/js/binding.js"></script>
    <script type="text/javascript" src="WinJS/js/animations.js"></script>
    <script type="text/javascript" src="WinJS/js/uicollections.js"></script>
    <script type="text/javascript" src="WinJS/js/wwaapp.js"></script>
    <!-- ListView references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
    <script>

            var dataArray = [
            { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
            { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
            { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
            { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
            { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
            { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
            { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
            { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
            { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
    ];

            function listAll() {

                Debug.writeln("listAll");

                var lvObject = WinJS.UI.getControl(document.getElementById("basicListView"));
                var binding = lvObject.dataSource.createListBinding();
                var fetchTarget;

                fetchTarget = binding.first().then(function (item) {
                    Debug.writeln(item.data.text);
                    Debug.writeln(item.data.title);
                });

                while (fetchTarget._state == 4) {
                    fetchTarget = binding.next().then(function (item) {
                        Debug.writeln(item.data.text);
                        Debug.writeln(item.data.title);
                    });
                }

                binding.release();
            }

    </script>
</head>
<body>
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div style="width: 180px;padding: 10px;">

        <img style="width: 60px; height: 60px;" 
                data-win-bind="alt: title; src: picture" />
        <div>
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>       
    
<div id="basicListView" 
    data-win-control="WinJS.UI.ListView"
    data-win-options="{dataSource: dataArray, itemRenderer: mediumListIconTextTemplate  }">
</div>
<input id="Button1" type="button" value="一覧表示" onclick="listAll();"/>

</body>
</html>

default.js

(function () {
    'use strict';

    WinJS.Application.onmainwindowactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            var lvObject = WinJS.UI.getControl(document.getElementById("basicListView"));
            // 配列を取得
            var selectedItems = lvObject.selection.getAllIndices();
            if (selectedItems.length === 0) {
                Debug.writeln("選択されていません");
            }
            Debug.writeln("OK");
            // 初期選択
            lvObject.selection = [3];
            Debug.writeln(lvObject.selection);
            Debug.writeln(lvObject.selection.getAllIndices());

            lvObject.addEventListener("selectionchanged", listViewChange, false );
        }
    }

    // *****************************************************************
    // 選択が変更されたアイテムの取得
    // *****************************************************************
    function listViewChange() {

        var lvObject = WinJS.UI.getControl(document.getElementById("basicListView"));
        var selectedItems = lvObject.selection.getAllIndices();
        if (selectedItems.length === 1) {
            var binding = lvObject.dataSource.createListBinding();
            binding.fromIndex(selectedItems[0]).then(function (item) { 
                Debug.writeln( item.data.text );
                Debug.writeln( item.data.title );
                binding.release();
            });
        }

    }

    function initialize() {
        Debug.writeln("initialize");
        WinJS.UI.processAll();
    }

    // すべてのJavaScriptファイルとCSSファイルをロードした後DOMContentLoadedイベントが発生します
    // 画像そのものはまだロードされていません。画像そのものが必要な場合は『load』イベントを利用します
    document.addEventListener("DOMContentLoaded", initialize, false);

    WinJS.Application.start();
})();


posted by at 2012-03-13 17:31 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月06日

Windows8 Metro(JS) で jQuery の datepicker を動作確認しました

以下のコードをテストしました

jQuery UI の datepicker の基本オプション

以下のようなメッセージが出るので、jQuery のコードを一部変更する必要
があるので、ソースでダウンロードして組み込んでいます

JavaScript runtime error: Unable to add dynamic content.
A script attempted to inject dynamic content, or elements 
previously modified dynamically, that might be unsafe. 
For example, using the innerHTML property or the document.write 
method to add a script element will generate this exception. 
If the content is safe and from a trusted source, use a 
method to explicitly manipulate elements and attributes, 
such as createElement, or use msWWA.execUnsafeLocalFunction.
この対処は具体的には以下のようにしていますが、どういう条件で発生する かがまだ不明ではあります。
	append: function() {
		return this.domManip(arguments, true, function( elem ) {
			if (this.nodeType === 1) {
			    // this.appendChild(elem);
			    var param = this;
			    msWWA.execUnsafeLocalFunction(function () { param.appendChild(elem); });
			}
		});
	},

Metro での実行画面







Metro の HTML
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery : datepicker</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- WinWebApp2 references -->
    <link rel="stylesheet" href="/css/default.css" />
    <!-- jQuery references -->
    <link href="css/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script>
    <!-- Start -->
    <script src="/js/default.js"></script>
</head>
<body style="padding: 100px 0 0 100px;">
<div id="title">ダイアログで決定するとここにセットします</div>
<style>
.ui-datepicker {
	width: 250px;
	z-index:1000!important;
}
.ui-datepicker-header {
	padding: 0!important;
}
</style>
Date: <input type="text" id="datepicker" />
<br />
<input
	type="button"
	value="dialog"
	onclick='$( "#datepicker" ).datepicker("dialog","2012/12/31",function(sdate){document.getElementById("title").innerHTML=sdate},datepicker_option);'
/>
<pre>



</pre>

</body>
</html>

Metro の default.js
(function () {
    'use strict';

    WinJS.Application.onmainwindowactivated = function (e) {

        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            $(function () { Debug.writeln("jQuery Start"); });
            window.datepicker_option = {
                dateFormat: 'yy/mm/dd',
                dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
                monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                showMonthAfterYear: true,
                yearSuffix: '年',
                changeYear: true,
                showAnim: 'fadeIn'
            }
            $(function () { $("#datepicker").datepicker(datepicker_option); });

        }
    }

    WinJS.Application.start();
})();


posted by at 2012-03-06 16:49 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年02月28日

Windows8 Metro(js) : Debug オブジェクトと debugger ステートメントとMessageDialog

MessageDialog は非同期です。いままでの Windows のメッセージボックスとは
いろいろない意味で異なるものですが、デバッグに使える事は間違いありません。

debugger ステートメントは、そこでブレークしますので、イミディエイトウイ
ンドウを使って変数の中身等を ? で表示するといいでしょう。

Debug.writeln(JSON.stringify(e, null, "\t")); では、e の全ての内容は表示
されませんでした。デフォルト値は設定していないものと思われます。
( e.detail.kind )
(function () {
    'use strict';

    WinJS.Application.onmainwindowactivated = function(e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            Debug.writeln("onmainwindowactivated");
            Debug.writeln(JSON.stringify(e, null, "\t"));
            debugger;

            document.getElementById("Button1").addEventListener("click",
            function () {
                var messageDialog = new Windows.UI.Popups.MessageDialog("こんにちは");
                messageDialog.showAsync()
                    .then(Debug.writeln("モーダル表示後"))
                    .then(function () {
                        Debug.writeln("モーダル処理後")
                    });
            }, false);
        }
    }
    WinJS.Application.onactivated = function (e) {
        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            Debug.writeln("activated");
            Debug.writeln(JSON.stringify(e, null, "\t"));
            debugger;
        }
    }
    WinJS.Application.onready = function (e) {
            Debug.writeln("ready");
            Debug.writeln(JSON.stringify(e, null, "\t"));
    }

    Debug.writeln("Application.startを開始します");
    WinJS.Application.start();
    Debug.writeln("Application.startを開始しました");


})();



タグ:HTML5
posted by at 2012-02-28 16:37 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX