Commit 5d18f706 authored by rockon999's avatar rockon999

Polish tags tutorials, upload more assets, add showcase apps.

parent 8e32aa65
Pipeline #26817062 passed with stages
in 1 minute and 27 seconds
......@@ -3,7 +3,12 @@ title: Examples
date: 2018-07-25 16:10:11
---
# Follow along as we create two amazing GNOME apps in GJS: Tags and TicTacToe
# Examples
## Follow along as we create some amazing GNOME apps in GJS!
<ShowCase link="hello/" title="Hello GNOME!" subtitle="Learn how to build the age-old 'Hello World' app in GJS!" image="" />
<ShowCase link="tags/" title="Tags" subtitle="Learn how to build a tags and notes app for your files!" image="" />
<ShowCase link="tictactoe/" title="TicTacToe" subtitle="Learn how to build a fun game!" image="" />
<ShowCase link="tictactoe/" title="TicTacToe" subtitle="Learn how to build the classic fun game!" image="" />
---
title: Writing Your First GNOME Application in GNOME Javascript
title: Creating A User Interface With Glade
date: 2018-07-25 16:10:11
---
# Getting Started
......@@ -117,8 +117,28 @@ Here we'll find a version selector. From it, select `3.20`.
<img :src="$withBase('/assets/img/glade-tutorial-step-27.png')" />-->
<img :src="$withBase('/assets/img/glade-tutorial-step-28.png')" />
Now we will add a `GtkBox` to store the window contents. Pop it into the empty space in our window, `TagsWindow`.
<img :src="$withBase('/assets/img/glade-tutorial-step-30.png')" />
<!-- TODO: Add image! <img :src="$withBase('/assets/img/glade-tutorial-step-29.png')" /> -->
Select `GtkBox` from the widget picker.
<img :src="$withBase('/assets/img/glade-tutorial-step-31.png')" />
Now we will add a `GtkBox` to store the window contents.
<img :src="$withBase('/assets/img/glade-tutorial-step-32.png')" />
Pop it into the empty space in our window, `TagsWindow`.
<img :src="$withBase('/assets/img/glade-tutorial-step-33.png')" />
<img :src="$withBase('/assets/img/glade-tutorial-step-34.png')" />
Now set `Number of items` in `General` in the widgets properties to `1`.
<img :src="$withBase('/assets/img/glade-tutorial-step-35.png')" />
Now set the widget ID to `mainBox`.
***And we've built our UI!***
......@@ -17,9 +17,9 @@ And when the user clicks `addFileButton`...
## Adding the text view
// Glade parts
<img :src="$withBase('/assets/img/writing-notes-step-1.png')" />
Now add `fileNotesTextView` to your `InternalChildren` array [from Part 00]().
Now add `fileNotesTextView` to your `InternalChildren` array from [Creating A User Interface](./00-creating-user-interface.md).
As a file hasn't been opened yet, we will disable the text view so the user doesn't think they can write in it.
......@@ -115,7 +115,16 @@ And there you have it!
### Adding a save button
// Glade
We'll first add a save button to the header. This is similar to adding `addFileButton` in [Creating A User Interface](./00-creating-user-interface.md).
<img :src="$withBase('/assets/img/writing-notes-step-2.png')" />
Note that the widget ID is `saveButton` and the `Label` is `Save`.
<img :src="$withBase('/assets/img/writing-notes-step-3.png')" />
To position the button on the right we set `Position` under `Packing` in properties to `End`.
### Handling `saveButton` clicks
......
......@@ -6,7 +6,9 @@ date: 2018-07-25 16:10:11
Many amazing apps have been built in GJS. Check them out below!
<ShowCase link="https://wiki.gnome.org/Apps/Documents" title="GNOME Documents" subtitle="A document manager application designed to work with GNOME 3." image="" />
<ShowCase link="https://wiki.gnome.org/Apps/Weather" title="GNOME Weather" subtitle="An application that allows you to monitor the current weather conditions for your city, or anywhere in the world, and to access updated forecasts provided by various internet services." image="" />
<ShowCase link="https://wiki.gnome.org/Apps/Maps" title="GNOME Maps" subtitle="Maps gives you quick access to maps all across the world." image="" />
<ShowCase link="https://wiki.gnome.org/Apps/SoundRecorder" title="GNOME Sound Recorder" subtitle="A simple and modern sound recorder." image="" />
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment