diff options
Diffstat (limited to 'files/ko/orphaned/windows_and_menus_in_xulrunner/index.html')
-rw-r--r-- | files/ko/orphaned/windows_and_menus_in_xulrunner/index.html | 128 |
1 files changed, 128 insertions, 0 deletions
diff --git a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html new file mode 100644 index 0000000000..81613a499d --- /dev/null +++ b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html @@ -0,0 +1,128 @@ +--- +title: Windows and menus in XULRunner +slug: orphaned/Windows_and_menus_in_XULRunner +tags: + - XUL + - XULRunner +original_slug: Windows_and_menus_in_XULRunner +--- +<p> +{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} +</p><p><a href="ko/XULRunner">XULRunner</a>을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 알아보겠습니다. <a href="ko/Getting_started_with_XULRunner">앞 장</a>에서 우리는 XULRunner를 설치하고 기본적인 테스트 프로그램을 만들어 보았습니다. 이번에는 사용자 인터페이스를 갖는 프로그램을 만들어 보겠습니다. +</p> +<ul><li> 윈도우와 대화창 +</li><li> 메뉴와 툴바 +</li><li> 운영체제 기본 대화창 +</li><li> 콘트롤 및 위젯 +</li></ul> +<h2 id=".EC.9C.88.EB.8F.84.EC.9A.B0">윈도우</h2> +<p>각 윈도우나 대화창은 각 XUL 파일로 만듭니다. XUL 파일 상위에는 우리가 사용할 CSS와 DTD를 선언하게 됩니다. <code><span><window></span></code>는 기본 창을 만드는 요소 입니다. 콘트롤에 대한 제목과 캡션, 창의 가로 및 세로폭을 정하는 속성을 가지고 있습니다. 아마 대부분은 아시겠지만 XUL 파일 하나 당 하나의 <code><span><window></span></code> 요소를 가집니다. 예를 들어, +</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> + +<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd"> + +<window id="main" + title="&title;" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <script src="main.js"/> +... +</window> +</pre> +<p>이제 CSS와 DTD에 대해 알아보겠습니다. CSS는 HTML에서 사용하는 방법과 같이 각 요소에 대한 디자인 및 형식을 지정해 줍니다. DTD는 XUL파일에서 언어별 지역화를 위해 바로 저장할 수 없는 제목이나 라벨 같은 문자열을 참조하는 방식으로 사용합니다. 메시지를 변경하거나 지역화 작업에 용이 합니다. 예제에서 창 title을 표시하는 방법을 참고하세요. 또한, <code><span><script></span></code> 요소를 이용하여 XUL 파일내의 동작을 제어해 줍니다. CSS, DTD, 자바스크립트를 XUL 파일에 기본적으로 삽입하는 것은 가장 기본적인 코드입니다. +</p><p>XUL 애플리케이션을 실행하려면 XULRunner가 윈도우 기본 아이콘을 제공 합니다만 원하는 아이콘으로 바꾸려면 <a href="ko/Window_icons">윈도우 아이콘</a>을 참고해서 바꿀 수 있습니다. +</p> +<h2 id=".EB.A9.94.EB.89.B4.EC.99.80_.ED.88.B4.EB.B0.94">메뉴와 툴바</h2> +<p>대부분 데스크톱 애플리케이션은 자체 폼 도구를 가지고 있어서 메뉴나 툴바 구조를 추가하고 변경하는 데 매우 어렵습니다. 하지만 XUL에서는 쉽게 요소만 추가하면 만들어 낼 수 있습니다. +</p><p>아래는 XUL 메뉴와 툴바를 만드는 아주 간단한 예제 코드입니다. +</p> +<pre><?xml version="1.0"?> +<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> + +<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd"> + +<window id="main" + title="&title;" + xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> + <script src="main.js"/> + <toolbox> + <menubar id="menubar"> + <menu id="file-menu" label="&file;"> + <menupopup id="file-popup"> + <menuitem label="&file.new'" oncommand="doFileNew();"/> + <menuitem label="&file.open;" oncommand="doFileOpen();"/> + <menuitem label="&file.save;" oncommand="doFileSave();"/> + <menuseparator/> + <menuitem label="&file.exit;" oncommand="doFileExit();"/> + </menupopup> + </menu> + <menu id="edit-menu" label="&edit;"> + <menupopup id="edit-popup"> + <menuitem label="&edit.undo;" oncommand="doEditUndo();"/> + <menuitem label="&edit.redo;" oncommand="doEditRedo();"/> + </menupopup> + </menu> + </menubar> + <toolbar id="main-toolbar"> + <toolbarbutton id="open" label="&file.open;" oncommand="doFileOpen();"/> + <toolbarbutton id="save" label="&file.save;" oncommand="doFileSave();"/> + </toolbar> + </toolbox> +... +</window> +</pre> +<p>각 메뉴와 툴바의 라벨을 표시하기 위해 엔티티-참조를 사용했고, <code>oncommand</code> 이벤트는 HTML에서 <code>onclick</code>를 쓰는 것 처럼 자바 스크립트를 참조합니다. XUL에서는 <var>open</var>나 <var>save</var> 같은 메뉴와 툴바의 이벤트 핸들러와 명령 수행을 위한 방식을 가지고 있습니다. +</p> +<pre><commandset> + <command id="cmd_open" label="&file.open;" oncommand="doFileOpen();"/> + <command id="cmd_save" label="&file.save;" oncommand="doFileSave();"/> +</commandset> +... +<menuitem command="cmd_open"/> +<menuitem command="cmd_save"/> +... +<toolbarbutton id="open" command="cmd_open"/> +<toolbarbutton id="save" command="cmd_save"/> +... +</pre> +<p>또한, CSS 파일로 툴바 버튼에 그림을 추가할 수 있습니다. XUL 파일내에 아이콘 파일이 있으면 CSS로 다음과 같이 표시할 수 있습니다. +</p><p><br> +</p> +<pre>/* global skin --------------------------------------------------- */ +@import url(chrome://global/skin/); + +/* toolbar ------------------------------------------------------- */ +#open { + list-style-image: url(chrome://basicapp/skin/open.png); + -moz-box-orient: vertical; +} + +#save { + list-style-image: url(chrome://basicapp/skin/save.png); + -moz-box-orient: vertical; +} +</pre> +<p>물론 PNG 파일을 애플리케이션에 포함해서 배포해야 합니다. +</p><p>지금까지 아주 간단한 XUL 사용자 인터페이스를 살펴 보았습니다. 다음 장에서는 XUL Runner에서 UI를 생성하는 과정을 계속 살펴 보겠습니다. +</p> +<h2 id=".EC.B0.B8.EA.B3.A0_.EB.AC.B8.EC.84.9C">참고 문서</h2> +<ul><li> <a class="external" href="http://wiki.mozilla.org/XUL:Windows">XUL:Windows</a> +</li><li> <a href="ko/XUL_Tutorial/Creating_a_Window">XUL Tutorial:Creating a Window</a> +</li><li> <a href="ko/XUL/commandset">XUL:commandset</a> +</li><li> <a href="ko/XUL/command">XUL:command</a> +</li><li> <a href="ko/XUL_Tutorial/Commands">XUL Tutorial:Commands</a> +</li><li> <a href="ko/XUL_Tutorial/Simple_Menu_Bars">XUL Tutorial:Simple Menu Bars</a> +</li><li> <a href="ko/XUL_Tutorial/Toolbars">XUL Tutorial:Toolbars</a> +</li></ul> +<p>{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} +</p> +<div class="originaldocinfo"> +<h2 id=".EC.9B.90.EB.B3.B8_.EB.AC.B8.EC.84.9C"> 원본 문서 </h2> +<ul><li> 저자: Mark Finkle +</li><li> 최종 수정일: October 2, 2006 +</li></ul> +</div> +<div class="noinclude"> +</div> +{{ languages( { "ja": "ja/Windows_and_menus_in_XULRunner" } ) }} |