(Created page with '== Basics == * Everything but the metadata.desktop file goes in a directory named <tt>contents</tt> * <tt>X-Plasma-MainScript</tt> in the metadata.desktop file should point to t...') |
m (Fix syntax highlighting.) |
||
(13 intermediate revisions by 6 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{TutorialBrowser| | ||
+ | |||
+ | series=JavaScript Plasmoids| | ||
+ | |||
+ | name=Getting Data| | ||
+ | |||
+ | name=JavaScript Plasmoid Cheat Sheet| | ||
+ | |||
+ | pre=[[../DataEngine|Now Playing: Advanced DataEngine Usage Example]]| | ||
+ | |||
+ | reading=[[../API|JavaScript Plasmoid API reference]] | ||
+ | }} | ||
+ | |||
+ | |||
== Basics == | == Basics == | ||
Line 4: | Line 18: | ||
* <tt>X-Plasma-MainScript</tt> in the metadata.desktop file should point to the main script, relative to the contents directory | * <tt>X-Plasma-MainScript</tt> in the metadata.desktop file should point to the main script, relative to the contents directory | ||
* <tt>X-Plasma-DefaultSize</tt> in the metadata.desktop file specifies the default widget size in width,height format (eg: 200,100) | * <tt>X-Plasma-DefaultSize</tt> in the metadata.desktop file specifies the default widget size in width,height format (eg: 200,100) | ||
− | |||
* <tt>plasmoidviewer</tt> is an immensely useful tool | * <tt>plasmoidviewer</tt> is an immensely useful tool | ||
* To connect to a signal use <tt>object.signalName.connect(function() {});</tt> | * To connect to a signal use <tt>object.signalName.connect(function() {});</tt> | ||
+ | * Enumeration values can be used like | ||
+ | <syntaxhighlight lang="javascript"> | ||
+ | if (plasmoid.formFactor() == Vertical) { | ||
+ | layout.setOrientation(QtVertical); | ||
+ | } else { | ||
+ | layout.setOrientation(QtHorizontal); | ||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | == Global variables and functions == | ||
+ | |||
+ | * The <tt>plasmoid</tt> variable contains all the main plasmoid functionality and represents the main plasmoid widget, and corresponds to the <tt>Applet</tt> class in C++ | ||
+ | * The <tt>startupArguments</tt> variable contains any arguments that were passed to the plasmoid when it was started (such as when the plasmoid is registered as a handler for a mimetype) | ||
+ | * The <tt>loadui</tt> function can be used to load a Qt UI file. Beware that a relative path is relative to plasma's working directory (in 4.2 at least), and so may not do what you want. | ||
+ | * The <tt>print</tt> function prints debug output | ||
+ | * There are several constructor methods: | ||
+ | ** <tt>PlasmaSvg(file, parent)</tt> constructs a <tt>Plasma::Svg</tt>. The second argument is optional. | ||
+ | ** <tt>PlasmaFrameSvg(file, parent)</tt> constructs a <tt>Plasma:FrameSvg</tt>. The second argument is optional. | ||
+ | ** <tt>QPainter()</tt> | ||
+ | ** <tt>QGraphicsItem()</tt> | ||
+ | ** <tt>QTimer()</tt> | ||
+ | ** <tt>QFont()</tt> | ||
+ | ** <tt>QRectF()</tt> | ||
+ | ** <tt>QSizeF()</tt> | ||
+ | ** <tt>QPoint()</tt> | ||
+ | ** <tt>LinearLayout()</tt> constructs a <tt>QGraphicsLinearLayout</tt> | ||
+ | ** <tt>Url()</tt> constructs a <tt>KUrl</tt> | ||
+ | * Plus constructors for all the Plasma widgets (eg: <tt>IconWidget()</tt>). | ||
== Languages == | == Languages == | ||
* The Name and Comment fields in the <tt>metadata.desktop</tt> file can be translated like <tt>Name[nl]=Hallo JavaScript</tt> | * The Name and Comment fields in the <tt>metadata.desktop</tt> file can be translated like <tt>Name[nl]=Hallo JavaScript</tt> | ||
− | * <tt> | + | * <tt>i18n()</tt> takes a string (in English) as the first argument, and substitutes in the following arguments to replace %1, %2, %3 etc. Eg: <tt>i18n("The file is called %1", fileName);</tt> |
− | * <tt> | + | * <tt>i18nc()</tt> works just the same, but has an extra argument at the start that provides some context for translators. Eg: <tt>i18nc("Player name - score", "%1 - %2", playerName, score);</tt> |
− | * <tt> | + | * <tt>i18np()</tt> is for cases where plural forms might be important. Eg: <tt>i18np("One image in album %2", "%1 images in album %2", imageCount, albumName);</tt> |
− | * <tt> | + | * <tt>i18ncp()</tt> is a combination of the previous two. Eg: <tt>i18ncp("Personal file", "One file", "%1 files", numFiles);</tt> |
− | + | ||
== DataEngines == | == DataEngines == | ||
Line 24: | Line 63: | ||
* <tt>plasmoid.dataEngine("engine name").connectSource("source name", plasmoid);</tt> updates when new data is available | * <tt>plasmoid.dataEngine("engine name").connectSource("source name", plasmoid);</tt> updates when new data is available | ||
* <tt>plasmaengineexplorer</tt> is your friend | * <tt>plasmaengineexplorer</tt> is your friend | ||
− | |||
== Services == | == Services == | ||
− | * DO NOT use <tt>plasmoid.dataEngine("engine name").serviceForSource("source name")</tt> - you will get a dummy | + | * Prior to KDE 4.4, DO NOT use <tt>plasmoid.dataEngine("engine name").serviceForSource("source name")</tt> - you will get a dummy service back. Instead, use <tt>plasmoid.service("engine name", "source name")</tt> |
− | + | ||
+ | === Notifications === | ||
+ | |||
+ | If you want to use the standard notifications in KDE, you can using Services, with the following code: | ||
+ | |||
+ | <syntaxhighlight lang="javascript"> | ||
+ | engine = dataEngine("notifications"); | ||
+ | service = engine.serviceForSource("notification"); | ||
+ | op = service.operationDescription("createNotification"); | ||
+ | op["appName"] = "foo"; | ||
+ | op["appIcon"] = "konqueror"; | ||
+ | op["summary"] = "this is a summary"; | ||
+ | op["body"] = "body of notification"; | ||
+ | op["timeout"] = 2000; | ||
+ | |||
+ | service.startOperationCall(op); | ||
+ | </syntaxhighlight> |
Tutorial Series | JavaScript Plasmoids |
Previous | Now Playing: Advanced DataEngine Usage Example |
What's Next | n/a |
Further Reading | JavaScript Plasmoid API reference |
if (plasmoid.formFactor() == Vertical) {
layout.setOrientation(QtVertical);
} else {
layout.setOrientation(QtHorizontal);
}
If you want to use the standard notifications in KDE, you can using Services, with the following code:
engine = dataEngine("notifications");
service = engine.serviceForSource("notification");
op = service.operationDescription("createNotification");
op["appName"] = "foo";
op["appIcon"] = "konqueror";
op["summary"] = "this is a summary";
op["body"] = "body of notification";
op["timeout"] = 2000;
service.startOperationCall(op);