• 검색

웹 호스팅 Wijmo Designer 외에도 Angular 개발을 대상으로하는 Visual Studio Code의 새로운 확장 기능을 출시했습니다. HTML 파일 내에서 Wijmo 컨트롤을 나타내는 각 태그 위에 CodeLens 링크를 삽입합니다. 링크를 클릭하면 Wijmo Designer가 별도의 탭에서 열리고 관련 마크업을 기반으로 초기화됩니다. 디자이너를 변경한 후 한 번의 클릭으로 수정된 Angular 태그로 원본 HTML 파일을 업데이트 할 수 있습니다.

Wijmo Designer 확장은 또한 별도의 탭에서 디자인 화면을 여는 독립 실행형 명령을 제공합니다. 여기서 샘플 데이터로 컨트롤을 인스턴스화하고 속성을 사용자 정의하며 소스 파일로 복사할 수 있는 Angualr 태그를 생성 할 수 있습니다.

Wijmo Designer 확장 설치

Wijmo Designer 확장기능은 Visual Studio Marketplace에 게시되었습니다 . 설치하는 가장 쉬운 방법은 VS 코드를 열고 확장(Extension) 창으로 이동하는 것 입니다. 검색 창에 wijmo 를 입력 한 다음 설치 단추를 클릭 하여 확장 다운로드를 시작하십시오.

설치가 완료되면 다시로드(Reload ) 버튼을 클릭하십시오 .

기존 컨트롤 마크 업 수정

Wijmo Designer 확장기능은 VS Code에서 HTML 파일을 열 때마다 활성화됩니다. 자 이제 HeaderFilters라는 Wijmo 샘플중의 하나를 열어보겠습니다. Wijmo를 다운로드 하시면, Samples\TS\Angular2\HeaderFilters\HeaderFilters폴더 에서이 프로젝트를 찾을 수 있습니다 . VS Code에서 해당 폴더를 오픈한 다음, FlexGrid 마크업이 포함된 src\app.htm 파일을 엽니다 . 

<wj-flex-grid>태그 위에 나타나는 회색 Wijmo Designer… 링크를 확인하십시오. VS Code에서는이를 CodeLens 라고하며 Microsoft는 "소스 코드와 함께 산재되어 표시되는 실행 가능한 상황 정보"로 정의합니다. 이제 디자인 작업은 별도의 탭에서 디자인 화면을 열고 진행해봅시다. 링크를 클릭하여 인접한 탭에서 디자이너를 엽니다.

디자인 화면의 FlexGrid 컨트롤은 디자인 모드(Design Mode) 로 표시 되므로 직접 스크롤하거나 크기를 조정하거나 상호 작용할 수 없습니다. 대신 디자이너 오른쪽에 있는 속성(Properties) 창 을 사용 하여 컨트롤의 개체 모델을 조작할 수 있으며, 변경 사항은 선택한 컨트롤에 즉시 적용됩니다.

예를 들어 allowResizing 속성 의 값을 Columns 에서 None으로 변경하면 런타임 동작 설정이므로 그리드 렌더링에 시각적 차이가 없습니다. 그러나 디자이너 왼쪽 의 소스보기(Source View) 버튼 을 클릭하면 확장 프로그램이 변경 사항을 인식하고 있음을 알 수 있습니다.

디자인 화면으로 돌아가려면 Wijmo 로고 아래의 디자인보기(Design View) 버튼을 클릭하십시오 .

그리드 열과 같은 컬렉션이있는 컨트롤의 경우, 디자이너를 통해 개별 멤버를 추가, 삭제 및 수정할 수 있습니다. 속성(Properties) 창 에서 열(Columns) 속성을 찾은 다음 속성 편집기의 오른쪽에있는 항목 표시(Show Items)버튼을 클릭 하여 Angular 마크업에 정의된 8개의 열을 확인할 수 있습니다.

author(저자) 라는 단어 위로 마우스를 가져간 다음, 나타나는 링크를 클릭하십시오. 편집을 위해 해당 열 정의가 열립니다. visible 속성을 찾아 False 로 변경합니다. 이제 그리드가 다시 그려져 author(작성자) 열이 숨겨져 있음을 볼 수 있습니다.

FlexGrid 설정으로 돌아가려면 속성(Properties) 창의 뒤로 버튼을 클릭하십시오 .

