FalkonTutorials/qml/articles/3.Adding_a_button_to_the_toolbar.md

Falkon QML Tutorial - 3. Adding a button to the toolbar

In this chapter will be shown how to add Simple button to the toolbar and statusbar.

Create button

The button in QML is represented by Falkon.BrowserAction and will be automatically added to all windows. At the moment of writing this article the button shares the same instance with all windows and thus per window modifications are impossible (would be very inconsistent|.

Falkon.BrowserAction {
    name: 'QML Tutorial 3'
    identity: 'qml-tutorial-3-id'
    title: i18n('Qml Tutorial 3')
    toolTip: i18n('My little button')
    icon: 'falkon'
    location: Falkon.BrowserAction.NavigationToolBar | Falkon.BrowserAction.StatusBar
    onClicked: someFunctions()
    popup: Rectangle {
        width: 100;
        height: 100;
    }
}

Falkon.BrowserAction

The interface class for Falkon buttons.

identity

This identity will be used by Falkon when you add the button to toolbar to determinate its place in the toolbar.

name

The name which will be displayed in "Configure toolbar" dialog.

title

I did not find a sensible use for this function in the Falkons code yet.

toolTip

The buttons tooltip which will be displayed when you hover with mouse over the button.

badgeText

The text in a form of a badge over the button.
Used by AdBlock plugin to show how many item it blocked.

icon

Icon used for the button. If the icon is not specified the button will be left blank. The icon can either be name of system icon or a filename, in case of using filename the file should be provided together with the extension.

position

Configure where should the button be added.
In case of adding button to the toolbar in will only appear as available in the toolbar customize menu and user has to add it to the toolbar manualy. For statusbar the button will appear in the statusbar immediately but the order of icons cannot be customized at the moment.

onClicked

Called when the mouse click on the button.
Somehow handled by QML, it might be possible to add mouse hover detection and maybe some other things as well, I did not try that though.

Example

The example code will add a button to main toolbar and statusbar. When user clicks on the button the small white rectangle will show up and the number displayed on the badge will increase.

Code

The code for this example can be found at extensions/qml_tutorial_3