public class Epoch.MainWindow : Gtk.ApplicationWindow {
private Gtk.Grid grid;
private Epoch.LabelsGrid labels;
private Epoch.PreferencesView preferences_view;
private Epoch.MainView main_view;
public MainWindow (Application app) {
Object (
application: app,
icon_name: "com.github.Suzie97.epoch",
resizable: false,
title: _("Epoch"),
width_request: 500
);
}
construct {
get_style_context ().add_class ("rounded");
set_keep_below (true);
stick ();
var preferences_button = new Gtk.Button.from_icon_name ("open-menu-symbolic", Gtk.IconSize.SMALL_TOOLBAR);
preferences_button.valign = Gtk.Align.CENTER;
var preferences_stack = new Gtk.Stack ();
preferences_stack.add (preferences_view);
preferences_stack.add (main_view);
preferences_stack.transition_type = Gtk.StackTransitionType.SLIDE_LEFT;
var headerbar = new Gtk.HeaderBar ();
headerbar.show_close_button = true;
var headerbar_style_context = headerbar.get_style_context ();
headerbar_style_context.add_class ("default-decoration");
headerbar_style_context.add_class (Gtk.STYLE_CLASS_FLAT);
headerbar.pack_end (preferences_button);
set_titlebar (headerbar);
var main_box = new Gtk.Box (Gtk.Orientation.VERTICAL, 0);
main_box.pack_start (preferences_stack, true, true);
add (main_box);
show_all ();
preferences_view = new Epoch.PreferencesView ();
preferences_button.activate.connect (() => {
preferences_stack.visible_child = preferences_view;
});
// public override bool configure_event (Gdk.EventConfigure event) {
// int root_x, root_y;
// get_position (out root_x, out root_y);
// Epoch.settings.set_int ("window-x", root_x);
// Epoch.settings.set_int ("window-y", root_y);
// return base.configure_event (event);
}
}
The following error is displayed when I compile,
I want the app to switch to the preferences view when the button on the right side of the header bar is clicked,
Only, the headerbar is displayed when as you can see.
Why is this happening? How do I solve it?
preferences_stack.add (preferences_view);
preferences_stack.add (main_view);
You haven't initialized preferences_view yet, and you never initialize main_view. That's where your second and third errors are coming from: gtk_container_add() is complaining that the widget you are trying to add is not actually a widget, but rather null, because you haven't initialized that variable yet.
Related
Beginner-level questions. I’m creating a counter application (first application from The 7 Tasks). I created this application in one file and it is working fine. Following is the code.
class Application : Gtk.Application {
public int val = 0;
public Application() {
Object(
application_id: "com.github.uname.counter",
flags: ApplicationFlags.FLAGS_NONE
);
}
protected override void activate() {
var window = new Gtk.ApplicationWindow(this);
window.default_height = 30;
window.default_width = 300;
window.title = "Counter";
var grid = new Gtk.Grid();
grid.column_homogeneous = true;
grid.row_homogeneous = true;
grid.row_spacing = 5;
grid.column_spacing = 5;
var entry = new Gtk.Entry();
entry.text = val.to_string();
entry.editable = false;
grid.attach(entry, 0, 0, 1, 1);
var button1 = new Gtk.Button.with_label("Counter");
grid.attach(button1, 1, 0, 1, 1);
button1.clicked.connect (() => {
this.val = this.val + 1;
entry.text = this.val.to_string();
});
window.add(grid);
window.show_all();
}
public static int main(string[] args) {
var application = new Application();
return application.run(args);
}
}
Now, I'm trying to divide the above code into separate files such as Application.vala, Entry.vala, and Button.vala. Here is the code for these files.
Code for Application.vala.
class Application : Gtk.Application {
public int val = 0;
public Application() {
Object(
application_id: "com.github.chauhankiran.counter",
flags: ApplicationFlags.FLAGS_NONE
);
}
protected override void activate() {
var window = new Gtk.ApplicationWindow(this);
window.default_height = 30;
window.default_width = 300;
window.title = "Counter";
var grid = new Gtk.Grid();
grid.column_homogeneous = true;
grid.row_homogeneous = true;
grid.row_spacing = 5;
grid.column_spacing = 5;
var entry = new Entry(val);
grid.attach(entry, 0, 0, 1, 1);
var button1 = new Button(val);
grid.attach(button1, 1, 0, 1, 1);
window.add(grid);
window.show_all();
}
public static int main(string[] args) {
var application = new Application();
return application.run(args);
}
}
Code for Entry.vala.
public class Entry : Gtk.Entry {
public Entry(int val) {
text = val.to_string();
}
construct {
editable = false;
}
}
Code for Button.vala.
public class Button : Gtk.Button {
// Is it correct?
public int val;
public Button(int val) {
this.val = val;
}
construct {
label = "Counter";
}
// How to write this within Button.vala from Application.vala?
// How to get entry widget in this class?
button1.clicked.connect (() => {
this.val = this.val + 1;
entry.text = this.val.to_string();
});
}
Now, I have the following questions.
Entry.vala accepts val as initial value. I don't know how to pass it in construct. So, I used public object method. Is it correct way?
In Button.vala I need val as well access to entry so that I can get access to entry in Button.vala? Or this is incorrect way to do the code? If that is that is the case, please suggest correct way. Currently separate files code throws error as I don’t know how to connect and pass the information correctly.
The 7 Tasks are a good exercise to learn, and you seem to be off to a great start!
Entry.vala accepts val as initial value. I don't know how to pass it in construct. So, I used public object method. Is it correct way?
The preferred way to handle construction in Vala is using GObject-style construction: https://wiki.gnome.org/Projects/Vala/Tutorial#GObject-Style_Construction
What you're doing would technically work, but using the GObject-style you'd end up with something like the following:
public class Entry : Gtk.Entry {
public Entry(int val) {
Object (
text: val.to_string(),
editable: false
);
}
}
The important things to note here are:
This only works for properties declared as construct or set
The syntax is slightly different than what you were doing (property: value vs. member = value)
And one other little optimization:
editable is also a property that can be set in the constructor, so no need for a construct block here!
Notice that you can make some similar changes to your Button class as well!
In Button.vala I need val as well access to entry so that I can get
access to entry in Button.vala? Or this is incorrect way to do the
code? If that is that is the case, please suggest correct way.
Currently separate files code throws error as I don’t know how to
connect and pass the information correctly.
Currently your Button code has references to the Entry in it. I would advise against this from an object-oriented programming (OOP) perspective (you may hear people toss around terms like Single-Responsibility or Separation of Concerns, etc.), but the gist is that the button should just focus on being what it is: a button. A button doesn't need to be aware of the presence of the entry, and the entry doesn't need to exist in order to have a button. Your logic of handling what happens between widgets when the button is clicked should happen at a level above. In this case, that would be in your Application class where you've created both of those widgets:
...
var entry = new Entry(val);
grid.attach(entry, 0, 0, 1, 1);
var button1 = new Button(val);
grid.attach(button1, 1, 0, 1, 1);
button1.clicked.connect (() => {
// Update the entry
});
...
Let's take a quick look at your button:
public class Button : Gtk.Button {
// Is it correct?
public int val;
...
It's not wrong, and there are many ways to do what you're doing. So let's roll with it as is.
At this point you've got your button which updates an internal int value every time it's clicked and you now need to update the entry to display the new value. Currently you have:
button1.clicked.connect (() => {
this.val = this.val + 1;
entry.text = this.val.to_string();
});
Since this is now being handled in the Application class, you'll need to change those references to this, since you want to reference and update val from the button, not the variable in Application that you're using for the initial value:
button1.clicked.connect (() => {
button1.val = button1.val + 1;
entry.text = button1.val.to_string();
});
Hopefully that helped a bit, you were 99% of the way there with splitting it into multiple classes! Keep it up, and good luck on the next tasks!
I have this code:
using Gtk;
class ConquerLauncher : Gtk.Application {
protected override void activate() {
var window = new ApplicationWindow(this);
window.add(new InputList());
window.show_all();
}
}
public int main(string[] args) {
return new ConquerLauncher().run(args);
}
class InputList : Box {
public InputList() {
this.set_orientation(Orientation.VERTICAL);
var listStore = new Gtk.ListStore(1,typeof(Label));
var treeView = new TreeView.with_model(listStore);
this.pack_start(treeView);
this.pack_start(new InputBox(this,listStore));
var column = new TreeViewColumn();
column.set_title("Foo bar's");
treeView.append_column(column);
treeView.set_model(listStore);
}
}
class InputBox : Box {
public InputBox(InputList list,Gtk.ListStore store) {
this.set_orientation(Orientation.HORIZONTAL);
var entry = new Entry();
this.pack_start(entry);
var button = new Button.with_label("Add foo bar");
this.pack_start(button);
button.clicked.connect(() => {
var text = entry.text;
entry.text = "";
TreeIter tp;
store.append(out tp);
store.set(tp, 0, new Label(text), -1);
this.show_all();
list.show_all();
});
}
}
What I want to do:
I want to create some sort of input form consisting of three elements:
In an Entry the user should write some text. If the presses the button, it should be added to the TreeView with a ListStore as a model.
Expectation:
The user enters a text, presses the button, the contents of the Entry are added to the TreeView and the text input field is cleared.
Reality:
Everything works, except the label that is added to the TreeView is blank.
Before:
Here an example input:
After pressing the button:
Pretty new to vala and Gtk.
I am unable to call Gtk.Entry's set_text method, to set text from another method. Here is the sample code which I tried. I am able to set_text while in the activate() method, but just not from the tryThis() method.
using Gtk;
public class MyApplication : Gtk.Application {
public MyApplication () {
Object(application_id: "testing.my.application",
flags: ApplicationFlags.FLAGS_NONE);
}
protected override void activate () {
Gtk.ApplicationWindow window = new Gtk.ApplicationWindow (this);
window.set_default_size (800, 600);
window.window_position = WindowPosition.CENTER;
window.set_border_width(10);
Gtk.HeaderBar headerbar = new Gtk.HeaderBar();
headerbar.show_close_button = true;
headerbar.title = "Window";
window.set_titlebar(headerbar);
//Entry is initialized here
Gtk.Entry entry = new Gtk.Entry();
entry.set_text ("Before button click");
//Button is initialized and connect to method
Gtk.Button but = new Gtk.Button.with_label("Click me");
but.clicked.connect(tryThis);
Gtk.Box vbox = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
vbox.pack_start(entry, false, false, 10);
vbox.pack_start(but, false, false, 20);
window.add(vbox);
window.show_all ();
}
private void tryThis() {
Gtk.Entry entry = new Gtk.Entry();
//This is not working!!
entry.set_text ("After button click");
message("%s -", "I am here");
}
public static int main (string[] args) {
MyApplication app = new MyApplication ();
return app.run (args);
}
}
The problem is a problem of scope. So activate creates an entry within the scope of that method, not the whole class. tryThis creates a new instance of Gtk.Entry and assigns it to a variable entry in the scope of that method, not the whole class.
This example fixes your problem, but is not the best solution, as discussed after the example:
using Gtk;
public class MyApplication : Gtk.Application {
Gtk.Entry entry;
public MyApplication () {
Object(application_id: "testing.my.application",
flags: ApplicationFlags.FLAGS_NONE);
}
protected override void activate () {
Gtk.ApplicationWindow window = new Gtk.ApplicationWindow (this);
window.set_default_size (800, 600);
window.window_position = WindowPosition.CENTER;
window.set_border_width(10);
Gtk.HeaderBar headerbar = new Gtk.HeaderBar();
headerbar.show_close_button = true;
headerbar.title = "Window";
window.set_titlebar(headerbar);
//Entry is initialized here
entry = new Gtk.Entry();
entry.set_text ("Before button click");
//Button is initialized and connect to method
Gtk.Button but = new Gtk.Button.with_label("Click me");
but.clicked.connect(tryThis);
Gtk.Box vbox = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
vbox.pack_start(entry, false, false, 10);
vbox.pack_start(but, false, false, 20);
window.add(vbox);
window.show_all ();
}
private void tryThis() {
entry.set_text ("After button click");
message("%s -", "I am here");
}
public static int main (string[] args) {
MyApplication app = new MyApplication ();
return app.run (args);
}
}
You should notice that:
entry is brought in to the scope of the whole class with Gtk.Entry entry; at the beginning of the class definition
entry = new Gtk.Entry (); has been removed from tryThis because the entry has already been instantiated when activate is called
This works, but for the longer term it is better to separate the window from the application. So use activate to instantiate a new MainApplicationWindow for example. Also Vala includes code generation routines for Gtk templates. This allows you to define the window and its child widgets using XML or the GUI tool Glade and then attach the Vala code with the Vala attributes [GtkTemplate], [GtkChild] and [GtkCallback].
So I am currently working on an app for elementary os and encountered a problem.
I have a window which has a Granite.Sourcelistview on the left and a stack holding the different views on the right. My problem is that when pressing a button on one of the screens (the project settings screen i created), the stack should change the current view to a different one but it doesn't. The current view stays and is not changed.
This is the window:
public class MainWindow : Gtk.Window {
private SourceListStackView srcl_view {get; set;}
construct {
var header = new Gtk.HeaderBar ();
header.show_close_button = true;
//this is the source list view
srcl_view = new SourceListStackView ();
var paned = new Gtk.Paned (Gtk.Orientation.HORIZONTAL);
paned.position = 130;
paned.pack1 (srcl_view, false, false);
paned.add2 (srcl_view.stack);
add(paned);
set_titlebar (header);
}
public static int main(string[] args) {
Gtk.init (ref args);
MainWindow app = new MainWindow ();
app.show_all ();
Gtk.main ();
return 0;
}
}
This is the sourcelistview class that i created:
public class SourceListStackView : Granite.Widgets.SourceList {
public Gtk.Stack stack {get; set;}
public SourceListStackView () {
var project_page = new ProjectSettings ();
stack = new Gtk.Stack ();
var project = new Granite.Widgets.SourceList.ExpandableItem("Root");
this.root.add(project);
stack.add_named(project_page, "hello");
//here depending on what item of the sourcelist is created,
//the view with the same name as the item
//should be displayed (not the best mechanism but works)
this.item_selected.connect ((item) => {
if(item != null){
stack.visible_child_name = item.name;
}
});
//problematic part is here: This won't change the current view..why?
//The button should add another item to the
// source list view and change the current view
// to the newly created Welcome Screen but it doesn't do that..
project_page.button.clicked.connect(() => {
project.add(new Granite.Widgets.SourceList.Item ("Welcome"));
stack.add_named(new Granite.Widgets.Welcome("bla bli blu", "bla"), "Welcome");
stack.set_visible_child_name("Welcome");
});
}
}
This is the view with the button that should trigger the change of the view:
public class ProjectSettings : Granite.SimpleSettingsPage {
public Gtk.Button button {get; set;}
public ProjectSettings () {
Object (
activatable: false,
description: "This is a screen",
header: "",
icon_name: "preferences-system",
title: "Screen"
);
}
construct {
var project_name_label = new Gtk.Label ("Name");
project_name_label.xalign = 1;
var project_name_entry = new Gtk.Entry ();
project_name_entry.hexpand = true;
project_name_entry.placeholder_text = "Peter";
content_area.attach (project_name_label, 0, 0, 1, 1);
content_area.attach (project_name_entry, 1, 0, 1, 1);
button = new Gtk.Button.with_label ("Save Settings");
action_area.add (button);
}
}
The part that does not work is this one:
//problematic part is here: This won't change the current view.. why?
project_page.button.clicked.connect(() => {
project.add(new Granite.Widgets.SourceList.Item ("Welcome"));
stack.add_named(new Granite.Widgets.Welcome("bla bli blu", "bla"), "Welcome");
stack.set_visible_child_name("Welcome");
});
I do not know why it wont change the view. I specifically tell it to set the visible child to "Welcome" (and that is exactly how i named it one line above), but it just won't appear. Can someone explain to me why?
I can easily change the stack's visible child outside of the signal/event but inside of it won't do the trick..
Thanks a lot
Update: The issue was solved through José Fonte's comment down below: I instantiated the view, called the show_all () method on it and then added it to the stack and set the visible child to it.
Is there any way to make the FileChooserDialog to select both files and folders?
I know there are the FileChooserAction OPEN and SELECT_FOLDER but they are exclusive.
PD: I dont't want two buttons, I already know how to do this. What I want is to get the routes of all selected elements (both files and folders) with the same button.
The File chooser action is different from what you want. I think you are after the set_select_multiple () method or the select_multiple property (both inherited from the Gtk.FileChooser interface).
Then you can use the methods get_filenames () or get_uris (), depending on your needs.
The default GtkFileChooserDialog only allows you to select folders and files if you are on the Recent "tab" but as soon as you use a normal folder it won't let you do that.
In order to achieve that you must use Gtk.FileChooserWidget by composing a solution or creating a new widget (eg. subclassing Gtk.FileChooserWidget or Gtk.Dialog).
I've created a simple example that will work as you want and that you can easily change to suit your needs.
The following code is based on Valadoc.org Gtk.FileChooserWidget page, which does what you are asking:
public class Application : Gtk.Window {
public Application () {
// Prepare Gtk.Window:
this.window_position = Gtk.WindowPosition.CENTER;
this.destroy.connect (Gtk.main_quit);
// VBox:
Gtk.Box vbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 5);
this.add (vbox);
// HeaderBar:
Gtk.HeaderBar hbar = new Gtk.HeaderBar ();
hbar.set_title ("MyFileChooser");
hbar.set_subtitle ("Select Files and Folders");
// HeaderBar Buttons
Gtk.Button cancel = new Gtk.Button.with_label ("Cancel");
Gtk.Button select = new Gtk.Button.with_label ("Select");
hbar.pack_start (cancel);
hbar.pack_end (select);
this.set_titlebar (hbar);
// Add a chooser:
Gtk.FileChooserWidget chooser = new Gtk.FileChooserWidget (Gtk.FileChooserAction.OPEN);
vbox.pack_start (chooser, true, true, 0);
// Multiple files can be selected:
chooser.select_multiple = true;
// Add a preview widget:
Gtk.Image preview_area = new Gtk.Image ();
chooser.set_preview_widget (preview_area);
chooser.update_preview.connect (() => {
string uri = chooser.get_preview_uri ();
// We only display local files:
if (uri.has_prefix ("file://") == true) {
try {
Gdk.Pixbuf pixbuf = new Gdk.Pixbuf.from_file (uri.substring (7));
Gdk.Pixbuf scaled = pixbuf.scale_simple (150, 150, Gdk.InterpType.BILINEAR);
preview_area.set_from_pixbuf (scaled);
preview_area.show ();
} catch (Error e) {
preview_area.hide ();
}
} else {
preview_area.hide ();
}
});
// HBox:
Gtk.Box hbox = new Gtk.Box (Gtk.Orientation.VERTICAL, 5);
vbox.pack_start(hbox, false, false, 0);
// Setup buttons callbacks
cancel.clicked.connect (() => {
this.destroy ();
});
select.clicked.connect (() => {
SList<string> uris = chooser.get_uris ();
foreach (unowned string uri in uris) {
stdout.printf (" %s\n", uri);
}
this.destroy ();
});
}
public static int main (string[] args) {
Gtk.init (ref args);
Application app = new Application ();
app.show_all ();
Gtk.main ();
return 0;
}
}
Compile with:
valac --pkg gtk+-3.0 Gtk.FileChooserDialog.vala
After you choose select, the application will print your selection to the console:
Dumps (path partially replaced with ...):
file:///.../stackoverflow/3305/1
file:///.../stackoverflow/3305/2
file:///.../stackoverflow/3305/3
file:///.../stackoverflow/3305/Gtk.FileChooserDialog
file:///.../stackoverflow/3305/Gtk.FileChooserDialog.vala
file:///.../stackoverflow/3305/Gtk.FileChooserWidget
file:///.../stackoverflow/3305/Gtk.FileChooserWidget.vala
file:///.../stackoverflow/3305/img1.jpg
file:///.../stackoverflow/3305/img2.jpg
file:///.../stackoverflow/3305/img3.jpg
file:///.../stackoverflow/3305/Makefile