For learning, I've written a toolframe class (gtk 3.24.20), the toolframes are moveable and expandable.
All toolframes are appended to a Gtk.Fixed widget.
documentation about Gtk.Fixed "The GtkFixed widget is a container which can place child widgets at fixed positions and with fixed sizes, given in pixels. GtkFixed performs no automatic layout management"
If i use the instance methods of Gtk.Fixed put and move to put the toolframe to (100,100) , sometimes the gtk layout calculation put the toolframe back to the orginal position (0,0).
for example if i'm resizing the window. or click on a button
if i use widget method size_allocate and set x,y, width and height, it also happens, suddenly the width changes and x,y goes back to 0,0
i had to watch the signal size-allocate and every time, if gtk layout changes my toolframe's x,y, width height dimensions, i have to overwrite the allocation to put it back to my position, width and height.
I wonder, because documentation says. on Gtk.Fixed no layout managment is performed.
Do i really have to always overwrite the allocation, when the size-allocate signal is fired for my toolframe, or did i something wrong.
Another question- if i want to destroy a GOBJECT, do i have to disconnect all signal handlers before destroying, or can i simply destroy it, without disconnecting (about memory leaks)
class with an example:
#!/usr/bin/gjs
const Gtk= imports.gi.Gtk,
Gio= imports.gi.Gio,
Gdk= imports.gi.Gdk,
GdkPixbuf= imports.gi.GdkPixbuf;
Gtk.init(null);
const window= new Gtk.Window(),
fixed_container= new Gtk.Fixed();
/* ==================================================================================================================================
CLASS ToolFrame (fixed_container, x, y, image_URL_orPATH_orICON, title, tooltip_text, content)
==================================================================================================================================
gtk version: 3.24.20 - depends on Gtk, Gio, Gdk, GdkPixbuf
--------------------
creates a moveable toolframe with titlebar and content, the toolframe can be minimized only showing the titlebar or can be expanded
most of the toolframe style can be changed over static object ToolFrame.standards (for explaination look at ToolFrame.standards)
before creation. In standard the toolframe has four buttons, a minimize button, an expand button, a pin button, and a close button
Gtk widget structure:
---------------------
eventbox_for_vbox (root widget) -> vbox -> eventbox_for_hbox -> hbox (titlebar)-> image, label, buttons
-> scrolled window -> content
parameters:
-----------
fixed_container GOBJ ... a Gtk.Fixed widget - parent container for all ToolFrame instances
x NUMB (INT) ... x position of the ToolFrame instance relative to parent container origin
y NUMB (INT) ... y position of the ToolFrame instance relative to parent container origin
image_URL_orPATH_orICON STR ... can be an URL or a PATH or an ICON name, icon names have to start with "icon://",
null or undefined, means no image
title STR ... the title of the ToolFrame instance
tool_tip STR ... tooltip text (hovering title) - null or undefined means no tooltip
content GOBJ ... a Gtk widget which is shown, when the ToolFrame instance is expanded
for detailed explainations look inside Gnome JavaScript class comments!
public instance properties:
---------------------------
fixed_container, root_widget, widgets, style_contexts, isPinned, isExpanded
public prototype properties:
----------------------------
toolframes, toolframe_inAction
public instance methods:
------------------------
set_AsLastChild, move, get_expanded_size, set_expanded_size
-----------------------------------------------------------------------------------------------------------------------------------*/
{ //-----> blockscope Class ToolFrame
//-----------------------------------------------------------------------
//----------------- CONSTRUCTOR
var ToolFrame=function ToolFrame (fixed_container, x, y, image_URL_orPATH_orICON, title, tooltip_text, content)
{
const widgets=new Object (), standards=ToolFrame.standards, style_contexts=new Object ();
var width, height, cssProvider;
widgets.eventbox_for_hbox= new Gtk.EventBox(); //-- eventbox parent of hbox
widgets.eventbox_for_vbox= new Gtk.EventBox(); //-- eventbox parent of vbox -> ToolFrame instance root_widget!
widgets.hbox= new Gtk.Box({ spacing: standards.titlebar_spacing, valign:3 }); //-- titlebar = hbox
widgets.vbox= new Gtk.Box({ orientation:1, spacing: standards.toolframe_spacing}); //-- children hbox (titlebar) and scrolled_window (holds content)
widgets.scrolled_window= new Gtk.ScrolledWindow ({ vexpand:true }); //-- content added to scrolled_window
//-- references to toolframe instance used by signals functions (circular references)
widgets.eventbox_for_vbox.toolframe=this;
widgets.hbox.toolframe=this;
//-- creating titlebar image and pixbuf, width and height defined in ToolFrame.standards
if (image_URL_orPATH_orICON)
{
widgets.image= new Gtk.Image({ halign:3, valign:3 }); //-- vertical center
//-- ICON case
if (image_URL_orPATH_orICON.indexOf("icon://")==0) widgets.image.set_from_icon_name (image_URL_orPATH_orICON.slice (7,image_URL_orPATH_orICON.length), standards.icon_size);
//-- URL or PATH
else
{
widgets.imagePixBuf=get_pixbuf_from_URLorPATH (image_URL_orPATH_orICON);
if (widgets.imagePixBuf)
{
if (standards.image_width.constructor === Number)
{
width=standards.image_width;
if (standards.image_height =="auto") height=Math.round (width/widgets.imagePixBuf.width*widgets.imagePixBuf.height);
}
if (standards.image_height.constructor === Number)
{
height=standards.image_height;
if (standards.image_width == "auto") width=Math.round (height/widgets.imagePixBuf.height*widgets.imagePixBuf.width);
}
widgets.image.set_from_pixbuf (widgets.imagePixBuf.scale_simple (width, height, GdkPixbuf.InterpType.BILINEAR));
}
}
widgets.hbox.pack_start(widgets.image,false,false,0);
}
//-- titlebar title
widgets.label= new Gtk.Label ({ label:title }); widgets.hbox.pack_start(widgets.label,false,false,0);
cssProvider=new Gtk.CssProvider();
cssProvider.load_from_data ("* "+standards.title_css_STR);
widgets.label.get_style_context().add_provider (cssProvider,0);
if (tooltip_text) widgets.label.set_tooltip_text (tooltip_text);
//-- determine titlebar buttons width and height, defined in ToolFrame.standards
if (standards.button_width.constructor === Number) width=standards.button_width; else width=-1;
if (standards.button_height.constructor === Number) height=standards.button_height; else height=-1;
//-- creating titlebar buttons according to ToolFrame.standards
cssProvider=new Gtk.CssProvider();
cssProvider.load_from_data ("* "+standards.buttons_css_STR);
if (standards.buttons_creation.close)
{
widgets.button_close= new Gtk.Button ({ label:standards.button_close_char, halign:3, valign:3 }),
widgets.button_close.connect("clicked", button_close_clicked);
widgets.hbox.pack_end(widgets.button_close,false,false,0);
widgets.button_close.set_size_request (width, height);
widgets.button_close.get_style_context().add_provider(cssProvider,0);
if (standards.button_tooltip) widgets.button_close.set_tooltip_text("close");
}
if (standards.buttons_creation.pin)
{
if (standards.isPinned) widgets.button_pin=new Gtk.Button ({ label:standards.button_pinned_char, halign:3, valign:3 });
else widgets.button_pin=new Gtk.Button ({label:standards.button_pin_char, halign:3, valign:3 });
widgets.button_pin.connect("clicked", button_pin_clicked);
widgets.hbox.pack_end(widgets.button_pin,false,false,0);
widgets.button_pin.set_size_request (width, height);
widgets.button_pin.get_style_context().add_provider(cssProvider,0);
if (standards.button_tooltip) widgets.button_pin.set_tooltip_text("pin");
}
if (standards.buttons_creation.minimize_expand)
{
widgets.button_expand= new Gtk.Button ({ label:standards.button_expand_char, halign:3, valign:3 }),
widgets.button_expand.connect("clicked", button_expand_clicked);
widgets.hbox.pack_end(widgets.button_expand,false,false,0);
widgets.button_expand.set_size_request (width, height);
widgets.button_expand.get_style_context().add_provider(cssProvider,0);
if (standards.button_tooltip) widgets.button_expand.set_tooltip_text("expand");
widgets.button_minimize= new Gtk.Button ({label:standards.button_minimize_char, halign:3, valign:3 }),
widgets.button_minimize.connect("clicked", button_minimize_clicked);
widgets.hbox.pack_end(widgets.button_minimize,false,false,0);
widgets.button_minimize.set_size_request (width, height);
widgets.button_minimize.get_style_context().add_provider(cssProvider,0);
if (standards.button_tooltip) widgets.button_minimize.set_tooltip_text("minimize");
//-- sensitivity button_minimize, button_expand
if (standards.content_visible_atStart) widgets.button_expand.set_sensitive(false);
else widgets.button_minimize.set_sensitive(false);
}
/* setting references for ToolFrame instance; fixed_container -> stage container for all ToolFrame instances
root_widget -> representing ToolFrame instance on screen; widgets -> folder for all widgets including image pixbuffer;
style_contexts -> holds the style context of vbox and hbox and some button chars */
widgets.content=content;
this.fixed_container=fixed_container; //-- the parent of all ToolFrame instances, a Gtk.Fixed
this.root_widget=widgets.eventbox_for_vbox; //-- the ToolFrame instance root widget, an eventbox (for vbox)
this.widgets=widgets; //-- an object, which holds references to all widgets inclusive imagePixBuf
this.style_contexts=style_contexts; //-- an object, which holds references to style contexts (hbox, vbox)
//-- adding buttons_pin.. characters to style_contexts
style_contexts.button_pin_char=standards.button_pin_char;
style_contexts.button_pinned_char=standards.button_pinned_char;
//-- css, style of hbox
cssProvider=new Gtk.CssProvider();
cssProvider.load_from_data(".divider "+standards.divider_css_borderSTR);
style_contexts.hbox=widgets.hbox.get_style_context();
if (standards.content_visible_atStart) style_contexts.hbox.add_class("divider");
style_contexts.hbox.add_provider(cssProvider,0);
if (standards.titlebar_spacing.constructor === Number) widgets.hbox.spacing=standards.titlebar_spacing;
if (standards.titlebar_margin_start.constructor === Number) widgets.hbox.margin_start=standards.titlebar_margin_start; //--set margin values
if (standards.titlebar_margin_end.constructor === Number) widgets.hbox.margin_end=standards.titlebar_margin_end;
if (standards.titlebar_margin_top.constructor === Number) widgets.hbox.top_right=standards.titlebar_margin_top;
if (standards.titlebar_margin_bottom.constructor === Number) widgets.hbox.bottom_right=standards.titlebar_margin_bottom;
//-- css, style of vbox
cssProvider=new Gtk.CssProvider();
cssProvider.load_from_data("* "+standards.toolframe_css_STR+" .moving "+standards.toolframe_move_css_STR);
style_contexts.vbox=widgets.vbox.get_style_context ();
style_contexts.vbox.add_provider (cssProvider,0);
widgets.vbox.override_background_color (Gtk.StateFlags.NORMAL, standards.toolframe_backgroundColor);
if (standards.toolframe_spacing.constructor === Number) widgets.vbox.spacing=standards.toolframe_spacing;
//-- set content margin values
if (standards.content_margin_start.constructor === Number) widgets.scrolled_window.margin_start=standards.content_margin_start; //--set margin values
if (standards.content_margin_end.constructor === Number) widgets.scrolled_window.margin_end=standards.content_margin_end;
if (standards.content_margin_top.constructor === Number) widgets.scrolled_window.top_right=standards.content_margin_top;
if (standards.content_margin_bottom.constructor === Number) widgets.scrolled_window.bottom_right=standards.content_margin_bottom;
//-- PRIVATE folder on instance - holds x,y (actual position), expanded_width and expanded_height
this[private_key]={
_x:x, _y:y,
_expanded_width:standards.toolframe_expanded_width,
_expanded_height:standards.toolframe_expanded_height}
//-- set toolframe minimum width and height
if (standards.toolframe_minimum_width.constructor === Number) width=standards.toolframe_minimum_width; else width=-1;
if (standards.toolframe_minimum_height.constructor === Number) height=standards.toolframe_minimum_height; else height=-1;
this.root_widget.set_size_request (width, height);
//-- build widget tree
widgets.eventbox_for_hbox.add (widgets.hbox);
widgets.vbox.add (widgets.eventbox_for_hbox);
widgets.scrolled_window.add (content);
widgets.vbox.add (widgets.scrolled_window);
widgets.eventbox_for_vbox.add (widgets.vbox);
fixed_container.add (widgets.eventbox_for_vbox);
//-- instance properties isPinned, isExpanded, push to toolframes prototype array collection
this.isPinned=standards.isPinned; //-- indicates, that the toolframe is pinned
if (standards.content_visible_atStart) this.isExpanded=true; //-- indicates, that the toolframe is expanded
else this.isExpanded=false;
ToolFrame.prototype.toolframes.push(this);
//-- connect to hbox, vbox signals
widgets.eventbox_for_hbox.connect("button-press-event",start_moving);
widgets.eventbox_for_hbox.connect("button-release-event",stop_moving);
widgets.eventbox_for_vbox.connect ("button-press-event",this.set_AsLastChild.bind(this));
widgets.eventbox_for_vbox.connect ("size-allocate",observe_root_widget.bind(this));
//-- in this handler the scrolled_window visibility is set to standards.content_visible_atStart at first show signal
this[private_key].handler_first_show_signal=widgets.scrolled_window.connect("show", observe_first_show_signal);
}
//----------------- CONSTRUCTOR -- END
//-----------------------------------------------------------------------
//------------------PROTOTYPE
ToolFrame.prototype.toolframes=[]; //-- a collection of all toolframes created
ToolFrame.prototype.toolframe_inAction=null; //-- the toolframe, which is moved, when moving takes place
//-- put the ToolFrame instance as last child of the fixed_container, its like increasing zIndex, to bring it on top
ToolFrame.prototype.set_AsLastChild=function ()
{
const children=this.fixed_container.get_children(), l=children.length;
if (this.root_widget !== children[l-1])
{
this.fixed_container.remove (this.root_widget);
this.fixed_container.add (this.root_widget);
}
}
//-- moves the toolframe to x,y (INT) position
ToolFrame.prototype.move=function (x,y)
{
const allocation=this.root_widget.get_allocation (), PRIVATE=this[private_key];
PRIVATE._x=allocation.x=x; PRIVATE._y=allocation.y=y;
observing_size_allocation=false;
this.root_widget.size_allocate (allocation);
observing_size_allocation=true;
}
/* sets the expanded_width and expanded_height, which are stored in a PRIVATE instance folder - width, height INT
you can set minimum_width and minimum_height over set_size_request on root_widget */
ToolFrame.prototype.set_expanded_size=function (width,height)
{
const PRIVATE=this[private_key];
PRIVATE._expanded_width=width; PRIVATE._expanded_height=height;
if (this.isExpanded) observe_root_widget.call (this, this.widgets.eventbox_for_vbox);
}
//-- gets the expanded_width and expanded_height stored in the PRIVATE instance folder
ToolFrame.prototype.get_expanded_size=function ()
{
const PRIVATE=this[private_key];
return { expanded_width: PRIVATE._expanded_width, expanded_height: PRIVATE._expanded_height };
}
//------------------PROTOTYPE -- END
//-----------------------------------------------------------------------
//------------------------------------------------------------------------------------------------------------------------------------
//----------------- PRIVATE objects, properties, methods
let private_key=Symbol (), //-- PRIVATE instance folder key
observing_size_allocation=true, //-- indicates, that the "size-allocate" signal shall be observed for uncontrollable automatic gtk allocation changes on the root widget
isMoving=false, //-- indicates, when moving shall happen inside window "motion-notify-event" signal
move_allocation=null, //-- holds the actual allocation during movement
moveStart_allocation=null, //-- saves the ToolFrame instance allocation (x,y,width,height) at move start
moveStart_eventCoords=null, //-- saves the pointer coordinates at move start -> difference in pointer coordinates equals difference in instance allocation (x,y)
titlebar_margin=0, content_margin=0, //-- saves standards titlebar_margin and content_margin
//-----------------------------------------------------------------------
//------------------------------------------------------ Signal functions
button_minimize_clicked=function (button)
{
const actual_toolframe=button.get_parent().toolframe, PRIVATE=actual_toolframe[private_key],
widgets=actual_toolframe.widgets;
widgets.scrolled_window.set_visible (false);
widgets.button_minimize.set_sensitive (false);
widgets.button_expand.set_sensitive (true);
actual_toolframe.style_contexts.hbox.remove_class ("divider");
actual_toolframe.isExpanded=false;
actual_toolframe.set_AsLastChild ();
},
button_expand_clicked=function (button)
{
const actual_toolframe=button.get_parent().toolframe, PRIVATE=actual_toolframe[private_key],
widgets=actual_toolframe.widgets;
widgets.scrolled_window.set_visible (true);
widgets.button_minimize.set_sensitive (true);
widgets.button_expand.set_sensitive (false);
actual_toolframe.style_contexts.hbox.add_class ("divider");
actual_toolframe.isExpanded=true;
actual_toolframe.set_AsLastChild ();
},
button_pin_clicked=function (button)
{
const actual_toolframe=button.get_parent().toolframe;
actual_toolframe.isPinned=!actual_toolframe.isPinned;
if (actual_toolframe.isPinned) actual_toolframe.widgets.button_pin.label=actual_toolframe.style_contexts.button_pinned_char;
else actual_toolframe.widgets.button_pin.label=actual_toolframe.style_contexts.button_pin_char;
actual_toolframe.set_AsLastChild ();
},
button_close_clicked=function (button) { button.get_parent().toolframe.root_widget.set_visible (false); },
//-- connected to eventbox_for_hbox signal "button-press-event" , initiate moving
start_moving=function (eventbox_for_hbox, event)
{
const actual_toolframe=eventbox_for_hbox.get_children()[0].toolframe;
var eventCoords;
if (actual_toolframe.isPinned) return;
eventCoords=event.get_root_coords(); //-- coords relative to eventbox_for_hbox origin (hbox)
isMoving=true;
move_allocation=actual_toolframe.widgets.eventbox_for_vbox.get_allocation ();
moveStart_allocation=actual_toolframe.widgets.eventbox_for_vbox.get_allocation ();
moveStart_eventCoords={
x: Math.trunc(eventCoords[1]),
y: Math.trunc(eventCoords[2])};
actual_toolframe.style_contexts.vbox.add_class("moving");
ToolFrame.prototype.toolframe_inAction=actual_toolframe;
},
//-- connected to eventbox_for_hbox signal "button-release-event", stops moving, set necessary values back to null
stop_moving=function (eventbox_for_hbox)
{
const actual_toolframe=eventbox_for_hbox.get_children()[0].toolframe;
isMoving=false;
move_allocation=null;
moveStart_allocation=null;
moveStart_eventCoords=null;
ToolFrame.prototype.toolframe_inAction=null;
actual_toolframe.style_contexts.vbox.remove_class("moving");
},
//-- connected to window signal "motion-notify-event", moves the toolframe with pointer device
move_toolframe=function (window, event)
{
var actual_toolframe, PRIVATE, eventCoords;
if (isMoving)
{
actual_toolframe=ToolFrame.prototype.toolframe_inAction, PRIVATE=actual_toolframe[private_key];
eventCoords=event.get_root_coords();
PRIVATE._x=move_allocation.x=Math.trunc(eventCoords[1])-moveStart_eventCoords.x+moveStart_allocation.x;
PRIVATE._y=move_allocation.y=Math.trunc(eventCoords[2])-moveStart_eventCoords.y+moveStart_allocation.y;
observing_size_allocation=false;
actual_toolframe.root_widget.size_allocate (move_allocation);
observing_size_allocation=true;
}
},
/* connected to eventbox_for_vbox signal "size-allocate", overwrites the gtk layout coords, dimensions
gtk layout replaces the tool frame and its dimensions according to its inner rules,
thats not very helpful, if the tool frame should be placed at different position, or should show up with different width and height, than gtk layout calculates.
so to force gtk to accept different dimensions, the gtk signal "size allocate" for the tool frame (eventbox_for_vbox) is observed */
observe_root_widget=function (eventbox_for_vbox)
{
var gtk_allocation, replacing, PRIVATE;
if (observing_size_allocation)
{
gtk_allocation=eventbox_for_vbox.get_allocation (), replacing=false, PRIVATE=eventbox_for_vbox.toolframe[private_key];
if (gtk_allocation.x != PRIVATE._x)
{
replacing=true;
gtk_allocation.x=PRIVATE._x;
}
if (gtk_allocation.y != PRIVATE._y)
{
replacing=true;
gtk_allocation.y=PRIVATE._y;
}
if (eventbox_for_vbox.toolframe.isExpanded)
{
if (PRIVATE._expanded_width.constructor === Number && gtk_allocation.width!=PRIVATE._expanded_width)
{
replacing=true;
gtk_allocation.width=PRIVATE._expanded_width;
}
if (PRIVATE._expanded_height.constructor === Number && gtk_allocation.height!=PRIVATE._expanded_height)
{
replacing=true;
gtk_allocation.height=PRIVATE._expanded_height;
}
}
if (replacing)
{
observing_size_allocation=false; //-- prohibit calls of size_allocate to infinity, because next line is causing another size-allocate event, which is immediately worked through
this.root_widget.size_allocate (gtk_allocation); //-- causes again a size-allocate event
this.root_widget.set_clip (gtk_allocation);
observing_size_allocation=true; //-- additionally size-allocate event is now worked through, allow observing again
}
}
},
/* connected to scrolled_window (holds content) signal "show"; is needed to set the visibility according to standards content_visible_atStart property at first show signal
after executing one time the handler is disconnected */
observe_first_show_signal=function (scrolled_window)
{
var PRIVATE=scrolled_window.get_parent().get_parent().toolframe[private_key];
scrolled_window.set_visible(ToolFrame.standards.content_visible_atStart);
scrolled_window.disconnect (PRIVATE.handler_first_show_signal);
PRIVATE.handler_first_show_signal=null
},
//------------------------------------------------------ Signal functions -- END
//-----------------------------------------------------------------------
//-- returns the image pixelbuffer from URL or PATH
get_pixbuf_from_URLorPATH=function (URLorPATH)
{
var file, pixbuf=null;
//-- URL contains //
if (URLorPATH.indexOf("//")>-1)
{
file=Gio.File.new_for_uri (URLorPATH);
try { pixbuf=GdkPixbuf.Pixbuf.new_from_stream (file.read (null), null); }
catch (error) { log (error+" - "+URLorPATH) }
return pixbuf;
}
else return GdkPixbuf.new_from_file (URLorPATH);
};
//-- connect to window signals
window.connect ("motion-notify-event", move_toolframe);
//----------------- PRIVATE objects, properties, methods
//------------------------------------------------------------------------------------------------------------------------------------
//----------------- STATIC object ToolFrame standards
ToolFrame.standards={
isPinned: false, //-- indicates, if the tool frame can move
toolframe_minimum_width: "auto", //-- minimum width of tool frame in minimize appearance
toolframe_minimum_height: "auto", //-- minimum height of tool frame in minimize apperance
toolframe_expanded_width: "auto", //-- width of tool frame in expand appearance
toolframe_expanded_height: "auto", //-- height of tool frame in expand appearance
image_width: "auto", //-- image minimum width and height
image_height: 24,
icon_size: Gtk.IconSize.LARGE_titlebar, //-- Look at Gtk.IconSize (24px)
button_width: "auto", //-- button minimum width and height
button_height: "auto",
toolframe_spacing: 2, titlebar_spacing: 2, //-- vbox, hbox spacing
titlebar_margin_start: 2, titlebar_margin_end:2, titlebar_margin_top:2, titlebar_margin_bottom:2, //-- hbox margin values
content_margin_start: 2, content_margin_end:2, content_margin_top:2, content_margin_bottom:2, //-- content margin values
content_visible_atStart: false, //-- indicates, if content shall be visible at start
buttons_creation: { minimize_expand:true, pin:true, close:true }, //-- indicates, which buttons shall be created
button_minimize_char: "\u25B4", //-- button characters
button_expand_char: "\u25BE",
button_pin_char: "\u21C4",
button_pinned_char: "\u21B9",
button_close_char: "X",
button_tooltip: true, //-- indicates, if tooltips shall be shown by hovering buttons
//-- css style strings
toolframe_css_STR: "{ border:1px solid black }",
toolframe_move_css_STR: "{ border-style:dashed }",
toolframe_backgroundColor: new Gdk.RGBA ({ red:1, green:1, blue:1, alpha:1}), //-- toolframe background color
title_css_STR: "{ font-weight:bold }",
buttons_css_STR: "{}",
divider_css_borderSTR: "{ border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:black }", //-- divider between titlebar and content -> hbox border bottom
}
//-- standards titlebar_margin, content_margin
Object.defineProperties (ToolFrame.standards,{
titlebar_margin : { get: () => titlebar_margin, set: function (value) {
titlebar_margin=value;
this.titlebar_margin_start=value; this.titlebar_margin_end=value;
this.titlebar_margin_top=value;this.titlebar_margin_bottom=value;}, enumerable:true, configurable:false },
content_margin : { get: () => content_margin, set: function (value) {
content_margin=value;
this.content_margin_start=value; this.content_margin_end=value;
this.content_margin_top=value;this.content_margin_bottom=value;}, enumerable:true, configurable:false }});
//----------------- STATIC object ToolFrame standards -- END
//------------------------------------------------------------------------------------------------------------------------------------
} //-----> blockscope Class ToolFrame
/* ==================================================================================================================================
CLASS ToolFrame -- END
================================================================================================================================== */
let file=Gio.File.new_for_uri("https://i.ytimg.com/vi/fa5e_r6ZPoM/maxresdefault.jpg"),
image=Gtk.Image.new_from_pixbuf (GdkPixbuf.Pixbuf.new_from_stream(file.read(null),null));
new ToolFrame(fixed_container,20, 20, "http://www.iconeasy.com/icon/png/File%20Type/Software%20Files/Txt.png", "Text Viewer", "view text", new Gtk.Label ({label:"hello World\n Hello World Hello World"}));
ToolFrame.standards.toolframe_expanded_width=500;
ToolFrame.standards.toolframe_expanded_height=300;
ToolFrame.standards.buttons_width=24;
new ToolFrame(fixed_container,20, 60, "http://icons.iconseeker.com/png/fullsize/glaze/folder-image.png", "Image Viewer", "view image", image);
window.add(fixed_container);
window.set_title("Toolframe Example");
window.connect('destroy', () => { Gtk.main_quit(); });
window.set_size_request (740, 600);
window.show_all(); Gtk.main();
it was my fault.
To bring a widget on top of drawing action (zIndex) everytime a click happened inside the widget, i removed it from the Fixed container and add it at last child, this caused the strange action.
I now use Gtk.Overlay for the zIndex and every toolframe has its own Gtk.Fixed container as stage and is added to Gtk.Overlay.
I have a simplier example with Images. class MovingImages.
But how do you change the container(dashed box around the image) to a defined width and height smaller than the image?
#!/usr/bin/gjs
const Gtk= imports.gi.Gtk,
Gio= imports.gi.Gio,
GdkPixbuf= imports.gi.GdkPixbuf;
Gtk.init(null);
const window= new Gtk.Window(),
box= new Gtk.Box (),
overlay= new Gtk.Overlay();
box.add (new Gtk.Label ({ label:"Drag The Images!", hexpand:true, halign:3, valign:3 }))
//-- class MovingImage
{
var MovingImage=function (overlay, x, y, image_url)
{
let file=Gio.File.new_for_uri (image_url),
image=Gtk.Image.new_from_pixbuf (GdkPixbuf.Pixbuf.new_from_stream(file.read(null),null)),
cssProvider=new Gtk.CssProvider(), allocation;
this.overlay=overlay;
this.stage=new Gtk.Fixed ();
this.container=new Gtk.EventBox ();
this.image=image;
this.container.movingImage=this; //-- circular reference
cssProvider.load_from_data("* {border:1px dashed black;}");
this.container.get_style_context().add_provider (cssProvider,0);
this.container.add (image);
this.stage.put (this.container,x,y);
overlay.add_overlay (this.stage);
overlay.set_overlay_pass_through(this.stage,true);
this.container.connect ("button-press-event", container_button_down);
this.container.connect ("button-release-event", container_button_up);
}
MovingImage.prototype.instance_inAction=null;
let isMoving=false,
moveStart_allocation=null,
moveStart_event_coords=null,
container_button_down=function (container, event)
{
const event_coords=event.get_root_coords();
isMoving=true;
MovingImage.prototype.instance_inAction=container.movingImage;
moveStart_allocation=container.get_allocation ();
moveStart_event_coords={
x: Math.trunc(event_coords[1]),
y: Math.trunc(event_coords[2])};
container.movingImage.overlay.reorder_overlay (container.movingImage.stage,-1);
},
container_button_up=function ()
{
isMoving=false;
MovingImage.prototype.instance_inAction=null;
moveStart_allocation=null;
moveStart_event_coords=null;
},
container_move=function (window, event)
{
var event_coords, movingImage;
if (isMoving)
{
event_coords=event.get_root_coords();
movingImage=MovingImage.prototype.instance_inAction;
movingImage.stage.move (movingImage.container,
Math.trunc(event_coords[1]-moveStart_event_coords.x+moveStart_allocation.x),
Math.trunc(event_coords[2]-moveStart_event_coords.y+moveStart_allocation.y));
}
};
window.connect ("motion-notify-event", container_move);
}
//-- class MovingImage -- END
overlay.add (box);
window.add (overlay);
let image1=new MovingImage (overlay,20,20,"https://icons.iconarchive.com/icons/shrikant-rawa/animals/128/dog-icon.png"),
image2=new MovingImage (overlay,100,60,"https://icons.iconarchive.com/icons/martin-berube/square-animal/128/Bull-icon.png");
window.set_title("MovingImage Example");
window.connect('destroy', () => { Gtk.main_quit(); });
window.set_size_request (640, 480);
window.show_all(); Gtk.main();
to change the width and height, i have to connect to the "size-allocate" signal of the container and always overwrite the allocation
this.container.connect ("size-allocate", reallocate_container);
reallocate_container=function (container)
{
const allocation=container.get_allocation ();
allocation.width=50;
allocation.height=50;
container.set_allocation(allocation);
container.set_clip (allocation);
}
isnt there a way to set the width and height without this?
the complete change example:
#!/usr/bin/gjs
const Gtk= imports.gi.Gtk,
Gio= imports.gi.Gio,
GdkPixbuf= imports.gi.GdkPixbuf;
Gtk.init(null);
const window= new Gtk.Window(),
box= new Gtk.Box (),
overlay= new Gtk.Overlay();
box.add (new Gtk.Label ({ label:"Drag The Images!", hexpand:true, halign:3, valign:3 }))
//-- class MovingImage
{
var MovingImage=function (overlay, x, y, image_url)
{
let file=Gio.File.new_for_uri (image_url),
image=Gtk.Image.new_from_pixbuf (GdkPixbuf.Pixbuf.new_from_stream(file.read(null),null)),
cssProvider=new Gtk.CssProvider(), allocation;
this.overlay=overlay;
this.stage=new Gtk.Fixed ();
this.container=new Gtk.EventBox ();
this.image=image;
this.container.movingImage=this; //-- circular reference
cssProvider.load_from_data("* {border:1px dashed black;}");
this.container.get_style_context().add_provider (cssProvider,0);
this.container.add (image);
this.stage.put (this.container,x,y);
overlay.add_overlay (this.stage);
overlay.set_overlay_pass_through(this.stage,true);
this.container.connect ("size-allocate", reallocate_container);
this.container.connect ("button-press-event", container_button_down);
this.container.connect ("button-release-event", container_button_up);
}
MovingImage.prototype.instance_inAction=null;
let isMoving=false,
moveStart_allocation=null,
moveStart_event_coords=null,
container_button_down=function (container, event)
{
const event_coords=event.get_root_coords();
isMoving=true;
MovingImage.prototype.instance_inAction=container.movingImage;
moveStart_allocation=container.get_allocation ();
moveStart_event_coords={
x: Math.trunc(event_coords[1]),
y: Math.trunc(event_coords[2])};
container.movingImage.overlay.reorder_overlay (container.movingImage.stage,-1);
},
container_button_up=function ()
{
isMoving=false;
MovingImage.prototype.instance_inAction=null;
moveStart_allocation=null;
moveStart_event_coords=null;
},
container_move=function (window, event)
{
var event_coords, movingImage;
if (isMoving)
{
event_coords=event.get_root_coords();
movingImage=MovingImage.prototype.instance_inAction;
movingImage.stage.move (movingImage.container,
Math.trunc(event_coords[1]-moveStart_event_coords.x+moveStart_allocation.x),
Math.trunc(event_coords[2]-moveStart_event_coords.y+moveStart_allocation.y));
}
},
reallocate_container=function (container)
{
const allocation=container.get_allocation ();
allocation.width=50;
allocation.height=50;
container.set_allocation(allocation);
container.set_clip (allocation);
}
window.connect ("motion-notify-event", container_move);
}
//-- class MovingImage -- END
overlay.add (box);
window.add (overlay);
let image1=new MovingImage (overlay,20,20,"https://icons.iconarchive.com/icons/shrikant-rawa/animals/128/dog-icon.png"),
image2=new MovingImage (overlay,100,60,"https://icons.iconarchive.com/icons/martin-berube/square-animal/128/Bull-icon.png");
window.set_title("MovingImage Example");
window.connect('destroy', () => { Gtk.main_quit(); });
window.set_size_request (640, 480);
window.show_all(); Gtk.main();
Configuration is Ubunutu Server 18.04 LTS / Xorg / openbox / GTK3
I have been struggling to figure out why I can't get GtkCssProvider to work on even the most basic item. If have been working with different examples but here is one similar to another post.
Here is the app code that will display the label.
#include <gtk/gtk.h>
int main(int argc, char *argv[])
{
gtk_init(&argc, &argv);
GtkWidget * window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GtkWidget * label = gtk_label_new("Label 0123456789");
GtkCssProvider * cssProvider = gtk_css_provider_new();
g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
if( gtk_css_provider_load_from_path(cssProvider, "csstest.css", NULL) )
{
gtk_style_context_add_provider(gtk_widget_get_style_context(label),
GTK_STYLE_PROVIDER(cssProvider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
gtk_container_add(GTK_CONTAINER(window), label);
gtk_widget_show_all(window);
gtk_main();
}
return 0;
}
The .CSS file is simple:
GtkLabel {
color: green;
}
The one post indicated that the gtk_style_context_add_provider() should be replaced with the gtk_style_context_add_provider_for_screen() call. Neither seems to have any effect. The label is appearing in the default style black on gray. So what is the trick to getting the Css style to be applied to the widget.
My requirement is to have different styles I can set to different widgets. I assume I can create some type of class construct in the Css that will allow me to apply different themes to the same widget via the gtk_style_context_add_provider() call. However I have not been able to figure that out either. I see how I can set a style in the Css for a specific named widget (via ID) but this appears to be only a predefined statc definition. Any suggestions on this would be helpful.
The CSS selector for a label is label, not GtkLabel:
label {
color: green;
}
See the GtkLabel API reference which lists the valid selectors.
You should also use the GTK Inspector to test CSS fragments.
You may also want to read the API reference for CSS handling in GTK, as well as the GtkStyleContext documentation.
Thanks ebassi for the clarification on the change to css. I shouldn't have started with an older example. Here was the completed example working in GTK 3.22 I ended up with to demonstrate the dynamic change in appearance using CSS styles:
#include <gtk/gtk.h>
GtkWidget * label1;
GtkWidget * label2;
GtkWidget * label3;
// Handler to change the appearance of the widgets from their original
void button_clicked (GtkButton * button, gpointer user_data)
{
// names are defined in the .CSS
gtk_widget_set_name( GTK_WIDGET(label1) , "" );
gtk_widget_set_name( GTK_WIDGET(label2) , "white-widget" );
gtk_widget_set_name( GTK_WIDGET(label3) , "red-widget" );
}
// Set the style provider for the widgets
static void apply_css_provider (GtkWidget * widget, GtkCssProvider * cssstyleProvider)
{
gtk_style_context_add_provider ( gtk_widget_get_style_context(widget), GTK_STYLE_PROVIDER(cssstyleProvider) , GTK_STYLE_PROVIDER_PRIORITY_USER );
// For container widgets, apply to every child widget on the container
if (GTK_IS_CONTAINER (widget))
{
gtk_container_forall( GTK_CONTAINER (widget), (GtkCallback)apply_css_provider , cssstyleProvider);
}
}
int main(int argc, char *argv[])
{
gtk_init(&argc, &argv);
GtkWidget * window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
GtkCssProvider * cssProvider = gtk_css_provider_new();
GtkWidget * fixed = gtk_fixed_new();
GtkWidget * button = gtk_button_new_with_label ("Change");
//create the labels for this test
label1 = gtk_label_new("Label 0001");
label2 = gtk_label_new("Label 23456789");
label3 = gtk_label_new("Label 3");
//setup container and add widgets
gtk_container_add (GTK_CONTAINER (window), fixed);
gtk_fixed_put( GTK_FIXED(fixed), label1 , 30 , 30 );
gtk_fixed_put( GTK_FIXED(fixed), label2 , 30 , 50 );
gtk_fixed_put( GTK_FIXED(fixed), label3 , 30 , 70 );
gtk_fixed_put( GTK_FIXED(fixed), button , 30 , 110 );
//register the handlers
g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
g_signal_connect(button, "clicked", G_CALLBACK(button_clicked), NULL );
if( gtk_css_provider_load_from_path(cssProvider, "csstest.css", NULL) )
{
apply_css_provider( window , cssProvider );
// set a default style - name is defined in .CSS file
gtk_widget_set_name( GTK_WIDGET(label1) , "red-widget" );
gtk_widget_show_all(window);
gtk_main();
}
return 0;
}
csstest.css:
/* default coloring of widgets */
* {
background-color: #00ee00;
}
#red-widget {
color: white;
background-color: red;
}
#white-widget {
color: red;
background-color: white;
}
button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background-image: none;
}
I'm using glade3 to develop a simple app on windows. The official reference manual seems out of date, so I use the gtk-function to create the Listview and put the MySQL-Query result under the field rows. Need help about create the listview by glade3 not by the codes.
Thanks anymore!
My code:
#include <gtk/gtk.h>
#include <stdio.h>
#include <stdlib.h>
#include <windows.h>
#include <string.h>
#include "mysql.h"
#define HOST "localhost"
#define USERNAME "root"
#define PASSWORD ""
#define DATABASE "student"
enum ListCols
{
LIST_NUM,
LIST_NAME,
LIST_CHECKED,
LIST_CNT
};
int main (int argc, char *argv[])
{
GtkWidget* win;
GtkWidget* vbox ;
GtkWidget* statusbar ;
GtkTreeView* tree;
GtkTreeView* list;
GtkTreeStore* tree_store;
GtkListStore* list_store;
GtkTreeIter iter;
GtkTreeIter iter_child;
GtkCellRenderer* renderer;
GtkTreeViewColumn* column;
GtkTreeSelection* select;
MYSQL my_connection;
MYSQL_RES *res_ptr;
MYSQL_FIELD *field;
MYSQL_ROW result_row;
int res;
int row, col;
int i, j;
char * sql = "select * from person;";
gtk_init (&argc, &argv);
win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_window_set_title (GTK_WINDOW (win), "QueryData");
gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
gtk_widget_set_size_request(win, 480, 480);
vbox = gtk_vbox_new (FALSE, 2);
gtk_container_add (GTK_CONTAINER (win), vbox);
list = gtk_tree_view_new();
list_store = gtk_list_store_new(LIST_CNT,
G_TYPE_STRING,
G_TYPE_STRING,
G_TYPE_BOOLEAN);
mysql_init(&my_connection);
if (mysql_real_connect(&my_connection, HOST, USERNAME, PASSWORD,DATABASE, 0, NULL, CLIENT_FOUND_ROWS))
{
printf("Query data successfully!\n");
mysql_query(&my_connection, "set names utf8");
res = mysql_query(&my_connection, sql);
if (res)
{
printf("Error: mysql_query !\n");
mysql_close(&my_connection);
}
else
{
res_ptr = mysql_store_result(&my_connection);
if (res_ptr)
{
col = mysql_num_fields(res_ptr);
row = mysql_num_rows(res_ptr) + 1;
printf("%d lines queried\n", row);
for (i = 0; field = mysql_fetch_field(res_ptr); i++)
printf("%s ", field->name);
printf("\n");
for (i = 1; i < row; i++)
{
result_row = mysql_fetch_row(res_ptr);
gtk_list_store_append(list_store, &iter);
gtk_list_store_set(list_store, &iter,
LIST_NUM, result_row[0],
LIST_NAME, result_row[2],
LIST_CHECKED, FALSE, -1);
}
}
mysql_close(&my_connection);
}
}
else
printf("Fail to query data!\n");
for (int k = 0; k < 3; k++)
gtk_tree_view_set_model(list, list_store);
g_object_unref(list_store);
renderer = gtk_cell_renderer_text_new();
column = gtk_tree_view_column_new_with_attributes("Name", renderer,
"text", LIST_NUM, NULL);
column = gtk_tree_view_append_column(list, column);
renderer = gtk_cell_renderer_text_new();
column = gtk_tree_view_column_new_with_attributes("Age", renderer,
"text", LIST_NAME, NULL);
column = gtk_tree_view_append_column(list, column);
renderer = gtk_cell_renderer_toggle_new();
column = gtk_tree_view_column_new_with_attributes("PersonInfo", renderer,
"active", LIST_CHECKED, NULL);
column = gtk_tree_view_append_column(list, column);
gtk_box_pack_start(vbox, list, TRUE, TRUE, 1);
g_signal_connect (win, "destroy", gtk_main_quit, NULL);
gtk_widget_show_all (win);
gtk_main ();
return 0;
}
First of all you have to create a container to hold the treeview. If your using a grid, you can use a ScrolledWindow for example. In this example I just put it directly in the window container. Drag the TreeView on the window container:
Then a dialog asks you for the corresponding treestore:
Press on the pen and paper icon to open another dialog. Then press on "new".
This will get you back to the first dialog, with the newly created TreeStore already filled into the field. You can just press "Create":
Then you can start creating columns for the TreeStore. I created on for the Name (gchararray) and one for the Age (gint):
After that you can add data to the TreeStore:
Finally you still have to add columns to the TreeView. That is done by clicking on the TreeView --> click edit --> go to Hierarchy tab --> Add as many columns as you need.
Don't forget to also load the liststore from the Glade file, otherwise your data will not be present, when you run the program from the code.
Let's say you already have a container and you want to add a tree view into it.
To do that, you look at the "Control and Display" category of widgets, and locate "tree view". If you can't find it, or can't identify the icon, try hovering each icon until you find it.
Click on the icon, then click on the container that you wish to add it to. This will immediately cause a dialog box to occur, asking you to link it with a tree model. You can click the pencil icon, then click "New" to create a list store.
Alternatively, you can create a list store or tree store first. In the widget selection side panel, look under "Miscellaneous". (Between "Composite Widgets" and "Deprecated".) Locate list store or tree store, and click on it to create it. Now if you create the tree view (using the method above), you can choose this tree store / list store as your model.