causality

Currently Iam developing an ExtJs based backend and had the task to integrate the ace editor into an ExtJs form. I didnt find a good solution on the internet so I started coding my own form field. Here is the result so if you have also a similar task this may help you ;D … hf

Ext.define('Amun.Editor', {
    extend: 'Ext.form.field.Text',

    alias: 'widget.aceeditor',
    editorId: null,
    editor: null,

    initComponent: function(){
        var me = this;
        me.editorId = Ext.id();

        var config = {
            width: 640,
            height: 300,
            fieldSubTpl: [
                '<div id="{id}" {inputAttrTpl}>',
                    '<div id="' + me.editorId + '" class="amun-ace-editor"></div>',
                '</div>',
                {
                    disableFormats: true
                }
            ]
        };
        Ext.apply(me, config);

        me.callParent();
    },

    afterRender: function(){
        var me = this;

        me.callParent(arguments);

        // ace editor
        me.editor = ace.edit(me.editorId);
        me.editor.setTheme('ace/theme/eclipse');
        me.editor.getSession().setMode('ace/mode/html');
        me.editor.setValue(me.rawValue, -1);
    },

    setRawValue: function(value){
        var me = this;
        me.rawValue = value;
        return value;
    },

    getRawValue: function(){
        var me = this;
        var value = me.editor != null ? me.editor.getValue() : '';
        return value;
    }

});

In this post I will demonstrate and explain howto create a manual with the DocBook XML schema using Saxon as XSLT processor the DocBook XSL as stylesheet and xslthl for syntax highlighting. More informations about DocBook at docbook.org. Note in some files you have to adjust the paths according to your system (I have build this on an windows machine using absolute paths).

First you need the following files. Note xslthl is included in the DocBook XSL in the folder highlighting but it is maybe not the latest version. Because Saxon is writte in Java you need also an working JRE on your system. We cant use a newer version of Saxon because we need an XSLT 1.0 processor for parsing the
DocBook XSL.

• DocBook XSL (1.76.1)
• Saxon (6.5.5)
• xslthl (2.0.2)

In order to create a manual we need some DocBook XML wich we later convert to HTML. Here an example DocBook XML file called manual.xml with some dummy code.

<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.2//EN" "http://www.oasis-open.org/docbook/xml/4.2/docbookx.dtd">
<book lang="en">
	<bookinfo>
		<title>DocBook with syntax highlighting</title>
		<abstract>
			<para>A simple demonstration howto cre</para>
		</abstract>
	</bookinfo>
	<chapter>
		<title>Foobar</title>
		<para>Here an simple example of some dummy code with syntax highlighting:</para>
		<programlisting language="php"><![CDATA[
<?php

class foo
{
	private $bar;

	public function __construct($bar)
	{
		$this->bar = $bar;
	}

	/**
	 * getFoo
	 *
	 * Returns bar if $this->bar is foo else foo .. Oo ;D
	 *
	 * @return string
	 */
	public function getFoo()
	{
		if($this->bar == 'foo')
		{
			return 'bar';
		}
		else
		{
			return 'foo';
		}
	}
}
		]]></programlisting>
	</chapter>
</book>

In order to use xslthl and to set some other settings we create a costum XSL file called “manual.xsl”.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:import href="file:///I:/application/tools/saxon/docbook-xsl-1.76.1/html/docbook.xsl" />
<xsl:import href="file:///I:/application/tools/saxon/docbook-xsl-1.76.1/html/highlight.xsl" />

<xsl:param name="html.stylesheet" select="'foo.css'" />
<xsl:param name="section.autolabel" select="1" />
<xsl:param name="chapter.autolabel" select="1" />
<xsl:param name="appendix.autolabel" select="1" />
<xsl:param name="section.label.includes.component.label" select="1" />
<xsl:param name="highlight.source" select="1" />

</xsl:stylesheet>

Now we have all files wich we need to transform the XML. We are using the following command:

java -cp "I:/application/tools/saxon/saxon.jar;I:/application/tools/saxon/xslthl.jar" -Dxslthl.config="file:///I:/application/tools/saxon/docbook-xsl-1.76.1/highlighting/xslthl-config.xml" com.icl.saxon.StyleSheet -o J:/test/manual.html J:/test/manual.xml J:/test/manual.xsl