디자이너에서 변경한 내용에 만족하면, Wijmo 로고 아래의 저장(Save) 버튼을 클릭하여, 원본 소스 파일의 편집기를 업데이트합니다. 수정된 Angular 태그가 강조 표시되고 디자이너의 변경 내용이 마크업에 반영됩니다. 이 시점에서 변경 사항을 직접 입력한 것 처럼 저장하거나 삭제할 수 있습니다.

수정된 태그의 들여쓰기 스타일은 기본 제공 VS 코드의   html.format.wrapAttributes 설정에 의해 제어되기 때문에 원본과 일치하지 않을 수 있습니다. 최상의 결과를 얻으려면 위에 묘사된 force-aligned과 같이 auto 이외의 값으로 설정합니다.

저장 한 후에도 Wijmo Designer 탭이 여전히 존재하며, 포커스를 주면 이전 상태가 유지됩니다. 그러나 확장기능은 호출된 Angular 태그의 문서 범위를 기억한다는 점에 유의해야합니다. 나중에 원본 소스 파일을 수정하는 경우 CodeLens 링크를 다시 방문하여 관련, 디자이너 탭을 새로고쳐야합니다. 그렇지 않으면 디자이너 탭으로 전환하고 저장을 클릭 하면 잘못된 위치에서 업데이트가 발생할 수 있습니다.

새로운 컨트롤 마크 업 생성

새 Wijmo 컨트롤에 대한 Angular 마크업을 만들려면 F1을 눌러 명령 팔레트를 연 다음, Wijmo Designer 명령을 실행하여 독립형 버전의 디자인 화면을 엽니다. 디자이너의 왼쪽 상단에있는 Wijmo 로고를 클릭하여 메뉴를 엽니다.

툴박스(Toolbox)를 열면, 이름으로 그룹화 되어 있는 Wijmo 컨트롤들을 볼 수 있습니다. (그리드 , 차트 , 입력 , 게이지 , 탐색(Nav) , OLAP ). 

추세선을 사용하여 차트 컨트롤을 만들어 봅시다. 도구 상자(Toolbox) 에서 차트(Chart) 그룹을 확장하고, FlexChart 라는 항목을 클릭합니다. 차트에는 "가장 활발한(most active)" 유가 증권을 나타내는 실시간 샘플 데이터가 표시됩니다. 

속성(Properties) 창에는, 차트에 복잡한 개체를 나타내는 axisX , axisY , dataLabel , 그리고 legend 네 가지 속성이 있습니다. 

axisY  형식(Format) 속성을 문자열 c0 으로 설정하여, 소수점 이하 자릿수가 0인 통화 값을 설정합니다.

속성(Properties) 창에서 뒤로 버튼을 클릭하여 FlexChart 설정으로 돌아갑니다 . 그런 다음 범례(Legend) 속성 수정을 위해,  톱니 바퀴 아이콘을 클릭하고, 위치(Position) 설정을 Bottom으로 변경하십시오 .

뒤로 버튼을 클릭 하여 FlexChart 설정으로 돌아갑니다 . header 속성에서 차트에 제목을  Most Active로 지정하십시오 . 팔레트(Palette) 속성에서, 색상 보기(Show Colors) 버튼을 클릭합니다. 미리 정의 된 값 중 하나인 Dark 를 선택합니다.  

차트는 다음과 같습니다.

Wijmo Designer는 차트 계열(series)와 같은 컬렉션을 조작할 때 특히 유용합니다. 예를 들어 새로운 계열 요소를 추가하여 차트에 추세선을 쉽게 추가할 수 있습니다. 그렇게하기 전에 디자이너가 생성한 기본 시리즈 컬렉션을 살펴 보겠습니다. 속성(Properties) 창에서 아래로 스크롤 하여, 계열(Series) 속성을 찾은 다음 항목 표시(Show Items) 버튼을 클릭하여 확장합니다. 

항목 추가(Add Item) 링크를 클릭하여 콜렉션 끝에 새 차트 계열을 추가하십시오. 새로 추가 된 항목의 오른쪽 가장자리에 있는 아래쪽 화살표를 클릭 한 다음, 사용 가능한 시리즈 유형 목록 에서 TrendLine 을 선택하십시오 .

새로 추가 된 아이템은 이제 [Trend Line] 으로 나타납니다 . 괄호 안의 텍스트 위로 마우스를 가져간 다음, 나타나는 링크를 클릭하십시오. 이제 속성 창에는 TrendLine 클래스와 관련된 속성이 표시됩니다 . 

