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, 0 insertions, 128 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 deleted file mode 100644 index 81613a499d..0000000000 --- a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -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" } ) }} |