Roshan Book

My Tech Notebook

Tag Archives: titanium

Introduction to creating desktop applications with PHP and Titanium

Source: http://www.sanisoft.com/blog/2011/01/03/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:

  1. <script type=”text/php”>
  2.  // Your code goes here
  3. </script>

and include like :

CODE:

  1. <!– method one –>
  2.  
  3. <script src=”my_file.php” type=”text/php”>
  4.  
  5. <!–  method two –>
  6. <script type=”text/php”>
  7.     include(“my_other_file.php”);
  8. </script>

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

PHP:

  1. <head>
  2. <title>Your First Desktop Application</title>
  3. </head>
  4. <body>
  5.  
  6. <h1 align=’center’>Currency Converter</h1>
  7. <h4 align=’center’>A Desktop Application by SANIsoft</h4>
  8. <form action=”convert.php”>
  9.         <table align=”center”>
  10.                 <tr>
  11.                         <td>
  12.                                 Input From
  13.                         </td>
  14.                         <td>
  15.                                 <select name=”from”>
  16.                                     <option value=”eur”>Euro</option>
  17.                                     <option value=”usd”>US Dollar</option>
  18.                                     <option value=”gbp”>Pound Sterling</option>
  19.                                     <option value=”inr”>Indian Rupee</option>                                   
  20.                                 </select>                               
  21.                         </td>
  22.                 </tr>
  23.                 <tr>
  24.                         <td>
  25.                                 Input To
  26.                         </td>
  27.                         <td>
  28.                                 <select name=”to”>
  29.                                     <option value=”inr”>Indian Rupee</option>
  30.                                     <option value=”gbp”>Pound Sterling</option>
  31.                                     <option value=”usd”>US Dollar</option>
  32.                                     <option value=”eur”>Euro</option>
  33.                                 </select>
  34.                         </td>
  35.                 </tr>                       
  36.                 <tr>
  37.                         <td>
  38.                                 Amount
  39.                         </td>
  40.                         <td>
  41.                                 <input type=”text” name=”amount” value=””>
  42.                         </td>
  43.                 </tr>   
  44.                 <tr>
  45.                         <td colspan=”2″ align=”center”>
  46.                                 <input type=”submit” name=”submit” value=”Convert”>
  47.                         </td>
  48.                 </tr>                       
  49.         </table>
  50. </form>
  51.  
  52. </body>

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
PHP:

  1. <head>
  2. </head>
  3. <body>
  4.  
  5. <h1 align=’center’>Currency Converter</h1>
  6. <h4 align=’center’>First Desktop Application by SANIsoft</h4>
  7. <table align=”center”>
  8. <tr>
  9. <?php
  10. if ($_GET[‘submit’]) {
  11.     $result = file_get_contents(“http://www.exchangerate-api.com/&#8221;.$_GET[‘from’].”/”.$_GET[‘to’].”/”.$_GET[‘amount’].”?k=GET-YOUR-OWN-API-KEY”);
  12. ?>
  13.     <td>
  14.         <h1>Result :</h1>
  15.     </td>
  16. </tr>
  17. <?php
  18. // Available currencies
  19. $currencies = array(“eur” => “Euro”, “gbp” => “Pound Sterling”, “usd” => “US Dollar”, “inr” => “Indian Rupee”);
  20. ?>
  21. <tr>
  22.     <td>
  23.         <h4><?php echo $_GET[‘amount’] .’ ‘.$currencies[$_GET[‘from’]] .’ = ‘. $result.’ ‘.$currencies[$_GET[‘to’]]; ?></h4>
  24.     </td>
  25. </tr>
  26. <tr>
  27.     <td>
  28.         <a href=”index.html”>Back</a>
  29.     </td>
  30. </tr>       
  31. <?php
  32. }
  33. ?>
  34. </table>
  35. <h5 align=”center”>&copy; All Rights Reserved – Jatin Chimote (jatin@sanisoft.com)</h5>
  36.  
  37. </body>

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 .. :)

Advertisements

Introduction to creating desktop applications with PHP and Titanium

Source: http://www.sanisoft.com/blog/2011/01/03/introduction-to-creating-desktop-applications-with-php-and-titanium/

Excerpts : 

What tools do you need ?

  • Download and install the Titanium DeveloperThe 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 ?

Follow http://www.sanisoft.com/blog/2011/01/03/introduction-to-creating-desktop-applications-with-php-and-titanium/ to read more

Packaging Titanium desktop applications on Windows

Source:http://www.dionysopoulos.me/blog/packaging-titanium-dekstop-apps-on-windows

