[gnome-devel-docs] Fix mime type for javascript.
- From: Tiffany Antopolski <antopolski src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-devel-docs] Fix mime type for javascript.
- Date: Wed, 15 Aug 2012 19:34:26 +0000 (UTC)
commit 10c34b8b1c6d7fc72e6ab511bf9510594f3699b2
Author: Tiffany Antopolski <tiffany antopolski gmail com>
Date: Wed Aug 15 15:33:27 2012 -0400
Fix mime type for javascript.
platform-demos/C/02_welcome_to_the_grid.js.page | 34 ++++++------
platform-demos/C/03_getting_the_signal.js.page | 54 ++++++++++----------
platform-demos/C/GtkApplicationWindow.js.page | 2 +-
platform-demos/C/aboutdialog.js.page | 2 +-
platform-demos/C/button.js.page | 2 +-
platform-demos/C/checkbutton.js.page | 16 +++---
platform-demos/C/combobox.js.page | 28 +++++-----
platform-demos/C/comboboxtext.js.page | 20 ++++----
platform-demos/C/dialog.js.page | 2 +-
platform-demos/C/entry.js.page | 2 +-
platform-demos/C/gmenu.js.page | 2 +-
platform-demos/C/grid.js.page | 2 +-
platform-demos/C/grid_with_entry.js.page | 2 +-
platform-demos/C/guitar-tuner.js.page | 14 +++---
platform-demos/C/helloWorld.js.page | 12 ++--
platform-demos/C/hellognome.js.page | 22 ++++----
platform-demos/C/image-viewer.js.page | 30 ++++++------
platform-demos/C/image.js.page | 2 +-
platform-demos/C/label.js.page | 2 +-
platform-demos/C/linkbutton.js.page | 2 +-
platform-demos/C/menubutton.js.page | 2 +-
platform-demos/C/messagedialog.js.page | 18 +++---
platform-demos/C/progressbar.js.page | 2 +-
platform-demos/C/radiobutton.js.page | 28 +++++-----
platform-demos/C/record-collection.js.page | 10 ++--
platform-demos/C/scale.js.page | 24 ++++----
platform-demos/C/spinbutton.js.page | 22 ++++----
platform-demos/C/spinner.js.page | 2 +-
platform-demos/C/statusbar.js.page | 20 ++++----
platform-demos/C/switch.js.page | 24 ++++----
platform-demos/C/textview.js.page | 24 ++++----
platform-demos/C/togglebutton.js.page | 20 ++++----
platform-demos/C/toolbar.js.page | 2 +-
platform-demos/C/treeview.js.page | 2 +-
platform-demos/C/treeview_simple_liststore.js.page | 30 ++++++------
platform-demos/C/weatherAppMain.js.page | 14 +++---
platform-demos/C/weatherGeonames.js.page | 8 ++--
platform-demos/C/widget.js.page | 2 +-
platform-demos/C/window.js.page | 2 +-
39 files changed, 254 insertions(+), 254 deletions(-)
---
diff --git a/platform-demos/C/02_welcome_to_the_grid.js.page b/platform-demos/C/02_welcome_to_the_grid.js.page
index c30ac57..09f0958 100644
--- a/platform-demos/C/02_welcome_to_the_grid.js.page
+++ b/platform-demos/C/02_welcome_to_the_grid.js.page
@@ -39,7 +39,7 @@
<title>Setting up our application</title>
<p>Before we dig out any widgets from the Gtk+ toolbox, we first need to write the basic boilerplate code that our application requires.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gtk = imports.gi.Gtk;
@@ -47,7 +47,7 @@ const Lang = imports.lang;
]]></code>
<p>This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the widgets, and Lang so we can use Lang.bind to connect our application's activate and startup signals to the requisite functions.</p>
<p>Speaking of which:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const WelcomeToTheGrid = new Lang.Class({
Name: 'Welcome to the Grid',
@@ -73,7 +73,7 @@ const WelcomeToTheGrid = new Lang.Class({
<p>This is the start of the application itself, and the _init function which creates it. It tells _buildUI to create an ApplicationWindow, which we're going to call _window, and it tells our window to present itself whenever needed.</p>
<p>This part, again, is pretty much copy-and-paste, but you always want to give your application a unique name.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -94,14 +94,14 @@ const WelcomeToTheGrid = new Lang.Class({
<media type="image" mime="image/png" src="media/02_jsgrid_01.png"/>
<p>We're going to need, at the very least, a picture and a text label to go with it. Let's start with the picture:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create an image
this._image = new Gtk.Image ({ file: "gnome-image.png" });
]]></code>
<p>You can download the image file used in this example <link href="https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=gnome-image.png";>here.</link> Be sure to put it in the same directory as the code you're writing.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a label
this._label = new Gtk.Label ({ label: "Welcome to GNOME, too!" });
]]></code>
@@ -109,13 +109,13 @@ const WelcomeToTheGrid = new Lang.Class({
<note style="tip"><p>Yes, it sounds redundant for a Label to have a label property, but it's not. Other widgets that contain text have a label property, so it's <em>consistent</em> for the Label widget to have one too.</p></note>
<p>We can't just add these widgets to our window in order, though, the same way HTML elements appear in the order you write them. That's because an ApplicationWindow can only contain one widget.</p>
<p>How do we get around that? By making that one widget a container widget, which can hold more than one widget and organize them inside it. Behold: The Grid.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the Grid
this._grid = new Gtk.Grid ();
]]></code>
<p>We're not giving it any properties yet. Those will come later, as we learn how to use the Grid's powers. First, let's attach the Image and Label we made to our Grid.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Attach the image and label to the grid
this._grid.attach (this._image, 0, 0, 1, 1);
this._grid.attach (this._label, 0, 1, 1, 1);
@@ -128,7 +128,7 @@ const WelcomeToTheGrid = new Lang.Class({
<item><p>The <em>third</em> and <em>fourth</em> numbers are how many columns and rows a widget should take up. We'll see how these work in a minute.</p></item>
</list>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the grid to the window
this._window.add (this._grid);
@@ -155,7 +155,7 @@ app.application.run (ARGV);
<title>Tweaking the Grid</title>
<p>One thing we can do, is we can give the Label a margin_top property when we create it. This works sort of like setting a margin for an HTML element using inline CSS styling.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a label
this._label = new Gtk.Label ({
label: "Welcome to GNOME, too!",
@@ -166,7 +166,7 @@ app.application.run (ARGV);
<media type="image" mime="image/png" src="media/02_jsgrid_03.png"/>
<p>We could give the Image a margin_bottom property, but that won't work when the new Label is in a separate column. So how about we try this instead:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the Grid
this._grid = new Gtk.Grid ({
row_spacing: 20 });
@@ -180,7 +180,7 @@ app.application.run (ARGV);
<title>Adding more widgets</title>
<p>If we did want to add a second Label, how would we do it so that it actually looked like it belonged there? One way is to center the Image on top, so that it's above both Labels instead of just the one on the left. That's where those other numbers in the Grid's attach method come in:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a second label
this._labelTwo = new Gtk.Label ({
label: "The cake is a pie." });
@@ -205,7 +205,7 @@ app.application.run (ARGV);
<media type="image" mime="image/png" src="media/02_jsgrid_05.png"/>
<p>Second, we can set the Grid's column_homogenous property to true.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the Grid
this._grid = new Gtk.Grid ({
column_homogeneous: true,
@@ -216,7 +216,7 @@ app.application.run (ARGV);
<media type="image" mime="image/png" src="media/02_jsgrid_06.png"/>
<p>And third, we can set the Grid's column_spacing property, the same way we set its row_spacing.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the Grid
this._grid = new Gtk.Grid ({
column_spacing: 20,
@@ -230,7 +230,7 @@ app.application.run (ARGV);
<title>Using stock images</title>
<p>GNOME has a lot of stock images on hand already, that we can use if we don't feel like creating our own or if we want a universally-recognized icon. Here's how we create a stock image, compared to how we create a normal one:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create an image
this._image = new Gtk.Image ({ file: "gnome-image.png" });
@@ -238,7 +238,7 @@ app.application.run (ARGV);
this._icon = new Gtk.Image ({ stock: 'gtk-about' });
]]></code>
<p>After that, we attach it to the Grid to the left of the first Label. (We aren't using the second one for this example.)</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Attach the images and label to the grid
this._grid.attach (this._image, 0, 0, 2, 1);
this._grid.attach (this._icon, 0, 1, 1, 1);
@@ -255,7 +255,7 @@ app.application.run (ARGV);
<section id="next">
<title>What's next?</title>
<p>Before we go on to the next tutorial, let's try something a little different:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a button
this._button = new Gtk.Button ({
label: "Welcome to GNOME, too!"});
@@ -273,7 +273,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/02_welcome_to_the_grid.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/02_welcome_to_the_grid.js" parse="text"><xi:fallback/></xi:include></code>
</section>
</page>
diff --git a/platform-demos/C/03_getting_the_signal.js.page b/platform-demos/C/03_getting_the_signal.js.page
index c45c5c9..9a5a939 100644
--- a/platform-demos/C/03_getting_the_signal.js.page
+++ b/platform-demos/C/03_getting_the_signal.js.page
@@ -38,7 +38,7 @@
<p>This ApplicationWindow has a Button and a Label inside it, arranged in a Grid. Whenever the Button is clicked, a variable that holds the number of cookies is increased by 1, and the Label that shows how many cookies there are is updated.</p>
<note style="tip"><p>The cookies in this example are not the same as the cookies that you get from websites, which store your login information and may keep track of which sites you've visited. They're just imaginary treats. You may bake some real ones if you like.</p></note>
<p>Here is the basic, boilerplate code that goes at the start of the application, before we start creating the window and widgets. Besides the application having a unique name, the biggest change from the usual boilerplate is that we create a global variable right near the beginning, to hold the number of cookies.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gtk = imports.gi.Gtk;
@@ -76,13 +76,13 @@ const GettingTheSignal = new Lang.Class({
<title>Click the button</title>
<p>As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function, which is called when the application starts up.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
]]></code>
<p>First, we create the window itself:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
@@ -93,14 +93,14 @@ const GettingTheSignal = new Lang.Class({
]]></code>
<p>Note that we've set its default_height and default_width properties. These let us control how tall and wide the ApplicationWindow will be, in pixels.</p>
<p>Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as part of the Label's label property.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the label
this._cookieLabel = new Gtk.Label ({
label: "Number of cookies: " + cookies });
]]></code>
<p>Now we'll create the Button. We set its label property to show the text that we want on the Button, and we connect its "clicked" signal to a function called _getACookie, which we'll write after we're done building our application's UI.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the cookie button
this._cookieButton = new Gtk.Button ({ label: "Get a cookie" });
@@ -108,7 +108,7 @@ const GettingTheSignal = new Lang.Class({
this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));
]]></code>
<p>Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to show itself and its contents. That's all we need inside the _buildUI function, so we close it with a bracket, as well as a comma that tells GNOME to go on to the next function. Note that even though we wrote the code for the Label first, we can still attach it to the Grid in a way that will put it on the bottom.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid to arrange everything inside
this._grid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
@@ -129,7 +129,7 @@ const GettingTheSignal = new Lang.Class({
]]></code>
<p>Now, we write the _getACookie function. Whenever our Button sends out its "clicked" signal, the code in this function will run. In this case, all it does is increase the number of cookies by 1, and update the Label to show the new number of cookies. We do this using the Label's set_label method.</p>
<note style="tip"><p>Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a label property that says what text is inside them, and get_label and set_label methods that let you check what that text is and change it, respectively. So if you learn how one widget works, you'll also know how others like it work.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_getACookie: function() {
// Increase the number of cookies by 1 and update the label
@@ -142,7 +142,7 @@ const GettingTheSignal = new Lang.Class({
]]></code>
<p>Finally, we run the application, using the same kind of code as in our last tutorial.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new GettingTheSignal ();
app.application.run (ARGV);
@@ -162,24 +162,24 @@ app.application.run (ARGV);
<p>You may have seen Switches like these in GNOME's accessibility menu, which let you turn features like large text and the on-screen keyboard on and off. In this case, the Switch controls our imaginary cookie dispenser. If the Switch is turned on, you can get cookies by clicking the "Get a cookie" Button. If it's turned off, clicking the Button won't do anything.</p>
<note style="tip"><p>You can get to the accessibility menu by clicking on the outline of a human, near your name in the upper-right corner of the screen.</p></note>
<p>Here's how we create the Switch:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the switch that controls whether or not you can win
this._cookieSwitch = new Gtk.Switch ();
]]></code>
<p>We don't actually need to connect the Switch to anything. All we need to do is write an if statement in our _getACookie function, to check to see if the Switch is turned on. If we wanted to make something happen as soon as you flip the Switch, though, we would connect its notify::active signal, like so:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Connect the switch to the function that handles it
this._cookieSwitch.connect ('notify::active', Lang.bind (this, this._cookieDispenser));
]]></code>
<p>A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would set the value of its active property to true when we create it.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
this._cookieSwitch = new Gtk.Switch ({ active: true });
]]></code>
<p>Let's just create it normally, though, and then create the Label that goes with it. We want the Switch and the Label to be kept right next to each other, so we'll create a Grid just for them, then put that Grid in our larger Grid that holds all the widgets inside it. Here's what the code looks like to create all that:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the switch that controls whether or not you can win
this._cookieSwitch = new Gtk.Switch ();
@@ -198,7 +198,7 @@ app.application.run (ARGV);
]]></code>
<p>And now we arrange everything in the larger Grid like so.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Put everything inside the grid
this._grid.attach (this._cookieButton, 0, 0, 1, 1);
this._grid.attach (this._switchGrid, 0, 1, 1, 1);
@@ -207,7 +207,7 @@ app.application.run (ARGV);
<p>Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on. We do that by using the Switch's get_active method. It returns true if the Switch is turned on, and false if the Switch is turned off.</p>
<note style="tip"><p>When a method is used in an if statement like this, the code inside the if statement is executed if the method returns true.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_getACookie: function() {
// Is the cookie dispenser turned on?
@@ -232,7 +232,7 @@ app.application.run (ARGV);
<media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
<p>First off, let's change our ApplicationWindow's name and increase its border_width property, so that our widgets aren't packed in too tightly. The border_width is the number of pixels between any widget and the edge of the window.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the application window
this._window = new Gtk.ApplicationWindow({
application: this.application,
@@ -244,7 +244,7 @@ app.application.run (ARGV);
]]></code>
<p>After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we set each new RadioButton's group property to the name of another RadioButton.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the radio buttons
this._cookieButton = new Gtk.RadioButton ({ label: "Cookie" });
this._notCookieOne = new Gtk.RadioButton ({ label: "Not cookie",
@@ -254,7 +254,7 @@ app.application.run (ARGV);
]]></code>
<p>Next, we create a Grid for the RadioButtons. Remember, we don't have to arrange things in Grids in the same order that we create them in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Arrange the radio buttons in their own grid
this._radioGrid = new Gtk.Grid ();
this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);
@@ -264,13 +264,13 @@ app.application.run (ARGV);
<p>Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the first "Not cookie" button to be selected by default, though, so we use its set_active method.</p>
<note style="tip"><p>We could also set its active property to true when we create it.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Set the button that will be at the top to be active by default
this._notCookieOne.set_active (true);
]]></code>
<p>Now we arrange everything in our main Grid like usual ...</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Put everything inside the grid
this._grid.attach (this._radioGrid, 0, 0, 1, 1);
this._grid.attach (this._cookieButton, 0, 1, 1, 1);
@@ -278,7 +278,7 @@ app.application.run (ARGV);
]]></code>
<p>And then we change our _getACookie function to test to see if the cookie button is the one that's selected.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_getACookie: function() {
// Did you select "cookie" instead of "not cookie"?
@@ -303,13 +303,13 @@ app.application.run (ARGV);
<media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
<p>After we change the window's name, we create the Entry widget.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the text entry field
this._spellCookie = new Gtk.Entry ();
]]></code>
<p>Next, we arrange everything in the Grid ... </p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Put everything inside the grid
this._grid.attach (this._spellCookie, 0, 0, 1, 1);
this._grid.attach (this._cookieButton, 0, 1, 1, 1);
@@ -318,7 +318,7 @@ app.application.run (ARGV);
<p>And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the text that you entered into it and see if you spelled "cookie" right. We don't care whether you capitalize "cookie" or not, so we use JavaScript's built-in toLowerCase method to change the Entry's text to all lower case inside the if statement.</p>
<note style="tip"><p>An Entry widget doesn't have a label property, which is a set text string that the user can't change. (You can't normally change the label on a Button, for instance.) Instead, it has a text property, which changes to match what the user types in.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_getACookie: function() {
// Did you spell "cookie" correctly?
@@ -350,25 +350,25 @@ app.application.run (ARGV);
<section id="buttonsample">
<title>Code sample with Button</title>
<media type="image" mime="image/png" src="media/03_jssignal_01.png"/>
- <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_01.js" parse="text"><xi:fallback/></xi:include></code>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_01.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="switchsample">
<title>Code sample with Switch</title>
<media type="image" mime="image/png" src="media/03_jssignal_02.png"/>
- <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_02.js" parse="text"><xi:fallback/></xi:include></code>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_02.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="radiobuttonsample">
<title>Code sample with RadioButton</title>
<media type="image" mime="image/png" src="media/03_jssignal_03.png"/>
- <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_03.js" parse="text"><xi:fallback/></xi:include></code>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_03.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="entrysample">
<title>Code sample with Entry</title>
<media type="image" mime="image/png" src="media/03_jssignal_04.png"/>
- <code mime="text/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_04.js" parse="text"><xi:fallback/></xi:include></code>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/03_getting_the_signal_04.js" parse="text"><xi:fallback/></xi:include></code>
</section>
</section>
diff --git a/platform-demos/C/GtkApplicationWindow.js.page b/platform-demos/C/GtkApplicationWindow.js.page
index f6e2b49..37a6e4f 100644
--- a/platform-demos/C/GtkApplicationWindow.js.page
+++ b/platform-demos/C/GtkApplicationWindow.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/window.png"/>
<p>A simple GtkApplicationWindow which can support Menus.</p>
-<code mime="text/javascript" style="numbered">
+<code mime="application/javascript" style="numbered">
<xi:include href="samples/GtkApplicationWindow.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
diff --git a/platform-demos/C/aboutdialog.js.page b/platform-demos/C/aboutdialog.js.page
index 67d80b3..f0baf7b 100644
--- a/platform-demos/C/aboutdialog.js.page
+++ b/platform-demos/C/aboutdialog.js.page
@@ -19,7 +19,7 @@
<media type="image" mime="image/png" src="media/aboutdialog_GMenu.png"/>
<p>A modal dialog window which shows information about an application and its creators. This one is triggered by clicking "About" in the application's menu, which is normally a good place to put it.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/aboutdialog.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/aboutdialog.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/button.js.page b/platform-demos/C/button.js.page
index d7ee71d..e6d0866 100644
--- a/platform-demos/C/button.js.page
+++ b/platform-demos/C/button.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/button.png"/>
<p>A button widget that changes its label when you click it.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/button.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/button.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
diff --git a/platform-demos/C/checkbutton.js.page b/platform-demos/C/checkbutton.js.page
index ecc7397..9a0ebfd 100644
--- a/platform-demos/C/checkbutton.js.page
+++ b/platform-demos/C/checkbutton.js.page
@@ -24,7 +24,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -36,7 +36,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const CheckButtonExample = new Lang.Class({
Name: 'CheckButton Example',
@@ -63,7 +63,7 @@ const CheckButtonExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the CheckButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -81,7 +81,7 @@ const CheckButtonExample = new Lang.Class({
<section id="button">
<title>Creating the checkbutton</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the check button
this._button = new Gtk.CheckButton ({label: "Show Title"});
this._window.add (this._button);
@@ -93,7 +93,7 @@ const CheckButtonExample = new Lang.Class({
this._button.connect ("toggled", Lang.bind (this, this._toggledCB));
]]></code>
<p>This code creates the checkbutton itself. The label next to the checkbutton is created by giving the checkbutton the "label" property and assigning a string value to it. Since this checkbutton toggles whether the window title is on or off, and the window title will be on to start with, we want the box to be checked by default. Whenever the user checks or unchecks the box, we call the ._toggledCB function.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Show the window and all child widgets
this._window.show_all();
},
@@ -103,7 +103,7 @@ const CheckButtonExample = new Lang.Class({
<section id="function">
<title>Function which handles the checkbutton's toggling</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_toggledCB: function () {
// Make the window title appear or disappear when the checkbox is toggled
@@ -117,7 +117,7 @@ const CheckButtonExample = new Lang.Class({
});
]]></code>
<p>If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from off to on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active (checked) or not afterwards. A simple if / else statement which calls the checkbutton's get_active() method will work for this.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new CheckButtonExample ();
app.application.run (ARGV);
@@ -127,7 +127,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/checkbutton.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/checkbutton.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/combobox.js.page b/platform-demos/C/combobox.js.page
index 490b72a..51f1a66 100644
--- a/platform-demos/C/combobox.js.page
+++ b/platform-demos/C/combobox.js.page
@@ -29,7 +29,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const GObject = imports.gi.GObject;
@@ -41,7 +41,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const ComboBoxExample = new Lang.Class ({
Name: 'ComboBox Example',
@@ -66,7 +66,7 @@ const ComboBoxExample = new Lang.Class ({
},
]]></code>
<p>All the code for this sample goes in the ComboBoxExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function () {
@@ -83,7 +83,7 @@ const ComboBoxExample = new Lang.Class ({
<section id="liststore">
<title>Creating the ListStore</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the liststore to put our options in
this._listStore = new Gtk.ListStore();
this._listStore.set_column_types ([
@@ -99,7 +99,7 @@ const ComboBoxExample = new Lang.Class ({
</list>
<note style="tip"><p>You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your application's code, like we did in this example, if you want to be able to use GObject types.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// This array holds our list of options and their icons
let options = [{ name: "Select" },
{ name: "New", icon: Gtk.STOCK_NEW },
@@ -121,13 +121,13 @@ const ComboBoxExample = new Lang.Class ({
<section id="combobox">
<title>Creating the ComboBox</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the combobox
this._comboBox = new Gtk.ComboBox({
model: this._listStore});
]]></code>
<p>Each ComboBox has an underlying "model" it takes all its options from. You can use a TreeStore if you want to have a ComboBox with branching options. In this case, we're just using the ListStore we already created.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create some cellrenderers for the items in each column
let rendererPixbuf = new Gtk.CellRendererPixbuf();
let rendererText = new Gtk.CellRendererText();
@@ -144,7 +144,7 @@ const ComboBoxExample = new Lang.Class ({
<p>We use a CellRendererText to show the text, and a CellRendererPixbuf to show the icons. We can store the names of the icons' stock types as strings, but when we display them we need a CellRenderer that's designed for pictures.</p>
<note style="tip"><p>Just like with a TreeView, the "model" (in this case a ListStore) and the "view" (in this case our ComboBox) are separate. Because of that, we can do things like have the columns in one order in the ListStore, and then pack the CellRenderers that correspond to those columns into the ComboBox in a different order. We can even create a TreeView or other widget that shows the information in the ListStore in a different way, without it affecting our ComboBox.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Set the first row in the combobox to be active on startup
this._comboBox.set_active (0);
@@ -153,7 +153,7 @@ const ComboBoxExample = new Lang.Class ({
]]></code>
<p>We want the "Select" text to be the part people see at first, that gets them to click on the ComboBox. So we set it to be the active entry. We also connect the ComboBox's <file>changed</file> signal to a callback function, so that any time someone clicks on a new option something happens. In this case, we're just going to show a popup with a little haiku.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the combobox to the window
this._window.add (this._comboBox);
@@ -166,7 +166,7 @@ const ComboBoxExample = new Lang.Class ({
<section id="function">
<title>Function which handles your selection</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_selected: function () {
// The silly pseudohaiku that we'll use for our messagedialog
@@ -177,7 +177,7 @@ const ComboBoxExample = new Lang.Class ({
]]></code>
<p>We're going to create a pop-up <link xref="messagedialog.js">MessageDialog,</link> which shows you a silly haiku based on which distro you select. First, we create the array of haiku to use. Since the first string in our ComboBox is just the "Select" message, we make the first string in our array blank.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Which combobox item is active?
let activeItem = this._comboBox.get_active();
@@ -203,7 +203,7 @@ const ComboBoxExample = new Lang.Class ({
<note style="tip"><p>Other methods you can use include <file>get_active_id,</file> which returns the text ID assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string you selected.</p></note>
<p>After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_onDialogResponse: function () {
this._popUp.destroy ();
@@ -214,7 +214,7 @@ const ComboBoxExample = new Lang.Class ({
]]></code>
<p>Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new ComboBoxExample ();
app.application.run (ARGV);
@@ -224,7 +224,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/combobox.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/combobox.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/comboboxtext.js.page b/platform-demos/C/comboboxtext.js.page
index e4aa372..bb55dd7 100644
--- a/platform-demos/C/comboboxtext.js.page
+++ b/platform-demos/C/comboboxtext.js.page
@@ -26,7 +26,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gtk = imports.gi.Gtk;
@@ -37,7 +37,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const ComboBoxTextExample = new Lang.Class ({
Name: 'ComboBoxText Example',
@@ -62,7 +62,7 @@ const ComboBoxTextExample = new Lang.Class ({
},
]]></code>
<p>All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function () {
@@ -79,7 +79,7 @@ const ComboBoxTextExample = new Lang.Class ({
<section id="comboboxtext">
<title>Creating the ComboBoxText</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the combobox
this._comboBoxText = new Gtk.ComboBoxText();
@@ -96,7 +96,7 @@ const ComboBoxTextExample = new Lang.Class ({
<p>After we populate the ComboBoxText, we set its first entry to be active, so that we'll see the "Select distribution" line before we click on it. Then we connect its <file>changed</file> signal to the _onComboChanged function, so that it's called whenever you make a new selection from the drop-down menu.</p>
<note><p>If you'd like to add an entry to a ComboBoxText, you can use the <file>insert_text</file> method. And if you'd rather use a text string as an ID for each entry than rely on numbers alone, you can use the <file>append</file> and <file>insert</file> methods. See the links at the bottom of this tutorial for the details of how to use them.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the combobox to the window
this._window.add (this._comboBoxText);
@@ -109,7 +109,7 @@ const ComboBoxTextExample = new Lang.Class ({
<section id="function">
<title>Function which handles your selection</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_onComboChanged: function () {
// The responses we'll use for our messagedialog
@@ -120,7 +120,7 @@ const ComboBoxTextExample = new Lang.Class ({
]]></code>
<p>We're going to create a pop-up <link xref="messagedialog.js">MessageDialog,</link> which shows you a message based on which distro you select. First, we create the array of responses to use. Since the first string in our ComboBoxText is just the "Select distribution" message, we make the first string in our array blank.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Which combobox item is active?
let activeItem = this._comboBoxText.get_active();
@@ -146,7 +146,7 @@ const ComboBoxTextExample = new Lang.Class ({
<note><p>Other methods you can use include <file>get_active_id,</file> which returns the text ID assigned by <file>append,</file> and <file>get_active_text,</file> which returns the full text of the string you selected.</p></note>
<p>After we create the MessageDialog, we connect its response signal to the _onDialogResponse function, then tell it to show itself.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_onDialogResponse: function () {
this._popUp.destroy ();
@@ -157,7 +157,7 @@ const ComboBoxTextExample = new Lang.Class ({
]]></code>
<p>Since the only button the MessageDialog has is an OK button, we don't need to test its response_id to see which button was clicked. All we do here is destroy the popup.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new ComboBoxTextExample ();
app.application.run (ARGV);
@@ -167,7 +167,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/comboboxtext.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/comboboxtext.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/dialog.js.page b/platform-demos/C/dialog.js.page
index b54a0e3..77c8773 100644
--- a/platform-demos/C/dialog.js.page
+++ b/platform-demos/C/dialog.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/dialog.png"/>
<p>A customizable popup window, which has a content area and an action area. This example dialog's content area contains a short message, and its action area contains a button which dismisses the dialog.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/dialog.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/dialog.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/entry.js.page b/platform-demos/C/entry.js.page
index 0a19ec3..d7506e4 100644
--- a/platform-demos/C/entry.js.page
+++ b/platform-demos/C/entry.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/entry.png"/>
<p>This application greets you by name through a pop-up window.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/entry.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/entry.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/gmenu.js.page b/platform-demos/C/gmenu.js.page
index 3e9586d..46be1c6 100644
--- a/platform-demos/C/gmenu.js.page
+++ b/platform-demos/C/gmenu.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/gmenu.js.png"/>
<p>A GtkApplication with a simple GMenu and SimpleActions</p>
- <code mime="text/javascript" style="numbered"><xi:include href="samples/gmenu.js" parse="text"><xi:fallback/></xi:include></code>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/gmenu.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/grid.js.page b/platform-demos/C/grid.js.page
index afa209f..fb3e9f0 100644
--- a/platform-demos/C/grid.js.page
+++ b/platform-demos/C/grid.js.page
@@ -24,7 +24,7 @@
<media type="image" mime="image/png" src="media/grid.png"/>
<p>A button widget connected to a progress bar, inside of a grid which handles the layout.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/grid.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/grid.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/grid_with_entry.js.page b/platform-demos/C/grid_with_entry.js.page
index e717de8..c66afea 100644
--- a/platform-demos/C/grid_with_entry.js.page
+++ b/platform-demos/C/grid_with_entry.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/grid_with_entry.png"/>
<p>This an entry widget. An entry widget is a container that you can type in to. </p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs
Gtk = imports.gi.Gtk;
Gtk.init(null, 0);
diff --git a/platform-demos/C/guitar-tuner.js.page b/platform-demos/C/guitar-tuner.js.page
index 65000e1..eab6809 100644
--- a/platform-demos/C/guitar-tuner.js.page
+++ b/platform-demos/C/guitar-tuner.js.page
@@ -44,14 +44,14 @@
</section>
<section id="script">
<title>Script for running the application</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs]]></code>
<p> This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
</p>
</section>
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var Gtk = imports.gi.Gtk;
var Gst = imports.gi.Gst;
@@ -60,7 +60,7 @@ const Mainloop = imports.mainloop;]]></code>
</section>
<section id="mainwindow">
<title>Creating the main window for the application</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
Gtk.init(null, 0);
Gst.init(null, 0);
@@ -74,7 +74,7 @@ Gtk.main();]]></code>
</section>
<section id="buttons">
<title>Buttons for the tunes</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var guitar_box = new Gtk.ButtonBox ({orientation: Gtk.Orientation.VERTICAL, spacing: 10});
var E = new Gtk.Button({label: "E"});
@@ -99,7 +99,7 @@ guitar_box.show_all();]]></code>
</section>
<section id="playSound">
<title>Making the sounds with GStreamer</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var frequencies = {E: 369.23, A: 440, D: 587.33, G: 783.99, B: 987.77, e: 1318.5}
function playSound(frequency){
@@ -123,7 +123,7 @@ function playSound(frequency){
</section>
<section id="connecting">
<title>Connecting buttons to playSound</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
E.connect("clicked", function() {
playSound(frequencies.E);
});
@@ -147,7 +147,7 @@ e.connect("clicked", function(){
<section id="guitarjs">
<title>The whole program</title>
<p>So this is what all the parts combined looks like. When running this code, you should be able to tune your guitar(if you have correctly calibrated speakers).</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs
var Gtk = imports.gi.Gtk;
var Gst = imports.gi.Gst;
diff --git a/platform-demos/C/helloWorld.js.page b/platform-demos/C/helloWorld.js.page
index 538c31e..9f89355 100644
--- a/platform-demos/C/helloWorld.js.page
+++ b/platform-demos/C/helloWorld.js.page
@@ -43,19 +43,19 @@
<section id="script"><title>Script for running the application</title>
<p>This needs to be the first line of your script:</p>
- <code mime="text/javascript"><![CDATA[#!/usr/bin/gjs]]></code>
+ <code mime="application/javascript"><![CDATA[#!/usr/bin/gjs]]></code>
<p>It tells the script to use <link href="https://live.gnome.org/Gjs/";>Gjs</link>. Gjs is a JavaScript binding for GNOME.</p>
</section>
<section id="imports"><title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[const Lang = imports.lang;
+ <code mime="application/javascript"><![CDATA[const Lang = imports.lang;
const Gtk = imports.gi.Gtk;]]></code>
<p>In order for our script to work with GNOME, we need to import GNOME libraries via GObject Introspection. Here we import the language bindings and GTK+, the library which contains the graphical widgets used to make GNOME applications. </p>
</section>
<section id="mainwindow"><title>Creating the main window for the application</title>
- <code mime="text/javascript"><![CDATA[const Application = new Lang.Class({
+ <code mime="application/javascript"><![CDATA[const Application = new Lang.Class({
//A Class requires an explicit Name parameter. This is the Class Name.
Name: 'Application',
@@ -94,14 +94,14 @@ const Gtk = imports.gi.Gtk;]]></code>
</section>
<section id="label"><title>Label for the window</title>
- <code mime="text/javascript"><![CDATA[// Add a label widget to your window
+ <code mime="application/javascript"><![CDATA[// Add a label widget to your window
this.label = new Gtk.Label({ label: "Hello World" });
this._window.add(this.label);
this._window.set_default_size(200, 200);]]></code>
<p>A text label is one of the GTK+ widgets we can use, on account of having imported the GTK+ library. To use it, we create a new variable called label, and assign it a new Gtk.Label. Then we give it properties inside the curly braces {}. In this case, we're setting the text that the label will hold. Finally, we create and run the application:</p>
- <code mime="text/javascript"><![CDATA[//run the application
+ <code mime="application/javascript"><![CDATA[//run the application
let app = new Application();
app.application.run(ARGV);]]></code>
@@ -111,7 +111,7 @@ app.application.run(ARGV);]]></code>
<section id="js"><title>helloWorld.js</title>
<p>The complete file:</p>
- <code mime="text/javascript" style="numbered"><xi:include href="samples/helloWorld.js" parse="text"><xi:fallback/></xi:include></code>
+ <code mime="application/javascript" style="numbered"><xi:include href="samples/helloWorld.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="terminal"><title>Running the application from terminal</title>
diff --git a/platform-demos/C/hellognome.js.page b/platform-demos/C/hellognome.js.page
index af8f3f3..a6475e3 100644
--- a/platform-demos/C/hellognome.js.page
+++ b/platform-demos/C/hellognome.js.page
@@ -28,14 +28,14 @@
<title>Let's start with a web page</title>
<p>Here's some basic HTML, CSS, and JavaScript code. Does this look familiar?</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>Hello, GNOME!</title>
<!-- Use JavaScript to show a greeting when someone clicks the button -->
- <script type="text/javascript">
+ <script type="application/javascript">
function greeting () {
document.getElementById ("greeting").innerHTML = ("O hai!");
}
@@ -71,11 +71,11 @@
<title>Creating a GNOME window to frame our web app</title>
<p>First, we need to tell GNOME that this is a JavaScript application, which uses gjs. Gjs is GNOME's way of turning your JavaScript code into instructions it understands, so this line always has to go at the start of your applications.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
]]></code>
<p>After that, we need to tell GNOME which libraries we want to import.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Lang = imports.lang;
@@ -89,13 +89,13 @@ const Webkit = imports.gi.WebKit;
</steps>
<p>Now we create the application itself:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const HelloGNOME = new Lang.Class ({
Name: 'Hello GNOME',
]]></code>
<p>This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our whole application is a class called HelloGNOME. And as you can see, we've given it a property that says what its name is.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the application itself
_init: function () {
this.application = new Gtk.Application ();
@@ -125,7 +125,7 @@ const HelloGNOME = new Lang.Class ({
<title>Designing our window's UI</title>
<p>In the _buildUI function, we're going to tell GNOME about our window and the things inside it, one at a time. After that, we're going to connect everything together and put it all on display.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function () {
@@ -139,7 +139,7 @@ const HelloGNOME = new Lang.Class ({
]]></code>
<p>The first object we create is an ApplicationWindow. It needs a title to go in the title bar, and its application property needs to be the application that we created, above. Beyond that, there are various ways of customizing how it looks, which the <link xref="GtkApplicationWindow.js">ApplicationWindow</link> reference page will go into more detail about. As you can see here, we gave it a default height and width (measured in pixels), and told GNOME we want our window to appear in the center of the screen.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a webview to show the web app
this._webView = new Webkit.WebView ();
@@ -149,7 +149,7 @@ const HelloGNOME = new Lang.Class ({
]]></code>
<p>Remember how we imported Webkit right at the start? Here we're creating a new instance of a Webkit class called a WebView, which is more or less a browser window you can put inside of your app. After that, we then give it the URI that we want it to load when the application starts up.</p>
<p>We <em>could</em> just give it a web URI, like <link href="http://gnome.org";>http://gnome.org</link>. Instead, here we use a couple of GLib helper functions to tell the WebView where our <file>hellognome.html</file> file is. GLib.get_current_dir returns the directory that our app's running in, and GLib.filename_to_uri turns our file's path and filename into a URI that the WebView's load_uri function understands. (filename_to_uri's second parameter should be null unless you know what it's used for and have a reason for changing it.)</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Put the webview into the window
this._window.add (this._webView);
@@ -160,7 +160,7 @@ const HelloGNOME = new Lang.Class ({
});
]]></code>
<p>Each window can hold one, and only one, widget. Normally, we'd use a container widget like a <link xref="grid.js">Grid</link> to put multiple widgets into, then use the window's add function to add the Grid to it. Here, we just need the WebView, so that's all we add to the window. After that, as the last part of the _buildUI function that creates our window, we tell the window to show itself and its contents.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new HelloGNOME ();
app.application.run (ARGV);
@@ -191,6 +191,6 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/hellognome.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/hellognome.js" parse="text"><xi:fallback/></xi:include></code>
</section>
</page>
diff --git a/platform-demos/C/image-viewer.js.page b/platform-demos/C/image-viewer.js.page
index e1353ff..7fb0e2a 100644
--- a/platform-demos/C/image-viewer.js.page
+++ b/platform-demos/C/image-viewer.js.page
@@ -61,14 +61,14 @@
<section id="js">
<title>JavaScript basics: Hello World</title>
<p>Before we start writing the image viewer, let's find out more about the way JavaScript is used in GNOME. Of course, your very first contact with any programming language should be the Hello World program which can already be found in <file>main.js</file>:</p>
- <code mime="text/javascript">print ("Hello world!");</code>
+ <code mime="application/javascript">print ("Hello world!");</code>
<p>This should look quite natural if you're familiar with almost any other programming language. The function <code>print</code> is called with the argument <code>"Hello world!"</code>, which will be printed on the screen. Note that each line of code ends with a semicolon.</p>
</section>
<section id="classes">
<title>Classes in JavaScript</title>
<p>This is the standard way to define a class in JavaScript:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
function MyClass () {
this._init ();
}
@@ -112,7 +112,7 @@ MyClass.prototype = {
</steps>
<p>Now that MyClass has been defined, we can play with it:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var o = new MyClass ();
o.aMethod ("Hello", "world");
o.propertyA = "Just changed its value!";
@@ -125,7 +125,7 @@ o.dumpProperties ();]]></code>
<section id="gtk">
<title>A first Gtk application</title>
<p>Let's see what a very basic Gtk application looks like in JavaScript:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
const Gtk = imports.gi.Gtk;
Gtk.init (null, null);
@@ -155,7 +155,7 @@ Gtk.main ();]]></code>
<section id="classes2">
<title>Adding classes</title>
<p>The proper way of doing Gtk programming is by using classes. Let's rewrite the simple code you just wrote using classes:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
const Gtk = imports.gi.Gtk;
function ImageViewer () {
@@ -180,7 +180,7 @@ Gtk.main ();]]></code>
<section id="signals">
<title>Signals</title>
<p>Signals are one of the key concepts in Gtk programming. Whenever something happens to an object, it emits a signal; for example, when a button is clicked it gives off the <code>clicked</code> signal. If you want your program to do something when that event occurs, you must connect a function (a "signal handler") to that signal. Here's an example:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
function button_clicked () {
print ("you clicked me!");
}
@@ -188,13 +188,13 @@ var b = new Gtk.Button ({label:"Click me"});
b.connect ("clicked", button_clicked);]]></code>
<p>The last two lines create a <code>Gtk.Button</code> called <code>b</code> and connect its <code>clicked</code> signal to the <code>button_clicked</code> function, which is defined above. Every time the button is clicked, the code in the <code>button_clicked</code> function will be executed. It just prints a message here.</p>
<p>The syntax for connecting any signal to a function is:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
object.connect (<signal_name>, <function_to_be_called>);]]></code>
<p>You can find signal definitions for any object in the <link href="http://library.gnome.org/devel/gtk/stable/ch01.html";>GTK class reference</link>.</p>
<note>
<p>You can simplify the code by making use of an inline function definition:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
b.connect ("clicked", function () { print ("you clicked me!"); });]]></code>
</note>
@@ -204,7 +204,7 @@ b.connect ("clicked", function () { print ("you clicked me!"); });]]></code>
<title>Closing the window</title>
<p>When you close a Gtk window it's not really closed, it's hidden. This allows you to keep the window around (which is useful if you want to ask the user if they really want to close the window, for example).</p>
<p>In our case, we really do just want to close the window. The simplest way of doing this is by connecting the <code>hide</code> signal of the GtkWindow object to a function that closes the application. Go back to the <file>image-viewer.js</file> file and add the following code to the <code>_init</code> method, on the line above <code>this.window.show</code>:</p>
- <code mime="text/javascript" style="numbered">this.window.connect ("hide", Gtk.main_quit);</code>
+ <code mime="application/javascript" style="numbered">this.window.connect ("hide", Gtk.main_quit);</code>
<p>This connects the <code>hide</code> signal of the window to Gtk's <code>main_quit</code> function, which ends the execution of the Gtk main loop. Once the main loop finishes, the function <code>Gtk.main</code> returns. Our program would continue to run any code written after the <code>Gtk.main ();</code> line, but since we don't have any code after that point, the program just ends.</p>
</section>
@@ -216,7 +216,7 @@ b.connect ("clicked", function () { print ("you clicked me!"); });]]></code>
<p>There is a graphical user interface designer called <app>Glade</app> integrated in <app>Anjuta</app> which makes UI design really easy. For this simple example, however, we will code everything manually.</p>
</note>
<p>Let's add the box and widgets to the window. Insert the following code into the <code>_init</code> method, immediately above the <code>this.window.show</code> line:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var main_box = new Gtk.Box ({orientation: Gtk.Orientation.VERTICAL, spacing: 0});
this.window.add (main_box);]]></code>
<p>The first line creates a <code>Gtk.Box</code> called <code>main_box</code> and sets two of its properties: the <code>orientation</code> is set to vertical (so widgets are arranged in a column), and the <code>spacing</code> between the widgets is set to 0 pixels. The next line then adds the newly-created <code>Gtk.Box</code> to the window.</p>
@@ -226,7 +226,7 @@ this.window.add (main_box);]]></code>
<section id="packing2">
<title>Packing: Adding widgets to the container</title>
<p>To add some widgets to the <code>Gtk.Box</code>, insert the following code directly below the <code>this.window.add (main_box)</code> line:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
this.image = new Gtk.Image ();
main_box.pack_start (this.image, true, true, 0);]]></code>
<p>The first line creates a new <code>Gtk.Image</code> called <code>image</code>, which will be used to display an image file. Then, the image widget is added (<em>packed</em>) into the <code>main_box</code> container using <code>Gtk.Box</code>'s <link href="http://library.gnome.org/devel/gtk/stable/GtkBox.html#gtk-box-pack-start";><code>pack_start</code></link> method.</p>
@@ -234,7 +234,7 @@ main_box.pack_start (this.image, true, true, 0);]]></code>
<p>Gtk containers (and widgets) dynamically expand to fill the available space, if you let them. You don't position widgets by giving them a precise x,y-coordinate location in the window; rather, they are positioned relative to one another. This makes handling window resizing much easier, and widgets should automatically take a sensible size in most situations.</p>
<p>Also note how the widgets are organized in a hierarchy. Once packed in the <code>Gtk.Box</code>, the <code>Gtk.Image</code> is considered a <em>child</em> of the <code>Gtk.Box</code>. This allows you to treat all of the children of a widget as a group; for example, you could hide the <code>Gtk.Box</code>, which would also hide all of its children at the same time.</p>
<p>Now insert these two lines, below the two you just added:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var open_button = new Gtk.Button ({label: "Open a picture..."});
main_box.pack_start (open_button, false, false, 0);]]></code>
<p>These lines are similar to the first two, but this time they create a <code>Gtk.Button</code> and add it to <code>main_box</code>. Notice that we are setting the <code>expand</code> argument (the second one) to <code>false</code> here, whereas it was set to <code>true</code> for the <code>Gtk.Image</code>. This will cause the image to take up all available space and the button to take only the space it needs. When you maximize the window, the button size will remain the same, but the image size will increase, taking up all of the rest of the window.</p>
@@ -247,16 +247,16 @@ main_box.pack_start (open_button, false, false, 0);]]></code>
<title>Loading the image: Connecting to the button's <code>clicked</code> signal</title>
<p>When the user clicks on the <gui>Open</gui> button, a dialog should appear so that the user can choose a picture. Once chosen, the picture should be loaded and shown in the image widget.</p>
<p>The first step is to connect the <code>clicked</code> signal of the button to a signal handler function, which we call <code>_openClicked</code>. Put this code immediately after the <code>var open_button = new Gtk.Button</code> line where the button was created:</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
open_button.connect ("clicked", Lang.bind (this, this._openClicked));]]></code>
<p>We are using the <em>Lang</em> JavaScript helper here. It allows us to connect a <em>class method</em> to the signal, rather than a plain function (without a class) which we had used before for the window's <code>hide</code> signal. Don't worry about this for now, it's just a technical detail. For it to work, you also need to put the following line at the top of the file:</p>
- <code mime="text/javascript">const Lang = imports.lang;</code>
+ <code mime="application/javascript">const Lang = imports.lang;</code>
</section>
<section id="loading3">
<title>Loading the image: Writing the signal's callback</title>
<p>Now we can create the <code>_openClicked()</code> method. Insert the following into the <code>ImageViewer.prototype</code> code block, after the <code>_init</code> method (and not forgetting the comma):</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
_openClicked: function () {
var chooser = new Gtk.FileChooserDialog ({title: "Select an image",
action: Gtk.FileChooserAction.OPEN,
diff --git a/platform-demos/C/image.js.page b/platform-demos/C/image.js.page
index 727ad26..858a2c2 100644
--- a/platform-demos/C/image.js.page
+++ b/platform-demos/C/image.js.page
@@ -22,7 +22,7 @@
If the image file isn't loaded successfully, the image will contain a "broken image" icon. The <file>filename.png</file> needs to be in the current directory for this code to work. Use your favorite picture!
</p></note>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/image.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/image.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/label.js.page b/platform-demos/C/label.js.page
index 25342bf..7c84963 100644
--- a/platform-demos/C/label.js.page
+++ b/platform-demos/C/label.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/label.png"/>
<p>A label displaying a friendly message.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/label.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/label.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/linkbutton.js.page b/platform-demos/C/linkbutton.js.page
index dfdc5ec..f841bc1 100644
--- a/platform-demos/C/linkbutton.js.page
+++ b/platform-demos/C/linkbutton.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/linkbutton.png"/>
<p>A button that links to live.gnome.org.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/linkbutton.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/linkbutton.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/menubutton.js.page b/platform-demos/C/menubutton.js.page
index cf932df..d1e3534 100644
--- a/platform-demos/C/menubutton.js.page
+++ b/platform-demos/C/menubutton.js.page
@@ -23,7 +23,7 @@
The GtkMenuButton widget can hold any valid child widget. That is, it can hold almost any other standard GtkWidget. The most commonly used child is the provided GtkArrow.</p>
<note><p>You need to be running GNOME 3.6 for the MenuButton to work.</p></note>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/menubutton.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/menubutton.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/messagedialog.js.page b/platform-demos/C/messagedialog.js.page
index 2bb1281..c26bc9a 100644
--- a/platform-demos/C/messagedialog.js.page
+++ b/platform-demos/C/messagedialog.js.page
@@ -27,7 +27,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -39,7 +39,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const MessageDialogExample = new Lang.Class ({
Name: 'MessageDialog Example',
@@ -67,7 +67,7 @@ const MessageDialogExample = new Lang.Class ({
]]></code>
<p>All the code for this sample goes in the MessageDialogExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
<note><p>Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function () {
@@ -81,7 +81,7 @@ const MessageDialogExample = new Lang.Class ({
]]></code>
<p>The _buildUI function is where we put all the code to create the application's user interface. The first step is creating a new <link xref="GtkApplicationWindow.js">Gtk.ApplicationWindow</link> to put all our widgets into.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a silly warning message and add it to the window
this.warningLabel = new Gtk.Label ({
label: "This application goes boom! (Not really.)"});
@@ -92,7 +92,7 @@ const MessageDialogExample = new Lang.Class ({
<section id="menu">
<title>Creating the application's menu</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application menu, including the button that calls the dialog
_initMenus: function() {
let menu = new Gio.Menu();
@@ -122,7 +122,7 @@ const MessageDialogExample = new Lang.Class ({
<section id="messagedialog">
<title>Creating the MessageDialog</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_showMessageDialog: function () {
// Create a modal MessageDialog whose parent is the window
@@ -145,7 +145,7 @@ const MessageDialogExample = new Lang.Class ({
</list>
</note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Callback function (aka signal handler) for the response signal
_response_cb: function (messagedialog, response_id) {
@@ -170,7 +170,7 @@ const MessageDialogExample = new Lang.Class ({
]]></code>
<p>This function takes two parameters, the MessageDialog and its response_id, both of which are automatically supplied (you don't have to manually pass them to it for it to work). Here we use a simple switch to change the "warning label"'s text, depending on which option you select. The DELETE_EVENT occurs if you press Escape to cancel the MessageDialog, instead of clicking OK or Cancel. Whatever you select, the popup is destroyed afterwards.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new MessageDialogExample ();
app.application.run (ARGV);
@@ -180,7 +180,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/messagedialog.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/messagedialog.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/progressbar.js.page b/platform-demos/C/progressbar.js.page
index c8f99f2..3e390ce 100644
--- a/platform-demos/C/progressbar.js.page
+++ b/platform-demos/C/progressbar.js.page
@@ -29,7 +29,7 @@
</media>
<p>This ProgressBar is stopped and started by pressing any key.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/progressbar.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/progressbar.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/radiobutton.js.page b/platform-demos/C/radiobutton.js.page
index 02e0b65..9e6bbf0 100644
--- a/platform-demos/C/radiobutton.js.page
+++ b/platform-demos/C/radiobutton.js.page
@@ -24,7 +24,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -36,7 +36,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const RadioButtonExample = new Lang.Class({
Name: 'RadioButton Example',
@@ -63,7 +63,7 @@ const RadioButtonExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -79,14 +79,14 @@ const RadioButtonExample = new Lang.Class({
<section id="button">
<title>Creating the radiobuttons</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a label for the first group of buttons
this._placeLabel = new Gtk.Label ({label: "Where would you like to travel to?"});
]]></code>
<p>We use a <link xref="label.js">Gtk.Label</link> to set each group of RadioButtons apart. Nothing will stop you from putting RadioButtons from all different groups wherever you want, so if you want people to know which ones go together you need to organize things accordingly.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create three radio buttons three different ways
this._place1 = new Gtk.RadioButton ({label: "The Beach"});
@@ -100,7 +100,7 @@ const RadioButtonExample = new Lang.Class({
<p>Here are three different ways to create RadioButtons. The first is the usual way, where we create a new Gtk.RadioButton and assign its properties at the same time. The second and third use functions which automatically handle some of the properties; new_from_widget takes a single argument, the RadioButton that you want to put this new one in the same group as. Meanwhile, new_with_label_from_widget takes that and the RadioButton's label at the same time.</p>
<p>The first RadioButton in a group is the one that's selected by default. Try uncommenting the last line in this sample code to see how you can set a different one to be the default selection.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a label for the second group of buttons
this._thingLabel = new Gtk.Label ({label: "And what would you like to bring?" });
@@ -115,7 +115,7 @@ const RadioButtonExample = new Lang.Class({
<section id="ui">
<title>Creating the rest of the user interface</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a stock OK button
this._okButton = new Gtk.Button ({
label: 'gtk-ok',
@@ -128,7 +128,7 @@ const RadioButtonExample = new Lang.Class({
<p>This code creates a <link xref="button.js">Gtk.Button</link> and binds it to a function which will show people a silly message when they click OK, depending on which RadioButtons were selected.</p>
<p>To make sure the button's "OK" label shows up properly in every language that GNOME is translated into, remember to use one of Gtk's <link href="http://developer.gnome.org/gtk/2.24/gtk-Stock-Items.html";>stock button types.</link></p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid to put the "place" items in
this._places = new Gtk.Grid ();
@@ -165,7 +165,7 @@ const RadioButtonExample = new Lang.Class({
<p>We use a separate <link xref="grid.js">Gtk.Grid</link> to organize each group of radio buttons. This way we can change the layout with less fuss later on. The second Grid has a margin on top, to visually separate the two sets of choices.</p>
<p>After we've organized them, we put them into a third, master Grid, along with the OK button. Then we attach that to the window.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Show the window and all child widgets
this._window.show_all();
},
@@ -177,7 +177,7 @@ const RadioButtonExample = new Lang.Class({
<section id="function">
<title>Function which handles your selection</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_okClicked: function () {
// Create a popup that shows a silly message
@@ -198,7 +198,7 @@ const RadioButtonExample = new Lang.Class({
]]></code>
<p>When you click OK, a <link xref="messagedialog.js">Gtk.MessageDialog</link> appears. This function creates and displays the popup window, then binds its OK button to a function that closes it. What text appears in the popup depends on the _messageText() function, which returns a different value depending on which set of options you chose.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_messageText: function() {
// Create a silly message for the popup depending on what you selected
@@ -244,7 +244,7 @@ const RadioButtonExample = new Lang.Class({
]]></code>
<p>The get_active() method is how we can tell which RadioButton's pressed in. This function returns a different silly message depending on which set of buttons was pressed. Its return value is used as the MessageDialog's text property.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_clearTravelPopUp: function () {
this._travel.destroy();
@@ -255,7 +255,7 @@ const RadioButtonExample = new Lang.Class({
]]></code>
<p>This function is called when the MessageDialog's OK button is pressed. It simply makes the popup go away.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new RadioButtonExample ();
app.application.run (ARGV);
@@ -265,7 +265,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/radiobutton.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/radiobutton.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/record-collection.js.page b/platform-demos/C/record-collection.js.page
index 039f606..aa2f07b 100644
--- a/platform-demos/C/record-collection.js.page
+++ b/platform-demos/C/record-collection.js.page
@@ -68,7 +68,7 @@
<section id="start">
<title>Starting the fun</title>
<p>Let's start by examining the skeleton of the program:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
const GLib = imports.gi.GLib;
const Gtk = imports.gi.Gtk;
const Gda = imports.gi.Gda;
@@ -102,7 +102,7 @@ Gtk.main ();]]></code>
<section id="design">
<title>Designing the application</title>
<p>Let's take a look at the <code>setupWindow</code> method. It is responsible for creating the User Interface (UI). As UI is not our focus, we will explain only the relevant parts.</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
setupWindow: function () {
this.window = new Gtk.Window ({title: "Data Access Demo", height_request: 350});
this.window.connect ("delete-event", function () {
@@ -164,7 +164,7 @@ Gtk.main ();]]></code>
<p>
The code which makes the connection to the database is in the <code>setupDatabase</code> method below:
</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
setupDatabase: function () {
this.connection = new Gda.Connection ({provider: Gda.Config.get_provider("SQLite"),
cnc_string:"DB_DIR=" + GLib.get_home_dir () + ";DB_NAME=gnome_demo"});
@@ -207,7 +207,7 @@ Gtk.main ();]]></code>
<p>
After connecting to the database, our demo's constructor calls the <code>selectData</code> method. It is responsible for getting all the records in the table and showing them on the <code>TextView</code> widget. Let's take a look at it:
</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
selectData: function () {
var dm = Gda.execute_select_command (this.connection, "select * from demo order by 1, 2");
var iter = dm.create_iter ();
@@ -246,7 +246,7 @@ Gtk.main ();]]></code>
<p>
OK, we know how to connect to a database and how to select rows from a table. Now it's time to do an <code>INSERT</code> on the table. Do you remember above, in the method <code>setupWindow</code> we connected the <gui>Insert</gui> button's <code>clicked</code> signal to the method <code>_insertClicked</code>? Let's see the implementation of this method.
</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
_insertClicked: function () {
if (!this._validateFields ())
return;
diff --git a/platform-demos/C/scale.js.page b/platform-demos/C/scale.js.page
index 71f520f..9db1185 100644
--- a/platform-demos/C/scale.js.page
+++ b/platform-demos/C/scale.js.page
@@ -24,7 +24,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -36,7 +36,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const ScaleExample = new Lang.Class({
Name: 'Scale Example',
@@ -62,7 +62,7 @@ const ScaleExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the ScaleExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -78,7 +78,7 @@ const ScaleExample = new Lang.Class({
<section id="button">
<title>Creating the scales</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the horizontal scale
this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);
this._hScale.set_valign (Gtk.Align.START);
@@ -90,7 +90,7 @@ const ScaleExample = new Lang.Class({
<p>The new_with_range method is one way to create a new Scale widget. The parameters it takes are a <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Orientation.html";>Gtk.Orientation</link>, the minimum value, the maximum value, and the increment for a single step. After that we use the Scale's methods to set its starting value, and how many decimal places it runs to. We also set its vertical alignment in this case, to control where it appears in the window.</p>
<p>We can use the set_draw_value method to tell it whether or not to show the number next to the sliding scale. It's commented out in this example.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a master adjustment to use for the vertical (or any other) scale
this._adjustment = new Gtk.Adjustment ({
value: 95,
@@ -102,7 +102,7 @@ const ScaleExample = new Lang.Class({
<p>An Adjustment is an object we can use to simplify things when creating a new Scale. The Adjustment's "value" property is what the Scale's default value is, while "upper" and "lower" make the high and low ends of the numerical range. Meanwhile, the increment values show how much the slider moves when you do things like click on it.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a vertical scale using the adjustment we just made
this._vScale = new Gtk.Scale ({
orientation: Gtk.Orientation.VERTICAL,
@@ -114,7 +114,7 @@ const ScaleExample = new Lang.Class({
<p>Here we create a new Scale object using _adjustment as its "adjustment" property. This is a great shortcut. We still have to tell it to round off the decimal place, though. Note that the draw_value property is commented out; this is how you tell it not to show the number next to the Scale when you're creating one this way.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the label that shows the product of the two values
this._product = (this._hScale.get_value() * this._vScale.get_value());
this._label = new Gtk.Label ({
@@ -131,7 +131,7 @@ const ScaleExample = new Lang.Class({
<p>We can use the get_value method to find out the numerical value a Scale is set at. We can then do whatever we want with it, including multiply the two Scales' values together and have a <link xref="label.js">Label</link> show us the product. We set the label's text to wrap around, because we're having it display a silly message too.</p>
<p>After we create the Label, we connect the two Scales' "value-changed" signals to _recalc, a function that will recalculate the number of penguins on the iceberg and come up with a new message.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid to arrange things in
this._UIGrid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
@@ -145,7 +145,7 @@ const ScaleExample = new Lang.Class({
this._UIGrid.attach (this._vScale, 1, 0, 1, 1);
]]></code>
<p>Here we create a <link xref="grid.js">Grid</link> to put everything in, then attach all our widgets to it. Note that here and on some of the widgets themselves we're using margins to keep things neatly spaced.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the grid to the window
this._window.add (this._UIGrid);
@@ -159,7 +159,7 @@ const ScaleExample = new Lang.Class({
<section id="scales-handler">
<title>Function which handles the scales' values changing</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_recalc: function() {
// Figure out what the product of the two scales' values is
@@ -189,7 +189,7 @@ const ScaleExample = new Lang.Class({
]]></code>
<p>Remember, we can get a Scale's value using its get_value method. Here we simply recalculate what the product of the two values is after one of the Scales is moved, add in a silly message depending on how many penguins are left, and change the wording on _label to show the new number and message.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new ScaleExample ();
app.application.run (ARGV);
@@ -199,7 +199,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/scale.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/scale.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/spinbutton.js.page b/platform-demos/C/spinbutton.js.page
index 8597338..b850022 100644
--- a/platform-demos/C/spinbutton.js.page
+++ b/platform-demos/C/spinbutton.js.page
@@ -27,7 +27,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -39,7 +39,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const SpinButtonExample = new Lang.Class({
Name: 'SpinButton Example',
@@ -65,7 +65,7 @@ const SpinButtonExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the SpinButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -81,7 +81,7 @@ const SpinButtonExample = new Lang.Class({
<section id="spinbutton">
<title>Creating the SpinButtons</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the first spinbutton using a function
this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);
this._kittens.connect ("value-changed", Lang.bind (this, this._newValue));
@@ -90,7 +90,7 @@ const SpinButtonExample = new Lang.Class({
<p>We can use the new_with_range function to create a new SpinButton quickly. Its first parameter is the SpinButton's starting value, its second is the maximum value, and its third is how much to increment it when the plus or minus buttons are pressed.</p>
<p>After we create the first SpinButton, we connect its value-changed signal to a function which handles what happens when the number inside either SpinButton changes.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create an adjustment to use for the second spinbutton
this._adjustment = new Gtk.Adjustment ({
value: 1,
@@ -115,7 +115,7 @@ const SpinButtonExample = new Lang.Class({
<section id="UI">
<title>Creating the rest of the UI</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the text labels to go with the spinbuttons
this._startLabel = new Gtk.Label ({ label: "There are " });
this._kittenLabel = new Gtk.Label ({ label: " kitten(s), and "});
@@ -126,7 +126,7 @@ const SpinButtonExample = new Lang.Class({
]]></code>
<p>We create each <link xref="label.js">Label</link> individually, and then string them together along with the SpinButtons. The last label needs to show the number of cans of tuna per kitten, so it has a variable in the middle, which corresponds to an equation that uses the SpinButtons' get_value functions to find out what they're set at. JavaScript's Math function's floor method is used to round the number of cans of tuna per kitten down to the nearest whole number.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid to put the spinbuttons and their labels in
this._spinGrid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
@@ -153,7 +153,7 @@ const SpinButtonExample = new Lang.Class({
<p>Here we use <link xref="grid.js">Grid</link> widgets to keep everything organized. One Grid holds the labels and SpinButtons in order, while the next puts that Grid on top and the final Label on the bottom.</p>
<p>There isn't a wrong way to organize things in Grids, so long as you like how it turns out. In this case, the top Grid has a margin on the bottom to keep it evenly spaced from the bottom Label, and the bottom Label is inside a separate Grid so it will be centered relative to the Labels and SpinButtons on the top.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the main grid to the window
this._window.add (this._mainGrid);
@@ -167,7 +167,7 @@ const SpinButtonExample = new Lang.Class({
<section id="spinbutton-handler">
<title>Function which handles the SpinButtons' numerical values being adjusted</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_newValue: function () {
// Update the label which shows how many cans there are per kitten
@@ -180,7 +180,7 @@ const SpinButtonExample = new Lang.Class({
]]></code>
<p>Here we update the perKitten variable based on the SpinButtons' new values, and use the set_label property to refresh what _lastLabel shows. Since both SpinButtons have their value-changed signal connected to this function, every time either of the numbers changes this function will update the Label.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new SpinButtonExample ();
app.application.run (ARGV);
@@ -190,7 +190,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/spinbutton.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/spinbutton.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/spinner.js.page b/platform-demos/C/spinner.js.page
index b0b1ada..1445f8a 100644
--- a/platform-demos/C/spinner.js.page
+++ b/platform-demos/C/spinner.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/spinner.png"/>
<p>This Spinner is stopped and started by pressing the spacebar.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/spinner.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/spinner.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/statusbar.js.page b/platform-demos/C/statusbar.js.page
index cf706af..21ead93 100644
--- a/platform-demos/C/statusbar.js.page
+++ b/platform-demos/C/statusbar.js.page
@@ -24,7 +24,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -36,7 +36,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const StatusbarExample = new Lang.Class({
Name: 'Statusbar Example',
@@ -63,7 +63,7 @@ const StatusbarExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the StatusbarExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -84,7 +84,7 @@ const StatusbarExample = new Lang.Class({
<section id="buttons">
<title>Creating the buttons</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the main button
this._clickMe = new Gtk.Button ({
label: "Click Me!" });
@@ -104,7 +104,7 @@ const StatusbarExample = new Lang.Class({
]]></code>
<p>This code creates the three <link href="button.js.page">Gtk.Buttons</link> we'll use to push a new message to the statusbar, pop the last one off, and clear all existing messages. The "back" and "clear" buttons are <link href="http://developer.gnome.org/gtk/2.24/gtk-Stock-Items.html";>stock buttons,</link> which are automatically translated into any language GNOME supports.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Put the buttons in a grid
this._grid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
@@ -125,7 +125,7 @@ const StatusbarExample = new Lang.Class({
<section id="statusbar">
<title>Creating the statusbar</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the statusbar
this._statusbar = new Gtk.Statusbar();
@@ -144,7 +144,7 @@ const StatusbarExample = new Lang.Class({
<p>Here we create the Gtk.Statusbar, and push a message to it to start off with. Then we give it its own narrow frame at the bottom of the window.</p>
<p>Every message needs to have a context id, which is an integer value you can get from the statusbar with the get_context_id() function. Its only parameter is the string value you use to describe that particular context id. Normally, you'll get a new context id for different kinds of messages, so that you can use the remove() function to remove a specific message and not just the most recent one on the stack. This is a simple example with only one kind of message, though, so we're just using one for everything.</p>
<p>We use the push() function to push a new message onto the stack. Its first parameter is the context id, and its second is the message.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Assemble the frames into the paned interface
this._panes.pack1 (this._topFrame, true, false);
this._panes.pack2 (this._barFrame, false, false);
@@ -161,7 +161,7 @@ const StatusbarExample = new Lang.Class({
<section id="functions">
<title>Functions for interacting with the statusbar</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_clicked: function() {
// Increment the number of clicks by 1
@@ -202,7 +202,7 @@ const StatusbarExample = new Lang.Class({
});
]]></code>
<p>Here we have functions which demonstrate pushing a message onto the stack, popping the top one off of it, and clearing all messages of a particular context id. The pop() function just takes one parameter, which is the context id for the type of message you want to pop off the most recent one of. The remove_all() function works the same way, except it removes all messages of that type from the stack.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new StatusbarExample ();
app.application.run (ARGV);
@@ -212,7 +212,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/statusbar.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/statusbar.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/switch.js.page b/platform-demos/C/switch.js.page
index 2fdcd2d..c5c9f6b 100644
--- a/platform-demos/C/switch.js.page
+++ b/platform-demos/C/switch.js.page
@@ -31,7 +31,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -43,7 +43,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const SwitchExample = new Lang.Class({
Name: 'Switch Example',
@@ -72,7 +72,7 @@ const SwitchExample = new Lang.Class({
]]></code>
<p>All the code for this sample goes in the SwitchExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
<note><p>Before we call _buildUI to create the window and the widgets inside it, we need to call _initMenus, which tells GNOME to create the menu. We can put the actual code for _initMenus after the code for _buildUI, since it doesn't matter what order we put them in so long as _initMenus is called first in _onStartup.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -88,14 +88,14 @@ const SwitchExample = new Lang.Class({
<section id="button">
<title>Creating the switches</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the image widget and set its default picture
this._image = new Gtk.Image ({file: "redfox.png"});
]]></code>
<p>We first create the <link xref="image.js">Image</link> that the switches will control. Remember that a file named <file>redfox.png</file> needs to be in the same directory as this application.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a label for the first switch
this._flyLabel = new Gtk.Label ({
label: "Make it fly",
@@ -118,7 +118,7 @@ const SwitchExample = new Lang.Class({
<p>We use a <link xref="label.js">Label</link> to mark each Switch, and give them a bit of a margin on the right so that they aren't crammed right next to the Switches. After that we create the Switches, and set them to be switched off by default.</p>
<p>The signal a switch sends out when it's flipped on or off is called notify::active. After we create each switch, we connect its notify::active signal to a function called _switchFlip. If you have multiple switches that each do something different, you might want to connect them to different functions, but here they're both used for the same thing: To control what picture's displayed by _image.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid for the labels and switches beneath the picture
this._UIGrid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
@@ -141,7 +141,7 @@ const SwitchExample = new Lang.Class({
this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);
]]></code>
<p>We create a <link xref="grid.js">Grid</link> for the Labels and Switches first, so that we can organize them in a 2x2 layout with a margin between it and the Image. Then we put that Grid into a larger 2x1 Grid that has the Image on top, and the Grid with the Labels and Switches on the bottom.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the master grid to the window
this._window.add (this._mainGrid);
@@ -155,7 +155,7 @@ const SwitchExample = new Lang.Class({
<section id="switch-handler">
<title>Function which handles the switches being flipped</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_switchFlip: function() {
// Change the picture depending on which switches are flipped
@@ -181,7 +181,7 @@ const SwitchExample = new Lang.Class({
<section id="about">
<title>Creating the AboutDialog</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_initMenus: function() {
// Build the application's menu so we can have an "About" button
@@ -209,7 +209,7 @@ const SwitchExample = new Lang.Class({
]]></code>
<p>The first step is building the <link xref="gmenu.js">GMenu</link> that the "About" button goes into. This is the menu that appears when you click the application's name in the upper-left corner of the screen, next to the Activities menu. Our menu only has two options in it: About, and Quit.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_showAbout: function () {
// String arrays of the names of the people involved in the project
@@ -245,7 +245,7 @@ const SwitchExample = new Lang.Class({
]]></code>
<p>An <link xref="aboutdialog.js">AboutDialog</link> has a lot of different things you can set, to credit everyone who worked on the application and leave a note to whomever reads it. In this case, the copyright section contains our note and credits the original photographers, while the artists section shows you a list of the photographers with links to the original photos when you click the Credits button. The web URLs put after their names in the array turn their names into clickable links in the Credits section.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new SwitchExample ();
app.application.run (ARGV);
@@ -255,7 +255,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/switch.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/switch.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/textview.js.page b/platform-demos/C/textview.js.page
index 48f21a1..037a588 100644
--- a/platform-demos/C/textview.js.page
+++ b/platform-demos/C/textview.js.page
@@ -34,7 +34,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gtk = imports.gi.Gtk;
@@ -45,7 +45,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const TextViewExample = new Lang.Class ({
Name: 'TextView Example',
@@ -70,7 +70,7 @@ const TextViewExample = new Lang.Class ({
},
]]></code>
<p>All the code for this sample goes in the TextViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function () {
@@ -88,7 +88,7 @@ const TextViewExample = new Lang.Class ({
<section id="textview">
<title>Creating the TextView</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a label for the penguin to talk to you
this._penguin = new Gtk.Label ({
height_request: 180,
@@ -99,7 +99,7 @@ const TextViewExample = new Lang.Class ({
<p>Our first step in this example is to create the <link xref="label.js">Label</link> that the penguin will use to talk to you. We set the text in it to wrap by setting its wrap property to true, but we'll use a different method on the TextView itself that allows for more fine-grained control.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a textview for you to talk to the penguin
this.buffer = new Gtk.TextBuffer();
this._textView = new Gtk.TextView ({
@@ -111,7 +111,7 @@ const TextViewExample = new Lang.Class ({
<p>Our first step is to create a TextBuffer to put the words into. After that we create the TextView, and tell it to use the TextBuffer we created as its buffer. We also set it to be editable, since we want to be able to type new things in.</p>
<p>The wrap_mode property lets you select from four different <link href="http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.WrapMode.html";>WrapModes.</link> Gtk.WrapMode.CHAR, for instance, starts wrapping around in the middle of a word if you keep typing when it gets to the edge. Most people are probably used to Gtk.WrapMode.WORD, which will automatically put the word you're typing on the next line if it gets to be too long.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a "scrolled window" to put your textview in so it will scroll
this._scrolled = new Gtk.ScrolledWindow ({
hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,
@@ -129,7 +129,7 @@ const TextViewExample = new Lang.Class ({
<section id="ui">
<title>Creating the rest of the user interface</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid to organize them in
this._grid = new Gtk.Grid ({
halign: Gtk.Align.CENTER,
@@ -141,7 +141,7 @@ const TextViewExample = new Lang.Class ({
]]></code>
<p>The first <link xref="grid.js">Grid</link> we create only has the Label and the ScrolledWindow inside it.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a button to send your message to the penguin
this._send = new Gtk.Button ({
halign: Gtk.Align.END,
@@ -160,7 +160,7 @@ const TextViewExample = new Lang.Class ({
]]></code>
<p>We create a <link xref="button.js">Button</link> to send your message to the penguin, and a new Grid that has the other one on top and the Button on the bottom. The Button has a margin on top, so that it isn't squished up against the ScrolledWindow.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Attach the main grid to the window
this._window.add (this._mainGrid);
@@ -175,7 +175,7 @@ const TextViewExample = new Lang.Class ({
<section id="function">
<title>Function which handles the penguin's response</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_chat: function () {
// Create a random number to determine what the penguin says
@@ -229,7 +229,7 @@ const TextViewExample = new Lang.Class ({
<p>Here we use some basic JavaScript functions to have the penguins say something random. Penguins like fish, though, so if you mention fish we want the penguin to respond to that. To do that, we use the JavaScript String object's match method on <file>this.buffer.text</file>, which returns the contents of our TextBuffer.</p>
<p>Since we want to clear out the TextBuffer after each time you click Send, we set <file>this.buffer.text</file> to contain an empty string afterwards. Then we return focus to our TextView, so that you can keep typing without having to click on it beforehand.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new TextViewExample ();
app.application.run (ARGV);
@@ -239,7 +239,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/textview.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/textview.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/togglebutton.js.page b/platform-demos/C/togglebutton.js.page
index 1a87290..10f9f42 100644
--- a/platform-demos/C/togglebutton.js.page
+++ b/platform-demos/C/togglebutton.js.page
@@ -24,7 +24,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const Gio = imports.gi.Gio;
@@ -36,7 +36,7 @@ const Lang = imports.lang;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const ToggleButtonExample = new Lang.Class({
Name: 'ToggleButton Example',
@@ -63,7 +63,7 @@ const ToggleButtonExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the RadioButtonExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -81,14 +81,14 @@ const ToggleButtonExample = new Lang.Class({
<section id="togglebutton">
<title>Creating the ToggleButton and other widgets</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the spinner that the button stops and starts
this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});
]]></code>
<p>We want this <link xref="spinner.js">Spinner</link> to expand vertically and horizontally, to take up as much space as possible inside the window.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the togglebutton that starts and stops the spinner
this._toggleButton = new Gtk.ToggleButton ({label: "Start/Stop"});
this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));
@@ -96,7 +96,7 @@ const ToggleButtonExample = new Lang.Class({
<p>Creating a ToggleButton is a lot like creating a normal <link xref="button.js">Button.</link> The biggest difference is that you're handling a "toggled" signal instead of a "clicked" signal. This code binds the _onToggle function to that signal, so that it's called whenever our ToggleButton is toggled.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid and put everything in it
this._grid = new Gtk.Grid ({
row_homogeneous: false,
@@ -106,7 +106,7 @@ const ToggleButtonExample = new Lang.Class({
]]></code>
<p>Here we create a simple <link xref="grid.js">Grid</link> to organize everything in, then attach the Spinner and ToggleButton to it.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Add the grid to the window
this._window.add (this._grid);
@@ -120,7 +120,7 @@ const ToggleButtonExample = new Lang.Class({
<section id="toggled">
<title>Making something happen when the ToggleButton is toggled</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_onToggle: function() {
// Start or stop the spinner
@@ -134,7 +134,7 @@ const ToggleButtonExample = new Lang.Class({
]]></code>
<p>Whenever someone toggles the button, this function checks what its state is afterwards using get_active and starts or stops the spinner accordingly. We want it to spin only while the button is pressed in, so if get_active returns true we start the spinner. Otherwise, we tell it to stop.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new ToggleButtonExample ();
app.application.run (ARGV);
@@ -144,7 +144,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/togglebutton.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/togglebutton.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/toolbar.js.page b/platform-demos/C/toolbar.js.page
index 5bbddab..070ac8d 100644
--- a/platform-demos/C/toolbar.js.page
+++ b/platform-demos/C/toolbar.js.page
@@ -21,7 +21,7 @@
<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>
+<code mime="application/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>
diff --git a/platform-demos/C/treeview.js.page b/platform-demos/C/treeview.js.page
index 9021c2c..f0262c8 100644
--- a/platform-demos/C/treeview.js.page
+++ b/platform-demos/C/treeview.js.page
@@ -19,7 +19,7 @@
<media type="image" mime="image/png" src="media/widget.png"/>
<p>More specific description of this particular example.</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
]]></code>
<p>
In this sample we used the following widgets: <link href="">Widget 1</link>, <link href="">Widget 2</link> and <link href="">Widget 3</link>.
diff --git a/platform-demos/C/treeview_simple_liststore.js.page b/platform-demos/C/treeview_simple_liststore.js.page
index b46640c..a257aa2 100644
--- a/platform-demos/C/treeview_simple_liststore.js.page
+++ b/platform-demos/C/treeview_simple_liststore.js.page
@@ -33,7 +33,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
#!/usr/bin/gjs
const GObject = imports.gi.GObject;
@@ -46,7 +46,7 @@ const Pango = imports.gi.Pango;
<section id="applicationwindow">
<title>Creating the application window</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
const TreeViewExample = new Lang.Class({
Name: 'TreeView Example with Simple ListStore',
@@ -72,7 +72,7 @@ const TreeViewExample = new Lang.Class({
},
]]></code>
<p>All the code for this sample goes in the TreeViewExample class. The above code creates a <link href="http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html";>Gtk.Application</link> for our widgets and window to go in.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Build the application's UI
_buildUI: function() {
@@ -90,7 +90,7 @@ const TreeViewExample = new Lang.Class({
<section id="liststore">
<title>Creating the ListStore</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the underlying liststore for the phonebook
this._listStore = new Gtk.ListStore ();
this._listStore.set_column_types ([
@@ -110,7 +110,7 @@ const TreeViewExample = new Lang.Class({
<p>In this case, we're making a ListStore of four columns, each one containing string values.</p>
<note><p>You need to put the line <file>const GObject = imports.gi.GObject;</file> at the start of your application's code, like we did in this example, if you want to be able to use GObject types.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Data to go in the phonebook
this.phonebook =
let phonebook =
@@ -130,7 +130,7 @@ const TreeViewExample = new Lang.Class({
<p>Here we have the information to go in the ListStore. It's an array of objects, each one corresponding to a single entry in our phone book.</p>
<p>Note that the TreeView in the screenshot doesn't actually show the data from the "description" properties. Instead, that information's shown in the Label beneath it, for whichever row that you click on. That's because the TreeView and ListStore are two separate things, and a TreeView can show all or part of a ListStore, and display what's in it in different ways. You can even have multiple widgets show things from the same ListStore, like the Label in our example or even a second TreeView.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
for (i = 0; i < phonebook.length; i++ ) {
let contact = phonebook [i];
this._listStore.set (this._listStore.append(), [0, 1, 2, 3],
@@ -144,7 +144,7 @@ const TreeViewExample = new Lang.Class({
<section id="treeview">
<title>Creating the TreeView</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the treeview
this._treeView = new Gtk.TreeView ({
expand: true,
@@ -152,7 +152,7 @@ const TreeViewExample = new Lang.Class({
]]></code>
<p>Here we create a basic TreeView widget, that expands both horizontally and vertically to use as much space as needed. We set it to use the ListStore we created as its "model", or the thing it'll show us stuff from.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the columns for the address book
let firstName = new Gtk.TreeViewColumn ({ title: "First Name" });
let lastName = new Gtk.TreeViewColumn ({ title: "Last Name" });
@@ -160,7 +160,7 @@ const TreeViewExample = new Lang.Class({
]]></code>
<p>Now we create each of the vertical TreeViewColumns we'll see in the TreeView. The title for each one goes at the top, as you can see in the screenshot.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a cell renderer for when bold text is needed
let bold = new Gtk.CellRendererText ({
weight: Pango.Weight.BOLD });
@@ -176,7 +176,7 @@ const TreeViewExample = new Lang.Class({
<p>Here we create the CellRenderers that we'll use to display the text from our ListStore, and pack them into the TreeViewColumns. Each CellRendererText is used for all the entries in that column. Our normal CellRendererText just creates plain text, while our bold one uses heavier-weight text. We put it into the first name column, and tell the other two to use copies of the normal one. The "true" used as the second parameter for the <file>pack_start</file> method tells it to expand the cells when possible, instead of keeping them compact.</p>
<note><p><link href="http://www.pygtk.org/docs/pygtk/pango-constants.html";>Here is a list</link> of other text properties you can use. In order to use these Pango constants, make sure to put the line <file>const Pango = imports.gi.Pango;</file> at the beginning of your code like we did.</p></note>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
firstName.add_attribute (bold, "text", 0);
lastName.add_attribute (normal, "text", 1);
phone.add_attribute (normal, "text", 2);
@@ -198,7 +198,7 @@ const TreeViewExample = new Lang.Class({
<section id="ui">
<title>Building the rest of the UI</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create the label that shows details for the name you select
this._label = new Gtk.Label ({ label: "" });
@@ -211,7 +211,7 @@ const TreeViewExample = new Lang.Class({
<p>The TreeView's <file>get_selection</file> method returns an object called a TreeSelection. A TreeSelection is like a TreeIter in that it's basically a cursor that points at a particular row, except that the one it points to is the one that's visibly highlighted as selected.</p>
<p>After we get the TreeSelection that goes with our TreeView, we ask it to tell us when it changes which row it's pointing to. We do this by connecting its <file>changed</file> signal to the _onSelectionChanged function we wrote. This function changes the text displayed by the Label we just made.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Create a grid to organize everything in
this._grid = new Gtk.Grid;
@@ -232,7 +232,7 @@ const TreeViewExample = new Lang.Class({
<section id="function">
<title>Function which handles a changed selection</title>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
_onSelectionChanged: function () {
// Grab a treeiter pointing to the current selection
@@ -253,7 +253,7 @@ const TreeViewExample = new Lang.Class({
<p>After we've done that, we call the Label's <file>set_label</file> function, and use the ListStore's <file>get_value</file> function a handful of times to fill in the data we want to put in it. Its parameters are a TreeIter pointing to the row we want to get data from, and the column.</p>
<p>Here, we want to get data from all four columns, including the "hidden" one that's not part of the TreeView. This way, we can use our Label to show strings that are too large to fit in the TreeView, and that we don't need to see at a glance.</p>
- <code mime="text/javascript"><![CDATA[
+ <code mime="application/javascript"><![CDATA[
// Run the application
let app = new TreeViewExample ();
app.application.run (ARGV);
@@ -263,7 +263,7 @@ app.application.run (ARGV);
<section id="complete">
<title>Complete code sample</title>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/treeview_simple_liststore.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/treeview_simple_liststore.js" parse="text"><xi:fallback/></xi:include></code>
</section>
<section id="in-depth">
diff --git a/platform-demos/C/weatherAppMain.js.page b/platform-demos/C/weatherAppMain.js.page
index c903d14..0a34bc0 100644
--- a/platform-demos/C/weatherAppMain.js.page
+++ b/platform-demos/C/weatherAppMain.js.page
@@ -30,7 +30,7 @@
</synopsis>
<section id="script">
<title>Script for running the application</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs]]></code>
<p> This line tells how to run the script. It needs to be the first line of the code and it needs to be executable. To get the execution rights go to Terminal and run in right folder: chmod +x scriptname. Or you can use the graphical filemanager. Just go to the right folder where your code is, right click you code file, choose properties, click the permissions tab and check the box for allow executing file as a program
</p>
@@ -38,7 +38,7 @@
<section id="imports">
<title>Libraries to import</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var Gtk = imports.gi.Gtk;
const WeatherService = imports.geonames;]]></code>
<p>In order to have a working program we need to import a GObject Introspection -library to our use. For working UI, we need Gtk. Gtk is imported in the beginning so we have it in our use everywhere. We also import our own local JavaScript library geonames to our use here.</p>
@@ -46,7 +46,7 @@ const WeatherService = imports.geonames;]]></code>
<section id="mainwindow">
<title>Creating the main window for the application</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
// Initialize the gtk
Gtk.init(null, 0);
//create your window, name it and connect the x to quit function. Remember that window is a taken word
@@ -61,7 +61,7 @@ Gtk.main();]]></code>
</section>
<section id="widgets">
<title>Adding a grid and all the necessary widgets to it</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
var grid = new Gtk.Grid();
weatherwindow.add(grid);
@@ -92,7 +92,7 @@ grid.attach_next_to(weatherIcon,label2,1,1,1)
<section id="asynccall">
<title>Requesting the weather information asynchronously</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
function getWeatherForStation() {
var station = entry.get_text();
@@ -122,7 +122,7 @@ function getWeatherForStation() {
<section id="connectingbuttons">
<title>Connecting signals to button and entry.</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
entry.connect("key_press_event", function(widget, event) {
if (entry.get_text().length === 4) {
// Enough is enough
@@ -140,7 +140,7 @@ button1.connect("clicked", function(){
<section id ="weatherapp.js">
<title>Weatherapp.js</title>
<p> Weatherapp.js file looks like this:</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
#!/usr/bin/gjs
//The previous line is a hash bang tells how to run the script.
// Note that the script has to be executable (run in terminal in the right folder: chmod +x scriptname)
diff --git a/platform-demos/C/weatherGeonames.js.page b/platform-demos/C/weatherGeonames.js.page
index 466f86f..f571975 100644
--- a/platform-demos/C/weatherGeonames.js.page
+++ b/platform-demos/C/weatherGeonames.js.page
@@ -30,7 +30,7 @@
<section id="geonamesimports">
<title>Local library for getting the weather</title>
<p>For this we need a new file that will be our local library.</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
@@ -40,7 +40,7 @@ Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefa
<section id="geonamesfunction">
<title>Creating function GeoNames</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
function GeoNames(station) {
this.station = station;
}
@@ -54,7 +54,7 @@ GeoNames.prototype = {
<section id="geonamesmethods">
<title>Methods for GeoNames</title>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
getWeather: function(callback) {
var request = Soup.Message.new('GET', 'http://api.geonames.org/weatherIcaoJSON?ICAO=' + this.station + '&username=demo');
_httpSession.queue_message(request, function(_httpSession, message) {
@@ -100,7 +100,7 @@ getIcon: function(weather){
<section id ="geonames.js">
<title>geonames.js</title>
<p>Here is the entire code for our local library. The main program file calls this asynchronously.</p>
- <code mime="text/javascript" style="numbered"><![CDATA[
+ <code mime="application/javascript" style="numbered"><![CDATA[
const Soup = imports.gi.Soup;
const _httpSession = new Soup.SessionAsync();
Soup.Session.prototype.add_feature.call(_httpSession, new Soup.ProxyResolverDefault());
diff --git a/platform-demos/C/widget.js.page b/platform-demos/C/widget.js.page
index ef9ad15..38357b8 100644
--- a/platform-demos/C/widget.js.page
+++ b/platform-demos/C/widget.js.page
@@ -20,7 +20,7 @@
<media type="image" mime="image/png" src="media/widget.png"/>
<p>More specific description of this particular example.</p>
-<code mime="text/javascript" style="numbered"><xi:include href="samples/widget.js" parse="text"><xi:fallback/></xi:include></code>
+<code mime="application/javascript" style="numbered"><xi:include href="samples/widget.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this sample we used the following:
</p>
diff --git a/platform-demos/C/window.js.page b/platform-demos/C/window.js.page
index 0b396ac..dd2f17a 100644
--- a/platform-demos/C/window.js.page
+++ b/platform-demos/C/window.js.page
@@ -28,7 +28,7 @@
</td>
</tr>
</table>
- <code mime="text/javascript" style="numbered">
+ <code mime="application/javascript" style="numbered">
<xi:include href="samples/window.js" parse="text"><xi:fallback/></xi:include></code>
<p>
In this example we used the following:
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=gnome-image.png"](https://live.gnome.org/TarynFox?action=AttachFile&do=get&target=gnome-image.png"){kind=link}