WebRocketX
Version 1.10.1
WebRocketX© へようこそ。この超軽量かつ超高速のコンテンツ配信システムを使用すると、シングル ページ Web アプリケーション (SPA) を 10 倍効率的に開発できます。 WebRocketX は非常に直観的で効果的であるため、WebRocketX を使用している人は誰でも、長年 HTML インジェクションがどこに隠れていたのかすぐに疑問に思うでしょう。
WebRocketX とは何ですか?
WebRocketX は、サーバーへのすべての非同期呼び出しが行われるブラウザー側の JavaScript API です。ページを更新する主なメカニズムは、innerHTML プロパティを使用した HTML スニペットの DOM 挿入です。サーバーとの単一の対話ポイントを持つことにより、開発者は API によって提供される次の機能を利用できるようになります。
以下に示すようにランディング/ウェルカム ページを作成し、そこに次のライブラリを含めます。ランディング ページは通常、フォーム ログイン ページの後ろに配置するのが最適です。言い換えれば、ユーザーがログインした後にそのユーザーを転送します。 jquery ライブラリ以外のすべては、上記の WebRocketX ルート ソース コード フォルダーで入手できます。
jquery[latest version].js including the draggable library from jquery UI
domUtil.js
desktopContext.js
webapi.js
webRocketXStyles.cssPHPおよびDjangoの実行可能なサンプル テンプレートは、ソース コードのテンプレート フォルダーにあります。
ウェルカム ページは Web アプリケーションのランディング ページで、通常はログイン ページの後ろにあります。ウェルカム ページは SPA の始まりです。主要な部分は、フレームワーク変数設定、開始ターゲット、および通信エラー アラートを含むライブラリです。
<!DOCTYPE html >
< html >
< head >
< title > Welcome </ title >
<!-- The jquery UI library should include draggable if you want to implement draggable modals-->
< script language =" javascript " type =" text/javascript " src =" javascripts/jquery/jquery-ui-1.11.4.custom/external/jquery/jquery-1.12.4.min.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/domUtil.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/desktopContext.js " > </ script >
< script language =" javascript " type =" text/javascript " charset =" iso-8859-1 " src =" javascripts/webRocketX/v1_10_1/webapi.js " > </ script >
< link rel =" stylesheet " type =" text/css " href =" javascripts/webRocketX/v1_10_1/webRocketXStyles.css " >
< script type =" text/javascript " >
var asyncDebugMode = true ;
var signInPageURI = "" ;
var pageLoadTimeStamp = "" ;
var modalTargetSpacing = 10 ;
var staticPage = false ;
var disableNavigation = false ;
</ script >
< link rel =" stylesheet " type =" text/css " href =" styles/demo/styles.css " >
< link rel =" stylesheet " type =" text/css " href =" styles/demo/menu.css " >
< meta name =" viewport " content =" width=device-width " >
</ head >
< body >
<!-- header -->
< table class =" bodytext " >
< tr >
< td width =" 20 " > </ td >
< td >
My Header
</ td >
< td width =" 20 " > </ td >
</ tr >
< tr >
< td width =" 20 " > </ td >
< td class =" menuBar " >
< div id =" menu " > </ div >
</ td >
< td width =" 20 " > </ td >
</ tr >
</ table >
< div id =" errorSpan " style =" color:red;text-align:center; " > </ div >
< div id =" winMain " class =" startingTarget bodytext " >
<!-- Unused or default capsule attributes do not need to be included. They are just included here for teaching purposes. -->
< div id =" welcome " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " jsOnload ="" reloadPage =" false " saveOriginalRequest =" false " saveResponse =" false " trackPage =" true " windowTitle =" welcome " errorPage =" false " >
Hello World
< br /> < br />
< a href =" # " onclick =" test1();return false; " > Test1 </ a >
</ div >
</ div >
<!-- footer -->
< table class =" bodytext " >
< tr >
< td width =" 20 " > </ td >
< td class =" menuBar " style =" padding: 10px 10px 10px 10px; " >
Powered By < a target =" _blank " href =" http://www.webrocketx.com " style =" text-decoration: none; " > < span style =" color:black;background-color:white;font-weight:bold; " > WebRocket </ span > < span style =" color:red;background-color:white;font-weight:bold; " > X </ span > </ a >
</ td >
< td width =" 20 " > </ td >
</ tr >
</ table >
< div id =" communicationErrorAlertWrapper " style =" display:none; " >
< div id =" communicationErrorAlert " class =" metaCapsule " capsuleType =" modal " >
< div id =" dialogLayer " class =" BDT_Dialog_Layer " >
< div class =" BDT_Dialog_Center " >
< div class =" BDT_Dialog_Decoration " >
< table class =" expand " >
< tr >
< td >
< div id =" communicationErrorMessage " > </ div >
< br /> < br />
< a href =" # " onclick =" $('#communicationErrorAlertWrapper').hide(); return false; " > Ok </ a >
</ td >
</ tr >
</ table >
</ div >
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >このページはメインコンテンツを置き換えます。これを test1.html というファイルに置きます。コンテンツは、メタデータ XML 属性で構成されたカプセル (div タグ) でラップされます。メタデータは、フレームワークがコンテンツの処理を決定するために使用する宣言型プログラミングの一種です。
< div id =" test1 " class =" metaCapsule " capsuleType =" inline " targetId =" winMain " windowTitle =" Test 1 " >
Hello World Test 1.
</ div >この呼び出しにより、winMain のコンテンツが置き換えられます。本当に素晴らしいのは、ブラウザの [戻る] ボタンを押すと前のページに完全に戻ることができますが、ずっと 1 つの SPA ページに留まっているということです。これはフレームワーク内のすべてのナビゲーションに当てはまり、ページに戻ったときにブラウザー キャッシュからではなく常にサーバーからページを更新するように決定した場合は、完全かつ簡単に制御できます。ページのカプセルに reloadPage 属性を「true」に設定すると、最初にリクエストされたのと同じパラメータをすべて使用してページがサーバーに再送信され、元のクロージャ スコープで最初に割り当てられていたのと同じコールバックも呼び出されます。
function test1 ( ) {
var successfulCallback = function ( innerHTMLObject ) {
alert ( "this my callback" ) ;
}
var webapi = new Webapi ( ) ;
webapi . setSuccessCallbackReference ( successfulCallback ) ;
webapi . setUrl ( "test1.html" ) ;
webapi . submitAsync ( ) ;
}もっと簡単にできるでしょうか？
WebRocketX カプセル アーキテクチャにより、開発者はビューの動作の多くを宣言的に制御できます。
以下に、可能なすべてのカプセル属性を示します。これにより、フレームワークの機能の多くと、それがユーザー ナビゲーションのユースケースの大部分をどのようにカバーするかについて理解できるようになります。
カプセルに含まれていない属性はデフォルト値に設定されます。必須の属性にはアスタリスク* が付いています。
一般に SPA は、JSON サービスと組み合わせた重いクライアント側 JavaScript フレームワークとみなされますが、軽量の JavaScript SPA フレームワークを使用すると、HTML サーバー側をレンダリングしながら SPA の利点を得ることが可能です。
WebRocketX にアクセス
