화면 로더 가이드
화면 로더 아키텍처
xFrame5 솔루션은 모든 화면(탭에 링크하여 로드하는 포틀릿 화면 제외)을 하나의 “화면로더.html” 파일과 “화면로더.js”을 이용하여 로딩합니다.
로딩 대상 화면 정보는 “화면 정보 파라미터”를 “화면로더.html” URL에 쿼리스트링 형식으로 전달하여 표시한다.
“화면 정보 파라미터”에 “xframe_screen_url” 값이 지정되지 않은 경우에는, “화면로더.js” 파일에 설정된 “MAINFRAMESCREEN” 실행 파라미터에 설정된 정보를 이용하여 로딩합니다.
프로젝트 수행시, 솔루션 설치시 기본으로 제공되는 화면 로더용 파일(xframe5.html, xframe5.js)을 복사하여 사용한다.
화면 로더용 파일 대한 세부 내용은 해당 파일 내용의 주석을 참조한다.
본 문서에서는 index.html, index.js 파일로 복사하여 사용한다고 가정한다.
| 구분 | 내용 형식 | 설명 |
|---|---|---|
| index.xml | HTML | 화면 로더 HTML 파일이며, 솔루션 엔진 JavaScript 파일 및 CSS 파일을 로드한다. |
| index.js | JavaScript | 화면 로더 자비스크립트 파일이며, 화면 로딩 관련 스크립트 함수 및 실행 파라미터가 정의되어 있다. |
index.html에서 로드하는 파일
아래의 내용은 index.html에서 로드하는 파일에 대한 정보이다.
| 파일 | 설명 및 기능 |
|---|---|
| ./xframe5.ico | 브라우저 타이틀 좌측에 표시할 아이콘 파일이다. |
| ./xf5/css/xf_engine.min.css | xFrame5 솔루션에서 사용하는 CSS 파일이다. |
| ./xframe5.css | 프로젝트에서 변경해서 xFrame5 솔루션에서 사용하는 CSS가 정의되어 있는 CSS 파일이다. |
| ./xf5/site/xf_site.css | 프로젝트에서 xFrame5 솔루션에서 정의된 CSS를 재정의하거나, 프로젝트에서 추가적으로 사용될 스타일을 저장할 CSS 파일이다. |
| ./xf5/ext/lib/jquery-3.2.1.min.js | jQuery 라이브리리 자바스크립트 파일이다. |
| ./xf5/lib/xf_const.min.js | xFrame5 솔루션에서 정의된 상수가 정의되어 있는 자바스크립트 파일이다. |
| ./xf5/lib/xf_engine.min.js | xFrame5 솔루션의 실행 엔진 자바스크립트 파일이다. |
| ./index.js | 화면 로더용 자바스크립트 파일이다. |
"화면 정보 파라미터" 용어 정의
index.html 파일에 URL 쿼리스트링 형식으로 파라미터로 전달되는 화면 로딩 관련 정보를 의미한다.
| 키 | 설명 | 유효값 | 예시 |
|---|---|---|---|
| xframe_screen_url | 로딩 대상 화면 경로 | /SYS/WinMain | |
| xframe_screen_title | xFrame 화면 타이틀 (Document Title로 사용됨) | ||
| xframe_console | 콘솔트레이스 보이기 여부(1인 경우, 표시) | 0, 1 | 1 |
| xframe_event | 콘솔트레이스 이벤트 보이기 체크 여부(1인 경우, 체크) | 0, 1 | 1 |
| xframe_param | 콘솔트레이스 이벤트 파라미터 체크 여부(1인 경우, 체크) | 0, 1 | 1 |
| xframe_screen_mainframe | 로드하는 화면을 메인 프레임 화면으로 처리 여부 | 0, 1 | 1 |
| xframe_language | xFrame 표시 언어 (다국어 표시 용도) | ko | |
| xframe_country | xFrame 표시 언어 (다국어 표시 용도) | kr |
"실행 파라미터" 용어 정의
실행 파라미터는 index.js 파일내에 “_xf_param” 변수명으로 정의된 오브젝트에 정의된 설정정보를 의미합니다.
- 실행 파라미터 : 화면 로딩/실행시 사용되는 다양한 환경 구성 정보가 정의되어 있습니다.
- 그리드 실행 파라미터 : 그리드 실행시 사용되는 다양한 환경 구성 정보가 정의되어 있습니다.
"메인 프레임 화면" 용어 정의
메인 프레임 화면은 “MAINFRAMESCREEN” 실행 파라미터에 정의된 화면을 의미하며, index.html 파일을 화면 정보 파라미터 없이 로딩시 처음으로 로딩되는 화면입니다.
- 메인 프레임 화면은 프로젝트에서 구성된 URL 접근시 가장 처음에 로드되는 화면이다.
- 메인 프레임 화면은 일반 화면과 다른 점은 스타일/글로벌 모듈/글로벌 데이터셋을 로딩하는 과정을 수행합니다.
화면 파일 아키텍처
xFrame5 솔루션의 논리적인 하나의 화면은 아래와 같이 2개의 파일로 구성된다.
| 구분 | 내용 형식 | 설명 |
|---|---|---|
| 화면ID.xml | XML | 화면 UI 구성 정보, Transaction 정보, XDataSet 정보가 정의된 파일 |
| 화면ID.js | JavaScript | 자바스크립트 언어로 구현된 화면 비즈니스 로직이 저장된 파일 |
화면 로딩 절차
xFrame5 솔루션의 화면 로딩 단계는 아래와 같다.
| 단계 | 동작 | 설명 |
|---|---|---|
| 1 | 화면로더.html 로딩 | 화면을 로딩하기 위한 HTML 파일을 로드한다. |
| 2 | 화면 파일 로딩 | 화면로더.html 파일에 로딩된 xFrame5 솔루션 엔진에 의해서 화면 파일을 AJAX 통신 방식으로 로드한다. |
| 3 | 화면 파일 렌더링 | 화면로더.html 파일에 로딩된 xFrame5 솔루션 엔진에 의해서 화면 XML 파일을 파싱하여 HTML5로 생성하여 표시한다. |
화면 로더 HTML 설명
아래의 내용은 HTML코드 관련 내용이다.
<!doctype html> <html lang="ko"> <meta charset="utf-8"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 설명 |
|---|---|
| 1 | HTML5 문서를 선언하고, 웹 브라우저에게 문서가 HTML5로 작성됨을 알린다. |
| 2 | lang 속성은 웹 페이지의 언어를 선언한다. IOS 국가 코드정보 URL: “https://ko.wikipedia.org/wiki/ISO_3166-1” |
| 3 | <meta> 태그의 charset 속성은 해당 HTML 문서의 문자 인코딩 방식을 명시한다. URL : “ https://developer.mozilla.org/ko/docs/Glossary/UTF-8” |
| 4 | 페이지 로드시마다 페이지를 캐싱하지 않습니다. 관련 URL : “https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Cache-Control” |
| 5 | 캐쉬에서 해당 페이지를 읽어들이는 걸 방지합니다. 관련 URL : “https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Pragma” |
| 6 | Viewport는 현재 보고 있는 컴퓨터 화면의 영역입니다. width=device-width 웹 페이지의 크기가 모니터 화면에 맞는 비율로 뜨도록 한다. initial-scale=1 보여지는 화면의 줌 정도를 1배율로 한다는 뜻으로 값을 키울수록 화면 줌이 되어 더 크게 보인다. |
| 7 | X-UA-Compatible 태그로 웹의 호환성을 지정한다. Content=”IE=edge”는 IE브라우저에서 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드이다. edge라는건 IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이다. |
화면 로더 CSS 구성 방식
아래의 내용은 CSS 코드 관련 내용이다.
<link rel="shortcut icon" href="./xframe5.ico"/> <!-- xFrame CORE/BASIC/EXT CSS --> <link rel="stylesheet" type="text/css" href="./xf5/css/xf_engine.min.css"> <!-- xFrame Page CSS --> <link rel="stylesheet" type="text/css" href="./xframe5.css"> <!-- xFrame Customized CSS --> <!-- <link rel="stylesheet" type="text/css" href="./xf5/site/xf_site.css"> -->
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 설명 |
|---|---|
| 1 | 브라우저 탭 옆에 표시할 이미지 아이콘 파일 경로를 설정한다. |
| 3 | xFrame5 솔루션에서 사용하는 CSS 파일 경로를 설정한다. |
| 5 | 프로젝트에서 사용할 xFrame5 솔루션용 CSS 파일 경로를 설정한다. |
| 8 | 프로젝트에서 사용할 스타일 커스트마이징 스타일 정의용 CSS 파일 경로를 설정한다. |
화면 로더 자바스크립트 구성 방식
아래의 내용은 HTML에 자바스크립트 관련 내용이다.
<!-- External JS --> <script type="text/javascript" src="./xf5/ext/lib/jquery-3.2.1.min.js"></script> <!-- xFrame5 JS --> <script type="text/javascript" src="./xf5/lib/xf_const.min.js"></script> <script type="text/javascript" src="./xf5/lib/xf_engine.min.js"></script> <!-- xFrame5 화면로더 JS 파일 로드 --> <script type="text/javascript" src="./index.js"></script>
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 설명 |
|---|---|
| 2 | jQuery 라이브러리 파일 경로를 설정한다. |
| 4 | xFrame5 솔루션 상수 정의 파일 경로를 설정한다. |
| 5 | xFrame5 솔루션 엔진 파일 경로를 설정한다. |
| 7 | 화면 로더용 자바스크립트 파일 경로를 설정한다. |
화면 로더 자바스크립트 파일 내용
아래의 내용은 화면 로더.js 파일의 실행 파라미터 관련 내용이다.
var _xf_param = {
ENGINEHTMLURL: './index.html', // 화면 로더 HTML 파일 경로
MAINFRAMESCREEN: '/SYS/StartMain',
위의 소스에 대한 설명은 아래와 같습니다.
| 라인 | 항목 | 설명 |
|---|---|---|
| 2 | ENGINEHTMLURL | 화면 로더 HTML 파일 경로 |
| 3 | MAINFRAMESCREEN |
|