WebRocketX
Version 1.10.1
歡迎來到 WebRocketX©。利用這款超輕、超快的內容交付系統，開發單頁 Web 應用程式 (SPA) 的效率提高 10 倍。 WebRocketX 是如此直觀和有效，任何使用它的人都會立即想知道這些年來 HTML 注入隱藏在哪裡。
什麼是WebRocketX？
WebRocketX 是一個瀏覽器端 JavaScript API，所有對伺服器的非同步呼叫都是透過它進行的。它更新頁面的主要機制是使用innerHTML 屬性透過DOM 插入HTML 片段。透過與伺服器進行單點交互，開發人員可以使用 API 提供的以下功能。
建立一個登陸/歡迎頁面，如下所示，並在其中包含以下程式庫。登陸頁面通常最好位於表單登入頁面後面。換句話說，您在用戶登入後將其轉發給它。除了 jquery 庫之外的所有內容都可以在上面找到的 WebRocketX 根源程式碼資料夾中找到。
jquery[latest version].js including the draggable library from jquery UI
domUtil.js
desktopContext.js
webapi.js
webRocketXStyles.cssPHP和Django的可運行範例範本可以在原始程式碼的 templates 資料夾中找到。
歡迎頁面是您的 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 中的內容。真正酷的是，瀏覽器上的後退按鈕將完美導航回上一頁，但您仍將始終處於 SPA 頁面中。對於框架中的任何導航都是如此，如果您決定希望頁面在您導航回某個頁面時始終從伺服器刷新，而不是從瀏覽器快取刷新，那麼您就擁有完整且簡單的控制。使用等於「true」的 reloadPage 屬性標記頁面的膠囊將使用最初請求的所有相同參數將頁面重新提交到伺服器，甚至在其原始閉包範圍中調用最初分配給它的相同回調。
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
