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

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


2011-06-29T21:05:45Z
Text replace - "<code html4strict>" to "<syntaxhighlight lang="html4strict">"

				
				
				
				
			
			← Older revision
			Revision as of 21:05, 29 June 2011
			
Line 52:
Line 52:
  Create a file in the <tt>contents/code</tt> directory called <tt>main.html</tt>, open it up in your text editor and put this code in it and save it.   Create a file in the <tt>contents/code</tt> directory called <tt>main.html</tt>, open it up in your text editor and put this code in it and save it.
    
− <code html4strict> + <syntaxhighlight lang="html4strict">
  <!-- <Copyright and license information goes here.> -->   <!-- <Copyright and license information goes here.> -->
  <!DOCTYPE html>   <!DOCTYPE html>

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

2011-06-29T20:54:34Z

Text replace - "</code>" to "</syntaxhighlight>"

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


2011-06-29T20:45:28Z
Text replace - "<code>" to "<syntaxhighlight lang="text">"

				
				
				
				
			
			← Older revision
			Revision as of 20:45, 29 June 2011
			
Line 75:
Line 75:
  Unlike other plasmoids, you can test your plasmoid without packaging it, just point your browser to the main.html file and test from there, such as:   Unlike other plasmoids, you can test your plasmoid without packaging it, just point your browser to the main.html file and test from there, such as:
    
− <code> + <syntaxhighlight lang="text">
  file:///home/pat/plasmoids/hello-web/contents/code/main.html   file:///home/pat/plasmoids/hello-web/contents/code/main.html
  </code>   </code>
Line 105:
Line 105:
    
  If you have this error message instead of plasmoid:   If you have this error message instead of plasmoid:
− <code> + <syntaxhighlight lang="text">
  This object could not be created for the following reason:   This object could not be created for the following reason:
      Could not create a web-script ScriptEngine for the Hello Web widget.       Could not create a web-script ScriptEngine for the Hello Web widget.
  </code>   </code>
  Then make sure that all "webkit kde" depdendencies are installed. In ubuntu for example you should have the next package:   Then make sure that all "webkit kde" depdendencies are installed. In ubuntu for example you should have the next package:
