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

http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html

Drop box Code declarative DropDown This is a TooltipDialog. You could even put a form in here! Table 10 Drop box Code Declarative Drop box Code programmatic Table 11 Drop down Programmatic Code 코드 설명 Drop down은 버튼을 클릭했을 때에 다른 widget을 불러오는 것이 가능하다. Table 10,11 은 tooltip을 불러왔고, Calendar나 ColorPalette 등을 불러올 수 있다. 그리고 불러오는 위젯에 대해서 제한 조건을 줄 수 있다. Table 12,13은 ColorPalette에 대한 예제이다. DOCTYPE HTML> Def..

Dojo Combo Box Code declarative Combo Save Save As Table 6 Dojo Combo Box declarative Code Dojo Combo Box Code Programmtic Table 7 Dojo Combo Box Programmtic Code Code 설명 Combo box를 클릭했을 때에 나오는 메뉴의 방향을 설정할 수 있다. 방향 설정 옵션을 추가 할 수 있는데 코드는 dropDownPosition:['after'] 형식으로 추가하면 된다. after는 오른쪽 방향이고 다른 방향으로는 before는 왼쪽 방향 above는 위쪽방향이며 default는 below이다. Table8, 9는 메뉴 방향 옵션에 대한 예시 코드이다. Table 8 declarat..

Dojo toggel button Decalarative Toggle Table 4 Dojo toggel button Declarative Code Dojo toggel button programmtic Table 5 Dojo toggle button programmtic Code 코드 설명 iconClass에서 dijitCheckBox를 load하였고 label을 toggle로 설정하여 icon과 label이 동시에 보여지고 있다. 그리고 checked 는 true로 설정하여 체크 표시가 처음부터 보여지게 하였다. 체크 표시말고 다른 옵션을 줘서 다른 모양 표시도 가능하다. 결과 화면 Figure 2 Table 4,5의 결과 화면

Dojo Button declarative Click Me! Table 1 Dojo button declarative Code Dojo Button programmtic Table 2 Dojo button programmtic Code 1.3 Code 설명 iconclass를 사용하여 dojo의 기본 아이콘을 불러왔으며 dojo의 iconclass에 있는 icon list는 다음과 같다. · dijitIconSave · dijitIconPrint · dijitIconCut · dijitIconCopy · dijitIconClear · dijitIconDelete · dijitIconUndo · dijitIconEdit · dijitIconNewTask · dijitIconEditTask · dijitIc..

준비물 만들 웹페이지의 같은 경로안에 Table 4의 jsp파일은 만든다. C:\ 경로에 test.txt 파일이 만들어진다. Table 4 receive.jsp 파일 코드 Ajax data transmit code Table 5 Ajax Data Transmit code Code 설명 Data 안에 넣고 싶은 데이터를 넣으면 된다. document.getelementbyid로 값을 넣을수도 있다. 그리고 timeout으로 Delay를 줄 수도 있는데 설정시간은 2000으로 2초이다. 하지만 작동이 잘 안된다.

준비물 웹페이지를 작성할 같은 경로에 json.txt파일을 만들고 내용은 Table 2을 입력한다. { "title":"JSON Sample Data", "items":[{ "name":"text", "value":"text data" },{ "name":"integer", "value":100 },{ "name":"float", "value":5.65 },{ "name":"boolean", "value":false }] } Table 2 Json data Dojo Ajax JSON Example Code Table 3 Ajax JSON Example Code Code 설명 내의 resultDiv를 불러오기 위해 dojo/dom을 불렀고 dojo/json은 JSON 데이터의 형식을 쓰기 때문에 호출하였다..

준비물 웹페이지를 작성할 같은 경로에 helloworld.txt파일을 만들고 내용은 helloworld라고 집어넣는다. Dojo Ajax Simple Example Code Table 1 Ajax Code Code 설명 dojo/request가 Dojo Toolkit의 Ajax module이다. request("helloworld.txt")에서 같은 경로에 있는 helloworld.txt 파일을 불러오고 그 안에 있는 데이터는 function(text)안의 text 라는 변수에 저장이 된다. 만약 helloworld.txt라는 파일이 없거나 데이터를 가져올때 데이터의 형식이 어긋나면function(error)로 가서 error를 반환환다. 이 error는 다른 페이지에 요청한 뒤 받는 데이터가 요청한 형..

Dojo 의 두 가지 코딩 방법 Dojo는 위젯을 불러올 때 두 가지 스타일인 declarative와 programmatic이 존재한다. programmatic의 경우 javascript를 사용하여 object를 생성하고 해당 object에 대한 function이나 attribute를 설정한다. declarative의 경우 html 처럼 프로그램을 작성하고 뒤에 특정 attribute를 더해서 Dojo위젯을 불러온다. 자세히 말하자면 dojo/parser를 이용하여 해당 페이지의 DOM을 parsing 한 뒤 special attribute와 script의 tag를 해석하여 평범한 html code를 dojo의 widget으로 확장시킨다. declarative가 쓰기 쉽고 page를 작성하는데 있어서 더..

Dojo Dialog Simple Example Code show Table 5 Dojo Dialog Code Code 설명 require 문에서 Dojo 위젯 Dialog를 호출하여 보여주는 예제이다. require로 Dialog를 호출하였으면 function에서 parameter로 받아야하며 parameter이름은 위젯이름과 굳이 똑같이 할 필요는 없다. 다만 주의할 점은 require문에서 호출한 위젯의 순서에 따라 function의 parameter에 매칭이 되는 점은 기억해야 한다. domReady!는 parameter를 필요로 하지 않는다. 결과 화면 Figure 3 Table5 결과 화면