Wijmo 디자이너(Designer) 사용 방법

추천0

페이지 정보

작성자 GrapeCity

작성일 2018-07-18 11:02 조회 4,127회 댓글 0건

본문

Wijmo Designer 시작하기

페이지가 처음 열리면 디자인 화면에 위와 같이 라이브 샘플 데이터가 포함된 단일 FlexGrid 컨트롤이 포함됩니다. 제거하려면 편집(Edit) 도구모음 에서 삭제(Delete) 단추를 클릭하십시오 .

디자이너의 기본 메뉴는 접혀 있는 상태로 아이콘만 보여지는 세로 줄로 표시됩니다. 페이지 왼쪽 상단의 Wijmo 로고를 클릭하여 메뉴를 확장하십시오.

Wijmo Toolbox

툴박스(Toolbox)를 열면, 이름으로 그룹화 되어 있는 Wijmo 컨트롤들을 볼 수 있습니다. (그리드 , 차트 , 입력 , 게이지 , 탐색(Nav) , OLAP ). 입력(Input) 그룹에서 캘리더(Calendar) 컨트롤을 추가고 이름을 "CALENDAR1" 이라고 설정합니다.

디자인 화면은 다음과 같습니다.

위즈 모 디자이너

기본 메뉴를 접으려면 Wijmo 로고를 다시 클릭하거나 디자인 화면 내부 ( 편집(Edit) 도구 모음 아래 영역), 아무 곳이나 클릭하십시오 .

디자인 화면의 컨트롤은 "디자인 모드" 로 표시됩니다. 즉, 스크롤, 크기 조정 또는 직접 상호 작용을 할 수는 없습니다. 대신, 페이지 오른쪽 의 속성(Poperties) 창 을 사용 하여 컨트롤의 개체 모델을 조작하십시오. 사용 가능한 각 속성(Properties)에는 편집기를 통해, 변경 사항은 선택한 컨트롤에 즉시 적용됩니다.

monthView의 속성에 "False", 그리고 formatMonths의 속성에는 "MMMM"을 설정합니다.

이제 달력 컨트롤에 현재 연도의 전체 달(Month)가 표시됩니다.

위즈 모 디자이너

속성(Properties) 탭 의 오른쪽에있는 화살표 아이콘을 클릭하면, 선택한 컨트롤에 적용가는한 각 이벤트에 대한 토글 버튼이 표시되는 이벤트(Event) 창이 표시됩니다. 각 이벤트에 대해 디자이너는 이벤트 처리 코드를 생성할 수 있습니다.

valueChanged 이벤트에 대한 제어를 켭니다 .

위즈 모 디자이너

디자인 화면은 순차적(Sequential) 레이아웃으로 여러 컨트롤을 지원합니다. 도구 상자(Toolbox)를 열고 디자인 화면에 InputDateTime 컨트롤을 추가하십시오 . 편집(Edit) 도구 모음에서 위로 이동(Move Up) 버튼을 클릭하여 두 컨트롤의 위치를 바꿉니다. 디자이너를 사용하여 다른 Wijmo 테마를 선택할 수도 있습니다.

테마를 클릭하고, 다양한 테마 목록 중에서, 다음과 같은 Cerulean 테마를 선택합니다.

위즈 모 디자이너

코드 생성

비주얼 디자이너를 통해 컨트롤 디자인이 완료되면, 대행 디자인에 대해서, 응용 프로그램에 적용할 수 있는 코드를 생성 할 수 있습니다. 소스보기(Source View)를 클릭 하여 생성된 HTML을 확인하십시오.

웹 호스팅 디자이너의 초기 버전은 순수한 JavaScript를 생성하며, jQuery 또는 Angular와 같은 특정 프레임 워크와 관련이 없습니다.

Wijmo Web Designer에서 코드 생성

왼쪽 의 저장(Save) 아이콘을 사용하여 HTML을 파일에 쓰거나, 원하는 영역을 선택하고 클립보드에 복사하십시오. 생성 된 코드에는 다음 요소가 포함됩니다.

<head>기본 Wijmo CSS 파일 및 선택한 테마 파일 (있는 경우)을 참조 하는 태그입니다.
디자이너가 지원하는 모든 컨트롤 조합에 대한 Wijmo <script>태그, 필요하지 않은 모듈 참조는 생략 할 수 있습니다.
<body>는 디자이너에서 만든 각 컨트롤에 대한 비어있는 <div>태그를 포합합니다. .
인라인 <script> 블락은 디자이너에서 생성된 각 컨트롤을 인스턴스화하고 모든 사용자 정의 속성(Property)/이벤트(Event) 설정을 적용하니다. 이 예에서는 스크립트는 다음 코드를 포함합니다.

// var key = "your-license-key";
// wijmo.setLicenseKey(key);
var inputdatetime1 = new wijmo.input.InputDateTime("#inputdatetime1");
var calendar1 = new wijmo.input.Calendar("#calendar1", {
    formatMonths: "MMMM",
    monthView: false
});
calendar1.valueChanged.addHandler(function (s, e) {
});

처음 두 줄은 주석 처리됩니다. 이 코드를 Public 서버에 배포하려는 경우, 여기에 응용 프로그램의 Wijmo 배포 라이센스 키를 삽입합니다. 두 개의 할당문은 빈 <div> 태그에서 적절한 Wijmo 생성자를 호출합니다 .

