Sharing technology, ideas, insights!
Call: +91 710 466 0336         Email: hello@sanisoft.com

Blog

Introduction to creating desktop applications with PHP and Titanium

Welcome back! and a very Happy New Year. Yes, you saw it right. The post is about creating desktop applications with the help of PHP. And No, we are not using PHP-GTK. You can now create desktop applications without learning a completely new programming language! That is with the help of a free and open source tool called “Titanium”. Whats more you will use your existing CSS and Javascript and PHP knowledge. In this post I am going to briefly explain what Titanium is and show you how you can use the same to create a simple desktop application. So grab your text editors and get ready go!

What is Titanium ?

Titanium is a Free and open source (Uses Apache 2.0 License) framework for building native desktop and mobile applications using open web technologies (JavaScript, HTML and CSS). The framework also has support for PHP , Python and Ruby with access to both the Titanium framework itself and the DOM.

Now, Appcelerator Titanium (or simply Titanium) Platform consists of :

1) Titanium Desktop SDK

This will be our focus in this post. The best it could be described is by the appcelerator titanium documentation itself “The Titanium Desktop SDK provides a runtime environment for creating native desktop applications in HTML, CSS, and JavaScript. Titanium Desktop packages up your application source code (HTML/CSS/JavaScript) with a heavily augmented build of the popular Webkit open source web browser engine.”. Basically your application will be a set of webpages but with the power of native functionality. So you can ofcourse connect to remote servers like any web application and access the local media, the filesystem run processes and also use the languages like PHP, Ruby and Python and do lots more! As we will explore you can target the same code for a Windows, Linux or Mac OS Desktop without getting into the complexities of each of them.

2) Titanium Mobile SDK

The Titanium Mobile SDK empowers you to not just create but also run and even package real native mobile application for your favorite iOS, Android and even Blackberry (still in beta) using it cross platform JavaScript APIs and the final application will actually be a native application. We won’t be covering this in this post but, don’t worry I will be exploring mobile development with Titanium for iOS and Android in the future posts.

Titanium Developer

To create the applications using the above we need to install a tool called Titanium Developer (built using Titanium! itself) which is a desktop application that allows us to create, run and even package our desktop or mobile application. This tool basically does all the hardwork under the hood to manage your project with a nice and easy GUI.

Why would you use it. Whats so special about it ?

While it may sound like its another Adobe Air and frankly in some ways it is similar but its actually have many advantages over it :

  • Its open source software so it can be extended and modified.
  • You have already have the webkit browser engine for your desktop application so you can use the bleeding edge technologies like HTML5 and CSS3. Use what you know even JavaScript / css frameworks like JQuery are welcome.
  • With Titanium you can have access to a lot of unique native apis that your desktop applications. So its not just the look and feel of the desktop application it also performs like one.
  • If you are a web developer you can use your existing web development skills for creating desktop applications as well.
  • You don’t need to get into the complexities about each targeted OS. Titanium takes care of it for you.

What do you need to learn ?

Your existing knowledge of HTML / Javascript/ CSS and PHP (or Ruby / Python) will do. Apart from this for certain features you need to learn about the Titanium Javascript API so as to create menus / tool bars and so on.

What tools do you need ?

  • Download and install the Titanium Developer. The download and installation procedure has been discussed at length in the Titanium documentation in a simple and understandable way and even the steps on creating a new project and hence I am not putting the same here. I am assuming that you will download and comeback right here to know what next.
  • Text Editor with HTML / PHP syntax highlighting – If you are a web developer then you can’t be alive without one. Use your favorite.

On my Ubuntu 10.04 I got an error like : symbol lookup error: /usr/lib/lib-something: undefined symbol: something:

I did this to get rid of it :

- cd ~/.titanium/runtime/linux/1.0.0 if you install in your home dir.

or if you install in /opt/titanium/runtime/linux/1.0.0

- rm libgobject* libgthread* libglib* libgio*

Ready ?  What next ?

You now need to start “Titanium Developer” for e.g if you install it in your home dir

- /home/you/Titanium Developer-{version}/Titanium Developer

As you might have seen you get a screen like this :

