最近はベイスターズ観戦日記と化しております

さぶれの日記
http://flex91.blog19.fc2.com/  presented by さぶれ@

プロフィール


さぶれ@

Author:さぶれ@
Webアプリなんぞ作っている会社に勤めるサラリーマン。自分の技術力のなさを嘆きつつ、日々勉強中。


最近の記事



カテゴリー



月別アーカイブ



スポンサーサイト

--/--/-- --:--|スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[Silverlight]Silverlightでデータバインドの実装

2008/07/11 12:09|SilverlightTB:1CM:0

MSエバンジェリスト川西さんのBlogにSilverlightでデータバインドを実装する方法が乗っていたので早速試してみました。ちなみに記事はSilverlight 2 動的なバインディング HOLです。

これをやってみた思ったことは、なぜSilverlight自体の機能で実装しなかったのかな?ということです。ただ単に、重要度が低いと判断されてスケジュールの都合上実装されなかったのか、何かほかに深遠なる理由があったのか・・・。XAMLだけでできることが広がって便利だと思うのですが。次期Silverlightでは実装されることを望みます。


スポンサーサイト

ブラウザ内にSilverlight1.0コンテンツを全画面で表示する方法

2008/06/20 18:06|SilverlightTB:0CM:0
短期集中連載:Silverlightの全貌
こちらの記事の第3回に、Silverlighの表示領域を制御する話しが載っていました(雑誌の連載の方を読みました。今はまだネットに掲載されていないようです)。
しかし、この記事は、Silverlight2.0の話しだったため、Silverlight1.0でどうやるのか調べてみました。

以下、メモ

Default.html.jsのpropertiesのwidthとheightを100%にする。


Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '100%',
height: '100%',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});

Default.htmlのヘッダーに以下の追加する。


<style type="text/css">
#silverlightControlHost {
height: 100%;
width: 100%;
}
#errorLocation {
font-size: small;
color: Gray;
}
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
}

Scene.xaml.jsに以下を追加


var slPlugin;
function rootCanvasLoaded(sender, args)
{
slPlugin = sender.getHost();
   if ( slPlugin != null )
{
slPlugin.content.onResize = ResizeSLContainer;
}
}

function ResizeSLContainer(sender, args)
{
var rootCanvas = sender.findName("rootCanvas");
rootCanvas.Width = slPlugin.content.actualWidth;
rootCanvas.Height = slPlugin.content.actualHeight;
}

Scene.xamlを修正


<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Loaded="rootCanvasLoaded" x:Name="rootCanvas" Background="Gray">





IsHitTestVisible

2008/06/13 19:04|SilverlightTB:0CM:0
透過処理した画像などの下のレイヤにボタンなどを置いた場合、透過処理した画像が邪魔してボタンをクリックしたりできません。
そんなときは、IsHitTestVisibleを使うとそのオブジェクトはマウスイベントを無視するようになります。
<Image x:Name="lightLayer" IsHitTestVisible="False"~ /> 
って感じでやると、画像の下のオブジェクトをクリックできるようになったいい感じです。

Silverlight始めました

2008/06/09 13:54|SilverlightTB:0CM:0
最近Silverlightをやらざるおえなくなりました。
しかも、Silverlight1.0です。
私はJavascriptわからんのですよね…・

と、愚痴っていてもしょうがないので、「はじめてのSilverlight」という本を読んでみました。
だいたい、感触はつかめた気がします。

ポイントは、createXaml()にある気がしますね。
var plugIn = document.getElementById("SilverlightPlugIn");
var canvas= plugIn.content.createFromXaml("<Canvas />", false);
var rootCanvas = plugIn.content.findName(rootName);
rootCanvas.children.Add(canvas);
こんな感じで、createFromXamlメソッドに文字列でXAMLを渡すと動的にUIコンポーネントを生成できるので、コードでコンポーネントの配置などを制御できます。

後は、下記のページなどを見ながら、実戦あるのみって感じでしょ">のページなどを見ながら、実戦あるのみって感じでしょうか。
Silverlight 1.0 Reference

Deep Zoom Composerコンテンツをコマンドラインから生成する。

2008/06/02 19:35|SilverlightTB:0CM:0
今回はちょっと趣向を変えて、Deep Zoom Composerのコンテンツを動的に生成する方法について調べてみました。
Deep Zoom Composerは非常に面白い技術だと思うのですが、静的なページにしか使えないのでは面白さは半減です。
Webアプリが状況に合わせて自動で生成していくなどできれば面白そうなことができそうですからね。
動的生成の方法としてコマンドラインからのコンテンツ生成の方法を述べてみます。

