Firefox 2.0 リリース
Firefox 2.0がリリースされています。
ダウンロードはこちら。
IE7も英語版はリリースされていますので、日本語版ももうじきでしょう。
| 固定リンク | コメント (0) | トラックバック (0)
2006年10月25日 (水)
2006年10月18日 (水)
Atlasを使った、じゃらんWebサービスサンプル
昨日、じゃらんWebサービスのエリア情報をTreeViewにバインドするところまで作りましたので、
ついでにエリア内の宿情報を取得して表示するところまで作ってみました。
サンプルページ
サンプルコード
せっかくですので、このサンプルではAtlasのUpdatePanelを使ってみました。
JavaScriptは1行も書いてなく、AjaxはUpdatePanelにおまかせです。
開発手順はAtlasを使わない場合と同じですので、開発時の違和感もないと思います。
また、サーバー側のコードも3行のみで、実質、コントロールを画面に配置して若干表示を整えた程度です。
宿情報は、XmlDataSourceでデータを取得しDataListにバインドしていて、TreeViewの場合とほとんど同じです。
サンプルページ
サンプルコード
せっかくですので、このサンプルではAtlasのUpdatePanelを使ってみました。
JavaScriptは1行も書いてなく、AjaxはUpdatePanelにおまかせです。
開発手順はAtlasを使わない場合と同じですので、開発時の違和感もないと思います。
また、サーバー側のコードも3行のみで、実質、コントロールを画面に配置して若干表示を整えた程度です。
宿情報は、XmlDataSourceでデータを取得しDataListにバインドしていて、TreeViewの場合とほとんど同じです。
| 固定リンク | コメント (0) | トラックバック (0)
2006年10月17日 (火)
ASP.NETのTreeViewにXMLをバインドする その2
昨日、TreeViewにXMLデータをバインドするサンプルを書きましたが、XMLが名前空間で修飾されている場合、
あれだけではうまくバインド出来ません。
XmlDataSourceのXPathを設定してバインドする部分を指定していますので、
/ns:Data/ns:Node
のように指定したいところですが、XmlDataSourceには名前空間を指定するプロパティなどが用意されていないようで、 こういった指定が出来そうもありません。
仕方ないので他の方法を探したのですが、Transformプロパティに以下のようなXSLを設定して名前空間を取り除くことで、 とりあえずバインドする事が出来るようです。
（もっと良い方法があれば、コメントください）
実際の動作例として、じゃらんWebサービスのエリアデータをバインドするサンプルを作ってみました。
じゃらんWebサービスでは、温泉や宿の情報を地域別に取得できるのですが、返されるXMLは、
このデータを、上記の方法でTreeViewにバインドするためのaspxファイルは以下のようになっています。
XmlDataSourceのXPathを設定してバインドする部分を指定していますので、
/ns:Data/ns:Node
のように指定したいところですが、XmlDataSourceには名前空間を指定するプロパティなどが用意されていないようで、 こういった指定が出来そうもありません。
仕方ないので他の方法を探したのですが、Transformプロパティに以下のようなXSLを設定して名前空間を取り除くことで、 とりあえずバインドする事が出来るようです。
（もっと良い方法があれば、コメントください）
<asp:XmlDataSource ID="dataSource" DataFile="~/Data.xml"
XPath="/Data/Node" runat="server">
<Transform>
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="*">
<xsl:element name="{local-name()}">
<xsl:for-each select="@*">
<xsl:attribute name="{local-name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:for-each>
<xsl:apply-templates/>
</xsl:element>
</xsl:template>
</xsl:stylesheet>
</Transform>
</asp:XmlDataSource>
実際の動作例として、じゃらんWebサービスのエリアデータをバインドするサンプルを作ってみました。
じゃらんWebサービスでは、温泉や宿の情報を地域別に取得できるのですが、返されるXMLは、
<?xml version="1.0" encoding="UTF-8" ?>
<Results xmlns="jws">
.....
</Results>
のように、名前空間が付加されています。このデータを、上記の方法でTreeViewにバインドするためのaspxファイルは以下のようになっています。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TreeView Example 2</title>
</head>
<body>
<form id="form1" runat="server">
<div>じゃらん Webサービス エリアデータ</div>
<div style="border:solid 1px black;width:300px;">
<asp:TreeView ID="areaTree" ExpandDepth="0"
DataSourceID="dataSource" runat="server">
<DataBindings>
<asp:TreeNodeBinding DataMember="Region"
TextField="name" ValueField="cd" SelectAction="Expand"
PopulateOnDemand="True" />
<asp:TreeNodeBinding DataMember="Prefecture"
TextField="name" ValueField="cd" SelectAction="Expand"
PopulateOnDemand="True" />
<asp:TreeNodeBinding DataMember="LargeArea"
TextField="name" ValueField="cd" SelectAction="Expand"
PopulateOnDemand="True" />
<asp:TreeNodeBinding DataMember="SmallArea"
TextField="name" ValueField="cd" />
</DataBindings>
</asp:TreeView>
</div>
<asp:XmlDataSource ID="dataSource"
DataFile="http://jws.jalan.net/APICommon/AreaSearch/V1/?key=APIキー"
XPath="/Results/Area/Region" runat="server">
<Transform>
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="*">
<xsl:element name="{local-name()}">
<xsl:for-each select="@*">
<xsl:attribute name="{local-name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:for-each>
<xsl:apply-templates/>
</xsl:element>
</xsl:template>
</xsl:stylesheet>
</Transform>
</asp:XmlDataSource>
</form>
</body>
</html>
データ量が結構多いので、TreeViewのExpandDepthを0にして初期表示では要素を展開しないようにし、
asp:TreeNodeBindingのPopulateOnDemandをTrueにして動的にバインドさせています。
| 固定リンク | コメント (0) | トラックバック (0)
2006年10月16日 (月)
ASP.NETのTreeViewにXMLをバインドする
ASP.NETのTreeViewにXMLをバインドする
サーバーコントロールにXMLデータをバインドする際は、XmlDataSourceコントロールを併用します。
例えば、次のようなXMLデータがあるとします。
また、XPathプロパティには、データ内のバインドする部分を取得するXPathを設定します。
TreeViewの方では、DataSourceIDプロパティにXmlDataSourceのIDを設定し、DataBindingsプロパティに 画面に表示する部分とクリック時にサーバーに送信される値の部分を指定します。
asp:TreeNodeBindingの指定方法は、DataMemberにはタグ名、TextFieldにはツリーの項目として表示される文字を持つ属性、 ValueFieldにはサーバーに送信する値を持つ属性といった具合です。
今回の場合では、
以上で、TreeViewにXMLデータをバインドできるようになります。
ただ、XMLが名前空間で修飾されている場合は、うまくいきません。
それについては、また後日メモしたいと思います。
例えば、次のようなXMLデータがあるとします。
<?xml version="1.0" encoding="utf-8" ?>
<data>
<WebSites>
<WebSite name="Microsoft" url="http://www.microsoft.com/japan/">
<Contents title="MSDN" url="http://www.microsoft.com/japan/msdn/" />
<Contents title="Visual Studio"
url="http://www.microsoft.com/japan/msdn/vstudio/" />
</WebSite>
<WebSite name="Google" url="http://www.microsoft.com/japan/">
<Contents title="Google Map" url="http://maps.google.co.jp/" />
<Contents title="Google Calendar" url="http://www.google.com/calendar/" />
</WebSite>
<WebSite name="Yahoo! Japan" url="http://www.yahoo.co.jp/">
<Contents title="Yahoo! Developer Network" url="http://developer.yahoo.co.jp/" />
</WebSite>
</WebSites>
</data>
これをTreeViewにバインドする場合、ASPXファイルは以下のような記述となります。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>TreeView Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="siteTree" DataSourceID="siteDataSource" runat="server">
<DataBindings>
<asp:TreeNodeBinding DataMember="WebSite"
TextField="name" ValueField="url" />
<asp:TreeNodeBinding DataMember="Contents"
TextField="title" ValueField="url" />
</DataBindings>
</asp:TreeView>
</div>
<asp:XmlDataSource ID="siteDataSource"
DataFile="~/Data.xml"
XPath="/data/WebSites/WebSite"
runat="server"></asp:XmlDataSource>
</form>
</body>
</html>
まずXmlDataSourceの方では、DataFileプロパティにデータへのパスを設定します。また、XPathプロパティには、データ内のバインドする部分を取得するXPathを設定します。
TreeViewの方では、DataSourceIDプロパティにXmlDataSourceのIDを設定し、DataBindingsプロパティに 画面に表示する部分とクリック時にサーバーに送信される値の部分を指定します。
asp:TreeNodeBindingの指定方法は、DataMemberにはタグ名、TextFieldにはツリーの項目として表示される文字を持つ属性、 ValueFieldにはサーバーに送信する値を持つ属性といった具合です。
今回の場合では、
- WebSiteというタグの場合は、name属性を表示しurl属性をサーバーへ送信する値に設定
- Contentsというタグの場合は、name属性を表示しurl属性をサーバーへ送信する値に設定
以上で、TreeViewにXMLデータをバインドできるようになります。
ただ、XMLが名前空間で修飾されている場合は、うまくいきません。
それについては、また後日メモしたいと思います。
| 固定リンク | コメント (0) | トラックバック (0)
2006年10月 4日 (水)
ASP.NETとAtlasでAjax
現在Microsoftが開発中のASP.NET用AjaxフレームワークであるAtlasを試してみましょう。
どうやら年内にリリースされるようですので、まだチェックしていない方は是非試してみて下さい。
ちなみに、Atlasはコードネームで、少し前に正式名称が決まったみたいです。
JavaScriptライブラリは「Microsoft AJAX Library」、サーバーサイドのクラスライブラリ・サーバーコントロール群は「ASP.NET 2.0 AJAX Extensions」、Atlas Control Toolkitは「ASP.NET AJAX Control Toolkit」なんだそうです。
さて、まずはAtlasのサイトからインストーラーをダウンロードしましょう。
現時点でのバージョンはJuly CTPとなっています。
インストールは、インストーラーに指示にしたがって次へ進むだけでOKです。
Visual Studio 2005（Visual Web Developer ExpressもOK）のプロジェクトテンプレートも、一緒にインストールできます。
インストールが完了したら、Visual Studioを起動してWebプロジェクトを作成します。
プロジェクトテンプレートも一緒にセットアップすると、下図のようなテンプレートが追加されていますので、これを選択して作成します。
（下の画像はVisual Web Developer Expressのものです）
今回は簡単な例としてサーバーで実装したメソッドをJavaScriptから呼び出すサンプルを作成してみます。
まず、既に作成されているDefault.aspx.csに以下の太字のコードを追加します。
（通常のasmxで公開されているWebサービスも呼び出せます）
次に、Default.aspの<head runat="server">～</head>間に以下のJavaScriptを追加します。
の部分がサーバー側のメソッド呼び出し部分です。
サーバー側で定義してWebMethod属性をつけたメソッド名と同じ名前でJavaScriptのメソッドがPageMethodsに自動的に作成されていますので、 違和感なく呼び出しが出来ます。
引数には呼び出しが完了した際のコールバック関数を指定しています。
コールバック関数には、サーバー側のメソッドの戻り値が引数として渡ってきます。
このプログラムを実行してみると、ページがロードされた時に "Hello Atlas"が表示されるのが確認できます。
通信部分のJavaScriptコードを一切書かずに、簡単にサーバーのメソッドが呼び出せますね。
通信やその他の処理に関するスクリプトは、既に記述されている
この中には、Ajaxに関するものだけでなく他にも便利な機能が提供されていますので、それらも含めて色々とAtlasに関するサンプルなどを書いてみようと思います。
どうやら年内にリリースされるようですので、まだチェックしていない方は是非試してみて下さい。
ちなみに、Atlasはコードネームで、少し前に正式名称が決まったみたいです。
JavaScriptライブラリは「Microsoft AJAX Library」、サーバーサイドのクラスライブラリ・サーバーコントロール群は「ASP.NET 2.0 AJAX Extensions」、Atlas Control Toolkitは「ASP.NET AJAX Control Toolkit」なんだそうです。
さて、まずはAtlasのサイトからインストーラーをダウンロードしましょう。
現時点でのバージョンはJuly CTPとなっています。
インストールは、インストーラーに指示にしたがって次へ進むだけでOKです。
Visual Studio 2005（Visual Web Developer ExpressもOK）のプロジェクトテンプレートも、一緒にインストールできます。
インストールが完了したら、Visual Studioを起動してWebプロジェクトを作成します。
プロジェクトテンプレートも一緒にセットアップすると、下図のようなテンプレートが追加されていますので、これを選択して作成します。
（下の画像はVisual Web Developer Expressのものです）
今回は簡単な例としてサーバーで実装したメソッドをJavaScriptから呼び出すサンプルを作成してみます。
まず、既に作成されているDefault.aspx.csに以下の太字のコードを追加します。
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public string TestMethod()
{
return "Hello Atlas";
}
}
WebMethodという属性はWebサービスで公開するメソッドにつける属性ですが、Atlasではaspxでこの属性の付いたメソッドをクライアントの
JavaScriptから呼び出せるようです。（通常のasmxで公開されているWebサービスも呼び出せます）
次に、Default.aspの<head runat="server">～</head>間に以下のJavaScriptを追加します。
<script type="text/javascript">
window.onload = function()
{
PageMethods.TestMethod(RequestComplete);
}
function RequestComplete(data)
{
alert(data);
}
</script>
PageMethods.TestMethod(RequestComplete);の部分がサーバー側のメソッド呼び出し部分です。
サーバー側で定義してWebMethod属性をつけたメソッド名と同じ名前でJavaScriptのメソッドがPageMethodsに自動的に作成されていますので、 違和感なく呼び出しが出来ます。
引数には呼び出しが完了した際のコールバック関数を指定しています。
コールバック関数には、サーバー側のメソッドの戻り値が引数として渡ってきます。
このプログラムを実行してみると、ページがロードされた時に "Hello Atlas"が表示されるのが確認できます。
通信部分のJavaScriptコードを一切書かずに、簡単にサーバーのメソッドが呼び出せますね。
通信やその他の処理に関するスクリプトは、既に記述されている
<atlas:ScriptManager ID="ScriptManager1" runat="server" />の部分によってクライアントにJavaScriptが出力されています。
この中には、Ajaxに関するものだけでなく他にも便利な機能が提供されていますので、それらも含めて色々とAtlasに関するサンプルなどを書いてみようと思います。
| 固定リンク | コメント (0) | トラックバック (0)