Silk UI WebのJavaScript出力用Function(1)
の続き。
Silk UIのJavascript Functionの内、Script/Ready以外の動作を確認していきます。
テストの条件は前と同じです。Function戻り値のテキストをそのまま表示するExpressionと、エンコードせずに戻り値を実行するExpressionを配置。
Script/Readyは前の記事で確認しました。それぞれ、渡したJavaScriptコードをscriptタグで囲んで返す関数、jQueryのreadyで囲んで返す関数でした。
js_addClass
jQueryのaddClassを使って指定要素(Idで指定)に指定クラスを追加する。
入力パラメータ：ElementId(クラスを追加するhtmlのエレメントのId), Class(追加するクラス名)
出力パラメータ：jQueryの処理を示すJavaScriptコード
WebPatternsのモジュールをクローンして中を除くと以下のような実装でした。
"$('#"+EncodeJavaScript(ElementId)+"').addClass('"+EncodeJavaScript(Class)+"');"
Expression.Value：
Script(Ready(js_addClass(ResultText.Id, "Orange")))
“Orange”は、Silk UIのWebパターンにある背景色をオレンジにするクラスです。
第１引数がクラスを設定するウィジェットのId。実際指定したContainerの背景がオレンジになりました。
js_click
指定した要素をクリックするアクション。
入力パラメータ：ElementId(クリックするエレメントのId)
出力パラメータ：jQueryの処理を示すJavaScriptコード(.click()を呼ぶスクリプトを返す)
Expression.Value：
SyntaxEditor Code Snippet
Script(Ready(js_click(ButtonAfterDummyText.Id)))
「js_click用ボタン」というButtonを追加し、これをクリックするコードにしています。
ボタンのOn ClickのハンドラでFeedback_Messageを呼んでいるので下の実行例では画面上部にメッセージが表示。
大体みんな同じ動作なので、あとの3つは概略だけ。
js_hide、js_setIframeSrc、js_show
js_hideはjQueryのhideを呼ぶだけ、js_showは同じくshowを呼ぶだけ。パラメータは両方共js_clickと同じ。
js_setIframeSrcは以下の実装で、要するに、指定要素の子孫にあるiframeのsrcを置き換える処理。OutSystemsとは別枠の古いWebページが有って、組み込んで使いたいとき用か？
入力パラメータとして、iframeの先祖要素のIdと新しいiframeのsrcとなるURLを渡します。
"$('#"+EncodeJavaScript(ParentElementId)+" iframe').attr('src','"+EncodeJavaScript(NewSrcURL)+"');"