DOJO 검색하다 지쳐서 내가 만든 블로그

도조 튜토리얼 번역을 해보면 스크립트는 바디의 끝에 위치해야한다.We have also placed the block in the body of the HTML document. We could place it in the header and things would have worked the same, but when you end up in a situation where your application loads a lot of code, having the blocks in the header can keep the page from rendering while they are being loaded. This adds to the user perception of the application "b..

Simple layout Code center(center) Header content (top) Sidebar content (left) bottombar content (bottom) Table 1 Dojo Simple layout Code 코드 설명 region으로 ContentPane의 위치를 결정할 수 있는데 region의 옵션으로 top, left, right, center, bottom이 있다. right와 left만 설정하면 페이지의 중간이 비는 현상이 발생한다. 결과 화면 Figure 1 Table1 결과 화면

Dojo Datagrid Row event Code Table 3 Datagrid Row event Code 코드 설명 grid.on("Rowclick", function(evt){}); 에서 Rowclick의 옵션을 변경이 가능하다 변경가능 목록은 Table 4와 같다. function(evt)안에 document.getelementbyid나 Dom.byId로 rowdata값을 textbox나 combo box안에 넣는 것도 가능하다. Row HeaderCell Cell RowClick HeaderCellClick CellClick RowContextMenu HeaderCellContextMenu CellContextMenu RowDblClick HeaderCellDblClick CellDblClick..

1.1 Dojo Formatter & Cell Style Example Code Table 2 Formatter & Cell Style Example Code1.2 Code 설명Formatter 함수는 보통 데이터를 가공해야 할 때 쓰인다. 여기서는 각각의 셀에 대하여 if문을 줘서 색깔을 주는데에도 쓰였다. Formatter는 3개의 argument를 호출할 수 있는데 cell에 대한 데이터 값, cell의 row Index, 그리고 cell에 대한 object 그 자체이다.column 1의 경우 받은 data에서 뒤에 문자열 status를 붙이고 출력하도록 설정하였고, column2는 background와 font-weight를 설정하면서 data값이 5이상일 때 다른 style이 들어가도록 설정하였..

1.1 Dojo Simple Datagrid code Table 1 Dojo Simple Datagrid code 1.2 Code 설명우선 Grid에 대한 테마를 따로 호출해야 함을 볼 수 있다. 요구된 모듈들은 DataGrid, ItemFileWriteStore 두 가지이다. DataGrid는 표를 만들어주기 위해, ItemFileWriteStore는 JSON 형태로 데이터를 저장하는 모듈인데 데이터를 저장하기 위해 요구되었다. data 배열 변수는 JSON 형태로 값을 초기화 시키며 data_list들을 items.push 함수로 데이터를 입력하고 있다. 다음으로 var store에 dojo/store uniform interface 형태로 저장하고 있는 모습이다. data : data 에서 오른쪽의..

Pie & Animation Chart Example Code Table 6 Pie & Animation Chart Code Code 설명 theme를 load해야 하는데 나중에 tooltip으로 나오는 메세지가 theme랑 연관되어 있기 때문이다. plot2d/Pie는 Pie chart를, action2d/Highlight는 그래프를 선택했을 때 색 변화를 주기 위해서, action2d/MoveSlice는 그래프를 선택했을 때 선택한 부분이 움직이기 위해서, action2d/Tooltip은 그래프를 선택했을 때 부가 설명을 보여주기 위해서, widget/Legend는 그래프에 나오는 항목을 표기하기 위해서 호출하였다. labelOffset은 Pie Chart의 각 Slice 부분에 있는 각 label들..

ClusteredColumns & Animation Chart Code Example

Dojo Column Chart & Chart Theme Setting Example Code Table 4 Column Chart & Chart Theme Setting Code Code 설명 require문에서는 Column Chart를 그리기 위해 plot2d/Columns를 불렀고 theme를 설정하기 위해 themes/PlotKit/blue 호출하였다. addPlot()함수에 type을 Columns로 주었고, gap은 Bar와 Bar사이의 간격인데 2로 설정하였다. 마지막으로 setTheme()함수로 PlotKitBlue Theme를 적용하였다. 결과 화면 Figure 3 Table 4 결과 화면

Area Chart & 두 개의 그래프 그리기 Code Table 3 Area & 두 개의 그래프 Code Code 설명 하나의 Chart안에 서로 다른 두 개의 그래프를 그린 코드이다. 우선 Area를 그리기 위해 plot2d/Areas를 호출하였다. Line에는 value를 표시하는 marker를 주었고 tension을 3으로 설정하여 부드럽게 표현하였다. 그리고 addSeries()에서 Series 2의 경우에는 plot를 someOtherPlot으로 설정하여 Area module을 불러오고 선 색와 Area의 색은 blue로 통일하였다. 결과 화면 Figure 2 Table 3 결과 화면

Dojo Line Chart Example Code Table 1 Dojo Line Chart Code Code 설명 우선 Chart를 그리기 위해 Chart module과 Chart type중 Line을 쓰기 위해 Line chart, 그리고 Chart에 쓰일 축을 위해 axis2d를 불러온다. chart 생성을 하기 위해 해당 div id값을 넣어준다. addPlot으로 Chart를 default 값, Chart type을 Line으로 설정한다. 그리고 Chart에 대한 x, y축을 추가하고, 그릴려고 하는 데이터 값을 addseries로 나타낸 뒤 render 함수로 뿌려준다. Dojo chart Instruction 우선 Chart를 생성하기 위해 var chart = new Chart("test..