SQLの窓

2012年06月27日


Win8(JS Metro)の『分割・・・』テンプレートから追加のページを定義する方法

元となる記事

『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

新しいページは、新しい HTML と JS を作成して、items.html のタイトルの横から呼び出したいと思います
新しい items.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>itemsPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.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">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">分割</span>
                <button id="newpage">新しいページ</button>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

items.js では、items.html の定義である、WinJS.UI.Pages.define が実行されているので、その初期処理部分である『ready』で新しく追加したボタンのイベントを作成し、新しいページの呼び出し処理である、WinJS.Navigation.navigate を実行しています。この際、第一引数には URL を指定しますが、第二引数には新しいページへと引き渡す JSON をオブジェクトをセットしています

新しいページの HTML 記述(hello.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>splitPage</title>

    <!-- WinJS references -->
    <link rel="stylesheet" type="text/css" href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>

    <div style="padding:20px;">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
    </header>
        こんにちは

    </div>
    

</body>
</html>

新しいページは何も定義はしていませんが、唯一『戻るボタン』を配置する際にルールがあると思って下さい。これし、navigator.js に書かれている、『header[role=banner] .win-backbutton』というセレクタに合わせる必要があるということです。この条件に合わせることで、ナビゲートのコントロールはほぼ、navigator.js が行います。

あとは、hello.js で、このページの定義を行う事で全体が正しく動作します

(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var binding = WinJS.Binding;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/hello/hello.html", {

        // この関数は、ユーザーがこのページに移動するたびに呼び出されます。
        // ページ要素にアプリケーションのデータを設定します。
        ready: function (element, options) {
            Debug.writeln(JSON.stringify(options, null, "   "));
        },
        unload: function () {
            
        }
    });
})();

▼ JSON.stringify による options出力内容です
{
   "param1": "自動的に",
   "param2": "ページのオプションとして ready イベントへ"
}



posted by lightbox at 2012-06-27 13:42 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年06月23日


Android Flex : Android の為の AIR Flex 基本 List で Web からデータ取得

Google ドライブからダウンロード




モバイルの基本と思われる List なんですが、基本すぎるせいなのかちょっと探してもあまり良いサンプルが見つからなかったので、WEB Flex3 の内容を移植してみました。List の dataProvider に直接 XMLList をセットできないので変換しましたが、もともと DataGrid 用だったのでこの方法にしました。

List 内に画像も表示してみました



関連する記事

コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	// LogCat 出力用
	import mx.logging.targets.*;
	import mx.logging.*;

	// List 用
	import spark.events.IndexChangeEvent;

	// http サーバー関連
	import mx.collections.ArrayList;
	import mx.rpc.AsyncToken;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;

	// LogCat
	private var logger:ILogger = Log.getLogger("MyLogger");

	// *****************************************************
	// 初期処理
	// *****************************************************
	public function initView():void {

		// ログ出力準備
		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

	}

	// *********************************************************
	// データを WEB から追加
	// *********************************************************
	public function loadData():void {

		logger.info( "ボタンが押されました" );

		srv.url = "http://homepage2.nifty.com/lightbox/data/list.xml";

		// レスポンス結果のデータフォーマット
		srv.resultFormat = "e4x";
		
		srv.method = "GET";
		
		// リクエストを実行
		var at:AsyncToken = srv.send();


	}


	// *********************************************************
	// リストを選択
	// *********************************************************
	public function myChangedHandler(event:IndexChangeEvent):void {

		// 本来は複数選択用
		var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
		logger.info( selIndices[0].toString() );
		var selItems:Vector.<Object> = event.currentTarget.selectedItems;
		logger.info( selItems[0].toString() );

		// 単体
		logger.info( event.currentTarget.selectedItem.toString() );
		logger.info( event.newIndex.toString() );

	}

	// *****************************************************
	// HTTPServiceが成功
	// *****************************************************
	private function resultHandler(e:ResultEvent):void
	{
		var dataSet:ArrayList = null;

		var aData:Array = new Array();
		for each(var xmlData:XML in e.result.row.name ) {
			aData.push(xmlData);
		}

		dataSet = new ArrayList(aData);
		base.dataProvider = dataSet;

	}
	
	// *****************************************************
	// HTTPServiceでエラーが発生した
	// *****************************************************
	private function faultHandler(e:FaultEvent):void
	{
		logger.info("HTTPService失敗\n\n理由 : " + e.fault.message);
	}

]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id="srv" showBusyCursor="true"
		 result="resultHandler(event)"
		 fault="faultHandler(event)" />
