Silk UI WebのJavaScript出力用Function(2)

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パターンにある背景色をオレンジにするクラスです。
第1引数がクラスを設定するウィジェットの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)+"');"

シェアする

  • このエントリーをはてなブックマークに追加

フォローする