# 글레이드로 만든 도구 모음(Vala)

Tiffany Antopolski
tiffany.antopolski@gmail.com 2012
단추 표시줄
조성호
shcho@gnome.org 2017-2019.

# 글레이드로 만든 도구 모음

이 예제는 XML UI 파일을 사용해 도구 모음을 만들 때 글레이드를 사용할 수 있다는 점은 빼고 와 유사합니다.

글레이드 인터페이스 디자이너로 도구 모음을 만들려면:

글레이드를 열고 toolbar_builder.ui 파일로 저장하십시오

글레이드 사용자 인터페이스 스크린샷

왼편의 컨테이너에서, 도구모음 아이콘에 마우스 커서를 올려둔 후 오른쪽 단추를 누르고 최상위에 위젯 추가를 선택하십시오.

글레이드 UI 도구 모음 아이콘 스크린샷

하단 우측의 일반 탭에서 , 이름을 toolbar로 바꾸고 Show Arrow는 No로 바꾸십시오.

일반 탭 스크린샷

공통 사항 탭에서, 수평 확장을 Yes로 설정하십시오.

공통 사항 탭 스크린샷

우측 상단의 도구 모음에서 마우스 오른쪽 단추를 누른후 편집을 선택하십시오. 도구 모음 편집기 창이 뜹니다.

도구 모음을 편집할 때 오른쪽 단추를 누를 부분의 스크린샷.

새 파일, 열기, 실행 취소, 전체 화면, 전체 화면 나가기 도구 단추 5개를 추가하겠습니다. 우선 새 도구 단추를 추가하겠습니다.

계층 구조 탭에서, 추가를 누르십시오.

ToolItem 이름을 new_button으로 바꾸십시오.

스크롤을 내린 후 Is important를 Yes로 설정하십시오. 이렇게 설정하면, 도구 모음에서 도구 단추 레이블이 나타납니다.

동작 이름을 app.new로 입력하십시오.

레이블을 New로 바꾸십시오.

드롭 다운 메뉴에서 새로 만들기의 스톡 ID를 선택하거나 gtk-new를 입력하십시오.

나머지 ToolButton에 대해 위 단계를 반복하시고, 다음 속성을 설정하십시오:

Name | 중요 여부 | 동작 이름 | Label | 스톡 ID
--- | --- | --- | --- | ---
open_button | 예 | app.open | 열기 | gtk-open
undo_button | 예 | win.undo | 실행 취소 | gtk-undo
fullscreen_button | 예 | win.fullscreen | 최대 화면 | gtk-fullscreen
leave_fullscreen_button | 예 | win.fullscreen | 전체 화면 나가기 | gtk-leave-fullscreen

도구 모음 편집기를 닫으십시오.

프로그램을 처음 시작할 때, 프로그램이 전체 화면 모드가 아니기에 전체 화면 나가기 ToolButton을 나타내고 싶진 않습니다. 이 설정은 일반 탭에서 Visible을 누르고 No로 설정할 수 있습니다. ToolButton은 인터페이스 디자이너에서 여전히 나타나겠지만 프로그램 코드에 파일을 불러올 때, 상태에 따라 올바르게 나타납니다.

visible 속성을 No로 설정

작업을 저장하고 글레이드를 닫으십시오.

글레이드에서 만든 XML 파일은 아래와 같습니다. 도구 모음의 설명 부분입니다. 이 글을 쓰는 시점에서는 글레이드 인터페이스에서 추가할 Gtk.STYLE_CLASS_PRIMARY_TOOLBAR 옵션 클래스가 없습니다. 이 옵션 클래스를 XML 파일에 직접 추가할 수 있습니다. 이렇게 하려면, 다음 toolbar_builder.ui XML 코드 9번째 줄에 추가하십시오:

<style> <class name="primary-toolbar"/> </style>

추가하지 않았더라도 프로그램은 여전히 멀쩡하게 동작합니다. Toolbar의 결과는 이 페이지 상단의 스크린샷보다는 약간 다르게 보일 수도 있습니다.

<?xml version="1.0" encoding="UTF-8"?> <interface> <!-- interface-requires gtk+ 3.0 --> <object class="GtkToolbar" id="toolbar"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="hexpand">True</property> <property name="show_arrow">False</property> <child> <object class="GtkToolButton" id="new_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">app.new</property> <property name="label" translatable="yes">New</property> <property name="use_underline">True</property> <property name="stock_id">gtk-new</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="open_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">app.open</property> <property name="label" translatable="yes">Open</property> <property name="use_underline">True</property> <property name="stock_id">gtk-open</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="undo_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">win.undo</property> <property name="label" translatable="yes">Undo</property> <property name="use_underline">True</property> <property name="stock_id">gtk-undo</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="fullscreen_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">win.fullscreen</property> <property name="label" translatable="yes">Fullscreen</property> <property name="use_underline">True</property> <property name="stock_id">gtk-fullscreen</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="leave_fullscreen_button"> <property name="use_action_appearance">False</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">win.fullscreen</property> <property name="label" translatable="yes">Leave Fullscreen</property> <property name="use_underline">True</property> <property name="stock_id">gtk-leave-fullscreen</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> </object> </interface>

이제 앞서 만들었던 파일로 Toolbar를 추가하는 아래 코드를 작성하겠습니다.

/* This is the Window */ class MyWindow : Gtk.ApplicationWindow {

/* Declare these two ToolButtons, as we will get them * from the ui file (see lines 32 and 33), so we can * hide() and show() them as needed.*/ Gtk.ToolButton fullscreen_button; Gtk.ToolButton leave_fullscreen_button;

/* Constructor */ internal MyWindow (MyApplication app) { Object (application: app, title: "Toolbar Example");

this.set_default_size (400, 200); var grid = new Gtk.Grid (); this.add (grid); grid.show ();

/* add the toolbar from the ui file */ var builder = new Gtk.Builder (); try { builder.add_from_file ("toolbar_builder.ui"); } /* Handle the exception */ catch (Error e) { error ("Unable to load file: %s", e.message); }

grid.attach (builder.get_object ("toolbar") as Gtk.Toolbar, 0, 0, 1, 1);

/* get these objects from the ui file so we can toggle between them */ fullscreen_button = builder.get_object ("fullscreen_button") as Gtk.ToolButton; leave_fullscreen_button = builder.get_object ("leave_fullscreen_button") as Gtk.ToolButton;

/* create the "undo" window action action */ var undo_action = new SimpleAction ("undo", null); undo_action.activate.connect (undo_callback); this.add_action (undo_action);

/* create the "fullscreen" window action */ var fullscreen_action = new SimpleAction ("fullscreen", null); fullscreen_action.activate.connect (fullscreen_callback); this.add_action (fullscreen_action); }

void undo_callback (SimpleAction simple, Variant? parameter) { print ("You clicked \"Undo\".\n"); }

void fullscreen_callback (SimpleAction simple, Variant? parameter) { if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) { this.unfullscreen (); leave_fullscreen_button.hide (); fullscreen_button.show (); } else { this.fullscreen (); fullscreen_button.hide (); leave_fullscreen_button.show (); } } }

/* This is the application */ class MyApplication : Gtk.Application { protected override void activate () { new MyWindow (this).show (); }

protected override void startup () { base.startup ();

/* Create the "new" action and add it to the app*/ var new_action = new SimpleAction ("new", null); new_action.activate.connect (new_callback); this.add_action (new_action);

/* Create the "open" action, and add it to the app */ var open_action = new SimpleAction ("open", null); open_action.activate.connect (open_callback); this.add_action (open_action);

/* You could also add the action to the app menu * if you wanted to. */ //var menu = new Menu (); //menu.append ("New", "app.new"); //this.app_menu = menu; }

void new_callback (SimpleAction action, Variant? parameter) { print ("You clicked \"New\".\n"); }

void open_callback (SimpleAction action, Variant? parameter) { print ("You clicked \"Open\".\n"); } }

/* The main function creates the application and runs it. */ int main (string[] args) { return new MyApplication ().run (args); }

이 예제는 다음 참고자료가 필요합니다:

Gtk.Toolbar

Gtk.Toolbutton

Gtk.Stock