サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
wildcat.cocolog-nifty.com
ここ1~2年の間にDynamic HTMLが多くの場所で利用されるようになりました。 Dynamic HTMLは、ページをリロードすることなく要素の外観を変えたり中身の文字を 変えたりすることが出来ますが、変更したい要素を取得しないと始まりません。 そこで、まず最初は、要素(HTML内のタグ)を取得する方法について書きたいと思います。 1.IDを指定して取得する HTML内の要素にはIDを付けることが出来ますが、そのIDを指定して要素を取得する方法です。 まず、以下のようにタグにIDを付けます。 <div id="test">DIVタグです</div> そして、このDIV要素を取り出すJavaScriptは、以下のようになります。
Flex2のメッセージAlertとウィンドウのサンプルと簡単な使用例です。 コントロール サンプルページ example.mxml LoginWindow.mxml Alert メッセージボックスです。 staticなshowメソッドで表示します。 表示するボタンは第3引数でAlert.OK、Alert.CANCEL、Alert.YES、Alert.NOを指定します。 第5引数にはクローズ時のイベントハンドラを指定できます。 <mx:Button label="Click" click="mx.controls.Alert.show('よろしですか?','確認', Alert.YES|Alert.NO, null, closeHandler);" /> TitleWindow モーダル・モードレスウィンドウです。 PopUpManagerと併用して表示するようです。 PopUpManage
ASP.NETの開発でAjaxを使う機会も増えているんじゃないかと思います。 今日は、ASP.NET2.0から追加された機能である、ClientCallbackの使い方などを書いてみたいと思います。 ClientCallbackとは、文字通りクライアントからサーバーのメソッドがコールバックされる仕組みで、通信にはXMLHttpRequestが使われています。 通信部分のスクリプトはASP.NETが勝手に出力してくれますので、私達は簡単なスクリプトを少し書くだけでOKといった感じですね。 もちろん、Ajaxでゴリゴリやる場合はそうもいきませんが、例えば郵便番号が入力されたら住所を自動入力するといった補助的なものなら、割と簡単に行うことができます。 ClientCallback使うには、いくつかの決まり事があります。 まず1つ目の決まりとして、そのページまたはコントロールが ICallback
{ 'title' : 'やまねこのWebメモ', 'pages' : [ {'name':'Root', 'url':'http://wildcat.cocolog-nifty.com/'}, {'name':'Top', 'url' : 'http://wildcat.cocolog-nifty.com/web/'}, {'name':'Flex2の入力値チェック', 'url' : 'http://wildcat.cocolog-nifty.com/web/2006/08/flex2_b7b3.html'}, {'name':'Flex2でStyleを適用する', 'url' : 'http://wildcat.cocolog-nifty.com/web/2006/07/flex2style_ec37.html'} ] }
先日書いたイベントハンドラを追加する方法でも イベントをハンドリング出来ますが、この方法でセット出来る関数は1つだけです。 しかし、例えばObserverパターンのように複数のオブジェクトに対してイベントを通知したい場面も多いと思います。 そういう場合、DOM Level2 Event Modelをサポートしているブラウザをターゲットとしているなら、addEventListener・removeEventListener メソッドを使って以下のようにイベントリスナーの追加と削除を行います。 // イベントリスナー function targetClicked() { .... } var eventTarget = document.getElementById("ex1"); // リスナーの追加 eventTarget.addEventListener("click", targetC
デスクトップアプリケーションでは当たり前のドラッグ&ドロップですが、Webアプリケーションでは難しいものです。 しかし、最近ではWebアプリケーションでもデスクトップアプリケーションに近いユーザーインターフェイスが求められつつあり、 開発も大変ですよね。 今日は、Flex2でドラッグドロップを行う基本部分のサンプルを書いてみます。 ドラッグ&ドロップ サンプルページ サンプルのMXMLファイル まず、ドラッグするオブジェクトと、そのオブジェクトをドロップするターゲットとなるオブジェクトの2つが必要となりますので、 それを作成します。 <mx:Canvas id="ddbox" mouseDown="mouseDownHandler(event)" mouseMove="mouseMoveHandler(event)" mouseUp="mouseUpHandler(event)" bord
DataGridなどは、サーバーのデータを動的にバインドして使用するケースがほとんどだと思います。 そこで、サーバーではASP.NETのDataSetをXMLとして返し、それをDataGridのバインドするケースを想定したサンプルを作成してみました。 サンプルページ example.mxml まず、サーバーではC#で以下のようなコードを記述してDataSetを作成しそれをXMLとして返すことにします。 private void Page_Load(object sender, System.EventArgs e) { DataSet ds = new DataSet("DataSet"); DataTable dt = new DataTable("DataTable"); dt.Columns.Add("Column1"); dt.Columns.Add("Column2"); dt.
JavaScriptからHTML要素にアクセスする時はDOMを使用しますが、私自身がよく忘れるので、そこそこ使用頻度の高いメソッド・プロパティのプチリファレンスを書いておきたいと思います。 DocumentのメソッドElement createElement( tagName[string] )説明:新しいElementオブジェクトを生成します。引数:タグの名前を文字列で指定します。戻り値:新たに生成されたElementオブジェクトvar elem = document.createElement("img");NodeList getElementsByTagName( tagName[string] )説明:タグの名前を指定して要素のリストを取得します。引数:タグの名前を文字列で指定します。戻り値:該当する要素のリスト。var elements = document.getElemen
prototype.js にはAjax以外にも便利な機能があります。 その中からDOMの要素に関する機能をいくつか紹介しようと思います。 $() 関数 この関数は、DHTMLで頻繁に出てくる document.getElementById() のショートカットとして使用できます。 使用例: var element = $("ElementId"); element.innerHTML = "...."; また、この関数には複数のIDを指定することも出来ます。 その場合は、指定した要素が配列で返ってきます。 使用例: var elements = $("ID1", "ID2", "ID3"); for(var i=0;i<elements.length;i++){ elements[i].style.display = "none"; } Elementクラス このクラスは、DOMの要素を操
XMLHttpRequestを使ったAjaxでの通信は、セキュリティ上の制限により他ドメインのサーバーにはアクセスできません。 サーバー側のプログラムを自分で記述できる場合は、一旦中継してデータを取得し好きな形式に変換するプログラムを書けばよいのですが、 例えばこのブログのようにJavaScriptしか記述できない場合はそうもいきません。 クライアントがXMLHttpRequestを使わずに他ドメインのサーバーからデータを取得できれば…ということになるわけですが、それを実現する 方法の1つとして、サーバーが結果をJavaScriptのコードで返すというものがあります。 例えば、 http://www.hoge.com/service.aspx?param=xxxxx のようにリクエストすると、paramの内容に応じた結果をJSONデータを含むJavaScriptコードで返してくれるサービス
昨日、FireBugが@ITで紹介されていたせいか、"FireBug"という検索キーワードでGoogleなどからこのブログにやってこられる方が急に増えました。 以前、紹介程度には書いていたんですが、わざわざ見に来てもらってそれだけでは申し訳ないので、導入から簡単な使い方までを書いておきます。 ◆インストール インストールはいたって簡単です。 Firefox 1.5以上でこちらのサイトにアクセスします。 そのページの真ん中より少し上に以下のような部分がありますので、「Install Now」をクリックます。 すると、以下のようなダイアログが出るので、「今すぐインストール」を押してインストールを行います。 ダウンロードが完了すると以下のダイアログが出ますので、FireBugの項目があることを確認してFirefoxを再起動して完了です。 ◆簡単な使い方 Firefoxを起動すると、ステータスバー
独自のコントロールを作成したら、次は独自のイベントを発行する必要が生じると思いますので、今日は先日作成したカスタムコントロールに イベントを追加するサンプルを書いてみます。 サンプルのMXMLファイル(CustomEvent.zip) まず、独自のイベントを定義してみます。 イベントオブジェクトは、flash.mx.events.Eventのサブクラスである必要があります。 今回は、イベントオブジェクトの定義にActionScriptファイル(asファイル)を使用します。 ExampleBox.mxmlと同じディレクトリに、ExampleBoxButtonClickEvent.asという名前のファイルを作成し、以下のコードを記述します。 package controls { import flash.events.Event; public class ExampleBoxButtonCl
このページを最初にブックマークしてみませんか?
『wildcat.cocolog-nifty.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く