[gnome-devel-docs] Javascript samples: Toolbar
- From: Tiffany Antopolski <antopolski src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] Javascript samples: Toolbar
- Date: Thu, 31 May 2012 03:30:51 +0000 (UTC)
commit 0b0f9cb363a3aeeaea31cb94f93ae47366f6f6b0
Author: Tiffany Antopolski <tiffany antopolski gmail com>
Date: Wed May 30 23:30:12 2012 -0400
Javascript samples: Toolbar
platform-demos/C/samples/toolbar.js | 171 +++++++++++++++++++++++++++++++++++
platform-demos/C/toolbar.js.page | 55 ++++--------
platform-demos/Makefile.am | 2 +
3 files changed, 192 insertions(+), 36 deletions(-)
---
diff --git a/platform-demos/C/samples/toolbar.js b/platform-demos/C/samples/toolbar.js
new file mode 100644
index 0000000..c3ee32c
--- /dev/null
+++ b/platform-demos/C/samples/toolbar.js
@@ -0,0 +1,171 @@
+#!/usr/bin/gjs
+
+const Gdk = imports.gi.Gdk;
+const Gio = imports.gi.Gio;
+const GLib = imports.gi.GLib;
+const Gtk = imports.gi.Gtk;
+const Lang = imports.lang;
+
+const Application = new Lang.Class({
+ Name: 'Application',
+
+ //create the application
+ _init: function() {
+ this.application = new Gtk.Application({
+ application_id: 'org.example.myapp',
+ flags: Gio.ApplicationFlags.FLAGS_NONE
+ });
+
+ //connect to 'activate' and 'startup' signals to the callback functions
+ this.application.connect('activate', Lang.bind(this, this._onActivate));
+ this.application.connect('startup', Lang.bind(this, this._onStartup));
+ },
+
+ //create the UI (in this case it's just the ApplicationWindow
+ _buildUI: function() {
+ this._window = new Gtk.ApplicationWindow({ application: this.application,
+ window_position: Gtk.WindowPosition.CENTER,
+ title: "Toolbar Example",
+ default_height: 200,
+ default_width: 400 });
+
+ this._grid = new Gtk.Grid();
+ this._window.add(this._grid);
+ this._grid.show();
+
+ this._createToolbar();
+ this._toolbar.set_hexpand(true);
+ this._grid.attach(this._toolbar, 0, 0, 1, 1);
+
+ //show the toolbar and window
+ this._toolbar.show();
+ this._window.show();
+ },
+
+ //callback function for 'activate' signal
+ _onActivate: function() {
+ this._window.present();
+ },
+
+ //callback function for 'startup' signal
+ _onStartup: function() {
+ this._initMenus();
+ this._buildUI();
+ },
+
+ //create the toolbar, its toolbuttons and their actions
+ _createToolbar: function() {
+
+ this._toolbar = new Gtk.Toolbar();
+ this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
+
+ //create the "New" ToolButton and its SimpleAction.
+ //Using actions allows you to add them to the app menu
+ //without duplicating code.
+ let newAction = new Gio.SimpleAction({ name: 'new'});
+ newAction.connect('activate', Lang.bind(this,
+ function() {
+ this._newCB();
+ }));
+ this.application.add_action(newAction);//note: this action is added to the app
+
+ this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);
+ this._newButton.is_important = true;
+ this._toolbar.add(this._newButton);
+ this._newButton.show();
+ this._newButton.action_name = "app.new";
+
+ //create the "Open" ToolButton and its SimpleAction
+ let openAction = new Gio.SimpleAction({ name: 'open'});
+ openAction.connect('activate', Lang.bind(this,
+ function() {
+ this._openCB();
+ }));
+ this.application.add_action(openAction);
+
+ this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
+ this._openButton.is_important = true;
+ this._toolbar.add(this._openButton);
+ this._openButton.show();
+ this._openButton.action_name = "app.open";
+
+ //create the "Undo" ToolButton and its SimpleAction
+ let undoAction = new Gio.SimpleAction({ name: 'undo'});
+ undoAction.connect('activate', Lang.bind (this,
+ function() {
+ this._undoCB();
+ }));
+ this._window.add_action(undoAction);//note this action is added to the window
+
+ this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);
+ this._undoButton.is_important = true;
+ this._toolbar.add(this._undoButton);
+ this._undoButton.show();
+ this._undoButton.action_name = "win.undo";
+
+ //create the "Fullscreen" ToolButton and its SimpleAction
+ let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });
+ fullscreenToggleAction.connect ('activate', Lang.bind (this,
+ function () {
+ this._fullscreenToggleCB();
+ }));
+ this._window.add_action(fullscreenToggleAction);
+
+ this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);
+ this._fullscreenButton.is_important = true;
+ this._toolbar.add(this._fullscreenButton);
+ this._fullscreenButton.show();
+ this._fullscreenButton.action_name = "win.fullscreenToggle";
+
+ //create the "leaveFullscreen" ToolButton, and set the action name to "win.fullscreenToggle"
+ this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);
+ this._leaveFullscreenButton.is_important = true;
+ this._toolbar.add(this._leaveFullscreenButton);
+ this._leaveFullscreenButton.action_name = "win.fullscreenToggle";
+ },
+
+ _initMenus: function () {
+ let menu = new Gio.Menu();
+ menu.append("New", 'app.new');
+ menu.append("Open", 'app.open');
+ menu.append("Quit", 'app.quit');
+
+ this.application.set_app_menu(menu);
+
+ let quitAction = new Gio.SimpleAction({name: 'quit' });
+ quitAction.connect('activate', Lang.bind(this,
+ function() {
+ this._window.destroy();
+ }));
+ this.application.add_action(quitAction);
+ },
+
+ _newCB: function() {
+ print("You clicked 'New'.");
+ },
+
+ _openCB: function() {
+ print("You clicked 'Open'.");
+ },
+
+ _undoCB:function () {
+ print ("You clicked 'Undo'.");
+ },
+
+ _fullscreenToggleCB: function() {
+ if ((this._window.get_window().get_state() & Gdk.WindowState.FULLSCREEN) != 0 ) {
+ this._window.unfullscreen();
+ this._leaveFullscreenButton.hide();
+ this._fullscreenButton.show();
+ }
+ else {
+ this._window.fullscreen();
+ this._fullscreenButton.hide();
+ this._leaveFullscreenButton.show();
+ }
+ }
+});
+
+//run the application
+let app = new Application();
+app.application.run(ARGV);
diff --git a/platform-demos/C/toolbar.js.page b/platform-demos/C/toolbar.js.page
index ad603bf..5bbddab 100644
--- a/platform-demos/C/toolbar.js.page
+++ b/platform-demos/C/toolbar.js.page
@@ -1,52 +1,35 @@
<?xml version='1.0' encoding='UTF-8'?>
<page xmlns="http://projectmallard.org/1.0/";
+ xmlns:xi="http://www.w3.org/2001/XInclude";
type="guide" style="task"
id="toolbar.js">
<info>
<link type="guide" xref="beginner.js#menu-combo-toolbar"/>
- <revision version="0.1" date="2012-02-20" status="stub"/>
+ <revision version="0.1" date="2012-05-30" status="draft"/>
<credit type="author copyright">
- <name>Susanna Huhtanen</name>
- <email>ihmis suski gmail com</email>
+ <name>Tiffany Antopolski</name>
+ <email>tiffany antopolski gmail com</email>
<years>2012</years>
</credit>
- <desc>A toolbar widget which is connected to a Dialog widget</desc>
+ <desc>A bar of tools</desc>
</info>
<title>Toolbar widget</title>
-
<media type="image" mime="image/png" src="media/toolbar.png"/>
- <p>Toolbar is a widget that may contain either text or stock icons. In this sample we use stock icons.</p>
-
- <code mime="text/javascript" style="numbered"><![CDATA[
-#!/usr/bin/gjs
-Gtk = imports.gi.Gtk;
-Gtk.init(null, 0);
-
-myW = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, default_width: 200});
-myW.title = "Toolbar";
-myW.connect("destroy", function(){Gtk.main_quit()});
-var grid = new Gtk.Grid({border_width:10});
-myW.add(grid);
-var toolbar = new Gtk.Toolbar();
-toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);
-toolbar.set_style(Gtk.ToolbarStyle.ICONS);
-var buttonOpen = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);
-toolbar.set_hexpand(true);
-buttonOpen.connect("clicked", function() {
- var dialog = new Gtk.Dialog({title:"Dialog", deletable: true});
- dialog.add_button(Gtk.STOCK_OK, -7);
- dialog.show_all();
- dialog.run();
- dialog.destroy();
-});
-toolbar.insert(buttonOpen, 0)
-grid.attach(toolbar,1,1,1,1);
-
-myW.show_all();
-Gtk.main();]]></code>
-<p>In this sample we use the following widgets: <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Window.html";>Gtk.Window</link>, <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html";>Gtk.Grid</link>, <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Toolbar.html";>Gtk.Toolbar</link>, <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.ToolButton.html";>Gtk.ToolButton</link>, <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Dialog.html";>Gtk.Dialog</link>.</p>
-
+ <p>Toolbar can contain either text or stock icons. In this sample we use stock icons. This example has fullscreen functionality.</p>
+ <p>This example uses SimpleActions (window and app). App actions can easily be added the the app menu.</p>
+
+<code mime="text/javascript" style="numbered"><xi:include href="samples/toolbar.js" parse="text"><xi:fallback/></xi:include></code>
+<p>
+ In this sample we used the following:
+</p>
+<list>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Window.html";>Gtk.Window</link></p></item>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Toolbar.html";>Gtk.Toolbar</link></p></item>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.ToolButton.html";>Gtk.ToolButton</link></p></item>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.html";>Gtk Stock items</link></p></item>
+ <item><p><link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gdk.WindowState.html";>Gdk.WindowState</link></p></item>
+</list>
</page>
diff --git a/platform-demos/Makefile.am b/platform-demos/Makefile.am
index c66f4c7..22392ec 100644
--- a/platform-demos/Makefile.am
+++ b/platform-demos/Makefile.am
@@ -73,6 +73,7 @@ demo_sources = \
samples/textview.py \
samples/togglebutton.py \
samples/togglebutton.vala \
+ samples/toolbar.js \
samples/toolbar.vala \
samples/treeview_simple_liststore.vala \
samples/window.c \
@@ -210,6 +211,7 @@ DOC_PAGES = \
textview.py.page \
togglebutton.py.page \
togglebutton.vala.page \
+ toolbar.js.page \
toolbar.vala.page \
treeview_simple_liststore.vala.page \
translate.page \
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
