TypeScriptのmoduleにコンバーターを定義する方法です。 WinJS.Binding.converter関数を使ってコンバーターを作成します。 module Converters { export var sampleConverter = WinJS.Binding.converter((value: string) => { return value + value; }); } あ…

下の画像からわかるように変なグラデーションが入ってしまいます。WinJSのボタン真っ黒のはずなのに！ ということでぐぐったら解決方法が書いてありました。 Remove Mobile Firefox Button Gradient とりあえず以下のCSSを追加 button, input[type=button] {…

WinJSで作ったサンプルのheadタグにお約束の一文を追加します。 <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes" /> そして、FirefoxOSのエミュレータで先ほどのサイトを見てみると…。 うん。悪くない。</meta>

WinJSを使ったブラウザアプリで、どうやって画面遷移するのか試行錯誤してました。結論から言うとストアアプリと同じでした…。 ストアアプリからコピーして下準備 Windowsストアアプリのナビゲーションするアプリから、navigator.jsをコピーしてきます。そし…

TypeScriptでページに対応するViewModelを作ります。今回はリストを持っただけのシンプルなやつ。 ポイントはアイテムが選択されたときに呼び出されるようにするclickプロパティ。WinJS.Utilities.markSupportedForProcessingを呼び出してるところ。これをす…

WinJSにはTypeScriptの型定義も用意されています。winjs.TypeScript.DefinitelyTypedがそれになります。これを使うとWinJSに用意されてるWinJS.ClassやWinJS.Namespaceとか使わなくても名前空間とかクラス定義ができるのが個人的には性に合ってそうな気がし…

RatingとspanをViewModelを介してバインドしてみたいと思います。 ViewModelは、JavaScriptでバインド可能なようにしておきます。 var viewModel = WinJS.Binding.as({ averageRating: 5 }); 次に、WinJS.UI.processAllの後にデータバインドをします。 WinJS…

WinJS.Class.deriveを使って継承もできるんですね。 使い方は第一引数に継承、第二引数にコンストラクタ、第三引数にインスタンスメソッド、第四引数にスタティックメソッドになるみたいです。ということで、オブジェクト指向でイマイチイメージが使えないAn…

WinJSのWinJS.Class.mixを使うとオブジェクトを混ぜ合わせることができるようになります。 犬と人のキメラ 名前を持って自己紹介出来るオブジェクトと、わんわんと鳴く犬を作ってmixで混ぜ合わせます。 // 自己紹介できる人 var Person = { name: { get: fun…

以下の内容を試した感じです。 テンプレートを使ってデータをバインドする方法 (HTML) - Windows app development コレクションの基本的なバインド方法 WinJSでバインド可能なオブジェクトの定義はいろんな方法があるみたいで、上記のリンクではWinJS.Bindin…

WinJSには、クラスを定義するための関数があります。WinJS.Class.defineがそれです。 Personクラスの定義 WinJS.Class.define関数は、第一引数にコンストラクタを渡して、第二引数にインスタンスメソッドを渡して、第三引数にスタティックメソッドを渡します…

特に双方向バインドとかないんですね…。 単一方向のバインドと、コントロールのイベント拾ってバインドのソースに書き戻す。地道な作業です。フォームの入力項目の数が多いとだるい感じですね。 といってもポイントはあります。 WinJS.Binding.as WinJS.Bind…

追記 FirefoxだとinnerTextは動かないみたいなのでinnerHTMLを使うのがよさそうです。 データバインド WinJS引き続きやってます。次はデータバインディングです。 データバインディングには、WinJS.Binding.processAll(DOMの要素, データ)という形のメソッド…

Firefox OSのFx0買ったんですよ。 HTML5のアプリ作りたいじゃないですか。ということで、どうせならMSの作ってるWinJSで作りたいじゃないですか？（そうでもない？）ということで、WinJSをVisual Studioで始める方法を書いてみます。 プロジェクトの作成 と…