If everything works correctly you should have created a new file “manual.html”. From this point you can extend the example to build a complete manual using the DocBook XML schema with syntax highlite.

If you want to develop your own windows sidebar gadget it is in theory easy todo because it is based on html, css + javascript. If you never have developed a sidebar gadget before it has some traps. I have done these hurdles while developing a basic sidebar FeedReader gadget with jQuery. The gadget has an Settings dialog where you costumize the gadget an it makes an AJAX request to an domain. Based on this gadget you can develop almost anything you like.

To install the gadget you have to create a folder in “%HOMEPATH%\AppData\Local\Microsoft\Windows Sidebar\Gadgets” called “FeedReader.gadget”. In this folder you have to copy all files from the repository where I develop the gadget. Alternatively you can also make a checkout via svn:

svn checkout http://delta-quadrant.googlecode.com/svn/trunk/gadget .

The code of the gadget is mostly self-explanatory but I want briefly mention a few things.

jQuery.support.cors = true;

By default you cant make a XHR request to another domain because of the “Same Origin Policiy” in the browsers. In an gadget you have to set the option “jQuery.support.cors” to true to make an XHR request to any domain.

System.Gadget.settingsUI = "Settings.html";

With this option you tell windows that the option has an settings page and therefore a “Wrench” is rendered beside the gadget. If the user clicks on the “Wrench” the provided html page is loaded.

System.Gadget.onSettingsClosing = function(event){}

This callback method is called if the “OK” or “Cancel” button was pressed in the settings dialog. With the event you can determine wich button was pressed i.e. with if(event.closeAction == event.Action.commit){}you can check whether the “OK” button was pressed. This method must be declared in the “Settings.html”

System.Gadget.onSettingsClosed = function(event){}

This callback method is called if the settings have closed. In the function you can reload the gadget if the settings have changed. It must be declared in the main gadget html file.

[HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Sidebar] "ShowScriptErrors"=dword:00000001

At least it is very useful to see script errors while developing. You can achieve that by setting the registry entry.

So hopefully I could give an good overview howto start developing a new windows sidebar gadget.

Here a short tutorial howto make an http request and howto mount a network drive via an *.vbs script. Both scripts will be used to connect over the internet to an computer with an dynamic ip address and to mount an samba share. First the Visual Basic Script code.

To make an http request:

DIM response
DIM xmlHttp : SET xmlHttp = createObject("msxml2.xmlhttp.3.0")
xmlHttp.open "GET", "http://google.com", FALSE
xmlHttp.send ""

response = xmlHttp.responseText

SET xmlHttp = NOTHING

WScript.Echo "Response: " & response

To mount an network drive to a specific drive:

DIM shouldMount
DIM ip
DIM drive
DIM network : SET network = WScript.createObject("WScript.Network")

shouldMount = TRUE
ip = "192.168.2.1"
drive = "P:"

SET drives = network.EnumNetworkDrives

FOR i = 0 TO drives.Count - 1 STEP 2

	IF drives.Item(i) = drive AND drives.Item(i + 1) = "\\" & ip & "\share" THEN

		WScript.Echo "Laufwerk ist bereits verbunden"

		shouldMount = FALSE

		EXIT FOR

	ELSEIF drives.Item(i) = drive THEN

		WScript.Echo "Laufwerk " & drive & " wird bereits verwendet"

		shouldMount = FALSE

		EXIT FOR

	END IF

NEXT

IF shouldMount THEN

	network.mapNetworkDrive drive, "\\" & ip & "\share", false, "share", "password"

	SET network = NOTHING

	Wscript.echo "Laufwerk " & drive & " erfolgreich verbunden mit " & ip

END IF

I have used these scripts to build a dyndns.org like service and to mount a samba share from an remote computer. The remote computer has a dynamic IP address. So I have setup a cronjob on the computer wich submits every hour the current ip address to a webserver. My client pc request this ip via an http request and mounts the drive with the given ip.

Note I have run an samba server with an open port to the internet for three days and after this I had like 300 access attempts. So if you run an open samba port be sure to use a secure password. The most secure solution is probably to connect to an VPN and then mount the drive. But setting up an working VPN takes more time then this approach.