Calendar 생성자에 대한 호출은 formatMonths 및 monthView 속성에 대한 수정된 값이 포함된 인수를 지정합니다. 그러나 속성을 변겨하지 않은 InputDateTime 생성자는 인수가 없습니다. 마지막 행은 달력의 valueChanged 이벤트에 대한 상용구 처리기를 추가합니다 .

비주얼 디자이너로 돌아가려면 페이지 왼쪽 의 디자인 보기(Design View) 버튼 ( 저장 버튼 아래 )을 클릭하십시오.

재사용을 위해 디자이너 레이아웃을 저장하려면, 기본 도구모음의 저장(Save) 단추를 사용하여, JSON 파일형태로 저장하니다. 이후에 기본 도구모음의 열기(Open) 단추를 사용하여 컨텐츠를 다시 로드할 수 있습니다.

디자이너는 소스 뷰(Source view) 화면에서 저장된 HTML은 재사용을 위해 디자이너에서 불러올 수 없습니다. 오직 JSON 형대로 저장된 디자인 파일만 다시 불러올 수 있습니다.

차트 작업

이제 더 복잡한 예를 생각해 봅시다. 디자인 화면에서 모든 컨트롤을 삭제한 다음 도구 상자(Toolbox) 에서 차트(Chart) 그룹을 확장하고, FlexChart 라는 항목을 클릭합니다.

차트에는 "가장 활발한(most active)" 유가 증권을 나타내는 실시간 샘플 데이터가 표시됩니다. 디자이너를 처음 열 때 기본 FlexGrid에 표시되는 것과 동일한 데이터 세트이며 처음 6 개 행으로 제한됩니다.

위즈 모 디자이너

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

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

위즈 모 디자이너

Y 축(Y-axis)에 표시된 통화 기호를 참고하십시오. 속성(Properties) 창에서 뒤로 버튼을 클릭하여 FlexChart 설정으로 돌아갑니다 .

그런 다음 범례(Legend) 속성 수정을 위해, 톱니 바퀴 아이콘을 클릭하고, 위치(Position) 설정을 Bottom으로 변경하십시오 .

위즈 모 디자이너

뒤로 버튼을 클릭 하여 FlexChart 설정으로 돌아갑니다 . header 속성에서 차트에 제목을 Most Active로 지정하십시오 .

팔레트(Palette) 속성에서, 색상 보기(Show Colors) 버튼을 클릭합니다. 미리 정의 된 값 중 하나인 Dark 를 선택합니다.

위즈 모 디자이너

Wijmo Designer는 차트 계열(series)와 같은 컬렉션을 조작할 때 특히 유용합니다. 예를 들어 새로운 계열 요소를 추가하여 차트에 추세선을 쉽게 추가할 수 있습니다. 그렇게하기 전에 디자이너가 생성한 기본 시리즈 컬렉션을 살펴 보겠습니다.

속성(Properties) 창에서 아래로 스크롤 하여, 계열(Series) 속성을 찾은 다음 항목 표시(Show Items) 버튼을 클릭하여 확장합니다.

위즈 모 디자이너

Latest Price라는 단어 위로 마우스를 가져간 다음 나타나는 링크를 클릭하십시오. 데이터 소스의 실제 필드 이름에 해당 하는 바인딩 값인 latestPrice를 볼 수 있습니다.

위즈 모 디자이너

뒤로 버튼을 클릭하여 FlexChart 설정 으로 돌아가서 이전과 같이 범례(Legend) 속성 을 확장합니다 . 이제 항목 추가(Add Item) 링크를 클릭하여 콜렉션 끝에 새 차트 계열을 추가하십시오. 새로 추가 된 항목의 오른쪽 가장자리에 있는 아래쪽 화살표를 클릭 한 다음, 사용 가능한 시리즈 유형 목록 에서 TrendLine 을 선택하십시오 .

위즈 모 디자이너

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

latestPrice 바인딩의 fitType에 Logarithmic를 Visibility에는 Plot을 설정합니다. 이 계열(Series)은 범례에서 생략되므로 name 속성에 값을 설정할 필요가 없습니다. 트렌드 선이 차트에 추가되면 디자이너는 이제 다음과 같이 보입니다.

위즈 모 디자이너

소스 뷰에서 생성된 코드는 FlexChart 생성자에 대한 호출로 시작합니다 .

var flexchart1 = new wijmo.chart.FlexChart("#flexchart1", {
    axisY: {
        format: "c0"
    },
    bindingX: "symbol",
    header: "Most Active",
    legend: {
        position: "Bottom"
    },
    palette: ["#005fad", "#f06400", "#009330", "#e400b1", "#b65800", "#6a279c", "#d5a211", "#dc0127", "#000000"]
});

개별 차트 계열은 디자이너에서 지정한 순서대로 계열 컬렉션 속성으로 푸시됩니다. 마지막에 추가되는 추세선 은 기본 Series 생성자 대신, 특수한 TrendLine 생성자를 사용합니다 .

flexchart1.series.push(new wijmo.chart.Series({
    name: "Latest Price",
    binding: "latestPrice"
}));
flexchart1.series.push(new wijmo.chart.Series({
    name: "52-Week High",
    binding: "week52High"
}));
flexchart1.series.push(new wijmo.chart.Series({
    name: "52-Week Low",
    binding: "week52Low"
}));
flexchart1.series.push(new wijmo.chart.analytics.TrendLine({
    binding: "latestPrice",
    fitType: "Logarithmic",
    visibility: "Plot"
}));

기본 계열 이름과 바인딩이 제공되므로 응용 프로그램에서 실제 데이터와 함께 배포할 때 실제 차트의 모양을 알 수 있습니다.