세부 일정
- 04.21
- vs code 스터디
- 공식 document 참고
- vs code 스터디
- 04.22
// extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.window.registerTreeDataProvider('exampleView', new TreeDataProvider());
}
class TreeDataProvider implements vscode.TreeDataProvider<TreeItem> {
onDidChangeTreeData?: vscode.Event<TreeItem|null|undefined>|undefined;
data: TreeItem[];
constructor() {
this.data = [new TreeItem('cars', [
new TreeItem(
'Ford', [new TreeItem('Fiesta'), new TreeItem('Focus'), new TreeItem('Mustang')]),
new TreeItem(
'BMW', [new TreeItem('320'), new TreeItem('X3'), new TreeItem('X5')])
])];
}
getTreeItem(element: TreeItem): vscode.TreeItem|Thenable<vscode.TreeItem> {
return element;
}
getChildren(element?: TreeItem|undefined): vscode.ProviderResult<TreeItem[]> {
if (element === undefined) {
return this.data;
}
return element.children;
}
}
class TreeItem extends vscode.TreeItem {
children: TreeItem[]|undefined;
constructor(label: string, children?: TreeItem[]) {
super(
label,
children === undefined ? vscode.TreeItemCollapsibleState.None :
vscode.TreeItemCollapsibleState.Expanded);
this.children = children;
}
}// package.json
{
[...]
"activationEvents": [
"OnView:exampleView"
],
"contributes": {
"views": {
"explorer": [
{
"id": "exampleView",
"name": "exampleView"
}
]
}
}
}- 04.25
- 명령어를 입력하여 webview 띄우기
- panel 생성 및 나타내기
- HTML content로 설정하기
- 라디오 버튼 추가
- 명령어를 입력하여 webview 띄우기
// package.json
"activationEvents": [
"onCommand:uniDevice.start"
],
(...)
"contributes": {
"commands": [
{
"command": "uniDevice.start",
"title": "UNI Device Program",
"category": "UNI Device"
}
]
},// extension.ts
const panel = vscode.window.createWebviewPanel(
'uniDevice',
'UNI Device',
vscode.ViewColumn.One,
{}
);
panel.webview.html = getWebviewContent();
// html 코드
function getWebviewContent() {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UNI Device</title>
</head>
<body>
<input type="radio" name="chk_info" value="USB">USB
<input type="radio" name="chk_info" value="UDP" checked="checked">UDP
<input type="radio" name="chk_info" value="UDP Full Address">UDP Full Address
</body>
</html>`;
}- 04.26
- explorer에서 context menu 추가하기
- uniDevice: connection
- uniDevice: motion
- 임시로 구현된 기능
when의 조건을 바꿔야 한다- 현재는
cpp파일에 대해서만 해당 menu가 나타난다
- explorer에서 context menu 추가하기
"contributes": {
"commands": [
{
"command": "uniDevice.connection",
"title": "uniDevice: Connection"
},
{
"command": "uniDevice.motion",
"title": "uniDevice: Motion"
}
],
"menus": {
"explorer/context": [
{
"when": "resourceLangId == cpp",
"command": "uniDevice.connection",
"group": "uniGroup@1"
},
{
"when": "resourceLangId == cpp",
"command": "uniDevice.motion",
"group": "uniGroup@2"
}
]
}- 04.27
- view container 생성
- Emotion Device 전용 view container
- Emotion Device 전용 view container
- 기존 view view container 내부로 옮김
- view action을 활용하여 webview 생성
- tree item 클릭으로 webview 불러오기 실패
- view item의 메뉴를 통해 구현 시도
- view container 생성
- 04.28
- view 재설계
- EMotionDevice - UNI Device - UNI 1
- EMotionDevice - SNET Device - UNI 2
- view item의 inline 메뉴로 webview 접근
- 소제목, textbox, 버튼 추가
- 보간 문자열을 사용하여 typescript 함수의 인자를 html에 넘김
- 페이지별로 ip 자동 할당
- Motion UI 업데이트
- 기존 UNI UI와 유사한 형태로 테이블 구성
- 버튼은 라디오 버튼으로 임시 대체
- view 재설계
- 04.29
- Motion UI에 Tab Menu 추가
- Tab 내부에 Table 넣기
- Table content 채우기
- 05.02
- view와 logic 분리
ConnectionPanel클래스- view와 관련된 render, dispose, webview content 정의
- html, css, js 파일을 각각 분리하여 관리할 수 있어 깔끔한 코드 유지 가능
- vscode webview ui toolkit >> 기존 button 활용
- 디자인 상의 문제로 toolkit 활용X
- 여백 문제
- view와 logic 분리
There's Only One Thing To Do: Learn All We Can