I have started a new project called “delta-quadrant”. It is a repository of java applications wich should help developing on web applications. I have started developing these tools to make it easier for me to test OAuth protected REST based APIs and to make security tests for them. Probably you know why I have called this project “delta-quadrant” but for the not so scifi users … the “delta-quadrant” is the place where the borgs of star trek live. More informations at the project page at http://code.google.com/p/delta-quadrant.

I have renamed the content managment system “psx cms” to “amun”. “amun” is a social content managment system wich helps to build social websites. More informations on the offical website. You can reach the project under the following locations:

• Website (http://amun.phpsx.org)
• Google project (http://code.google.com/p/amun)
• Freshmeat (http://freshmeat.net/projects/amun)

Facebook has announced on the F8 a new protocoll called Open Graph. Zuckerberg says:

Today the web exists mostly as a series of unstructured links between pages. This has been a powerful model, but it’s really just the start. The open graph puts people at the center of the web. It means that the web can become a set of personally and semantically meaningful connections between people and things.

In general a great idea butthere are some things why I dont like the protocol. First you must have an facebook account second it is bound to a company and third its to easy to implement ^^. To give you a short overview I will explain how the protocol works.

To implement the Open Graph into your website you have to add some meta tags to your website. I.e. if you want set a title for the website you have to add the tag <meta property="og:title" content="The Rock" />. There are a bunch of other tags to add informations like lat/long-itude, street-address, etc. more informations at opengraphprotocol.org. But why dont use a format wich already exists like DublinCore. Instead of writing <meta property="og:title" content="The Rock" /> we should use <meta name="OG.title" content="The Rock" />. From my opinion its better to read for both human and robots and we dont create another format.

At least I have to say something good about facebook they have announce that they user OAuth for their API and this is a good decision.

As of PHP 5.3 php supports now anonymous function. With this post I will give you a short introduction how you could use them. As the name said anonymous function doesnt have a name they are assigned to a variable. To call the function you have to write i.e. $foo();. You can use them also as argument in a function wich is really useful for callbacks. Here some examples how you can use them:

$foo = function(){

	echo 'bar';

};

$foo();

$arr = range('A', 'E');

array_walk($arr, function($v, $k){

	echo $v;

});

An anonymous function is automatically an object from the class “Closure” so if you want accept as argument an callback function you can check via type hinting whether it is a valid callback i.e.:

class foo
{
	private $callback;

	public function register(Closure $callback)
	{
		$this->callback = $callback;
	}

	public function run()
	{
		$func = $this->callback;

		$func();
	}
}

This example leads me direct to the next point. Probably you ask yourself why I dont write $this->callback(); in the method run(). The answer is simple because it won’t work you have to assign the property first to a local variable and then you can call the function.

These are the points wich I have learned so far from anonymous functions … so have fun using them.

Probably you have on your website scripts wich must be called every x minuted todo a specific task i.e. delete old logs, thumbnails etc. Normally you would use a cronjob for such tasks and the cronjob automatically calls every x minutes your script. But if you havent access to a cronjob I have found an alternative way howto call your script. You must insert a script tag in your page wich points as source to your cronjob script. You should add the attribute defer wich causes that the script will loaded at the end if the content is already shown to the user. In example:
<script src="[url_to_script]" type="text/javascript" defer="defer"></script>

The problem is that you can only insert the tag if a user visits the page and because your users doesnt come in an symmetric way you can use this method only if its not important when the script is called. You can say i.e (3 % visit == 0) ? "insert script tag" : "do nothing". In addition you can keep track when the script was inserted last time and depend on that you decide whether to insert the tag or not.

If the script takes some time your script should ignore if the user has cancled the connection i.e. if you use php you should call the function ignore_user_abort(true).

The advantage of this technique is it doesnt disturbs the user because the browser makes the http request in the background. The only disadvantage is that the loading bar doesnt finish if the script takes a long time.

I like to announce the new version of psx cms 0.1.8 beta. From now psx cms is an opensocial API container and uses OAuth to protect the API. You can login either with an OpenID or with your email (in this case we send you an activation mail). More informations at http://cms.phpsx.org.

best regards

k42b3