OpenFin 플랫폼 API를 활용한 새로운 주식 포트폴리오 APP
페이지 정보
작성자 최고관리자
작성일 2020-07-22 00:00 조회 7,772회
댓글 0건
본문
관련링크
응용 프로그램에서 의 사용량을 보여주는 금융 샘플입니다.
이 은 여러 개의 OpenFin 응용 프로그램을 표시하고 각기 별도의 창에 로드하므로 사용자가 자신이 원하는 작업 영역을 구성할 수 있습니다.
는 창과 보기를 즉각적으로 사용 가능한 논리 작업 영역에 체계적으로 구성할 수 있는 기능을 제공합니다. 새로운 주식 포트폴리오 앱은 OpenFin 플랫폼 API를 사용합니다. 이에 따라 더 이상 여러 개의 OpenFin 응용 프로그램을 실행할 필요가 없습니다. 주요 과제는 주식 포트폴리오 앱을 단일 OpenFin 응용 프로그램으로 마이그레이션하는 것이었습니다. 이 문서에서는 이 과제를 달성한 방법과 OpenFin 플랫폼 API을 적용할 수 있는 새로운 기회에 관해 기술합니다.
이전 버전과 비교해 새 버전의 외관이 크게 달라지지는 않았고, 다음과 같이 생겼습니다.
재무 앱 실행
Windows 시스템에서 하여 실행해 봄으로써 이 앱을 바로 체험해 보실 수 있습니다.
이 앱을 빌드하는 방법에 관심이 있다면 다음 단계를 따르시기 바랍니다.
먼저 다음과 같이 GitHub에서 응용 프로그램을 설치합니다.
git clone https://github.com/GrapeCity/wijmo-openfin-platform-api.git
cd wijmo-openfin-platform-api && npm install
이어서 다음과 같이 개발 모드에서 응용 프로그램을 빌드하여 실행합니다.
npm start
개발자가 아닌 사용자로서 앱 실행하기
개발자가 아닌데 이 응용 프로그램을 사용하고 싶은 경우를 위해 했습니다.
Windows 시스템에서 앱을 설치하여 시작하십시오. 기술 관련 전문 지식은 전혀 필요 없습니다!
OpenFin 플랫폼 개요
OpenFin 플랫폼에는 새로운 추상화 보기가 도입되었습니다. 이로 인해 콘텐츠를 창과 분리할 수 있게 되었습니다. 콘텐츠(웹 응용 프로그램)는 창에 연결되어 있는 OpenFin 보기로 로드됩니다. 보기 자체에는 창 작업 기능이 없습니다. 따라서 창에 연결되어야 하며 콘텐츠를 표시하려면 이 창을 기준으로 경계를 설정해 주어야 합니다. 보기는 열/행, 탭, 그리드와 같은 다양한 정렬 방식으로 구성할 수 있습니다.
OpenFin 문서에 명시된 것처럼 OpenFin 플랫폼 응용 프로그램의 아키텍처는 다음과 같습니다.
보기와 창을 조정하기 위한 기능을 노출하는 플랫폼 컨트롤러
컨트롤러의 자식 창 한 개 이상(보기 레이아웃이 있을 수도 있고 없을 수도 있음). 창 컬렉션을 스냅숏이라고 합니다.
콘텐츠를 제공하는 한 개 이상의 보기입니다. 창 레이아웃의 일부로 상주합니다.
단일 OpenFin 앱으로 마이그레이션하기
주요 과제는 단일 앱 매니페스트로 이동하는 것이었습니다. 아래 코드 조각은 새로운 주식 포트폴리오 앱에서 미리 구성된 작업 영역을 정의하는 데 사용되는 기본 스냅숏을 기술한 것입니다.
"snapshot": {
"windows": [
{
"layout": {
"content": [
{
"type": "column",
"content": [
{
"type": "row",
"content": [
{
"type": "component",
"componentName": "view",
"componentState": {
"name": "component_stock_portfolio",
"url": "http://localhost:4200"
}
},
{
"type": "component",
"componentName": "view",
"componentState": {
"name": "component_stock_changes_chart",
"url": "http://localhost:4300/#/changes"
}
}
]
},
{
"type": "row",
"content": [
{
"type": "component",
"componentName": "view",
"componentState": {
"name": "component_stock_trading",
"url": "http://localhost:3300"
}
}
]
}
]
}
]
}
},
{
"layout": {
"content": [
{
"type": "column",
"content": [
{
"type": "component",
"componentName": "view",
"componentState": {
"name": "component_stock_hloc_chart",
"url": "http://localhost:3100"
}
},
{
"type": "component",
"componentName": "view",
"componentState": {
"name": "component_stock_trendline_chart",
"url": "http://localhost:3100"
}
}
]
}
]
}
}
]
위에 나와 있듯이 미리 구성된 기본 작업 영역은 두 개의 창으로 되어 있습니다. 이 창은 보기 구성 섹션에서 제공하는 URL에서 웹 응용 프로그램을 로드합니다.
창 사용자 정의하기
OpenFin 플랫폼은 OpenFin의 Standard Window가 사전 패키징된 상태로 제공됩니다. Standard Window에는 표준 창 컨트롤(닫기, 최소화, 극대화)과 몇 가지 스타일 사용자 정의 기능이 포함되어 있습니다.
이름이 암시하듯이 Standard Window는 생성 시 창의 URL을 지정하지 않으면 얻게 되는 기본 창으로 사용됩니다.
과제는 미리 보기 버전의 창 스타일을 최대한 보존하는 것이었습니다. OpenFin 플랫폼은 다음과 같이 창을 사용자 정의할 수 있는 두 가지 옵션을 지원합니다.
OpenFin Standard Window의 스타일에 URL을 제공하는 방식
Standard OpenFin이 아닌 사용자 정의 창에 URL을 제공하는 방식
두 번째 옵션이 가장 적절하다고 판명되었습니다.
이 작업은 두 가지 단계로 구성됩니다. 먼저 사용자 정의 창을 표시하는 HTML 파일을 정의해야 합니다. HTML 파일에는 레이아웃이 렌더링될 ID 레이아웃-컨테이너가 포함된 div HTML 요소가 있어야 합니다. 당사의 경우 HTML 파일이 다소 단순하여 프레임이 없는 창을 표시합니다.
다음 위치에서 소스를 보실 수 있습니다.
packages\stock-ui\src\platform-window.
이어서 HTML 파일의 URL은 앱 매니페스트에서 지정해야 합니다.
"platform": {
...
"defaultWindowOptions": {
"url": "http://localhost:3000/platform-window/index.html",
...
}
} 플랫폼 동작 사용자 정의
OpenFin 플랫폼을 통해 사용자 정의 공급자를 제공하여 기본 플랫폼 동작을 덮어쓰거나 확장할 수 있습니다. 이 플랫폼 공급자는 플랫폼의 모든 창을 상호 조율하는 커뮤니케이션 허브입니다. 이 공급자는 HTML 파일로 표시되는 숨은 창에서 실행됩니다.
창 사용자 정의와 유사하게 동작 사용자 정의도 HTML 파일에서 발생합니다. 사용자 정의 HTML 파일은 fin.Platform.init를 호출하여 플랫폼을 초기화하고 매니페스트에서 정의한 스냅숏을 열어야 합니다. fin.Platform.init는 overrideCallback 속성이 포함되어 있을 수 있는 옵션 인수를 받아들입니다. 기본 플랫폼 동작을 구현하는 클래스는 이 콜백에 대한 인수로 제공되며, OpenFin은 이 콜백의 반환 값을 사용하여 플랫폼 기능을 처리합니다.
overrideCallback을 사용하면 플랫폼 동작을 사용자 정의하기 위해 기본 기능을 재정의할 수 있습니다.
아래 코드에서는 getSnapshot 동작을 재정의하는 방법을 보여 줍니다.
const overrideCallback = (Provider) => {
class MyOverride extends Provider {
async getSnapshot() {
// Custom code here
}
}
return new MyOverride();
};
fin.Platform.init({ overrideCallback });새로운 주식 포트폴리오 앱에서는 이 메커니즘을 사용해 앱 종료 시 앱 레이아웃을 저장하고 앱 시작 시 앱 레이아웃을 복구합니다. 또한 앱 시작과 시작 사이에 사용자 작업 영역을 유지할 수 있습니다.
이전 섹션과 마찬가지로 사용자 정의 HTML 파일에 대한 URL도 앱 매니페스트에 지정됩니다. 당사의 경우 다음과 같습니다.
"platform": {
...
"providerUrl": "http://localhost:3000/platform-provider/index.html",
...
} packages\stock-ui\src\platform-provider.
Google의 Chromium과 GitHub의 Electron을 기반으로 빌드된 OpenFin을 통해 최신 HTML5/JavaScript 기능을 활용할 수 있습니다. 뿐만 아니라 OpenFin은 작업 영역 관리 및 응용 프로그램 간 상호 운용성에 대한 지원을 기본으로 제공합니다. 엔터프라이즈
댓글목록
등록된 댓글이 없습니다.
