読者は、HTML、CSS、およびJavascriptの平均レベルの知識を持ち、Intersystems Cacheの使用経験が最小限であると想定されています。 ここからCachéの最新バージョンをダウンロードしてください 。 ここで 、Cachéの最初の経験を見つけることができます 。
CSPアプリケーションでjQueryが必要なのはなぜですか？
CSP（Zen）は、Cachéデータベースで動作するAjax Webアプリケーションを迅速に作成するためにCachéが提供する基盤技術です。
jQueryはCSP（ZEN）アプリケーションにどのように役立ちますか？
1. htmlページの任意の要素への便利なアクセス
jQueryフレームワークを使用すると、 CSSセレクター構文を使用して要素にアクセスでき、各ブラウザーに最も適した方法でこの機能を実装できます。
2.クロスブラウザの互換性
ブラウザー間の互換性は、最新のWebアプリケーションに不可欠な要件です。 フレームワークの開発者は、jQueryを使用して開発されたコードがブラウザー（IE 6.0以降、FF 3.6以降、Safari 5.0以降、Opera、Chrome）でも同じように機能すると主張しています。
プラグイン
jQueryは、プラグインで機能を拡張する便利な方法を提供します。 フレームワークの作成（2006年）以来、 いくつかは書かれていません 。 jQueryUIクライアントインターフェイスライブラリは、特に言及する価値があります。
jQueryをCSP（ZEN）ページに接続する方法は？
ライブラリの圧縮バージョンを公式サイトからダウンロードし 、アプリケーションのCSPディレクトリに配置し、特定のバージョンのjQueryファイルが使用されることをcsp（zen）ページで指定します。
例：
Csp
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
ZEN
Parameter JSINCLUDES As STRING="jquery-1.7.1.min.js"
CLS
w "<script type='text/javascript' src='jquery-1.7.1.min.js'></script>"
CSP、ZEN、およびCLSは、Cachéでサーバーページを作成するための3つのアプローチです。
各CSPページは 、コンパイルされると、標準のCacheクラス（％CSP.Pageの子孫-CSPクラス）に変わります。 2番目の方法はここから続きます-コードベースで、％CSP.Pageクラスの子孫であるCacheクラスを使用したページの初期開発-CLSアプローチを想定しています。 違いについてはこちらをご覧ください 。
3番目の方法-Zenを使用した開発では、これら2つの方法を組み合わせます-Zenタグとオブジェクトコードの両方を使用します。 与えられた例では、CSP、CLS、ZENという表記は、例を作成するために使用されたページの開発方法を示しています。
インターネットアプリケーションの場合、コンテンツ配信ネットワーク（CDN）を使用することをお勧めします。 この場合、jQueryファイルは、 リストされているネットワークのいずれかのサーバーに配置されます 。 CDNを使用した接続例：
CSP: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> ZEN: Parameter JSINCLUDES As STRING="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; CLS: &html< <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> >
jQueryを使用する
最も使用されるjQuery関数はjQuery（）と呼ばれますが、多くの場合、同義語である$（）が使用されます。 この関数の結果は、渡される引数のタイプと数に依存します。 この関数を呼び出すための主なオプション：
1.文字列は引数として渡されます：
メソッドは、文字列をjQuery（CSS）セレクターまたはHTMLコードとして処理しようとします。
$( "div#1973" ) // div 1973 $( ".doc td" ) // <td> doc $( "<div>Write less, do more</div>" ) // *
2.ページ要素は引数として渡されます：
$( document.body ) // body «» jQuery $( document.forms[0] ) // «» jQuery
3.関数は引数として渡されます：
function loadHandler() { alert( " " ); } $( loadHandler );
または匿名関数：
$( function (){ alert( " " ); } );
転送された関数は、ドキュメントの読み込みイベントで実行されます。 そのような呼び出しは、次の代わりに使用できます。
<body onload="loadHandler">
ページ上の要素を見つけることに加えて、jQueryには要素を操作するためのメソッドも含まれています。 一般的に使用される機能のリスト：
html() html- . val() (input,select) attr() append(), appendTo() , remove() bind(), unbind() , . bind() click(), keypress(), hover() .. addClass(), removeClass(), toggleClass() , , () css() show(), hide() , parents(),parent() children()
*機能の完全なリストはここにあります。
jQueryに実装されているいくつかのルールに注意してください。
-クエリ結果はjQueryオブジェクトにパッケージ化されます。
-ほとんどの関数は呼び出しコンテキストを返します。
これらの規則に準拠すると、コードは「邪魔にならず」なり、「チェーン」構文の使用が可能になります。 要素を検索してその値を置き換えるjQueryを使用したサンプルコード：
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function(){ $( ".age38" ) // age38 .val( "Write less, do more" ) // .css( "font-size", "110%" ) // .click( function(){ $(this).val(""); } ) // // «» . }); </script>
「控えめ」とは、上記のコードの場合、ページにage38クラスの要素がない場合、ランタイムエラーは発生せず、コードの実行は中断されないことです。
以下は、同様の機能を備えたjQueryを使用しないjavascriptの例です。
<script type="text/javascript"> // // "" window var page={}; // window.page=new Object(); // // page.getByClass=(document.getElementsByClassName) ? function(clnm){ // IE9, FireFox 3, Opera 9.5, Safari 3.1 return document.getElementsByClassName(clnm); } : function(clnm){ /// IE 6.0-IE 8.0 var arr=[]; /// /// var scanDown=function(obj,handler){ for (var child=obj.firstChild;child;child=child.nextSibling){ if (typeof(handler)=="function") handler(child); scanDown(child,handler); } }; /// /// var rgxp=new RegExp("(\\s|^)" + clnm + "(\\s|$)"); /// var classSelect=function( obj ){ if ( ( !obj ) || ( !obj.className )) return; var cls=obj.className; if (!cls.match( rgxp )) return; arr[arr.length]=obj; /// - }; scanDown( document, classSelect ); // return arr; } /// “” page.bind=(page.ie)? function(obj,evt,func){ obj.attachEvent("on"+evt,func); } : function(obj,evt,func){ obj.addEventListener(evt,func); }; /// page.main=function(obj){ if (!obj) return; if (obj.nodeType!=1) return; // obj.value="Write less, do more"; var FS="110%"; if (obj.style) { obj.style.fontSize=FS; } else { obj.style="font-size:"+FS; } page.bind(obj,"click",function(){ obj.value=""; }); }; /// page.bind( window, "load", function() { var arr=page.getByClass("age38"); // for (var i in arr){ page.main(arr[i]); // } }); </script>
結果のコードはjQueryライブラリよりも小さくなりますが、それほど普遍的ではなく、作成と保守には開発者の多大な努力が必要です。
キャッシュ+ jquery
CSPページでのjQueryの使用
最小限の機能と次のインターフェイスを備えた小さなチャット実装例を考えてみましょう。
例の機能：
-インターフェイスはjQueryを使用して完全に構成されます
-非同期サーバー呼び出し#call（）＃が使用され、クライアントの関数呼び出しを通じて応答を返します
-データはグローバルに保存されます
ページのソース：
<!DOCTYPE html> <html><head><title> jqChaté </title> <style type="text/css">.msg span {padding: 0px 0px 0px 5px}</style> </head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $( function(){ var USERNAME="#($USERNAME)#" // Cache , box=$( "<div/>" ).css("overflow","auto") // , .css("border","1px solid #ccc").width( 340 ).height( 280 ) // .appendTo( $(document.body) ) // ; box.parent() // body // body input, .append( $("<input />").css( "width",200 ) .attr("maxlength",50).before( USERNAME+": ") ) .append( // $("<button/>").text( "Send" ) // .click( function(){ // #call(..Add($(this).prev().val()))#; // (input) $("input").val("").focus(); //textbox , }) ); var drawMsg=function(/*[id,time,user,msg]*/ array ){ // var USER=2, MSG=3, SOFT="#999", BRIGHT="#339" // , msg = $( "<div><span>" + array.join("</span><span>") + "</span></div>") //html .appendTo( box ).hide() // - .addClass("msg") // .children(":first").hide() //id - .next().css("color", SOFT) //time // .next().css("color", (USERNAME==array[USER]) ? SOFT : BRIGHT ).append(": ") .parent() // msg ; if (array[MSG]!=="") { // msg.show(); // var div=msg.get(0); // html- if (div) div.scrollIntoView(); // } }; //drawMsg window.chat=function(array){ // if ( $.isArray(array) ) drawMsg( array ); // - // - ? setTimeout( // jQuery function(){ #call(..GetNext($(".msg:last span:first").text()))# } , #($get(^chatSettings("timeout"),300))# ); // }; //window.chat chat(); // - }); </script><body></body></html> <script runat="server" method="Add" arguments="msg:%String" language="cache"> #; s ^chat($increment(^chat))=$listbuild( $zt( $now() ), $USERNAME, msg ) </script> <script runat="server" method="GetNext" arguments="lastMsg:%String" language="cache"> #; c set lastMsg=$get(lastMsg), prevMsg=$order( ^chat(lastMsg),-1 ), isNewUser=( lastMsg = "" ) set callBack="window.parent.chat(" ; set isNewChat=( isNewUser && (prevMsg="") ) if ( isNewChat ) write callBack,")" Quit if ( isNewUser ) write callBack,"[", prevMsg, ",'','',''])" Quit ; set nextMsg=$order( ^chat( lastMsg ) ) if ( nextMsg="" ) write callBack,")" Quit set stored=$get(^chat(nextMsg)) ; write callBack,"[",nextMsg,", ", ..QuoteJS( $listget(stored,1) ) , ",", ..QuoteJS( $listget(stored,2) ) , ",", ..QuoteJS( ..EscapeHTML( $listget(stored,3 ))) , "])" </script>
サンプルを再生するには、任意の領域でStudioを開き、新しいCSPページを作成し、サンプルのページからコピーしたコードを貼り付けます。 任意の名前でページを保存します-同時に、既存のCSPアプリケーションを選択します。 次に、ページをコンパイルし（Ctrl + F7）、ブラウザーで開きます（F5）。
ZenページでのjQueryの使用
ZenページでのjQueryの使用は、CSPでの使用（要素の検索と変更）とまったく同じですが、Zenはブラウザとキャッシュサーバーで同じオブジェクトモデルをサポートするクライアントサーバーフレームワークであることを考慮してください。 したがって、次の点を考慮する必要があります。
-Zenページモデルは、ページ読み込みイベントの後に形成され始めます。
-Zenモデルを使用してページモデルを変更することをお勧めします。
-追加の非表示要素を使用したZenフォームのマークアップ
ケーススタディキャッシュ+ jQuery
以下は、jQueryを使用して、次のインターフェイスでストアドクラスのオブジェクトを作成および削除するより複雑な例です。
例の機能：
-この例は、キャッシュバージョン2010以降で動作します。
-動的イベントバインディングが使用され、すべてのjavascriptコードが個別のjavascriptファイルに移動されます
-ページコンテンツの一部はブラウザで直接生成されます
-「ハイパー」イベントおよび「ダイナミック」（オンザフライで生成）メソッドページは使用されません
-サーバーは、要求引数に応じてさまざまなデータ形式で応答を生成します
-％XML.Writerを使用してXML形式でサーバーオブジェクトの出力を表示し、jQueryを使用してクライアント側でXML形式でサーバー応答を解析します
1.テストデータを使用して、ユーザーエリアにストアドクラスを作成します。
///
Class test.data Extends (%Persistent, %Populate, %XML.Adaptor) {
///
Property code As %String;
///
Property name As %String;
/// "",
Method %OnNew(ByRef args as %String="") As %Status [ Private, ServerOnly = 1 ] {
s ..code=$g(args("code",1)), ..name=$g(args("name",1))
Quit $$$OK
}
}
2. Cache端子からクラスメソッド呼び出しを実行して、test.dataにテストデータを作成します。
USER>d ##class(test.data).Populate()
3.ページクラスを作成します。
///クラスtest.dataのインスタンスを操作するためのページ
Class wui.testData Extends %CSP.Page { /// Parameter CHARSET="utf-8"; /// ClassMethod OnPage() As %Status { #; #; 1. #; 2. #; 3. #; <var>oper</var> m args=%request.Data ; if $d(args("oper")){ // oper s oper=$g(args("oper",1)) // Q:oper="add" ..Add(.args) // Q:oper="del" ..Del(.args) // } #; &html<<html><head><title> test.data</title> <!-- CSS --> <style type="text/css"> table {border-collapse: collapse; border: 1px solid #777;} td, th {border: 1px solid #777;} td {padding: 2px;} th {font-weight: normal; color:#fff;background-color:#aaa;} </style> </head> <body> <table><caption> test.data</caption> <thead><tr><th>ID</th><th>code</th><th>name</th><th><!----></th></tr></thead> <tbody>> #; s sql="Select ID,code,name From test.data" s rs=##class(%SQL.Statement).%ExecDirect(.stm, sql) ; Cache > 2009 ? while rs.%Next() { w !,"<tr id='",rs.ID,"'>" , "<th>",rs.ID,"</th>" ; , "<td>",rs.code,"</td>" , "<td>",rs.name,"</td>" , "</tr>" } &html<</tbody></table> <!-- jQuery--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!— --> <script src="wui.testData.js"></script> </body></html>> Quit $$$OK } /// XML ClassMethod Add(ByRef args as %String="") as %Status{ #; s obj=##class(test.data).%New(.args), sc=obj.%Save() #; xml s wr=##class(%XML.Writer).%New() ; xml d wr.RootElement("response") ; <response , wr.WriteAttribute("id",obj.%Id()) ; id='' #; xml d wr.Object(obj) ; ><data><code>123</code><name>Name</name></data> if $$$ISERR(sc) { d wr.Element("error") ;<error> d wr.WriteChars($system.Status.GetOneErrorText(sc)) ;errorText d wr.EndElement() ;</error> } d wr.EndRootElement() ;</response> Q $$$OK } /// ClassMethod Del(ByRef args as %String="") as %Status{ s id=$g(args("id",1)), sc=##class(test.data).%DeleteId(id) w $CASE(sc ,1: 1 , : $system.Status.GetOneErrorText(sc) ) Q $$$OK } }
以下は、wui.testData.jsファイルにレンダリングされたJavascriptコードです。 ファイルはcspアプリケーションのディレクトリにある必要があります。 USERエリアの場合、ディレクトリは[キャッシュインストールディレクトリ] \ CSP \ USER \にあります。
$(function(){ // document.ready // var footer=[ // "<tfoot><tr>" ,"<th>*</th>" // " " ,"<th><input /></th>" // "" ,"<th><input /></th>" // "" ,"<th><button> + </button></th>" // ,"</tr></tfoot>" ].join( "" ); // ( ) // $( footer ).appendTo( $( "table" ) ); // // $( "tfoot button" ).click( callAdd ); // // tr tbody ( test.Data) $("tbody tr").each( addDelBtn ); // // function addDelBtn (){ // var $tr=$(this); // (tr tbody) jQuery $( "<th><button class='bDel'></button></th>" ) // .appendTo( $tr ) // .children( ".bDel" ) // c bDel .html( "X" ) // .attr( "title", " " ) // .css( "color", "#f00" ) // .click( callDel ) // ; }; // function callDel(){ // - var $btnDel=$( this ).hide(); // var $row=$button.parents( "tr" ); // tr var id=$row.attr( "id" ); // // // $.ajax- http://api.jquery.com/jQuery.ajax/ $.ajax({ //ajax options url: window.location // - wui.testData.cls ,data: "oper=del&id="+id // ,dataType: "text" // text ,success: function(txt){ // if ( txt!="1" ) { // $btnDel.show(); // alert(txt); // return; } $row.remove(); // } }); //ajax() }; // function callAdd(){ var values = [] // , $inputs = $( "tfoot input" ) // // .each( function(){ values.push( // $( this ).val() // input ) } //function ) //each ; //var //, - if ( values.join( "" ) == "" ){ alert( " " ); return; }; // var $addRow = $( "tfoot tr" ).hide(); // // $.ajax- http://api.jquery.com/jQuery.ajax/ $.ajax( { // url: window.location // - wui.testData.cls //,async: true // , type: "POST" // - POST GET , data: { // oper: "add" // , code: values[0] // , name: values[1] // } , dataType: 'text' // . // , success: function( text ){ // c XML // <response id='newid'> // <data><code>Code</code><name>Name</name></data> // <error>Error Text</error> // </response> // jQuery var xml=$.parseXML(text) , $xml=$( xml ) // jQuery , error=$xml .find("error") // node .text() // ; if ( error!=="" ){ // alert(error); // return; } // var id=$xml.find("response").attr("id") , code=$xml.find("code").text() , name=$xml.find("name").text(); var tr=[ // "<tr id='",id,"'>" , "<th>",id,"</th>" , "<td>",code,"</td>" , "<td>",name,"</td>" ,"</tr>" ].join( "" ); $( tr ) .appendTo( $("table tbody") ) // // .each( addDelBtn ) ; $inputs.val( "" ) // .focus() // ; } //success , error: function(err){ // alert("Error: "+err); } // , success error , complete: function(){ $addRow.show(); // } } // ); //$.ajax }; //callAdd }); //document.ready
いくつかの結果：
- jQueryライブラリーを使用すると、Webインターフェースの開発が大幅に簡素化されます。
- jQueryを使用すると、ページの動的コンテンツと静的コンテンツを簡単に分離できます。
- jQueryでは、ほとんどのインターフェイスロジックをブラウザ側に簡単にプッシュできるため、Cachéサーバーの負荷が軽減されます。