</fx:Declarations>

	<s:Button
		x="42" y="27"
		width="131" height="60"
		label="ロード"
		click="loadData()" />

	<s:BorderContainer
		width="100%"
		height="100%"
		y="100"
	>
		<s:List
			id="base"
			width="100%"
			height="100%"
			change="myChangedHandler(event);" 
		>
			<mx:ArrayCollection>
				<fx:String>固定リストデータ1</fx:String>
				<fx:String>固定リストデータ2</fx:String>
				<fx:String>固定リストデータ3</fx:String> 
				<fx:String>サンプル通り</fx:String> 
			</mx:ArrayCollection>
		</s:List>
	</s:BorderContainer>


</s:View>


itemRenderer の中からのイベント処理です。
( ※ 昔と同じでトップを参照するしか方法を見つけられませんでした )

Mainw.mxml
startview.mxml

XML に アイコンの URL を含めるようにしました。


タグ:android AIR
posted by lightbox at 2012-06-23 21:34 | Flex | このブログの読者になる | 更新情報をチェックする

Android Flex : コマンドラインで、Android エミュレータで、dae の 3Dモデルを表示するパッケージ



dae は、Papervision3D の 事実上の最終バージョンである Papervision3D_2.1.932.swc を同梱しています(もちろんオリジナルのソースコードも)。 他に必要なのは、android の SDK と Flex4 の SDK です( android ランタイムを最新にするなら、AIR の SDK ) ※ 以下を参考にして下さい コマンドラインで簡単に AIR アプリケーションを Android エミュレータにインストールして実行 さらに、AIR のランタイムを エミュレータにインストールする必要があるので、こちらを参照して下さい エミュレータと ddms を起動する エミュレータの構築は先にすませておいて、android の SDK フォルダである android-sdk-windows 内の AVD Manager.exe を実行してエミュレータが完全に起動するのを待って、アプリの一覧を表示します その後、tools フォルダの中の ddms.bat を実行して、デバイスをクリックして選択し、LogCat を選択してログが出力されているのを確認します( ここをクリックしないと新しいログが表示されません ) 何かする前には、LogCat をクリックしてログを削除しておいたほうがいいです。以下は、dae ロードした時のログを選択して外部出力したものです
06-23 08:39:37.777: I/air.lightbox.androidtest(528): INFO: Papervision3D 2.0.0 (March 12th, 2009)
06-23 08:39:37.777: I/air.lightbox.androidtest(528):  
06-23 08:39:38.017: I/air.lightbox.androidtest(528): INFO: Viewport autoScaleToStage : Papervision has changed the Stage scale mode. 
06-23 08:39:46.426: I/air.lightbox.androidtest(528): ロードボタンが押されました
06-23 08:39:46.436: I/air.lightbox.androidtest(528): file:///mnt/sdcard/eyes.dae
06-23 08:39:48.046: I/dalvikvm(528): Jit: resizing JitTable from 512 to 1024
06-23 08:39:50.696: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: COLLADA_Scene 
06-23 08:39:50.706: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: eyes_mqo 
06-23 08:39:50.726: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: eye 
06-23 08:39:51.096: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Lamp 
06-23 08:39:51.107: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Camera 
06-23 08:39:51.146: I/air.lightbox.androidtest(528): LOAD_COMPLETE
06-23 08:39:56.616: I/air.lightbox.androidtest(528): ロードボタンが押されました
06-23 08:39:56.626: I/air.lightbox.androidtest(528): file:///mnt/sdcard/eyes.dae
06-23 08:40:00.347: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: COLLADA_Scene 
06-23 08:40:00.347: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: tensi 
06-23 08:40:00.777: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Lamp 
06-23 08:40:00.787: I/air.lightbox.androidtest(528): INFO: DisplayObject3D: Camera 
06-23 08:40:00.797: I/air.lightbox.androidtest(528): LOAD_COMPLETE

何か問題があれば、Log にヒントが出力されるはずですから、コードを function 単位で追えるように工夫しておくといいと思います。

次に、パッケージの android.bat の中の Flex4 の SDK の位置を自分の環境と一致させて、android.bat を実行します。( このコマンドプロンプト内で全て処理します )

1) ソースコードを修正した場合は、build.bat で swf を作成
2) inst.bat で apk パッケージを作成してエミュレータにインストール

