JavaScript lesson plans

This is a reference page that I'm using while working on the JavaScript beginner tutorials. Any ideas or help would be appreciated! Feel free to edit the page, catch me on IRC as Jewelfox, or send me an email at <jewelfox AT SPAMFREE fursona DOT net>

JavaScript tutorial organization

  1. Introduction. What JavaScript is, what GNOME applications and components use it, and where you can go to learn it if you don't already know the language.

  2. Beginner tutorials. These explain the very basics of how to write GNOME applications, starting with an introductory "Hello, GNOME" chapter and going on to explain the most important Gtk+ widgets and UI concepts, like modal dialogs and the application menu. Each chapter will demonstrate one or two new concepts, and will build on previous chapters.

  3. Platform demos. These explain not just Gtk+, but the rest of the GNOME platform, including libraries like Telepathy and Libsoup. Each one demonstrates one library, using an app that's a little longer than the ones in the Beginner section. The GNOME Shell extension tutorial will go here when it's ready.

  4. Code samples. A concise reference, that lets you look up the code for a given widget or library without having to read all the way through a tutorial. Each one has a screenshot and brief explanation, the code sample itself, and a list of the most useful methods and properties, followed by links to more in-depth reference material.

Beginner tutorials outline

  1. (./) Hello, GNOME! A WebView that shows a simple JavaScript web app. This tutorial is designed to ease newbie JavaScript developers into writing for GNOME, by starting them off in familiar surroundings.

  2. (./) Welcome to the Grid About the amazing power of the Grid, and how to organize Image and Label widgets inside it. Learn the most basic properties of all three widgets, including how to create Images that use stock Gtk+ icons.

  3. Getting the Signal Demonstrates widgets like the Button, Switch, Entry, and RadioButton, and shows how to write callback functions which handle the signals they send. Mentions other widgets, such as the multiline TextView, and links to tutorials for them.

  4. Popup dialog boxes Demonstrates the simple MessageDialog, as well as the more customizable Dialog.

  5. Application menus Demonstrates the ApplicationMenu, as well as the AboutDialog that usually goes with it.

  6. Lists of items Demonstrates the TreeView and ListStore, with links to more advanced demonstrations.

  7. Choosing from lists Demonstrates the ComboBoxText, as well as a multiline ComboBox which includes icons.

  8. Toolbars with tooltips Exactly what it says.

  9. Putting it all together Building a complete application, a simple journal. Uses the Paned interface to keep UI sections separate, and uses Libgda and an SQLite database to save journal entries.

  10. Packing it up Using autotools and creating a .desktop file. Links to various distros' packaging schemes will be provided.

  11. Git-ting involved The very basics of using git, and how to contribute to GNOME using its Bugzilla and git repository.

Platform demos needed

  1. Gio How to read, save, and edit files using Gio. Demonstrate asynchronous file operations, and introduce the ProgressBar and Spinner widgets.

  2. Libgda How to use an SQLite database.

  3. Libsoup How to talk to web pages, and use their APIs to publish to and pull information from them.

  4. Gstreamer How to play back sound and movie files, and record from the webcam and microphone.

  5. Telepathy How to send and receive messages over the web.

  6. Clutter How to do neat animations.

Code samples checklist

  • Samples with a {*} are quite important, and should be done first.

  • When a sample has been completed, please edit this page and enter (./) in the appropriate spot.

Display widgets




{*} Image — A widget displaying an image

{*} Label — A widget which displays text


ProgressBar — A widget which indicates progress visually


Spinner — A spinner animation


Statusbar — Report messages of minor importance to the user


Button and toggles

{*} Button — A widget which emits a signal when clicked


CheckButton — Create widgets with a discrete toggle button


RadioButton — A choice from multiple check buttons


ToggleButton — Create buttons which retain their state


LinkButton — Create buttons bound to a URL


Switch — A "light switch" style toggle


MenuButton* — A widget that shows a menu when clicked on

Numeric and text data entry

{*} Entry — A single line text entry field

Scale — A slider widget for selecting a value from a range


SpinButton — Retrieve an integer or floating-point number from the user


Multiline Text Editor

TextView - Widget that displays a GtkTextBuffer



Window - Toplevel window which can contain other widgets


{*} MessageDialog - A message window


Dialog - A popup window


AboutDialog - Display information about an application


{*} ApplicationWindow — GtkWindow subclass with GtkApplication support


Menu, combo box and toolbar widgets

{*} GMenu


{*} ComboBoxText — A widget used to choose from a list of items


Multi-column ComboBox


MenuBar — A subclass of GtkMenuShell which holds GtkMenuItem widgets

{*} Toolbar — A bar of buttons and other widgets


{*} Toolbar using Glade & GtkBuilder

File selectors

FileChooserDialog — A dialog suitable for "File/Open" or "File/Save" commands

Font selectors

FontChooserWidget — A widget for selecting fonts

Color selectors

ColorButton — A button to launch a color selection dialog

Layout containers

{*} Grid — Pack widgets in rows and columns


ButtonBox — A container for arranging buttons ?

Paned — A widget with two adjustable panes


{*} TreeView with simple ListView


TreeView with Advanced ListView

TreeView with TreeStore

TreeView with CellRendererToggle


GtkSeparator — A separator widget


Scrollbar — A Scrollbar

{*} ScrolledWindow — Adds scrollbars to its child widget


GtkTooltip — Add tips to your widgets

Custom Widget - Create your own widget

* GtkMenuButton is a brand new widget. For it to work, you either need to jhbuild, or be running Gnome 3.5 or later.

Platform demos outline


TarynFox (last edited 2012-08-11 20:09:43 by TarynFox)