Maybe you have already tried Appcelerator’s Titanium. If not, you should have. It’s a very easy to use RAD framework for creating cross-platform desktop and mobile applications based on HTML, Javascript, PHP, Python and Ruby. However, I was having a grave issue lately with their desktop builds. No matter what, I could not build the Windows installation package of my applications. Appcelerator’s documentation on manually packaging applications is sketchy and outdated. So I did what any self-respecting hacker (in the good sense, i.e. geeky developer with a strong aspiration to solving complex problems) would. I figured out a solution myself and documented everything in the process.

First things first, we have to install some prerequisites to “prime” our environment for building installation packages of our Titanium applications. Sadly, Appcelerator’s documentation doesn’t mention much and is, of course, terribly outdated. To save you from trouble, I figured it all myself and present it to you right here.
SDK installation and setup

Before you begin, install Titanium Developer, launch it and install the desktop SDK. Do note that the first time you run it, it will prompt you to install the Mobile SDK. Do it. Then shut down the application, launch it again and it will prompt you to install the desktop SDK. Do it and shut down the application. Counter-intuitive it is, but it works…

You will also need to put Titanium’s SDK directory in the path. Once more, the documentation is just plain wrong and gives you an inexistent path. Anyway, Titanium SDK is ultimately installed in c:\ProgramData\Titanium\sdk\win32\VERSION, where VERSION is the Desktop API version. At the time of this writing the latest API was 1.1.0, so the path we need is c:\ProgramData\Titanium\sdk\win32\1.1.0.

In order to add that to the path, hit the Windows key + pause, click on Advanced system settings from the left bar, click on the Environment variables button, double click on path, append “;c:\ProgramData\Titanium\sdk\win32\1.1.0” without the quotes of course.

Finally, we need to put the directory of Titanium’s copy of ImageMagick to our path. In order to add that to the path, hit the Windows key + pause, click on Advanced system settings from the left bar, click on the Environment variables button, double click on path, append “;c:\ProgramData\Titanium\sdk\win32\1.1.0\magick” without the quotes of course.
Third party software required

Next up, let’s install the third party software we need. Unfortunately, the Appcelerator documentation doesn’t mention any of it and it’s all left to the imagination of the developer. Let me save you from the trouble of figuring out what and how you have to install.

The very first prerequisite is installing Python 2.6 from from http://www.python.org/download/releases/ (tested with 2.6.6). Next, let’s put Python in your path. Hit the Windows key + pause, click on Advanced system settings from the left bar, click on the Environment variables button, double click on path, append “;c:\Python26” without the quotes of course.

You will also need to install WiX from http://wix.sourceforge.net/downloadv3.html. This is required for Titanium to be able to build the installer executable file of your application. Download and install the regular MSI package, NOT the 64-bits one even if you have a 64-bit version of Windows. Remember that all Titanium apps run in 32-bits mode and need a 32-bit installer. During installation, ignore any warnings about missing Visual Studio.
Building your application

The good news is that you can build your Titanium application’s installer manually. The bad news is that you have to use the command line to do that. If you are afraid to use the command line (CMD.exe) or have no idea about DOS commands, tough luck. Otherwise, you can read on.

Very important note: Your application version number must be in the x.y.z.w format, where x, y, z and w are integers. For instance, you can’t use a version number like 1.0.a1 or your packaging job will simply fail.

I will assume that you are building an application named MyApp placed on your desktop in a directory named MyApp. If no such directory exists already, create the directory win32 inside the dist folder placed by Titanium Developer inside the MyApp directory.

Open a command prompt. Just hit Windows key + R, type in “cmd” without the quotes and hit the enter key on your keyboard. You are presented with the black command prompt window. Type in the following command:

python “c:\ProgramData\Titanium\sdk\win32\1.1.0\tibuild.py” -v -o win32 -t network -s “c:\ProgramData\Titanium” -a “c:\ProgramData\Titanium\sdk\win32\1.1.0” -d “MyApp\dist\win32” -p test.exe “MyApp”

You may notice something strange, the test.exe parameter. For the life of me, I don’t know why this is required. No idea, really. It is not used anywhere, but it just seems that if it is not specified the packaging will fail with a cryptic message about the wrong drive being specified!

If you did everything as I described, you now have a MyApp.exe installation package in MyApp\dist\win32. You can distribute that to your users.
The sexy stuff: customizing the installer

As you may have noticed, the installer’s stock artwork has a strong reference to Appcelerator’s Titanium brand. If you want to customize the installer’s header, all you have to do is replace C:\ProgramData\Titanium\sdk\win32\1.1.0\default_banner.bmp with one of your liking.

%d bloggers like this: