77 lines
2.4 KiB
Markdown
77 lines
2.4 KiB
Markdown
|
# 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|.
|
||
|
|
|
||
|
|
```qml
|
||
|
|
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.
|
||
|
|
|
||
|
|
|
||
|
|
## Code
|
||
|
|
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.
|
||
|
|
|
||
|
|
The code for this example can be found at
|
||
|
|
[extensions/qml_tutorial_3](../extensions/qml_tutorial_3)
|