Developing desktop applications by using web technologies

Looking how to develop a desktop application in a short term, I came accross "Titanium Developer". This Open-Source tool helps you to create desktop apps. The special feature about it is the possibility to use well-known Web-Technologies such as HTML, JavaScript and PHP. Thus, learning a new programming language is no longer necessary. Another advantage is that you can directly create binaries for Mac, Linux and Windows using the same code.


After
the installation, you have to create a new project in order to start.
This requires – among other things – the name of the application.
Optionally, you can add one or more JavaScript-Frameworks and language
modules, for example PHP.

In my case, the code of the example demo app I created looked as follows:

<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>

<body style="background-color:#1c1c1c;margin:0">
    <div style="border-top:1px solid #404040">
        <div style="color:#fff;padding:10px">Welcome to Titanium</div>
    </div>
</body>
</html>

You can extend the project with the IDE of your choice now. The Titanium API and other documentations are available at http://www.codestrong.com.
The API allows e.g. to access UI-Elements, Databases, Network and the
File system by using JavaScript. The advantage is that the created app
is using native elements. As a result, menus and notifications look and
feel as usual in the respective operating system.

Notifications, for example, can be created as follows:

<script type="text/javascript">
function informUser()
{
    var window = Titanium.UI.getMainWindow();
    var note   = Titanium.Notification.createNotification(window);

    note.setTitle("New messsage");
    note.setMessage("Thomas: An example");
    note.show();
}
</script>

<div onclick="informUser()">Send notificiation</div>


PHP can be used with the
value "text/php" in the "type" attribute of the "script" element. It
can be used at any point of the document as usual:

<script type="text/php">
function sum($values)
{
    $result = 0;
    foreach ($values as $value) {
        $result = $result + $value;
    }
    return $result;
}
</script>


The possibility to reuse files or code which already exists is really interesting:

<script type="text/php">
    include("dateiname.php");
</script>


The clou is that you are able to access a JavaScript Variable via PHP and vice versa. This allows the Kroll microkernel (http://github.com/jhaynie/kroll).


<script>
    // javascript
    var globalObject = new Object();
    globalObject.foo = "string"
</script>

<script type="text/php">
    // php
    $globalObject->foo = "string2" 
    function changeNumber($obj)
    {
        $obj->foo = "string3"
    }
    changeNumber($globalObject);
    $projects = array();
</script>

<script>
    // javascript
    projects.push(5);
    alert(globalObject.foo);
</script>

Titanium is available with an Apache 2.0 license. In
addition to desktop applications, Titanium provides the ability to
create mobile apps for Android and iPhone in a similar manner. By the
way, even the app Titanium Developer has been created by this
technology. Alternatives are for example Adobe AIR and PhoneGap.

More Information about Titanium can be found at http://www.appcelerator.com

Für neue Blogupdates anmelden:


4 Gedanken zu “Developing desktop applications by using web technologies

  1. October. I think you answered a question about how to get data to it. From the examples, PHP doesn’t seem to be supported like the other languages. Now to find out how to do hardware integration w/ desktop – ie USB / Serial.

    • PHP and JavaScript is used for data and logical stuff. The titanium API provides access to native elements (user interface, filesystem, network, …) and is only accessible via JavaScript. Direct hardware access is not supported by the titanium api at the moment. However, e.g. python, C++ is available via the module API.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.