GTK FileChooserDialog select files AND folders (Vala) - gtk

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

Related

Create WinUI3/MVVM Most Recently Used (MRU) List in Menu Bar

I would like to create a classic "Recent Files" list in my Windows app menu bar (similar to Visual Studio's menu bar -> File -> Recent Files -> see recent files list)
The MRU list (List < string > myMRUList...) is known and is not in focus of this question. The problem is how to display and bind/interact with the list according to the MVVM rules.
Microsoft.Toolkit.Uwp.UI.Controls's Menu class will be removed in a future release and they recommend to use MenuBar control from the WinUI. I haven't found any examples, that use WinUI's MenuBar to create a "Recent Files" list.
I'm using Template Studio to create a WinUI 3 app. In the ShellPage.xaml I added
<MenuFlyoutSubItem x:Name="mruFlyout" Text="Recent Files"></MenuFlyoutSubItem>
and in ShellPage.xaml.c
private void Button_Click(object sender, RoutedEventArgs e)
{
mruFlyout.Items.Insert(mruFlyout.Items.Count, new MenuFlyoutItem(){ Text = "C:\\Test1_" + DateTime.Now.ToString("MMMM dd") } );
mruFlyout.Items.Insert(mruFlyout.Items.Count, new MenuFlyoutItem(){ Text = "C:\\Test2_" + DateTime.Now.ToString("MMMM dd") } );
mruFlyout.Items.Insert(mruFlyout.Items.Count, new MenuFlyoutItem(){ Text = "C:\\Test3_" + DateTime.Now.ToString("MMMM dd") } );
}
knowing this is not MVVM, but even this approach does not work properly, because the dynamically generated MenuFlyoutItem can be updated only once by Button_Click() event.
Could anybody give me an example, how to create the "Recent Files" functionality, but any help would be great! Thanks
Unfortunately, it seems that there is no better solution than handling this in code behind since the Items collection is readonly and also doesn't response to changes in the UI Layout.
In addition to that, note that because of https://github.com/microsoft/microsoft-ui-xaml/issues/7797, updating the Items collection does not get reflected until the Flyout has been closed and reopened.
So assuming your ViewModel has an ObservableCollection, I would probably do this:
// 1. Register collection changed
MyViewModel.RecentFiles.CollectionChanged += RecentFilesChanged;
// 2. Handle collection change
private void RecentFilesChanged(object sender, NotifyCollectionChangedEventArgs args)
{
// 3. Create new UI collection
var flyoutItems = list.Select(entry =>
new MenuFlyoutItem()
{
Text = entry.Name
}
);
// 4. Updating your MenuFlyoutItem
mruFlyout.Items.Clear();
flyoutItems.ForEach(entry => mruFlyout.Items.Add(entry));
}
Based on chingucoding's answer I got to the "recent files list" binding working.
For completeness I post the detailed code snippets here (keep in mind, that I'm not an expert):
Again using Template Studio to create a WinUI 3 app.
ShellViewModel.cs
// constructor
public ShellViewModel(INavigationService navigationService, ILocalSettingsService localSettingsService)
{
...
MRUUpdateItems();
}
ShellViewModel_RecentFiles.cs ( <-- partial class )
using System.Collections.ObjectModel;
using System.ComponentModel;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using Windows.Storage;
using Windows.Storage.AccessCache;
using Windows.Storage.Pickers;
namespace App_MostRecentUsedTest.ViewModels;
public partial class ShellViewModel : ObservableRecipient
{
public ObservableCollection<MRUItem> MRUItems{ get; set;} = new();
// update ObservableCollection<MRUItem>MRUItems from MostRecentlyUsedList
public void MRUUpdateItems()
{
var mruTokenList = StorageApplicationPermissions.MostRecentlyUsedList.Entries.Select(entry => entry.Token).ToList();
var mruMetadataList = StorageApplicationPermissions.MostRecentlyUsedList.Entries.Select(entry => entry.Metadata).ToList(); // contains path as string
MRUItems.Clear(); var i = 0;
foreach (var path in mruMetadataList)
{
MRUItems.Add(new MRUItem() { Path = path, Token = mruTokenList[i++] });
}
}
// called if user selects a recent used file from menu bar list
[RelayCommand]
protected async Task MRULoadFileClicked(int? fileId)
{
if (fileId is not null)
{
var mruItem = MRUItems[(int)fileId];
FileInfo fInfo = new FileInfo(mruItem.Path ?? "");
if (fInfo.Exists)
{
StorageFile? file = await Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.GetFileAsync(mruItem.Token);
if (file is not null)
{
Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file, file.Path); // store file.Path into Metadata
MRUUpdateItems();
// LOAD_FILE(file);
}
}
else
{
}
}
await Task.CompletedTask;
}
[RelayCommand]
protected async Task MenuLoadFileClicked()
{
StorageFile? file = await GetFilePathAsync();
if (file is not null)
{
Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file, file.Path); // store file.Path into Metadata
MRUUpdateItems();
// LOAD_FILE(file);
}
await Task.CompletedTask;
}
// get file path with filePicker
private async Task<StorageFile?> GetFilePathAsync()
{
FileOpenPicker filePicker = new();
filePicker.FileTypeFilter.Add(".txt");
IntPtr hwnd = WinRT.Interop.WindowNative.GetWindowHandle(App.MainWindow);
WinRT.Interop.InitializeWithWindow.Initialize(filePicker, hwnd);
return await filePicker.PickSingleFileAsync();
}
public class MRUItem : INotifyPropertyChanged
{
private string? path;
private string? token;
public string? Path
{
get => path;
set
{
path = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(path));
}
}
public string? Token
{
get => token;
set => token = value;
}
public event PropertyChangedEventHandler? PropertyChanged;
}
}
ShellPage.xaml
<MenuBar>
<MenuBarItem x:Name="ShellMenuBarItem_File">
<MenuFlyoutItem x:Uid="ShellMenuItem_File_Load" Command="{x:Bind ViewModel.MenuLoadFileClickedCommand}" />
<MenuFlyoutSubItem x:Name="MRUFlyout" Text="Recent Files..." />
</MenuBarItem>
</MenuBar>
ShellPage.xaml.cs
// constructor
public ShellPage(ShellViewModel viewModel)
{
...
// MRU initialziation
// assign RecentFilesChanged() to CollectionChanged-event
ViewModel.MRUItems.CollectionChanged += RecentFilesChanged;
// Add (and RemoveAt) trigger RecentFilesChanged-event to update MenuFlyoutItems
ViewModel.MRUItems.Add(new MRUItem() { Path = "", Token = ""});
ViewModel.MRUItems.RemoveAt(ViewModel.MRUItems.Count - 1);
}
// MRU Handle collection change
private void RecentFilesChanged(object? sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
// project each MRUItems list element into a new UI MenuFlyoutItem flyoutItems list
var i = 0;
var flyoutItems = ViewModel.MRUItems.Select(entry =>
new MenuFlyoutItem()
{
Text = " " + i.ToString() + " " + FilenameHelper.EllipsisString(entry.Path, 65),
Command = ViewModel.MRULoadFileClickedCommand,
CommandParameter = i++
}
);
//// If you want to update the list while it is shown,
//// you will need to create a new FlyoutItem because of
//// https://github.com/microsoft/microsoft-ui-xaml/issues/7797
// Create a new flyout and populate it
var newFlyout = new MenuFlyoutSubItem();
newFlyout.Text = MRUFlyout.Text; // Text="Recent Files...";
// Updating your MenuFlyoutItem
flyoutItems.ToList().ForEach(item => newFlyout.Items.Add(item));
// Get index of old sub item and remove it
var oldIndex = ShellMenuBarItem_File.Items.IndexOf(MRUFlyout);
ShellMenuBarItem_File.Items.Remove(MRUFlyout);
// Insert the new flyout at the correct position
ShellMenuBarItem_File.Items.Insert(oldIndex, newFlyout);
// Assign newFlyout to "old"-MRUFlyout
MRUFlyout = newFlyout;
}

gtk_container_add: assertion 'GTK_IS_WIDGET (widget)' failed

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.

Gtk.Entry unable to set_text from another method

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].

Gtk.Stack won't change visible child inside an event callback function

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.

Display MenuItems in multiple columns in JFace/swt

I have a long list of MenuItems (> 100) for a popup menu and wanted to put them into several columns instead of default 1 column.
Tried with the below code but not successful:
public class CodeSnippet {
public static void main (String [] args) {
Display display = new Display ();
Shell shell = new Shell (display);
final Composite c2 = new Composite(shell, SWT.NONE);
c2.setLayout(new GridLayout(2,true));
Menu menu = new Menu(c2);
for (int i=0; i<8; i++) {
MenuItem item = new MenuItem (menu, SWT.RADIO);
item.setText ("Item " + i);
}
shell.setMenu (menu);
shell.setSize (300, 300);
shell.open ();
while (!shell.isDisposed ()) {
if (!display.readAndDispatch ()) display.sleep ();
}
display.dispose ();
}
}
Despite of providing gridlayout for the Control used for Menu don't know why it displays in a Single column only.
Any clue would be helpful.
You can't control the layout of items in a Menu, the layout is determined by the native code on your platform.