DroidScript Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
======Create you own pure Javascript plugins======
=====(Tutorial)=====

=====Introduction=====

===Here is the announcement from Dave, developer of DroidScript:===
(posted in the DroidScript-Beta-Testers google-group)

//Hi Guys,
For those of you that would like to have a go at creating pure JavaScript plugins for DroidScript, I have attached a {{:wiki:myplugin.zip|sample}}* plugin zip file to this post.//
//You simply need to drop this zip file into a folder called /sdcard/DroidScript/Plugins on your device and DroidScript will import it into the plugins list along with the sample documentation.
When you come to renaming and making your own plugins, please make sure you use the same format and case for file names as those shown in this sample.
Let us know how you get on :)

(Note: You can make sub folders in the zip file for your documentation images etc if you like)//

*(The Sample is a simple **Zip-File** with 4 files. You can find this files below. All you have to do is to Download the files. Put them in one folder and zip this folder, or download the complete zip file)

----

=====Usage of the Example===== 

====First Step:====

Download the following 4 Files:

  * **File 1: The html-page for the Documentation**

<code html MyPlugin.html>

<!DOCTYPE html> 
<html>

<head>
	<title>MyPlugin</title> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
        <style type="text/css">
        </style>
</head> 

<body> 

<div data-role="page" data-theme="a">

	<div data-role="header" data-position="fixed">
		<a href='#' class='ui-btn-left' data-icon='arrow-l' data-theme="c" onclick="history.back(); return false">Back</a> 
		<h1>MyPlugin</h1>
	</div><!-- /header -->

	<div data-role="content">	
			
		<p> Todo: Documentation for MyPlugin</p>
		
		<p>In order to use MyPlugin, you must first load the plugin at the top of your script 
		using the <b>LoadPlugin</b> method like this:</p>
		
		<div class="samp">&nbsp;app.LoadPlugin( "MyPlugin" );</div>
		
		<p>Then you can create an instance of the plugin object when you need it like this:</p>
		
		<div class="samp">&nbsp;plg = app.CreateMyPlugin();</div>
		  
		<br>
		<p>Examples:</p>
		
		<div data-role="collapsible" data-collapsed="true"  data-mini="true" data-theme="a" data-content-theme="b">
			<h3>Example - Get Version</h3>
			<div id="examp1" style="font-size:70%">
				app.LoadPlugin( "MyPlugin" );<br>
				<br>
				function OnStart()<br>
				{<br>
				 &nbsp;&nbsp;lay = app.CreateLayout( "Linear", "VCenter,FillXY" );<br><br>
				 &nbsp;&nbsp;btn = app.CreateButton( "Press Me" );<br>				
				 &nbsp;&nbsp;btn.SetOnTouch( CallPlugin );<br>
				 &nbsp;&nbsp;lay.AddChild( btn );<br><br>
				 <b id="snip1"  style="font-size:100%">
				 &nbsp;&nbsp;plg = app.CreateMyPlugin();<br>
				 </b><br>
				 &nbsp;&nbsp;app.AddLayout( lay );<br>
				}<br>
				<br>
				function CallPlugin()<br>
				{<br>
				&nbsp;&nbsp;alert( plg.GetVersion() );<br>
				}<br><br>
				
			</div>
			<div name="divCopy" align="right">
			<a href="#" data-role="button" data-mini="true" data-inline="true" onclick="copy(snip1)">&nbsp;&nbsp;Copy&nbsp;&nbsp;</a>
			<a href="#" data-role="button" data-mini="true" data-inline="true" onclick="copy(examp1)">Copy All</a>
			<a href="#" data-role="button" data-mini="true" data-inline="true" onclick="demo(examp1)">&nbsp;&nbsp;&nbsp;Run&nbsp;&nbsp;&nbsp;</a>
			</div>
		</div>
		
		
		<div data-role="collapsible" data-collapsed="true"  data-mini="true" data-theme="a" data-content-theme="b">
			<h3>Example - Test Callback</h3>
			<div id="examp2" style="font-size:70%">
				app.LoadPlugin( "MyPlugin" );<br>
				<br>
				function OnStart()<br>
				{<br>
				 &nbsp;&nbsp;lay = app.CreateLayout( "Linear", "VCenter,FillXY" );<br><br>
				 &nbsp;&nbsp;btn = app.CreateButton( "Press Me" );<br>				
				 &nbsp;&nbsp;btn.SetOnTouch( CallPlugin );<br>
				 &nbsp;&nbsp;lay.AddChild( btn );<br><br>
				 <b id="snip2"  style="font-size:100%">
				 &nbsp;&nbsp;plg = app.CreateMyPlugin();<br>
				 &nbsp;&nbsp;plg.SetOnMyReply( OnMyReply );<br>
				 </b><br>
				 &nbsp;&nbsp;app.AddLayout( lay );<br>
				}<br>
				<br>
				function CallPlugin()<br>
				{<br>
				&nbsp;&nbsp;plg.MyFunc( "hello", 21, true );<br>
				}<br><br>
				function OnMyReply( txt, num, bool )<br>
				{<br>
				&nbsp;&nbsp;alert( "txt=" + txt + " num=" + num + " bool=" + bool );<br>
				}<br>
			</div>
			<div name="divCopy" align="right">
			<a href="#" data-role="button" data-mini="true" data-inline="true" onclick="copy(snip2)">&nbsp;&nbsp;Copy&nbsp;&nbsp;</a>
			<a href="#" data-role="button" data-mini="true" data-inline="true" onclick="copy(examp2)">Copy All</a>
			<a href="#" data-role="button" data-mini="true" data-inline="true" onclick="demo(examp2)">&nbsp;&nbsp;&nbsp;Run&nbsp;&nbsp;&nbsp;</a>
			</div>
		</div>
		
	</div><!-- /content -->
	
