1<?xml version="1.0" encoding="utf-8"?> 2<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="messagedialog.js" xml:lang="cs"> 3 <info> 4 <title type="text">MessageDialog (JavaScript)</title> 5 <link type="guide" xref="beginner.js#windows"/> 6 <link type="seealso" xref="GtkApplicationWindow.js"/> 7 <link type="seealso" xref="gmenu.js"/> 8 <link type="seealso" xref="label.js"/> 9 <revision version="0.2" date="2012-06-25" status="draft"/> 10 11 <credit type="author copyright"> 12 <name>Taryn Fox</name> 13 <email its:translate="no">jewelfox@fursona.net</email> 14 <years>2012</years> 15 </credit> 16 17 <desc>Vyskakovací zpráva svázaná s oknem</desc> 18 </info> 19 20 <title>MessageDialog</title> 21 <media type="image" mime="image/png" src="media/messagedialog.png"/> 22 <p><code>MessageDialog</code> je modální dialogové okno, což znamená že na vyskočení okna musíte nějak zareagovat, než se můžete vrátit do okna, se kterým je svázané. Toto konkrétní způsobí, že svět vybuchne (nebo to aspoň bude tvrdit). Když budete chtít, aby okno vyskočilo po spuštění této ukázky, klikněte na <gui>Message</gui> v jeho aplikační nabídce – to je nabídka, která se objeví po kliknutí na název aplikace v levém horním rohu obrazovky vedle <gui>Činností</gui>.</p> 23 <note><p>Rozdíl mezi widgety <code>MessageDialog</code> a <link xref="dialog.js">Dialog</link> je v tom, že <code>Dialog</code> může obsahovat jakékoliv widgety, které do něj vložíte, zatímco <code>MessageDialog</code> je jen vhodný způsob, jak zobrazit obyčejnou zprávu a tlačítka.</p></note> 24 <links type="section"/> 25 26 <section id="imports"> 27 <title>Importované knihovny</title> 28 <code mime="application/javascript"> 29#!/usr/bin/gjs 30 31const Gio = imports.gi.Gio; 32const Gtk = imports.gi.Gtk; 33const Lang = imports.lang; 34</code> 35 <p>Toto jsou knihovny, které potřebujeme naimportovat, aby aplikace běžela. Pamatujte si, že řádek, který GNOME říká, že používáme Gjs, musí být vždy na začátku.</p> 36 </section> 37 38 <section id="applicationwindow"> 39 <title>Vytvoření okna aplikace</title> 40 <code mime="application/javascript"> 41const MessageDialogExample = new Lang.Class ({ 42 Name: 'MessageDialog Example', 43 44 // Vytvoří vlastní aplikaci 45 _init: function () { 46 this.application = new Gtk.Application ({ 47 application_id: 'org.example.jsmessagedialog', 48 flags: Gio.ApplicationFlags.FLAGS_NONE }); 49 50 // Napojí signály "activate" a "startup" k funkcím zpětného volání 51 this.application.connect('activate', Lang.bind(this, this._onActivate)); 52 this.application.connect('startup', Lang.bind(this, this._onStartup)); 53 }, 54 55 // Funkce zpětného volání pro signál "activate" zobrazujicí okno při aktivaci 56 _onActivate: function () { 57 this._window.present (); 58 }, 59 60 // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní 61 _onStartup: function () { 62 this._initMenus(); 63 this._buildUI (); 64 }, 65</code> 66 <p>Všechen kód této ukázky je ve třídě <code>MessageDialogExample</code>. Výše uvedený kód vytvoří <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link> pro naše widgety a okno, ve kterém budou.</p> 67 <note><p>Než zavoláme <code>_buildUI</code>, aby se vytvořilo okno a widgety v něm, potřebujeme zavolat funkci <code>_initMenus</code>, která GNOME řekne, aby vytvořilo nabídku. Reálný kód pro <code>_initMenus</code> můžeme vložit za kód <code>_buildUI</code>, jelikož nezáleží na tom, v jakém pořadí jsou vloženy, protože <code>_initMenus</code> je zavoláno jako první z <code>_onStartup</code>.</p></note> 68 <code mime="application/javascript"> 69 // Sestaví uživatelské rozhraní aplikace 70 _buildUI: function () { 71 72 // Vytvoří okno aplikace 73 this._window = new Gtk.ApplicationWindow ({ 74 application: this.application, 75 window_position: Gtk.WindowPosition.CENTER, 76 title: "Gtk.MessageDialog Example", 77 default_height: 200, 78 default_width: 400 }); 79</code> 80 <p>Funkce <code>_buildUI</code> je místo, ze kterého voláme všechen kód, který vytváří uživatelské rozhraní aplikace. Prvním krokem je vytvoření nového <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link>, do kterého vložíme všechny naše widgety.</p> 81 82 <code mime="application/javascript"> 83 // Vytvoří bláznivou varovnou zprávu a přidá ji do okna 84 this.warningLabel = new Gtk.Label ({ 85 label: "This application goes boom! (Not really.)"}); 86 this._window.add (this.warningLabel); 87</code> 88 <p>V tomto příkladu, je vším, co vyskakovací okno přinese, jen bláznivé varování ve widgetu <link xref="label.js">Label</link>.</p> 89 </section> 90 91 <section id="menu"> 92 <title>Vytvoření nabídky aplikace</title> 93 <code mime="application/javascript"> 94 // Sestaví aplikační nabídku, včetně položky, které volá dialogové okno 95 _initMenus: function() { 96 let menu = new Gio.Menu(); 97 menu.append("Message",'app.message'); 98 menu.append("Quit",'app.quit'); 99 this.application.set_app_menu(menu); 100 101 // Tímto se zobrazí MessageDialog, když je v nabídce kliknuto na Message 102 let messageAction = new Gio.SimpleAction ({ name: 'message' }); 103 messageAction.connect('activate', Lang.bind(this, 104 function() { 105 this._showMessageDialog(); 106 })); 107 this.application.add_action(messageAction); 108 109 // Tímto se zavře okno, když je v nabídce kliknuto na Quit 110 let quitAction = new Gio.SimpleAction ({ name: 'quit' }); 111 quitAction.connect('activate', Lang.bind(this, 112 function() { 113 this._window.destroy(); 114 })); 115 this.application.add_action(quitAction); 116 }, 117</code> 118 <p>Zde sestavíme <link xref="gmenu.js">GMenu</link>, do které ho přidáme položku <gui>Message</gui>, která vyvolá dialogové okno se zprávou. <code>GMenu</code> je nabídka, která se objeví po kliknutí na název aplikace v levém horním rohu obrazovky vedle <gui>Činností</gui>. Naše nabídka má jen dvě položky: <gui>Message</gui> a <gui>Quit</gui>.</p> 119 </section> 120 121 <section id="messagedialog"> 122 <title>Vytvoření okna typu MessageDialog</title> 123 <code mime="application/javascript"> 124 _showMessageDialog: function () { 125 126 // Vytvoří modální MessageDialog, jehož rodičem je okno 127 this._messageDialog = new Gtk.MessageDialog ({ 128 transient_for: this._window, 129 modal: true, 130 buttons: Gtk.ButtonsType.OK_CANCEL, 131 message_type: Gtk.MessageType.WARNING, 132 text: "This action will cause the universe to stop existing." }); 133 134 this._messageDialog.connect ('response', Lang.bind(this, this._response_cb)); 135 this._messageDialog.show(); 136 }, 137</code> 138 <p>Aby naše dialogové okno se zprávou vyskočilo svázané s hlavním oknem, nastavíme jeho vlastnost <code>modal</code> na <code>true</code> a <code>transient_for</code> na <code>_window</code>. Po té můžeme nastavit druh tlačítek, která bude mít, a druh zprávy, kterou zobrazí (tím je dána ikona, která se objeví vedle zprávy) a napsat text zprávy. To vše před tím, než napojíme jeho signál <code>"response"</code> na funkci zpětného volání, která jej zpracuje.</p> 139 <note><p>Zde je pár zdrojů, kterém můžete použít při vytváření vlastních widgetů <code>MessageDialog</code>:</p> 140 <list> 141 <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkButtonsType">Seznam typů tlačítek</link></p></item> 142 <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkMessageDialog.html#GtkMessageType">Seznam typů zpráv</link></p></item> 143 </list> 144 </note> 145 146 <code mime="application/javascript"> 147 // Funkce zpětného volání (neboli obsluha signálu) pro reagování na signál 148 _response_cb: function (messagedialog, response_id) { 149 150 // Jednoduchý rozdělovač, který mění název v záhlaví hlavního okna 151 switch (response_id) { 152 case Gtk.ResponseType.OK: 153 this.warningLabel.set_label ("*BOOM*\n"); 154 break; 155 case Gtk.ResponseType.CANCEL: 156 this.warningLabel.set_label ("Good choice!\n"); 157 break; 158 case Gtk.ResponseType.DELETE_EVENT: 159 this.warningLabel.set_label ("Dialog closed or cancelled.\n"); 160 break; 161 } 162 163 this._messageDialog.destroy(); 164 165 } 166 167}); 168</code> 169 <p>Tato funkce má dva parametry, <code>MessageDialog</code> a jeho <code>response_id</code>, z nichž oba jsou zajištěny automaticky (nemusíte je ručně předávat, aby to fungovalo). Zde použijeme jednoduchou konstrukci <code>switch</code>, která změní text varování podle vybrané volby. Když místo kliknutí na tlačítko <gui>OK</gui> nebo <gui>Cancel</gui> zmáčknete <key>Esc</key>, nastane událost <code>DELETE_EVENT</code>. Ve všech případech dojde k likvidaci dialogového okna.</p> 170 171 <code mime="application/javascript"> 172// Spustí aplikaci 173let app = new MessageDialogExample (); 174app.application.run (ARGV); 175</code> 176 <p>Nakonec vytvoříme novou instanci konečné třídy MessageDialogExample a aplikaci spustíme.</p> 177 </section> 178 179 <section id="complete"> 180 <title>Úplný kód ukázky</title> 181<code mime="application/javascript" style="numbered">#!/usr/bin/gjs 182 183imports.gi.versions.Gtk = '3.0'; 184 185const Gio = imports.gi.Gio; 186const Gtk = imports.gi.Gtk; 187 188class MessageDialogExample { 189 190 // Vytvoří vlastní aplikaci 191 constructor() { 192 this.application = new Gtk.Application({ 193 application_id: 'org.example.jsmessagedialog', 194 flags: Gio.ApplicationFlags.FLAGS_NONE 195 }); 196 197 // Napojí signály "activate" a "startup" k funkcím zpětného volání 198 this.application.connect('activate', this._onActivate.bind(this)); 199 this.application.connect('startup', this._onStartup.bind(this)); 200 } 201 202 // Funkce zpětného volání pro signál "activate" zobrazujicí okno při aktivaci 203 _onActivate() { 204 this._window.present(); 205 } 206 207 // Funkce zpětného volání pro signál "startup" sestavující uživatelské rozhraní 208 _onStartup() { 209 this._initMenus(); 210 this._buildUI (); 211 } 212 213 // Sestaví uživatelské rozhraní aplikace 214 _buildUI() { 215 216 // Vytvoří okno aplikace 217 this._window = new Gtk.ApplicationWindow({ 218 application: this.application, 219 window_position: Gtk.WindowPosition.CENTER, 220 title: "Gtk.MessageDialog Example", 221 default_height: 200, 222 default_width: 400 223 }); 224 225 // Vytvoří bláznivou varovnou zprávu a přidá ji do okna 226 this.warningLabel = new Gtk.Label({ 227 label: "This application goes boom! (Not really.)" 228 }); 229 this._window.add (this.warningLabel); 230 231 // Zobrazí okno a všechny jeho synovské widgety 232 this._window.show_all(); 233 } 234 235 // Sestaví aplikační nabídku, včetně položky, které volá dialogové okno 236 _initMenus() { 237 let menu = new Gio.Menu(); 238 menu.append("Message",'app.message'); 239 menu.append("Quit",'app.quit'); 240 this.application.set_app_menu(menu); 241 242 // Tímto se zobrazí MessageDialog, když je v nabídce kliknuto na Message 243 let messageAction = new Gio.SimpleAction ({ name: 'message' }); 244 messageAction.connect('activate', () => { this._showMessageDialog(); }); 245 this.application.add_action(messageAction); 246 247 // Tímto se zavře okno, když je v nabídce kliknuto na Quit 248 let quitAction = new Gio.SimpleAction ({ name: 'quit' }); 249 quitAction.connect('activate', () => { this._window.destroy(); }); 250 this.application.add_action(quitAction); 251 } 252 253 _showMessageDialog() { 254 255 // Vytvoří modální MessageDialog, jehož rodičem je okno 256 this._messageDialog = new Gtk.MessageDialog ({ 257 transient_for: this._window, 258 modal: true, 259 buttons: Gtk.ButtonsType.OK_CANCEL, 260 message_type: Gtk.MessageType.WARNING, 261 text: "This action will cause the universe to stop existing." }); 262 263 this._messageDialog.connect ('response', this._response_cb.bind(this)); 264 this._messageDialog.show(); 265 } 266 267 // Funkce zpětného volání (neboli obsluha signálu) pro reagování na signál 268 _response_cb(messagedialog, response_id) { 269 270 // Jednoduchý rozdělovač, který mění název v záhlaví hlavního okna 271 switch (response_id) { 272 case Gtk.ResponseType.OK: 273 this.warningLabel.set_label ("*BOOM*\n"); 274 break; 275 case Gtk.ResponseType.CANCEL: 276 this.warningLabel.set_label ("Good choice!\n"); 277 break; 278 case Gtk.ResponseType.DELETE_EVENT: 279 this.warningLabel.set_label ("Dialog closed or cancelled.\n"); 280 break; 281 } 282 283 this._messageDialog.destroy(); 284 285 } 286}; 287 288// Spustí aplikaci 289let app = new MessageDialogExample (); 290app.application.run (ARGV); 291</code> 292 </section> 293 294 <section id="in-depth"> 295 <title>Dokumentace jdoucí do hloubky</title> 296<p>V této ukázce se používá následující:</p> 297<list> 298 <item><p><link href="http://developer.gnome.org/gio/unstable/GMenu.html">GMenu</link></p></item> 299 <item><p><link href="http://developer.gnome.org/gio/stable/GSimpleAction.html">GSimpleAction</link></p></item> 300 <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html">Gtk.Application</link></p></item> 301 <item><p><link href="http://developer.gnome.org/gtk3/stable/GtkApplicationWindow.html">Gtk.ApplicationWindow</link></p></item> 302 <item><p><link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.MessageDialog.html">Gtk.MessageDialog</link></p></item> 303</list> 304 </section> 305</page> 306