Background
My aim is to improve a little text editor as an exercise. It is running fine after the HeaderBar was added, however I can't find a way to pack buttons in it.
Code
uses
Granite.Widgets
Gtk
init
Gtk.init (ref args)
var app = new Application ()
app.show_all ()
Gtk.main ()
// This class holds all the elements from the GUI
class Application : Gtk.Window
_view:Gtk.TextView
construct ()
// Prepare Gtk.Window:
this.window_position = Gtk.WindowPosition.CENTER
this.destroy.connect (Gtk.main_quit)
this.set_default_size (400, 400)
// Headerbar definition
headerbar:Gtk.HeaderBar = new Gtk.HeaderBar()
headerbar.show_close_button = true
headerbar.set_title("My text editor")
// Headerbar buttons
var open_button = new ToolButton.from_stock(Stock.Open)
// Add everything to the toolbar
open_button.pack_start ()
show_all ()
this.set_titlebar(headerbar)
// Box:
box:Gtk.Box = new Gtk.Box (Gtk.Orientation.VERTICAL, 1)
this.add (box)
// A ScrolledWindow:
scrolled:Gtk.ScrolledWindow = new Gtk.ScrolledWindow (null, null)
box.pack_start (scrolled, true, true, 0)
// The TextView:
_view = new Gtk.TextView ()
_view.set_wrap_mode (Gtk.WrapMode.WORD)
_view.buffer.text = "Lorem Ipsum"
scrolled.add (_view)
// A Button:
button:Gtk.Button = new Gtk.Button.with_label ("Print content to
stdout")
box.pack_start (button, false, true, 0)
button.clicked.connect (clicked)
// This is a simple stub function to take care of the click
def clicked ()
stdout.puts (_view.buffer.text)
stdout.putc ('\n')
Error
When pack_start (see below) is used, I get the error:
text_editor-exercise_7_1.gs:136.3-136.39: error: Access to instance member `Gtk.HeaderBar.pack_start' denied
Similar errors occur when I use HeaderBar.pack_start or button_name.pack_start.
Question
Am I wrong to believe that pack_start should be used with HeaderBars?
A second smaller problem is regarding the use of Stock icons. For some reason I can't access Stock.Open.
Finally, is there any other source of information on HeaderBar? Valadoc is sparse in this subject (there are no examples or templates).
You are trying to call pack_start on the button, not on the headerbar:
// Add everything to the toolbar
open_button.pack_start ()
The correct code is:
headerbar.pack_start (open_button)
Related
I am trying to show a custom context menu when I right click on a row in a TreeView.
treeView.button_press_event.connect ((event) => {
if (event.type == EventType.BUTTON_PRESS && event.button == 3) {
Gtk.Menu menu = new Gtk.Menu ();
Gtk.MenuItem menu_item = new Gtk.MenuItem.with_label ("Add file");
menu.add (menu_item);
menu.show ();
}
});
It doesn't show anything. If I debug a message there I can see the block is being executed when right clicking on a row in the TreeView. I tried show_all () with no success either. popup_at_pointer () is available only on Gtk+ 3.22 and later versions. I am using Gtk+ 3.18.
Is there any way to show a custom menu when right clicking a row on a Gtk.TreeView?
Found out one has to attach the Gtk.Menu to a widget using attach_to_widget () and then use show_all () before calling the only method to show the menu available in Gtk+ 3.18 which is popup (...). popup (...) is deprecated since Gtk+ 3.22, but it is the only method available in Gtk+ 3.18.
Here is the code
treeView.button_press_event.connect ((event) => {
if (event.type == EventType.BUTTON_PRESS && event.button == 3) {
Gtk.Menu menu = new Gtk.Menu ();
Gtk.MenuItem menu_item = new Gtk.MenuItem.with_label ("Add file");
menu.attach_to_widget (treeView, null);
menu.add (menu_item);
menu.show_all ();
menu.popup (null, null, null, event.button, event.time);
}
});
Relevant source: https://developer.gnome.org/gtkmm-tutorial/stable/sec-treeview-examples.html.en#treeview-popup-menu-example
I think you need the older style gtk_menu_popup.
I am working my way through the Vala GTK+3 tutorial provided by Elementary OS. I understand that this code:
var button_hello = new Gtk.Button.with_label ("Click me!");
button_hello.clicked.connect (() => {
button_hello.label = "Hello World!";
button_hello.set_sensitive (false);
});
uses a Lambda function to change the button's label when it's clicked. What I want to do is call this function instead:
void clicked_button(Gtk.Button sender) {
sender.label = "Clicked. Yippee!";
sender.set_sensitive(false);
}
I've tried this:
button.clicked.connect(clicked_button(button));
But I get this error from the Vala compile when I try to compile:
hello-packaging.vala:16.25-16.46: error: invocation of void method not allowed as expression
button.clicked.connect(clicked_button(button));
^^^^^^^^^^^^^^^^^^^^^^
Compilation failed: 1 error(s), 0 warning(s)
I'm new to both Vala and Linux so please be gentle but can someone point me in the right direction?
You need to pass a reference to the function, rather than the result of the function. So it should be:
button.clicked.connect (clicked_button);
When the button is clicked GTK+ will invoke the clicked_button function with the button as an argument.
The error message invocation of void method not allowed as expression is telling you you are calling (invoking) the method and it has no result (void). Adding parentheses, (), to the end of a function name invokes that function.
Managed to get it working. Here's the code in case others need it:
int main(string[] args) {
// Initialise GTK
Gtk.init(ref args);
// Configure our window
var window = new Gtk.Window();
window.set_default_size(350, 70);
window.title = "Hello Packaging App";
window.set_position(Gtk.WindowPosition.CENTER);
window.set_border_width(12);
window.destroy.connect(Gtk.main_quit);
// Create our button
var button = new Gtk.Button.with_label("Click Me!");
button.clicked.connect(clicked_button);
// Add the button to the window
window.add(button);
window.show_all();
// Start the main application loop
Gtk.main();
return 0;
}
// Handled the clicking of the button
void clicked_button(Gtk.Button sender) {
sender.label = "Clicked. Yippee!";
sender.set_sensitive(false);
}
I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).
I just want to add a button next to the big play button... Can someone help me?
Thanks...
PS: I'm using it in angularJS but I guess this can not a problem
This is how you can add download button to the end of control bar without any plugins or other complicated code:
var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
constructor: function () {
vjsButtonComponent.apply(this, arguments);
},
handleClick: function () {
document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
},
buildCSSClass: function () {
return 'vjs-control vjs-download-button';
},
createControlTextEl: function (button) {
return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
}
}));
videojs(
'player-id',
{fluid: true},
function () {
this.getChild('controlBar').addChild('DownloadButton', {});
}
);
I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.
How it works:
We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
buildCSSClass - set button classes ('vjs-control' is must have!)
createControlTextEl - adds content to the button (in this case - an icon and title for it)
handleClick - does something when user presses this button
After player was initialized we're adding 'DownloadButton' to 'controlBar'
Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar
This is how I created a simple button plugin for videojs 5:
(function() {
var vsComponent = videojs.getComponent('Button');
// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
constructor: function() {
vsComponent.call(this, videojs, null);
}
});
// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';
// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};
// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
// Add our className to the returned className
return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};
// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
// Add specific click actions here.
console.log('clicked');
};
videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};
var pluginFn = function(options) {
var SampleButton = new videojs.SampleButton(this, options);
this.addChild(SampleButton);
return SampleButton;
};
videojs.plugin('sampleButton', pluginFn);
})();
You can use it this way:
var properties = { "plugins": { "muteBtn": {} } }
var player = videojs('really-cool-video', properties , function() { //do something cool here });
Or this way:
player.sampleButton()
While creating a simple ToolButton, one can use the clicked.connect interface as in the Toolbar example from the Vala guide. The interface of adding a button to a HeaderBar is similar to what is shown in that example. However, the way of handling the clicked connection seems to be different (or there is something that I am missing).
The following example is of a small text editor, where a open dialog button is packed into the HeaderBar. The clicked.connection syntax, however returns an error.
Here is the code:
[indent=4]
uses
Gtk
init
Gtk.init (ref args)
var app = new Application ()
app.show_all ()
Gtk.main ()
// This class holds all the elements from the GUI
class Application : Gtk.Window
_view:Gtk.TextView
construct ()
// Prepare Gtk.Window:
this.window_position = Gtk.WindowPosition.CENTER
this.destroy.connect (Gtk.main_quit)
this.set_default_size (400, 400)
// Headerbar definition
headerbar:Gtk.HeaderBar = new Gtk.HeaderBar()
headerbar.show_close_button = true
headerbar.set_title("My text editor")
// Headerbar buttons
open_button:Gtk.ToolButton = new ToolButton.from_stock(Stock.OPEN)
open_button.clicked.connect (openfile)
// Add everything to the toolbar
headerbar.pack_start (open_button)
show_all ()
this.set_titlebar(headerbar)
// Box:
box:Gtk.Box = new Gtk.Box (Gtk.Orientation.VERTICAL, 1)
this.add (box)
// A ScrolledWindow:
scrolled:Gtk.ScrolledWindow = new Gtk.ScrolledWindow (null, null)
box.pack_start (scrolled, true, true, 0)
// The TextView:
_view = new Gtk.TextView ()
_view.set_wrap_mode (Gtk.WrapMode.WORD)
_view.buffer.text = "Lorem Ipsum"
scrolled.add (_view)
The open_button.clicked.connect returns at compilation:
text_editor-exercise_7_1.gs:134.32-134.39: error: Argument 1: Cannot convert from `Application.openfile' to `Gtk.ToolButton.clicked'
open_button.clicked.connect (openfile)
Does the way of handling that signal changes when one uses the HeaderBar widget?
The code is working as long as the line is commented (you may want to add a stub for the openfile function).
Thanks
UPDATE
This question deserves an update, because the error was actually not in the body I attached above.
The error was at the definition of the function. I wrote:
def openfile (self:Button)
When I should've instead:
def openfile (self:ToolButton)
Or simply:
def openfile ()
You didn't include the click handler in your code, using this example stub it works just fine:
def openfile ()
warning ("Button clicked")
So I guess that the type signature of your click handler is wrong and that's why the compiler is complaining here.
I want to show a custom tooltip (popup) when user hovers over a Vector Feature on the GWT-openlayers map. I know that SelectFeature.setHover() will allow me to do this but that will also select the feature which i dont want to have.
it is like, when the user hovers, tooltip must be shown and when he clicks on the feature, then selection muse happen.
how can this be achieved?
Regards
Jatin
Check out this code.
This will also be added to our showcase but we have a little problem with the server at the moment. Will give a shout here when it is uploaded.
Note that the order in which you add the SelectFeature controls is important.
public void buildPanel() {
// create some MapOptions
MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setNumZoomLevels(16);
// Create a MapWidget
final MapWidget mapWidget = new MapWidget("500px", "500px",
defaultMapOptions);
// Create an EmptyLayer as base layer
EmptyLayer.Options emptyLayerOptions = new EmptyLayer.Options();
emptyLayerOptions.setAttribution("EmptyLayer (c) GWT-Openlayers");
emptyLayerOptions.setIsBaseLayer(true); // make it a baselayer.
EmptyLayer emptyLayer = new EmptyLayer("Empty layer", emptyLayerOptions);
mapWidget.getMap().addLayer(emptyLayer);
// Add a clickable vectors to the map
// create a layer to add the vectors to
final Vector vectorLayer = new Vector("Vectorlayer");
mapWidget.getMap().addLayer(vectorLayer);
// SelectFeature control to capture clicks on the vectors
final SelectFeature selectFeature = new SelectFeature(vectorLayer);
selectFeature.setAutoActivate(true);
// SelectFeature control to capture hover on the vectors
SelectFeatureOptions selectFeatureHoverOptions = new SelectFeatureOptions();
// use the tempory style to be defined in the StyleMap
selectFeatureHoverOptions.setRenderIntent(RenderIntent.TEMPORARY);
selectFeatureHoverOptions.setHighlightOnly(true);
selectFeatureHoverOptions.setHover();
SelectFeature selectHoverFeature = new SelectFeature(vectorLayer,
selectFeatureHoverOptions);
selectHoverFeature.setClickOut(false);
selectHoverFeature.setAutoActivate(true);
mapWidget.getMap().addControl(selectHoverFeature);
mapWidget.getMap().addControl(selectFeature);
// Define a style for the vectors
Style style = new Style();
style.setFillColor("red");
style.setStrokeColor("green");
style.setStrokeWidth(2);
style.setFillOpacity(0.9);
style.setPointRadius(30);
Style selectedStyle = new Style();
selectedStyle.setFillColor("yellow");
selectedStyle.setStrokeColor("yellow");
selectedStyle.setStrokeWidth(2);
selectedStyle.setFillOpacity(0.9);
selectedStyle.setPointRadius(30);
Style hoverStyle = new Style();
hoverStyle.setFillColor("blue");
hoverStyle.setStrokeColor("pink");
hoverStyle.setStrokeWidth(2);
hoverStyle.setFillOpacity(0.9);
hoverStyle.setPointRadius(30);
StyleMap styleMap = new StyleMap(style, selectedStyle, hoverStyle);
vectorLayer.setStyleMap(styleMap);
// Add a point
Point point = new Point(146.7, -41.8);
final VectorFeature pointFeature = new VectorFeature(point);
vectorLayer.addFeature(pointFeature);
// capture clicks on the vectorlayer
vectorLayer
.addVectorFeatureSelectedListener(new VectorFeatureSelectedListener() {
public void onFeatureSelected(
FeatureSelectedEvent eventObject) {
Window.alert("The vector is now selected.\nIt will get de-selected when closing this popup.");
selectFeature.unSelect(eventObject.getVectorFeature());
}
});
// Attach a popup to the point, we use null as size cause we set
// autoSize to true
// Note that we use FramedCloud... This extends a normal popup and
// creates is styled as a baloon
// We want to display this popup on hover, and hide it when hovering
// ends
final Popup popup = new FramedCloud("id1",
pointFeature.getCenterLonLat(), null,
"<h1>Some popup text</H1><BR/>And more text", null, false);
popup.setPanMapIfOutOfView(true); // this set the popup in a strategic
// way, and pans the map if needed.
popup.setAutoSize(true);
pointFeature.setPopup(popup);
// capture hover by adding a listener to the control, and display the
// popup
selectHoverFeature
.addFeatureHighlightedListener(new FeatureHighlightedListener() {
public void onFeatureHighlighted(VectorFeature vectorFeature) {
mapWidget.getMap().addPopup(vectorFeature.getPopup());
}
});
// capture unhover, and remove popup
selectHoverFeature
.addFeatureUnhighlightedListener(new FeatureUnhighlightedListener() {
public void onFeatureUnhighlighted(
VectorFeature vectorFeature) {
mapWidget.getMap()
.removePopup(vectorFeature.getPopup());
}
});
// Center and zoom to a location
mapWidget.getMap().setCenter(new LonLat(146.7, -41.8), 6);
contentPanel
.add(new HTML(
"<p>This example shows how to add a Vector (point) to map, and do some action when hovering, and another when clicking.</p>"
+ "<p>"
+ "<LI>Hover over the point. This will cause a popup to show, and change the style of the point to the temporary style.</LI>"
+ "<LI>Then when you click the Vector gets selected, gets another style, and a Window.alert is displayed.</LI>"
+ "<LI>When closing the Window.alert, the Vector gets de-selected.</p>"));
contentPanel.add(mapWidget);
initWidget(contentPanel);
mapWidget.getElement().getFirstChildElement().getStyle().setZIndex(0);
}
You must indeed use a SelectFeature to achieve this.
The secret is that you must pass SelectFeatureOptions with highlight only enabled.
Something like
SelectFeatureOptions selectFeatureOptions = new SelectFeatureOptions();
selectFeatureOptions.setHighlightOnly(true);
SelectFeature selectFeature = new SelectFeature(vectorLayer,selectFeatureOptions);