− <code> + <syntaxhighlight lang="text">
  plasma-scriptengine-webkit   plasma-scriptengine-webkit
  </code>   </code>
    
  For additional help see [http://techbase.kde.org/Development/Tutorials/Plasma/Python/GettingStarted#Troubleshooting here]   For additional help see [http://techbase.kde.org/Development/Tutorials/Plasma/Python/GettingStarted#Troubleshooting here]



Neverendingo: Text replace - "" to ""

2011-06-29T20:39:50Z
Text replace - "<code bash>" to "<syntaxhighlight lang="bash">"

				
				
				
				
			
			← Older revision
			Revision as of 20:39, 29 June 2011
			
Line 8:
Line 8:
    
  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-web" applet. Create a directory on somewhere called <tt>hello-web</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-web" applet. Create a directory on somewhere called <tt>hello-web</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-web/contents/code   mkdir -p hello-web/contents/code
  </code>   </code>
Line 80:
Line 80:
    
  Plasma applets can be packaged in zip files and installed using the <tt>plasmapkg</tt> command line tool. The directory structure which we have used for our project matches that need in the zip file. All we have to do is zip it update. Run the following command from inside the hello-web directory.   Plasma applets can be packaged in zip files and installed using the <tt>plasmapkg</tt> command line tool. The directory structure which we have used for our project matches that need in the zip file. All we have to do is zip it update. Run the following command from inside the hello-web directory.
− <code bash> + <syntaxhighlight lang="bash">
  zip -r ../hello-web.zip .   zip -r ../hello-web.zip .
  </code>   </code>
  This will create the hello-web.zip file in the directory just above the hello-web directory. Go to this directory in the shell and run this <tt>plasmapkg</tt> command to install our little hello-web applet.   This will create the hello-web.zip file in the directory just above the hello-web directory. Go to this directory in the shell and run this <tt>plasmapkg</tt> command to install our little hello-web applet.
− <code bash> + <syntaxhighlight lang="bash">
  plasmapkg -i hello-web.zip   plasmapkg -i hello-web.zip
  </code>   </code>
  This installs the applet into your home directory. Now we can run it. When developing applets it is more convenient to use the <tt>plasmoidviewer</tt>. This is a little utility which displays an applet in a window instead of you having to use your desktop. This command below will run our applet.   This installs the applet into your home directory. Now we can run it. When developing applets it is more convenient to use the <tt>plasmoidviewer</tt>. This is a little utility which displays an applet in a window instead of you having to use your desktop. This command below will run our applet.
− <code bash> + <syntaxhighlight lang="bash">
  plasmoidviewer hello-web   plasmoidviewer hello-web
  </code>   </code>
Line 94:
Line 94:
    
  To uninstall our applet we use <tt>plasmapkg</tt> again with its -r option.   To uninstall our applet we use <tt>plasmapkg</tt> again with its -r option.
− <code bash> + <syntaxhighlight lang="bash">
  plasmapkg -r hello-web   plasmapkg -r hello-web
  </code>   </code>



Neverendingo: Text replace - "" to ""

2011-06-29T20:37:21Z
Text replace - "<code ini>" to "<syntaxhighlight lang="ini">"

				
				
				
				
			
			← Older revision
			Revision as of 20:37, 29 June 2011
			
Line 17:
Line 17:
  In the <tt>hello-web</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>hello-web/metadata.desktop</tt>.   In the <tt>hello-web</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>hello-web/metadata.desktop</tt>.
    
− <code ini> + <syntaxhighlight lang="ini">
  [Desktop Entry]   [Desktop Entry]
  Encoding=UTF-8   Encoding=UTF-8



Mart: /* Metadata.desktop */
2010-10-23T11:05:04Z
‎Metadata.desktop

				
				
				
				
			
			← Older revision
			Revision as of 11:05, 23 October 2010
			
Line 13:
Line 13:
  This creates a simple directory structure which also matches the package structure expected by the <tt>plasmapkg</tt> command. More on this later.   This creates a simple directory structure which also matches the package structure expected by the <tt>plasmapkg</tt> command. More on this later.
    
− == Metadata.desktop == + == metadata.desktop ==
    
  In the <tt>hello-web</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>hello-web/metadata.desktop</tt>.   In the <tt>hello-web</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>hello-web/metadata.desktop</tt>.



Aseigo: /* Metadata.desktop */
2010-01-01T03:39:39Z
‎Metadata.desktop

				
				
				
				
			
			← Older revision
			Revision as of 03:39, 1 January 2010
			
Line 46:
Line 46:
  The <tt>X-Plasma-API</tt> and <tt>X-Plasma-MainScript</tt> fields are used specifically by Plasma to find the correct script-engine to use when loading and running the applet.   The <tt>X-Plasma-API</tt> and <tt>X-Plasma-MainScript</tt> fields are used specifically by Plasma to find the correct script-engine to use when loading and running the applet.
    
− Most of the <tt>X-KDE-PluginInfo-*</tt> fields give extra information about who created the applet. <tt>X-KDE-PluginInfo-Category</tt> lists a category which this applet belongs to. http://techbase.kde.org/Projects/Plasma/PIG has a list of acceptable category names. + Most of the <tt>X-KDE-PluginInfo-*</tt> fields give extra information about who created the applet. <tt>X-KDE-PluginInfo-Category</tt> lists a category which this applet belongs to. [[Projects/Plasma/PIG|The Plasma Inteface Guidelines]] contains a list of acceptable category names.
    
  == Main script ==   == Main script ==



Aseigo: /* Metadata.desktop */
2010-01-01T03:38:02Z
‎Metadata.desktop

				
				
				
				
			
			← Older revision
			Revision as of 03:38, 1 January 2010
			
Line 15:
Line 15:
  == Metadata.desktop ==   == Metadata.desktop ==
    
− In the <tt>hello-web</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-web</tt> directory create a file called <tt>metadata.desktop</tt> and open it in your text editor. Copy the following code into <tt>hello-web/metadata.desktop</tt>.
    
  <code ini>   <code ini>





Patcito: Plasma webkit tutorial
2009-12-31T23:01:39Z
Plasma webkit tutorial
New page
This is a 'translation' of the Getting Started article on Python and Plasma. For the Python Tutorial see [http://techbase.kde.org/Development/Tutorials/Plasma/Python/GettingStarted here].



== Abstract ==



In this tutorial we'll cover setting up a very simple plasma applet using web technologies only such as HTML, Javascript and CSS, and how to install it and run it, basically the edit, install, run and debug cycle. To follow this you will need to have KDE 4.3 or later installed, and also the webkit support for plasma and related dependencies. I'm going to assume that you are using a unix-style operating system such as Linux of *BSD and aren't adverse to the shell.



== Project Structure ==



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-web" applet. Create a directory on somewhere called <tt>hello-web</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>

mkdir -p hello-web/contents/code

</code>

This creates a simple directory structure which also matches the package structure expected by the <tt>plasmapkg</tt> command. More on this later.



== Metadata.desktop ==



In the <tt>hello-web</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>

[Desktop Entry]

Encoding=UTF-8

Name=Hello Web

Name[nl]=Hallo Web

Type=Service

ServiceTypes=Plasma/Applet

Icon=chronometer

X-Plasma-API=webkit

X-Plasma-MainScript=code/main.html

X-KDE-PluginInfo-Author=Patrick Aljord

X-KDE-PluginInfo-Email=patcito@gmail.com

X-KDE-PluginInfo-Name=hello-web

X-KDE-PluginInfo-Version=1.0

X-KDE-PluginInfo-Website=http://plasma.kde.org/

X-KDE-PluginInfo-Category=Examples

X-KDE-PluginInfo-Depends=

X-KDE-PluginInfo-License=GPL

X-KDE-PluginInfo-EnabledByDefault=true

</code>



This <tt>metadata.desktop</tt> file list important information needed by Plasma to load the applet, and also information about what the applet is and who created it. The <tt>Name</tt> field lists the name of the applet. This field can also be listed multiple times as different translations. Here I've just given a Dutch translation of the name. The <tt>[nl]</tt> indicates the language of the field.



The <tt>Type</tt> and <tt>ServiceType</tt> fields identify what kind of thing this desktop file is describing. Here we say that we have a plasma applet.



The <tt>Icon</tt> field gives the name of the icon to associate with this applet. The icon is typically shown in things such as the "Add widget" dialog in Plasma.



The <tt>X-Plasma-API</tt> and <tt>X-Plasma-MainScript</tt> fields are used specifically by Plasma to find the correct script-engine to use when loading and running the applet.



Most of the <tt>X-KDE-PluginInfo-*</tt> fields give extra information about who created the applet. <tt>X-KDE-PluginInfo-Category</tt> lists a category which this applet belongs to. http://techbase.kde.org/Projects/Plasma/PIG has a list of acceptable category names.



== Main script ==



Create a file in the <tt>contents/code</tt> directory called <tt>main.html</tt>, open it up in your text editor and put this code in it and save it.



<code html4strict>

<!-- <Copyright and license information goes here.> -->

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset=utf-8 />

    <meta name="viewport" content="width=620" />

    <title>Hello World</title>

  </head>

  <body>

    Hello World!

  </body>

</html>

</code>



As you may have noticed, I'm using HTML5 here. That's because WebKit supports it and that will allow you to add great features to your plasmoid such as SVG, canvas, geolocation, sql web storage and more, see [http://html5demos.com/ here] for examples. Feel free to use HTML4 though.



That's all there is to it. You can of course add javascript, css, svg, images or whatever have you to the <tt>contents/code</tt> directory and include them in main.html as you would for any web page.



== Packaging, installing & running ==



Unlike other plasmoids, you can test your plasmoid without packaging it, just point your browser to the main.html file and test from there, such as:



<code>

file:///home/pat/plasmoids/hello-web/contents/code/main.html

</code>



Plasma applets can be packaged in zip files and installed using the <tt>plasmapkg</tt> command line tool. The directory structure which we have used for our project matches that need in the zip file. All we have to do is zip it update. Run the following command from inside the hello-web directory.

<code bash>

zip -r ../hello-web.zip .

</code>

This will create the hello-web.zip file in the directory just above the hello-web directory. Go to this directory in the shell and run this <tt>plasmapkg</tt> command to install our little hello-web applet.

<code bash>

plasmapkg -i hello-web.zip

</code>

This installs the applet into your home directory. Now we can run it. When developing applets it is more convenient to use the <tt>plasmoidviewer</tt>. This is a little utility which displays an applet in a window instead of you having to use your desktop. This command below will run our applet.

<code bash>

plasmoidviewer hello-web

</code>

You should now be able to see the fruits of your labor.



To uninstall our applet we use <tt>plasmapkg</tt> again with its -r option.

<code bash>

plasmapkg -r hello-web

</code>



== Conclusion ==



This tutorial covers very basics of developing Plasma applets using web technologies. Most of the material discussed here is boring but important "boilerplate" stuff which stays mostly the same between every applet project.



== Troubleshooting ==



If you have this error message instead of plasmoid:

<code>

This object could not be created for the following reason:

   Could not create a web-script ScriptEngine for the Hello Web widget.

</code>

Then make sure that all "webkit kde" depdendencies are installed. In ubuntu for example you should have the next package:

<code>

plasma-scriptengine-webkit

</code>



For additional help see [http://techbase.kde.org/Development/Tutorials/Plasma/Python/GettingStarted#Troubleshooting here]