WebRocketX
Version 1.10.1
WebRocketX©에 오신 것을 환영합니다. 이 초경량, 초고속 콘텐츠 전달 시스템을 사용하면 단일 페이지 웹 애플리케이션(SPA)을 10배 더 효율적으로 개발할 수 있습니다. WebRocketX는 매우 직관적이고 효과적이어서 이를 사용하는 사람은 누구나 HTML 삽입이 수년 동안 어디에 숨겨져 있었는지 즉시 궁금해합니다.
WebRocketX란 무엇입니까?
WebRocketX는 서버에 대한 모든 비동기 호출이 이루어지는 브라우저 측 자바스크립트 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 용 실행 가능한 예제 템플릿은 소스 코드의 템플릿 폴더에서 찾을 수 있습니다.
환영 페이지는 일반적으로 로그인 페이지 뒤에 있는 웹 애플리케이션 랜딩 페이지입니다. 환영 페이지는 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 페이지에 있다는 것입니다. 이는 프레임워크의 모든 탐색에 해당되며, 다시 탐색할 때 브라우저 캐시에서 오는 대신 페이지가 항상 서버에서 새로 고쳐지도록 하려는 경우 완전하고 간단한 제어가 가능합니다. 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 서비스와 결합된 무거운 클라이언트 측 자바스크립트 프레임워크와 동일하지만, 가벼운 자바스크립트 SPA 프레임워크를 사용하여 HTML 서버 측을 렌더링하면서 SPA의 이점을 얻는 것이 여전히 매우 가능합니다.
WebRocketX 방문