コマンドライン用ツール

Deep Zoom Composerコンテンツ生成のコマンドラインツールは「SparseImageTool.exe」になります。
普通にDeep Zoom ComposerをインストールするとC:\Program Files\Microsoft\Deep Zoom Composerにあると思います。

設定ファイル

SparseImageToolを実行するには、xmlの設定ファイルが必要です。
xmlファイルの例は下記に示してみます。
<?xml version="1.0" encoding="utf-8"?>
<SceneGraph version="1">
<AspectRatio>1</AspectRatio>
<SceneNode>
<FileName>D:\test\1.png</FileName>
<x>0</x>
<y>0</y>
<Width>0.5</Width>
<Height>0.5</Height>
<ZOrder>1</ZOrder>
</SceneNode>
<SceneNode>
<FileName>D:\test\2.png</FileName>
<x>0.5</x>
<y>0</y>
<Width>0.5</Width>
<Height>0.5</Height>
<ZOrder>1</ZOrder>
</SceneNode>
<SceneNode>
<FileName>D:\test\3.png</FileName>
<x>0</x>
<y>0.5</y>
<Width>0.5</Width>
<Height>0.5</Height>
<ZOrder>1</ZOrder>
</SceneNode>
</SceneGraph>
FileNameは画像のパスを示します。画像パスは絶対パスの必要があるようです。
x,yは画像の位置を表します。
width,heightは画像の大きさになります。
x,y,width,heightは全体を1とした時の相対値になります。
ZOrderはZindexと同じ・・・ということになっていますが、SceneNodeの並び順が画像のZ座標になっているようです。ZOrderの存在価値って・・・・?謎です。

SparseImageToolの使い方

SparseImageTool.exeはこんな感じで使います。
"C:\Program Files\Microsoft\Deep Zoom Composer\SparseImageTool.exe" CreateDeepZoomImage "d:\test\test.xml" "D:\test\deepZoomProject\catimagedeepzoom\DeepZoomOutput_Web\ClientBin\GeneratedImages\dzc_output.sdi"
SparseImageTool.exe CreateDeepZoomImage 設定ファイルパス 出力先パス
ということですね。

設定ファイル生成プログラム

ついでに、設定ファイルを作るプログラム作ってみました。参考にしてください。
言語はC#です。.NetFramework3.5が必要です。
動作としては、
「指定したディレクトリから画像一覧を取得し、その画像を指定した列数でテーブル上に並べる設定ファイルを作る」
というものです。
//画像を保存しているディレクトリパス
string imagePath = "d:\test";
//画像を何列で表示するか
int numOfColumn = 2;

XDocument doc = new XDocument();

//XMLのルートとAspectRationの生成
XElement SceneGraph
= new XElement("SceneGraph", new XAttribute("version", 1),
new XElement("AspectRatio", 1));

DirectoryInfo di = new DirectoryInfo(imagePath);

//ディレクトにある画像一覧の取得
var query = from file in di.GetFiles()
where file.Name.EndsWith(".jpg") ||
file.Name.EndsWith("png") select file;

//画像の数と表示列数から画像の位置を取得する。
int filesCount = query.Count();
int colmunCount = numOfColumn;
int rowCount = filesCount / colmunCount;
if (filesCount % colmunCount != 0)
{
rowCount += 1;
}

//画像の大きさを計算する。
double deltaX = 1.0 / colmunCount;
double deltaY = 1.0 / rowCount;
double x = 0, y = 0;
foreach (FileInfo file in query)
{
//SceneGraphを追加する。
SceneGraph.Add(new XElement("SceneNode",
new XElement("FileName", file.FullName),
new XElement("x", x),

new XElement("y", y),
new XElement("Width", deltaX),

new XElement("Height", deltaY),
new XElement("ZOrder", 1)));

//次の画像の位置を更新する。
x += deltaX;
if (x >= 1)
{
x = 0;
y += deltaY;
}
}

doc.Add(SceneGraph);

//生成ファイルの書き出し
doc.Save(imagePath + @"\test.xml");

Amazon



ブログ内検索



RSSフィード



 |  未分類 | Flex | ActionScript3 | BlazeDS | Silverlight | 読書 | Javascript | Java読書会 | 横浜ベイスターズ | 
Copyright(C) 2008All Rights Reserved. さぶれの日記
Powered by FC2ブログ.  template designed by 遥かなるわらしべ長者への軌跡.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。