</div><!-- /page -->

</body>
</html>
</code>

  * **File 2: The inc-file with the Plugin-code (Javascript)**

<code Javascript MyPlugin.inc>

app.CreateMyPlugin = function() 
{ 
    return new MyPlugin();
}

function MyPlugin()
{
	this.callback = null;
	
	this.GetVersion = function( num, txt ) 
	{ 
		return 1.0; 
	}
	
        this.MyFunc = function( txt, num, bool ) 
        { 
		this.callback( txt + " World!!", num+20, !bool ); 
	}
	
        this.SetOnMyReply = function( cb ) 
        { 
		this.callback = cb; 
	}
}
</code>

  * **File 3: The text-file with the Versionnumber**

<code text Version.txt>
1.00
</code>

  * **It is no longer necessary to add an empty jar-file and we recommend you do not so**


----


====Second Step:====

Create a Zip-folder called "MyPlugin.zip" and copy this folder to the right path on your android-device:

  * Select the 4 Files and use a tool on a Windows Desktop-PC like [[http://www.7-zip.org/|7-Zip]] to create the Zip-File. If you Use Android you can use [[https://play.google.com/store/apps/details?id=com.estrongs.android.pop&hl=en|ES File Explorer]] to create the file.
  * after this process you should have a file with the following structure:

    MyPlugin.zip
       MyPlugin.html
       MyPlugin.inc
       MyPlugin.jar
       Version.txt

  * Now you go on your Android Device to the folder **/sdcard/DroidScript** and create a new folder called "**Plugins**" within the folder **Droidscript**
  * Copy the zip-file in this folder and start Droidscript
  * DroidScript imports the Plugin now in the Droidscript-Pluginfolder in the systempath
  * Now you can see your plugin if you press the left "Docs"-button and than the "Plugins"-button
  * The folder **/sdcard/DroidScript/Plugins** is blank after this process

=====Notes=====

  * If your Plugin had another name like "TestPlugin" you have to rename all the "MyPlugin"-words in all files!
  * When you come to renaming and making your own plugins, please make sure you use the same format and case for file names as those shown in this sample!
  * You can make sub folders in the zip file for your documentation images etc

=====How can you uninstall your plugin?=====

There are two ways at the moment:
You can download and run the following script if you want uninstall a plugin or you uninstall and reinstall Droidscript completely. Using the second option causes all your plugins to be uninstalled so you have to reinstall all plugins.

<code javascript UninstallPlugin.js>

//Called when application is started.
function OnStart()
{
    //Create a layout with objects vertically centered.
    lay = app.CreateLayout( "linear", "VCenter,FillXY" );    

    //Create a text label and add it to layout.
    txt = app.CreateTextEdit( "" );
    txt.SetHint("Plugin to delete")
    lay.AddChild( txt );

    btn=app.CreateButton("Delete Plugin");
    btn.SetOnTouch(DeleteUserPlugin);
    lay.AddChild(btn);
    
    privFldr = app.GetPrivateFolder( "Plugins" );
    plgins = app.ListFolder(privFldr);

    lvw = app.CreateListView( plgins, "Select a Plugin for uninstalling or press Back" );
    lvw.SetOnTouch( lvw_OnTouch );

    //Add layout to app.    
    app.AddLayout( lay );

    lvw.Show();
}


function lvw_OnTouch( item )
{
  txt.SetText( item );
}


function DeleteUserPlugin()
{
    var plg = "" + txt.GetText()
    if (plg == "") return;
    plugDir = privFldr + "/" + plg.toLowerCase();
    if (app.FolderExists(plugDir))
    {
       var list = app.ListFolder(plugDir);
       var yesNo = app.CreateYesNoDialog( "Do you really want to uninstall the plugin " + txt.GetText() + "? \nThe following files or folders will be all deleted:\n\n" + list + "\n\nIt is no way for undo!");
       yesNo.SetOnTouch( yesNo_OnTouch );
       yesNo.Show();
    }
}


function yesNo_OnTouch( yesNoresult )
{
    if( yesNoresult == "Yes" )
    { 
        app.DeleteFolder(plugDir);
        
        app.Alert("Plugin " + txt.GetText() + " uninstalled!");
        txt.SetText("");
    }
    else
    {
        app.ShowPopup("No changings!");
    }
}

</code>



----

===== Zip file with all 4 files =====
You can find the Zip-file with all 4 files here: {{:wiki:myplugin.zip|MyPlugin.zip}}
DroidScript Wiki

User Tools

Site Tools

Page Tools