この繰り返しのみで処理します。certificate.bat は証明書の作成ですが、テストだけなら同梱されたものでかまいません。アプリがある特定のユーザによって作られたかどうかの同一性をチェックするのが目的なので、アプリのダウンロード管理システムへの更新時にしか必要ありません。

処理部分の詳細コード

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	title="最初のビュー"
	creationComplete="initView();"
>

<fx:Script>
<![CDATA[

	// LogCat 出力用
	import mx.logging.targets.*;
	import mx.logging.*;

	//papervision3Dクラス
	import org.papervision3d.materials.*;
	import org.papervision3d.view.*;
	import org.papervision3d.objects.primitives.*;
	import org.papervision3d.core.utils.*;
	import org.papervision3d.objects.parsers.*;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.materials.special.CompositeMaterial;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.geom.TriangleMesh3D;
	import org.papervision3d.events.*;

	// 3D 空間
	private var view3D:BasicView;
	private var dae:DAE = null;
	private var lcnt:int = 0;

	// LogCat
	private var logger:ILogger = Log.getLogger("MyLogger");

	// *****************************************************
	// 初期処理
	// *****************************************************
	public function initView():void {

		// ログ出力準備
		var traceTarget:TraceTarget = new TraceTarget();
		traceTarget.level = LogEventLevel.ALL;
		traceTarget.filters = ["*"];
		traceTarget.includeDate = false;
		traceTarget.includeTime = false;
		traceTarget.includeLevel = false;
		traceTarget.includeCategory = false;
		Log.addTarget(traceTarget);

		// 3D空間作成
		view3D = new BasicView();
		// 背景色
		view3D.opaqueBackground = 15247823;

		// SpriteVisualElement に追加
		base.addChild(view3D);

		// カメラの初期位置
		// ( 全て 0 だと LookAT エラー )
		view3D.camera.z = -5;	
		view3D.camera.x = 0;	
		view3D.camera.y = 0;

		// 画面が小さいので、遠近法は使わない
		view3D.camera.ortho = true;
		view3D.camera.orthoScale = 80;	// これで対象の大きさを決定

		// 描画開始
		view3D.startRendering();

	}

	// *********************************************************
	// 3D モデルを WEB から追加
	// *********************************************************
	public function loadData():void {

		logger.info( "ロードボタンが押されました" );

		// sdcard に置く場合は、file.url をロードに使用します
		var file:File = File.userDirectory.resolvePath("eyes.dae");
		logger.info( file.url );

		// 3D モデル作成
		if ( dae != null ) {
			view3D.scene.removeChild( dae );
		}
		dae = new DAE();

		if ( lcnt % 2 == 0 ) {
			dae.load("http://homepage2.nifty.com/lightbox/data/eyes.dae");
		}
		else {
			dae.load("http://homepage2.nifty.com/lightbox/data/tensi.dae");
		}
		dae.addEventListener(FileLoadEvent.LOAD_COMPLETE, function(e:Event):void{

			logger.info( "LOAD_COMPLETE" );

			try {

				// オブジェクトの位置
				dae.x = 0;
				dae.y = 0;
				dae.z = 0;

				// ラジアンでは無くそのまま-15度
				dae.rotationX = -15;
	
				dae.scale = 1;
	
				// 3D 空間に平面オブジェクトを追加
				view3D.scene.addChild( dae );

				lcnt++;
			}
			catch (error:Error) {
				logger.info(error.message);
			}

		});

	}

]]>
</fx:Script>

	<s:Button
		x="42" y="27"
		width="131" height="60"
		label="ロード"
		click="loadData()" />

	<s:BorderContainer
		width="100%"
		height="100%"
		y="100"
	>
		<s:SpriteVisualElement
			id="base"
			width="100%"
			height="100%"
		>
		</s:SpriteVisualElement>
	</s:BorderContainer>


</s:View>

データは WEB から読みだすようにしていますので、インターネット環境によってはうまくいかないかもしれません。その場合は、エミュレータの sdcard 内に保存して実行すると良いです( file.url を使う )

sdcard 内への保存は、ddms で device メニューから file エクスプローラを実行して mnt/sdcard を開いて push( ツールボタン) すれば良いです



※ eyes.dae と eyes.png は同梱しています( 元データは 光陰像型 さんのメタセコイアデータです )



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

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

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

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

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


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

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

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

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

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

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり