[페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework
9982 단어 TypeScriptHTMLSPA자바스크립트CSS
1. 일 시작
현재 PHP로 만들고 있는 시스템을 Node.js에 이식하려고 백엔드의 프레임워크를 개발하고 있다. 거기서 TypeScript를 사용하기 시작하면 생각외 편리했기 때문에 프런트 엔드에서도 사용하기로 했다.
이전부터 JavaScript의 윈도우 프레임워크 자체는 개발을 하고 있었다. 그러나 타겟 환경을 IE11(GoogleBot가 이해할 수 있는 레벨)로 정하고 있었기 때문에, class의 사용조차 허락되지 않고 꽤 불편한 생각을 하고 있었다. 그런데 TypeScript만 사용하면, 그 근처의 문제가 모두 해결하는 것에 지금 곧바로에 깨달았다. 좀 더 빨리 사용해 두면 좋았다고 생각한다.
2. 어떤 일을 할 수 있는 프레임워크인가
htps : // 기주 b. 이 m / 그럼 Sc 리 pt 우드 wF 라메 rk / JSW
샘플 실행 결과
프레임 윈도우를 2개 표시
프레임 윈도우 안에는, 좌우를 분할하는 스플리터와 트리 뷰를 표시
트리 뷰의 아이템을 클릭하면, 버튼이 생성되어 드래그 드롭으로 이동할 수 있다
소스 코드
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
<link rel="stylesheet" href="css/JSWindow.css"/>
<script type="text/javascript" src="js/JSWindow.js"></script>
<script type="text/javascript" src="js/JSWTreeView.js"></script>
<script type="text/javascript" src="js/JSWButton.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<title>JSWindowTest</title>
</head>
<body>
</body>
</html>
Main.ts//フレームウインドウを継承し、機能を追加する
class CustomWindow extends JSW.JFrameWindow{
constructor(){
super()
this.setTitle("カスタムウインドウ") //タイトル設定
this.setSize(400, 300) //サイズ設定
//分割ウインドウの作成
var splitter = new JSW.JSplitter(200)
this.addChild(splitter, 'client') //クライアント領域全体に設定
//ツリービューの作成
var treeView = new JSW.JTreeView()
treeView.addItem('あいうえお') //アイテムの追加
treeView.addItem('かきくけこ')
treeView.addItem('さしすせそ')
splitter.addChild(0, treeView, 'client') //分割ウインドウ左へ
//ツリービューが選択された場合の処理
treeView.addEventListener('select', function (e) {
//選択アイテム
var item: JSW.JTreeItem = e.params.item
//ボタンを作成
var button = new JSW.JButton(item.getItemText())
button.setMoveable(true) //ボタンを可動式に
splitter.addChild(1, button) //分割右へ
})
}
}
addEventListener("DOMContentLoaded", Main)
//ページ読み込み後に実行される内容
function Main() {
//ウインドウの作成
var win = new CustomWindow()
win.setPos(32, 64)
//ウインドウの作成、二枚目
var win2 = new CustomWindow()
win2.setPos(100,200)
}
프레임워크의 이용자가 쓰는 것은 톱 HTML 파일로 js를 읽는 처리와, 윈도우를 사용하는 처리의 부분이 된다
2. 개발 전제 조건
출력 코드에 관한 것
・개발은 TypeScript이지만, 생성한 것은 플레인인 JavaScript에서도 이용할 수 있도록 한다
・출력은 ES5로 실시해, IE11이나 GoogleBot가 이해 가능하게 한다
· 다른 사람으로부터 모든 라이브러리를 가져 오지 않는다.
・import문은 사용하지 않고, WebPack등도 사용하지 않는다
프레임 워크에 관한 것
・일반적인 윈도우 시스템과 같이, 복수 윈도우의 중첩이나 부모와 자식 관계의 서포트
·사용법은 WindowsForms풍으로, 아이 윈도우를 지정 개소에 도킹시킨다
・윈도우를 계승하는 것으로, 다양한 기능을 확장 가능하게 한다
・윈도우를 계승하는 것으로, 드래그 조작에 의한 리사이즈나 이동을 풀 서포트
WindowsForms와 같은 레이아웃 에디터에 의한 화면 설계 (이것은 예정)
3. 이 시점에서 만든 것
・윈도우의 베이스 클래스
프레임 윈도우에 의한 리사이즈, 이동, 최소화, 최대화, 클로즈
・윈도우의 분할 바(종횡 대응)
・트리뷰
· · 버튼
4. 앞으로 만드는 것
・Windows 라이크인 헤더 리사이즈 대응의 리스트 뷰
안드로이드의 LinnerLayout의 레이아웃 컨테이너 같은 녀석
・리치 텍스트 에디터
· 레이아웃 편집기
리스트뷰나 리치 텍스트 에디터는 구 프레임워크로 구현이 끝났으므로, 그것을 이식할 예정
레이아웃 에디터는 언제가 될지 모르지만, 편집 후의 출력 결과는 Json 형식 & JavaScript의 변수에 대입하는 형식으로 할 예정
Reference
이 문제에 관하여([페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/SoraKumo/items/2ad43207315430325b12
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
htps : // 기주 b. 이 m / 그럼 Sc 리 pt 우드 wF 라메 rk / JSW
샘플 실행 결과
프레임 윈도우를 2개 표시
프레임 윈도우 안에는, 좌우를 분할하는 스플리터와 트리 뷰를 표시
트리 뷰의 아이템을 클릭하면, 버튼이 생성되어 드래그 드롭으로 이동할 수 있다
소스 코드
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
<link rel="stylesheet" href="css/JSWindow.css"/>
<script type="text/javascript" src="js/JSWindow.js"></script>
<script type="text/javascript" src="js/JSWTreeView.js"></script>
<script type="text/javascript" src="js/JSWButton.js"></script>
<script type="text/javascript" src="js/Main.js"></script>
<title>JSWindowTest</title>
</head>
<body>
</body>
</html>
Main.ts
//フレームウインドウを継承し、機能を追加する
class CustomWindow extends JSW.JFrameWindow{
constructor(){
super()
this.setTitle("カスタムウインドウ") //タイトル設定
this.setSize(400, 300) //サイズ設定
//分割ウインドウの作成
var splitter = new JSW.JSplitter(200)
this.addChild(splitter, 'client') //クライアント領域全体に設定
//ツリービューの作成
var treeView = new JSW.JTreeView()
treeView.addItem('あいうえお') //アイテムの追加
treeView.addItem('かきくけこ')
treeView.addItem('さしすせそ')
splitter.addChild(0, treeView, 'client') //分割ウインドウ左へ
//ツリービューが選択された場合の処理
treeView.addEventListener('select', function (e) {
//選択アイテム
var item: JSW.JTreeItem = e.params.item
//ボタンを作成
var button = new JSW.JButton(item.getItemText())
button.setMoveable(true) //ボタンを可動式に
splitter.addChild(1, button) //分割右へ
})
}
}
addEventListener("DOMContentLoaded", Main)
//ページ読み込み後に実行される内容
function Main() {
//ウインドウの作成
var win = new CustomWindow()
win.setPos(32, 64)
//ウインドウの作成、二枚目
var win2 = new CustomWindow()
win2.setPos(100,200)
}
프레임워크의 이용자가 쓰는 것은 톱 HTML 파일로 js를 읽는 처리와, 윈도우를 사용하는 처리의 부분이 된다
2. 개발 전제 조건
출력 코드에 관한 것
・개발은 TypeScript이지만, 생성한 것은 플레인인 JavaScript에서도 이용할 수 있도록 한다
・출력은 ES5로 실시해, IE11이나 GoogleBot가 이해 가능하게 한다
· 다른 사람으로부터 모든 라이브러리를 가져 오지 않는다.
・import문은 사용하지 않고, WebPack등도 사용하지 않는다
프레임 워크에 관한 것
・일반적인 윈도우 시스템과 같이, 복수 윈도우의 중첩이나 부모와 자식 관계의 서포트
·사용법은 WindowsForms풍으로, 아이 윈도우를 지정 개소에 도킹시킨다
・윈도우를 계승하는 것으로, 다양한 기능을 확장 가능하게 한다
・윈도우를 계승하는 것으로, 드래그 조작에 의한 리사이즈나 이동을 풀 서포트
WindowsForms와 같은 레이아웃 에디터에 의한 화면 설계 (이것은 예정)
3. 이 시점에서 만든 것
・윈도우의 베이스 클래스
프레임 윈도우에 의한 리사이즈, 이동, 최소화, 최대화, 클로즈
・윈도우의 분할 바(종횡 대응)
・트리뷰
· · 버튼
4. 앞으로 만드는 것
・Windows 라이크인 헤더 리사이즈 대응의 리스트 뷰
안드로이드의 LinnerLayout의 레이아웃 컨테이너 같은 녀석
・리치 텍스트 에디터
· 레이아웃 편집기
리스트뷰나 리치 텍스트 에디터는 구 프레임워크로 구현이 끝났으므로, 그것을 이식할 예정
레이아웃 에디터는 언제가 될지 모르지만, 편집 후의 출력 결과는 Json 형식 & JavaScript의 변수에 대입하는 형식으로 할 예정
Reference
이 문제에 관하여([페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/SoraKumo/items/2ad43207315430325b12
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
・윈도우의 베이스 클래스
프레임 윈도우에 의한 리사이즈, 이동, 최소화, 최대화, 클로즈
・윈도우의 분할 바(종횡 대응)
・트리뷰
· · 버튼
4. 앞으로 만드는 것
・Windows 라이크인 헤더 리사이즈 대응의 리스트 뷰
안드로이드의 LinnerLayout의 레이아웃 컨테이너 같은 녀석
・리치 텍스트 에디터
· 레이아웃 편집기
리스트뷰나 리치 텍스트 에디터는 구 프레임워크로 구현이 끝났으므로, 그것을 이식할 예정
레이아웃 에디터는 언제가 될지 모르지만, 편집 후의 출력 결과는 Json 형식 & JavaScript의 변수에 대입하는 형식으로 할 예정
Reference
이 문제에 관하여([페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/SoraKumo/items/2ad43207315430325b12
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([페이지 전환하지 않는 웹 시스템] TypeScript를 사용한 Window Framework), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/SoraKumo/items/2ad43207315430325b12텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