Click on new project

The following screen will appear

Note: The AppId is the unique string that identifies your project and the Directory is the directory where the project files will be stored. Since we will be using PHP language module select the same.

Now enter the details as required and hit ‘Create Project’ L

You will see a screen like this :

Now Go to the “Test and Package” Tab you will see a screen with tabs to “Launch”, “Package” and “Link” hit the “Launch Application” button. The application screen will open up. Congrats! you just created your first desktop application.

If you installed titanium in the home dir you should see a directory structure like this :

In the above structure the :

- dist contains the binary files which you won’t need to change.

- Resources : This is where your source code lives and you should see a file named “index.html”.

- tiapp.xml : This is the config file for your project can controls the attributes like window size, title etc.

If you edit the the file index.html you see that this is a normal harmless html file. Make any changes to this and the window that opens on launching your application will reflect the same.

Enter PHP ..

Ok, lets move on and create a simple desktop application that does currency conversion, nothing complicated this is simply done using using a simple file_get_contents on web url (you need Internet access when using this app).

Now, there are some rules on writing PHP inside your application file and the documentation describes this at best. but basically this is done this way :

[code]

[/code]

and include like :

[code]

[/code]

ok, our first page or interface does not need php so lets just put in a simple html form

Let put in the following code in the index.html

Note : Its best practice to keep the styling / CSS outside your html and make it themable. but for the sake of this example we put in the same inside. You are free to have a css file style your app.

Now, in the next page that appears after this :
convert.php : We put in this simple HTML / PHP code:


We will be using the Exchange API. You need the Api key to use it in place of the code GET-YOUR-OWN-API-KEY

We made a few changes in the config file tiapp.xml and added a bit of style to make it slightly attractive and the final output after you go to the "Test and Package" -> "Launch App" is the following

And after you convert :

Wasn't that easy! Now this is not where it ends you can :
- Package your application for various os and get a direct link where you can download the same using the "Package" tab in the "Test and Package" tab. The links you create will always be available for you in the "Links" tab.
Its important to note that your application will need the Titanium Runtime Environment (Similar to the way Adobe Air needs) to run and use can either bundle the same with your application or provide an option for the user to install the same while installing your application.

- You can use the Perspectives (Left hand top) corner and Switch to the "Community" perspective to view feeds and tweets and even use the "Sandbox" to test out your code without creating a project!

Well, this topic too large and we just had our first bite of it. But I hope you have understood the basics of how you can create a desktop app. So what are you thinking ? that cloud based application or a desktop frontend to your web application the possibilities are endless. So when are you starting. Until next time .. Chao .. :)

About the Author

Jatin has been working with PHP for the last 7 years and is a Zend Certified PHP 5 Engineer.

16 comments

  1. Pingback: Tweets that mention Introduction to creating desktop applications with PHP and Titanium at SANIsoft – PHP for E Biz -- Topsy.com

  2. Pingback: SaniSoft Blog: Introduction to creating desktop applications with PHP and Titanium | Development Blog With Code Updates : Developercast.com

  3. I’m just in the middle of installing Titanium, but I can’t wait and have to write a quick comment on this. It seems just awesome and I am much looking forward to try it. I was just about to dig myself into Java for Android app development. Now it seems I have found a big help, so I don’t need to learn a new language.

    • For a good PHP developer, Java is not very complicated. I would say that 2-3 weeks of Java should be enough to get started with kind-of professional Android applications.

  4. Pingback: abcphp.com

  5. Pingback: Best-of-the-Web 5 | davblog: webdev and stuff

  6. Hello,
    I tried to follow your instructions but came up to a brick wall when you got to “see a directory structure like this”.

    So where or how do I get to see this directory? I can’t find anywhere where I can see the directory that I set my project for. I tried a couple of projects but fail to see the directory as shown in your tutorial.
    Please help.

  7. Pingback: Programowanie w PHP » Blog Archive » SaniSoft Blog: Introduction to creating desktop applications with PHP and Titanium

  8. Awesome.. I spended two hours to learn phpgtk.. Now I have created a full app with titanium.. Thank you for introducing it to me

Leave a Reply