diff --git a/qml/README.md b/qml/README.md index ece195a..b17ffd5 100644 --- a/qml/README.md +++ b/qml/README.md @@ -4,3 +4,4 @@ 2. [Basic Extension](articles/2.Basic_extension.md) - [Extension](extensions/qml_tutorial_2/) 3. [Adding a button to the toolbar](articles/3.Adding_a_button_to_the_toolbar.md) - [Extension](extensions/qml_tutorial_3/) 4. [Adding an entry to the web context menu](articles/4.Adding_entry_to_the_web_context_menu.md) - [Extension](extensions/qml_tutorial_4/) +5. [Using notifications](articles/4.Using_notificcations.md) - [Extension](extensions/qml_tutorial_5/) diff --git a/qml/articles/5.Using_notifications.md b/qml/articles/5.Using_notifications.md new file mode 100644 index 0000000..ee03eda --- /dev/null +++ b/qml/articles/5.Using_notifications.md @@ -0,0 +1,40 @@ +# Falkon QML Tutorial - 5. Using notifications + +Hello, in this chapter I will show you how to use Falkon notifications. + + +## Create notification + +```qml +Falkon.Notifications.create({ + heading: i18n('Hello QML'), + message: i18n('First qml plugin action works :-)'), + icon: 'extensions.svg' +}) +``` + +## Arguments + +### heading +Notification header + +### message +The body of the notification + +### icon +Either system icon or file provided by extension. + + +## Example +The example code will add a button to main toolbar and statusbar. When +user clicks on the button a notification will show up. + +![Notification](../images/tutorial5/notification.png) + +Keep in mind that the form and shape of my notifications can be +different from yours. + +### Code +The code for this example can be found at +[extensions/qml_tutorial_5](../extensions/qml_tutorial_5) + diff --git a/qml/extensions/qml_tutorial_5/main.qml b/qml/extensions/qml_tutorial_5/main.qml new file mode 100644 index 0000000..eae4230 --- /dev/null +++ b/qml/extensions/qml_tutorial_5/main.qml @@ -0,0 +1,40 @@ +import org.kde.falkon 1.0 as Falkon +import QtQuick 2.3 + +Falkon.PluginInterface { + + init: function(state, settingsPath){ + console.log(i18n('"Tutorial5" plugin loaded')) + } + + testPlugin: function() { + return true + } + + unload: function() { + console.log(i18n('"Tutorial5" plugin unloaded')) + } + + function buttonClicked() { + Falkon.Notifications.create({ + heading: i18n('QML Tutorial 5'), + message: i18n('Some message text body.'), + icon: 'falkon' + }) + } + + 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: buttonClicked() + popup: Rectangle { + width: 100; + height: 100; + } + } + +} diff --git a/qml/extensions/qml_tutorial_5/metadata.desktop b/qml/extensions/qml_tutorial_5/metadata.desktop new file mode 100644 index 0000000..ea7c90f --- /dev/null +++ b/qml/extensions/qml_tutorial_5/metadata.desktop @@ -0,0 +1,11 @@ +[Desktop Entry] +Name=Tutorial5 QML +Comment=Example QML extension with button and notifications +Icon= +Type=Service +X-Falkon-Type=Extension/Qml + +X-Falkon-Author=Juraj Oravec +X-Falkon-Email=jurajoravec@mailo.com +X-Falkon-Version=1.0.0 +X-Falkon-Settings=false diff --git a/qml/images/tutorial5/notification.png b/qml/images/tutorial5/notification.png new file mode 100644 index 0000000..919247f Binary files /dev/null and b/qml/images/tutorial5/notification.png differ