latestPrice 바인딩의 fitType에 Logarithmic를 Visibility에는 Plot을 설정합니다. 이 계열(Series)은 범례에서 생략되므로 name 속성에 값을 설정할 필요가 없습니다. 

트렌드 선이 차트에 추가되면 디자이너는 이제 다음과 같이 보입니다.

독립형 모드에서는 업데이트할 소스 파일이 없지만 Angular 태그를 생성하여 디자이너에서 HTML 소스로 복사할 수 있습니다. 디자이너 왼쪽에서 소스보기(Source View) 아이콘을 클릭하여 생성 된 Angular 태그를 표시하십시오. 여기에서 복사 할 텍스트를 강조 표시하고 바로 가기 키 (Windows에서는 Ctrl + C)를 사용하여 텍스트를 클립 보드에 복사하십시오. VS Code 의 편집 메뉴 에서 복사 명령 은 디자이너에서 작동하지 않습니다.

<wj-flex-chart #flexchart1
 [bindingX]="'symbol'"
 [header]="'Most Active'"
 [palette]="['#005fad', '#f06400', '#009330', '#e400b1', '#b65800', '#6a279c', '#d5a211', '#dc0127', '#000000']">
 <wj-flex-chart-axis [wjProperty]="'axisY'" [format]="'c0'"></wj-flex-chart-axis>
 <wj-flex-chart-legend [wjProperty]="'legend'" [position]="'Bottom'"></wj-flex-chart-legend>
 <wj-flex-chart-series [name]="'Latest Price'" [binding]="'latestPrice'"></wj-flex-chart-series>
 <wj-flex-chart-series [name]="'52-Week High'" [binding]="'week52High'"></wj-flex-chart-series>
 <wj-flex-chart-series [name]="'52-Week Low'" [binding]="'week52Low'"></wj-flex-chart-series>
 <wj-flex-chart-trend-line [binding]="'latestPrice'" [fitType]="'Logarithmic'" [visibility]="'Plot'"></wj-flex-chart-trend-line>
</wj-flex-chart>

이 예에서 생성된 마크업에는 Y 축, 차트 범례, 3개의 데이터 계열 및 추세선을 나타내는 하위 요소가 포함됩니다. 비주얼 디자이너로 돌아가려면 Wijmo 로고 아래의 디자인보기(Design View) 단추를 클릭하십시오 .

디자이너 버전의 차이점

다음 표는 웹 호스트 Wijmo Designer, HTML 소스 파일의 CodeLens 링크에서 호출될 때 VS Code 확장기능, 그리고 독립형 명령에서 호출 될 때 VS 코드 확장기능의 차이점을 요약합니다 .

확장기능의 독립형 명령은 VS Code를 닫았다가 다시 열더라도 현재 작업 공간 컨텍스트 내에서 비주얼 디자이너의 상태를 기억합니다. 확장기능은 원래 컨트롤 태그 만 수정할 수 있기 때문에, 이벤트(Event) 창을 제공하지 않습니다. 그러나 확장기능이 원본 파일을 업데이트할 때 원래 컨트롤 태그에 정의된 기존 이벤트 처리기 함수는 그데로 유지됩니다

한계

디자이너의 초기 버전에서는 다음 Wijmo 컨트롤이 지원되지 않습니다.

• Menu
  
• Popup
  
• TabPanel
• MultiRow
  
• PdfViewer
• ReportViewer

Angular 프로젝트에서는 컨트롤 속성이 리터럴 값 대신 런타임 데이터 멤버에 바인딩되는 것이 일반적입니다. 이러한 경우 디자이너는 이탤릭체로 된 읽기 전용 텍스트 상자에 바인딩을 표시합니다. 저장 작업 중에는 바인딩이 유지됩니다. 그러나 디자이너에서 작성하거나 편집하기위한 인터페이스는 없습니다.

Angular 마크업과 관련된 현재 제한 목록은 Visual Studio Marketplace 의 확장 프로그램 페이지를 참조하십시오 .

결론

VS Code 용 Wijmo Designer 확장기능은 Wijmo 컨트롤을 나타내는 마크업 태그를 편집하기위한 WYSIWYG 디자인 화면을 제공하여 Angular 개발을 지원합니다. 또한 컨트롤 속성, 자식 개체 및 컬렉션을 실험할 수있는 독립형 모드를 제공하여 새로운 Wijmo 태그 태그 생성을 지원합니다.