Development/Tutorials/Plasma/JavaScript/GettingStarted - Revision history

Tstaerk: find out where it has been installed

2013-02-25T17:04:47Z

find out where it has been installed

Tstaerk: actually it's not needed to use a text editor

2013-02-25T16:10:05Z

actually it's not needed to use a text editor

Tstaerk: the "hello world" program explains how to write, execute and install a program

2013-02-25T16:05:41Z

the "hello world" program explains how to write, execute and install a program

Tstaerk: hello world

2013-02-25T16:03:28Z

hello world

Tstaerk: this was very confusing. I thought this script was a "hello world" example, but it does not even explain how you execute it.

2013-02-25T16:01:27Z

this was very confusing. I thought this script was a "hello world" example, but it does not even explain how you execute it.

Tstaerk: give the user a clear direction. Don't say /path/to/javascript if he does not know the path to javascript.

2013-02-25T15:44:03Z

give the user a clear direction. Don't say /path/to/javascript if he does not know the path to javascript.

AnneW at 13:07, 18 July 2012

2012-07-18T13:07:43Z

Icwiener: Fix syntax highlighting.

2011-06-30T11:14:47Z

Fix syntax highlighting.

Neverendingo: Text replace - "`" to ""`


2011-06-29T19:48:47Z
Text replace - "<code bash>" to "<syntaxhighlight lang="bash">"

				
				
				
				
			
			← Older revision
			Revision as of 19:48, 29 June 2011
			
Line 73:
Line 73:
    
  The first step for any software project is to set up your project's directory on disk. For this tutorial we are going to create a very simple "hello-javascript" plasmoid. Create a directory on somewhere called <tt>hello-javascript</tt> which in turn contains a <tt>contents</tt> directory which then contains a <tt>code</tt> directory. This command below will do all this.   The first step for any software project is to set up your project's directory on disk. For this tutorial we are going to create a very simple "hello-javascript" plasmoid. Create a directory on somewhere called <tt>hello-javascript</tt> which in turn contains a <tt>contents</tt> directory which then contains a <tt>code</tt> directory. This command below will do all this.
− <code bash> + <syntaxhighlight lang="bash">
  mkdir -p hello-javascript/contents/code   mkdir -p hello-javascript/contents/code
  </syntaxhighlight>   </syntaxhighlight>
Line 150:
Line 150:
    
  If you have KDE 4.3 or later, you can test your plasmoid without installing it by entering the <tt>hello-javascript</tt> directory and running <tt>plasmoidviewer</tt>.  Alternatively, call     If you have KDE 4.3 or later, you can test your plasmoid without installing it by entering the <tt>hello-javascript</tt> directory and running <tt>plasmoidviewer</tt>.  Alternatively, call  
− <code bash> + <syntaxhighlight lang="bash">
  plasmoidviewer /path/to/hello-javascript   plasmoidviewer /path/to/hello-javascript
  </syntaxhighlight>   </syntaxhighlight>
Line 159:
Line 159:
    
  You can install the plasmoid by running the following command from within the <tt>hello-javascript</tt> directory:   You can install the plasmoid by running the following command from within the <tt>hello-javascript</tt> directory:
− <code bash> + <syntaxhighlight lang="bash">
  plasmapkg -i .   plasmapkg -i .
  </syntaxhighlight>   </syntaxhighlight>
Line 166:
Line 166:
    
  You can now add your widget to the desktop using the Add Widgets dialog, or view it by running   You can now add your widget to the desktop using the Add Widgets dialog, or view it by running
− <code bash> + <syntaxhighlight lang="bash">
  plasmoidviewer hello-javascript   plasmoidviewer hello-javascript
  </syntaxhighlight>   </syntaxhighlight>
Line 174:
Line 174:
    
  If you want to share your plasmoid, you'll have to package it.  Run the following from within the <tt>hello-javascript</tt> directory:   If you want to share your plasmoid, you'll have to package it.  Run the following from within the <tt>hello-javascript</tt> directory:
− <code bash> + <syntaxhighlight lang="bash">
  zip -r ../hello-javascript.zip . &&   zip -r ../hello-javascript.zip . &&
  mv ../hello-javascript.zip ../hello-javascript.plasmoid   mv ../hello-javascript.zip ../hello-javascript.plasmoid
Line 180:
Line 180:
    
  You now have a plasmoid package you can share with the world.  To install it, either use the "Install new widgets" functionality in the Add Widgets dialog, or go to the directory containing <tt>hello-javascript.plasmoid</tt> and run   You now have a plasmoid package you can share with the world.  To install it, either use the "Install new widgets" functionality in the Add Widgets dialog, or go to the directory containing <tt>hello-javascript.plasmoid</tt> and run
− <code bash> + <syntaxhighlight lang="bash">
  plasmapkg -i hello-javascript.plasmoid   plasmapkg -i hello-javascript.plasmoid
  </syntaxhighlight>   </syntaxhighlight>
    
  To uninstall the plasmoid, use <tt>plasmapkg</tt> again with its -r option:   To uninstall the plasmoid, use <tt>plasmapkg</tt> again with its -r option:
− <code bash> + <syntaxhighlight lang="bash">
  plasmapkg -r hello-javascript   plasmapkg -r hello-javascript
  </syntaxhighlight>   </syntaxhighlight>
    
  Note that while the argument to <tt>plasmapkg -i</tt> is a file or directory, you need to pass the plasmoid name (given by <tt>X-KDE-PluginInfo-Name</tt> in <tt>metadata.desktop</tt>) to <tt>plasmapkg -r</tt>.   Note that while the argument to <tt>plasmapkg -i</tt> is a file or directory, you need to pass the plasmoid name (given by <tt>X-KDE-PluginInfo-Name</tt> in <tt>metadata.desktop</tt>) to <tt>plasmapkg -r</tt>.



Neverendingo: Text replace - "" to ""

2011-06-29T18:54:51Z
Text replace - "<code ini>" to "<syntaxhighlight lang="ini">"

				
				
				
				
			
			← Older revision
			Revision as of 18:54, 29 June 2011
			
Line 84:
Line 84:
  In the <tt>hello-javascript</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>metadata.desktop</tt>.   In the <tt>hello-javascript</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>metadata.desktop</tt>.
    
− <code ini> + <syntaxhighlight lang="ini">
  [Desktop Entry]   [Desktop Entry]
  Name=Hello JavaScript   Name=Hello JavaScript

@@ Line 41: / Line 41: @@
 === Metadata.desktop ===
-In the <tt>hello-javascript</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>metadata.desktop</tt>.
+In the <tt>hello-javascript</tt> directory [[Development/Tutorials/Desktop_File|create a .desktop file]] called <tt>metadata.desktop</tt> with the following content:
 <syntaxhighlight lang="ini">

@@ Line 12: / Line 12: @@
 == Abstract ==
 In this tutorial we'll cover creating a very simple Plasmoid in JavaScript, otherwise known as [http://doc.trolltech.com/latest/qtscript.html QtScript] or [http://www.ecmascript.org/ ECMAScript], to provide a Plasma widget.
@@ Line 30: / Line 29: @@
 == What is a Plasmoid? ==
 A Plasmoid is a widget that can be loaded into Plasma that uses the native Plasma API and comes packaged in a single archive file which includes the code, metadata, images, configuration definitions, etc. Plasmoids may be currently written using various scripting languages and APIs. This tutorial covers the Simplified JavaScript API for Plasmoids
@@ Line 42: / Line 40: @@
 The only required part of the structure, in fact, is the <tt>contents</tt> directory - almost everything will go in this directory.  But separating your code into a different directory from application data is a good habit to have.
-== Metadata.desktop ==
+=== Metadata.desktop ===
-−
 In the <tt>hello-javascript</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>metadata.desktop</tt>.
@@ Line 90: / Line 87: @@
 <tt>X-KDE-PluginInfo-EnabledByDefault</tt> and <tt>X-KDE-PluginInfo-Depends</tt> rarely need to be changed from the values given here.
-== Main script ==
+=== Main script ===
-−
 The name of the main script file is given by <tt>X-Plasma-MainScript</tt> in metadata.desktop, and is relative to the <tt>contents</tt> directory.  In our case, we will need to create the file <tt>hello-javascript/contents/code/main.js</tt>.  Put the following code in it:
@@ Line 109: / Line 105: @@
 Next we add a label to the layout, and finally we set the label text.
-== Testing (KDE 4.3+) ==
+=== Testing (KDE 4.3+) ===
-−
 If you have KDE 4.3 or later, you can test your plasmoid without installing it by entering the <tt>hello-javascript</tt> directory and running <tt>plasmoidviewer</tt>.  Alternatively, call
 <syntaxhighlight lang="bash">
@@ Line 118: / Line 113: @@
 This is very convenient for development as you can edit the Plasmoid and test the changes immediately without re-installing the plasmoid over and over again.
-== Installing ==
+=== Installing ===
-−
 You can install the plasmoid by running the following command from within the <tt>hello-javascript</tt> directory:
 <syntaxhighlight lang="bash">
@@ Line 132: / Line 126: @@
 </syntaxhighlight>
-== Packaging ==
+=== Packaging ===
-−
 If you want to share your plasmoid, you'll have to package it.  Run the following from within the <tt>hello-javascript</tt> directory:
 <syntaxhighlight lang="bash">

@@ Line 33: / Line 33: @@
 A Plasmoid is a widget that can be loaded into Plasma that uses the native Plasma API and comes packaged in a single archive file which includes the code, metadata, images, configuration definitions, etc. Plasmoids may be currently written using various scripting languages and APIs. This tutorial covers the Simplified JavaScript API for Plasmoids
-== Project Structure ==
+== Hello world ==
+The first step for any software project is to set up your project's directory on disk. For this tutorial we are going to create a very simple [http://en.wikipedia.org/wiki/Hello_world "Hello world"] plasmoid called "hello-javascript". Create a directory on somewhere called <tt>hello-javascript</tt> which in turn contains a <tt>contents</tt> directory which then contains a <tt>code</tt> directory. This command below will do all this.
-The first step for any software project is to set up your project's directory on disk. For this tutorial we are going to create a very simple "hello-javascript" plasmoid. Create a directory on somewhere called <tt>hello-javascript</tt> which in turn contains a <tt>contents</tt> directory which then contains a <tt>code</tt> directory. This command below will do all this.
 <syntaxhighlight lang="bash">
 cd
@@ Line 42: / Line 41: @@
 The only required part of the structure, in fact, is the <tt>contents</tt> directory - almost everything will go in this directory.  But separating your code into a different directory from application data is a good habit to have.
 == Metadata.desktop ==

@@ Line 16: / Line 16: @@
 Using JavaScript doesn't require any external dependencies, since it is part of the Qt libraries.  As of KDE 4.3, the Plasma JavaScript engine is part of kdebase/runtime, and so can be used in any Plasma-based application, not just the Plasma Desktop.
 == What is a widget? ==
@@ Line 169: / Line 133: @@
 plasmoidviewer hello-javascript
 </syntaxhighlight>
 == Packaging ==
@@ Line 190: / Line 153: @@
 Note that while the argument to <tt>plasmapkg -i</tt> is a file or directory, you need to pass the plasmoid name (given by <tt>X-KDE-PluginInfo-Name</tt> in <tt>metadata.desktop</tt>) to <tt>plasmapkg -r</tt>.

← Older revision		Revision as of 13:07, 18 July 2012
Line 1:		Line 1:
−	~~{{Template:I18n/Language Navigation Bar\|Development/Tutorials/Plasma/JavaScript/GettingStarted}}~~

	{{TutorialBrowser\|		{{TutorialBrowser\|

@@ Line 27: / Line 27: @@
 On top of the ECMA Script language, QtScript provides Qt integration features. Probably the most useful one in the context of writing Plasmoids is the use of signals and slots which is Qt's callback mechanism. Signals may be emitted in QtScript by calling the signal method in question, a signal can be connected to a slot by using the connect() method (and disconnected with disconnect()) and any function defined in the Plasmoid may be used as a slot. For example:
-<syntaxhighlight lang="bash">
+<syntaxhighlight lang="javascript">
 function onClick()
+{
@@ Line 47: / Line 47: @@
 This will print out:
-<syntaxhighlight lang="bash">
+<syntaxhighlight lang="text">
 We got clicked!
 First click!
@@ Line 132: / Line 132: @@
 The name of the main script file is given by <tt>X-Plasma-MainScript</tt> in metadata.desktop, and is relative to the <tt>contents</tt> directory.  In our case, we will need to create the file <tt>hello-javascript/contents/code/main.js</tt>.  Put the following code in it:
-<syntaxhighlight lang="bash">
+<syntaxhighlight lang="javascript">
 layout = new LinearLayout(plasmoid);