< 이전 | 다음 >

학습 3: 웹 페이지에 사용자 정의 Dojo 위젯 추가

이 학습에서 Dojo 레이아웃 위젯을 사용하여 레이아웃된 웹 페이지에 사용자 정의 Dojo 위젯을 삽입합니다. Dojo API를 사용하여 위젯을 결과 필드에 연결하고 결과를 표시하십시오.

사용자 정의 Dojo 위젯을 작성한 후 위젯을 팔레트의 기타 Dojo 위젯 드로어에 추가하여 웹 페이지에 위젯을 추가하는 것을 용이하게 합니다.
  1. WebContent 폴더를 마우스 오른쪽 단추로 클릭하고 새로 작성 > 웹 페이지를 선택하십시오.
  2. index.html 페이지의 이름을 지정하고 완료를 클릭하십시오.
  3. 디자인 탭을 클릭하여 디자인 보기에서 페이지를 표시하십시오.
  4. 팔레트에서 Dojo 레이아웃 위젯 드로어를 열고 페이지에 BorderContainer를 놓으십시오. 경계 컨테이너 삽입 대화 상자가 BorderContainer 위젯을 사용자 정의할 수 있도록 열립니다.
    1. 맨 위가운데 선택란을 선택하십시오.
    2. 확인을 클릭하십시오.
  5. BorderContainer 위젯의 비주얼 보기가 디자인 보기에 표시됩니다. BorderContainer 시각화를 클릭한 후 특성 탭을 클릭하여 특성 보기를 여십시오.
    경계 컨테이너 특성 보기
  6. 스타일 탭을 클릭하고 특성 필드에서 경계 컨테이너에 대한 다음 값을 업데이트하십시오.
    • 500px에서 700px로 높이를 변경하십시오.
    • 600px로 높이를 변경하십시오.
  7. 영역을 두 번 클릭하여 텍스트 상자를 여십시오. 대출 납부 계산기를 입력한 후 텍스트 상자 밖을 클릭하여 변경을 적용하십시오.
    BorderContainer의 맨 위 영역
  8. 팔레트에서 기타 Dojo 위젯 드로어를 펼치십시오.
  9. LoanInput Dojo 위젯을 경계 컨테이너의 가운데 영역에 놓으십시오.
  10. 소스 탭을 클릭하여 소스 보기로 전환하십시오.
  11. LoanInput 위젯 div 태그에서 "LoanInput"으로 ID 속성을 설정하십시오.
    <div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
  12. LoanInput 위젯에 새 div 태그를 추가하여 결과를 표시하십시오. 다음 텍스트를 복사할 수 있습니다.
    <div>Monthly Payment: <span id="monthlyPayment"></span></div>
  13. 기존 Dojo 요청 후 dijit/registry에 대한 새 모듈 요청을 즉시 추가하십시오.
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput" ],
  14. 요청 콜백 기능에 레지스트리 매개변수를 추가하십시오.
    function(dojo, registry) {
    		dojo.ready(function() {
    	});
    });
  15. dojo.ready 기능 내에서 다음 단계를 수행하십시오.
    1. var loanWidget = registry.b를 입력하고 컨텐츠 지원을 호출하십시오. byId(id) 제안을 페이지에 삽입하도록 선택하십시오.
    2. byId 기능에 대한 매개변수로 "LoanInput"을 입력하십시오.
    3. LoanInput 매개변수에 대한 닫힌 소괄호 뒤에 세미콜론을 입력하십시오.
    4. registry.byId에 대한 호출 아래의 행에 dojo.c를 입력하고 컨텐츠 지원을 호출하십시오. 여기서, dojo.connect에 대한 다른 기본 템플리트를 선택할 수 있습니다. 이 템플리트의 두 개의 버전이 있습니다. dijit.registry.byId를 사용하고 이를 페이지에 삽입하는 버전을 선택하십시오.
    5. LoanInput으로 첫 번째 매개변수를 설정하고 calculate로 두 번째 매개변수를 설정하십시오.
    6. 연결 기능의 함수 매개변수 내에서 다음 코드를 추가하십시오.
      var payment = loanWidget.monthlyPayment;
      if (payment == NaN) {
      	payment = 0;
      }
      
      // update the result field
      var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    7. 필수 모듈이 문자열의 배열로 require 함수에 추가됩니다. 여기서, 각 모듈은 모듈 세그먼트의 슬래시로 구분된 문자열입니다. require 함수 내에서 "dojo/currency"를 요청 종속 항목 배열에 추가하십시오.
    8. dojo.ready 함수에 대한 최종 코드는 다음과 같이 보여야 합니다.
      		dojo.ready(function() {
      		// get the LoanInput widget
      		loanWidget = registry.byId('LoanInput');
      		
      		// handle "calculate" from widget "LoanInput"
      		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
      			var payment = loanWidget.monthlyPayment;
      			if (payment == NaN) {
      				payment = 0;
      			}
      
      			// update the result field
      			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
      			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
      		});
      	});
  16. 페이지를 저장하십시오. index.html 파일에 대한 소스는 다음과 같이 보입니다.
    <!DOCTYPE HTML>
    <html>
    <head>
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/dijit.css">
    <link rel="stylesheet" type="text/css"
    	href="dojo/dijit/themes/claro/claro.css">
    <title>t1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript"
    	data-dojo-config="isDebug: false, async: true, parseOnLoad: true"
    	src="dojo/dojo/dojo.js"></script>
    <script type="text/javascript">
    require(
    	// Set of module identifiers
    [ "dojo", "dijit/registry", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "loan/LoanInput", "dojo/currency" ],
    	// Callback function, invoked on dependencies evaluation results
    function(dojo, registry) {
    		dojo.ready(function() {
    		// get the LoanInput widget
    		loanWidget = registry.byId('LoanInput');
    		
    		// handle "calculate" from widget "LoanInput"
    		dojo.connect(dijit.registry.byId("LoanInput"), "calculate", function(event) {
    			var payment = loanWidget.monthlyPayment;
    			if (payment == NaN) {
    				payment = 0;
    			}
    
    			// update the result field
    			var formattedValue = dojo.currency.format(payment, {currency: "USD"});
    			dojo.attr("monthlyPayment", "innerHTML", formattedValue);
    		});
    	});
    });
    </script>
    </head>
    <body class="claro">
    	<div id="BorderContainer" style="height: 500px; width: 500px"
    		data-dojo-type="dijit.layout.BorderContainer"
    		data-dojo-props="design:'headline'">
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'top'">Loan Payment Calculator</div>
    		<div data-dojo-type="dijit.layout.ContentPane"
    			data-dojo-props="region:'center'">
    			<div id="LoanInput" data-dojo-type="loan.LoanInput"></div>
    			<div>Monthly Payment: <span id="monthlyPayment"></span></div>
    		</div>
    	</div>
    
    	</body>
    </html>
  17. 이제 서버에서 애플리케이션을 테스트할 시간입니다. 엔터프라이즈 탐색기 보기에서 index.html을 마우스 오른쪽 단추로 클릭하고 실행 도구 > 서버에서 실행을 선택하십시오.
  18. 웹 미리보기 서버를 선택하고 완료를 클릭하십시오. 페이지가 웹 브라우저에서 열립니다.
  19. 대출 금액을 입력하고 결과 필드가 업데이트하는지 확인하십시오.
    매월 납부

학습 체크포인트

사용자 정의 Dojo 위젯을 페이지에 추가했으며 서버에서 테스트했습니다.

학습한 내용은 다음과 같습니다.
  • 팔레트에서 웹 페이지에 사용자 정의 위젯을 추가하는 방법
  • 서버에서 Dojo 애플리케이션을 실행하는 방법
  • 작성한 Dojo 위젯을 테스트하는 방법
< 이전 | 다음 >
주제 유형을 표시하는 아이콘 학습서 학습 주제
Information Center의 이용 약관 | 피드백

시간소인 아이콘 마지막 업데이트 날짜: 2014-05-22

파일 이름: loan_lesson3.html