Creating a Windows app in HTML, CSS, jQuery & PHP using TideSDK

TideSDK is a software development kit which enables you to create desktop apps that work on different operating systems (Windows, Linux and Mac) using HTML5, CSS3 and JavaScript. You can basically include any library you want when using those languages (such as jQuery, Foundation, Bootstrap). Furthermore, you can use server-side languages such as PHP, Ruby or Python when making your application.

 

You should also follow the development on TideKit.

In this practical tutorial, we are going to create a simple Windows app that fetches data from my homepage (which has dynamically generated content) and displays it.

 

1. Installation

You can install TideSDK from https://github.com/TideSDK/TideSDK/downloads. Choose the version of the archive that is compatible with your operating system and open it. Now, TideSDK must be installed in a particular folder – you cannot install it wherever you want.

If you are using Windows 7, unzip it in: C:\ProgramData\TideSDK

If you are using Windows XP , install it in: C:\Documents and Settings\All Users\Application Data\TideSDK

If you are using Linux, install it in: ~/.tidesdk

And if you are using Mac: install it in: ~/Library/Application Support/TideSDK

You can see TideSDK’s documentation here: http://tidesdk.multipart.net/docs/user-dev/generated/

Then, you can install TideSDK Developer to easily package and test your apps. Basically, you can do those things without TideSDK Developer but it costs more time and requires some learning.

TideSDK Developer is located in the following public repository in GitHub: https://github.com/TideSDK/TideSDK-Developer

You can issue a git clone https://github.com/TideSDK/TideSDK-Developer.git or just open the site click on ‘Download ZIP’

You would need Python 2.7+ which you can download from https://www.python.org/downloads/.

You would also need Wix 3.0 (https://wix.codeplex.com/releases/view/44406) and ImageMagick (http://www.imagemagick.org/script/binary-releases.php#windows) if you are using Windows.

You would have to build TideSDK developer and then you can use it any time you want.
There are examples of the different ways of packaging applications in the TideSDK’s developer readme file and you can find detailed information of packaging with TideSDK at: https://github.com/TideSDK/TideSDK/wiki/Packaging-TideSDK-apps

Once you have built TideSDK Developer you can create a new project or change an existing one from the following GUI:

Tide SDK Developer GUI

You have to say which language models you want included or else you would be able to develop the applications only with HTML,CSS and JavaScript.

In the Test & Package tab you launch the application or package it with runtime.

Tide SDK Console

Creating a new project will set up all basic files necessary for the project such as the manifest and tiap.xml.

The most important thing in tiap.xml is setting the proper index of your application: <url>app://index.php</url>

There is a different <url> element for the app itself and the one that controls the index of your app should be nested within the <window> element.
When using TideSDK you use app:// to point to the root directory. If you add an index.php file and delete the index.html your app will not work because the url element’s value is unchanged and the app is not finding your index.

You can also set up things such as whether the app’s window is resizable, its maximum and minimum widths and heights, the title of the app and others. Here is the snippet that I used:

Our actual app goes in the Resources directory.

Here is our index page:

You can see we are loading local versions of bootstrap, jquery, a custom js and css file and displaying a little bit of markup as well as loading an image directly from my website.

To create a menu we use: var menu = Ti.UI.createMenu() ;
To add the menu to the app we use: Ti.UI.setMenu(menu);
To add items to the menu we use: var goodiesItem = Ti.UI.createMenuItem(‘Goodies’).
We can directly add a behavior to that menu item or add sub-items which will have a behavior.
To add direct behavior to the main menu element you can use:

To add a child to a menu item which will have a behavior you can use:

Then, you have to add each top level parent item to the menu by accessing the appendItem method on the menu object that you set up with Ti.UI.createMenu().

In our sample application, we used the following custom js file:

You can see we are fetching data from the loaded page when a menu button is clicked, getting only the entries that correspond for each button. Before adding the markup to the page we are changing the src attribute of the images in order for them to be loaded successfully from local environment , we show the entries and scroll to the newly generated content.

The fetch.php just fetches the homepage:

Here are images of how the app looks like with some basic CSS:

App develop in Tide SDK looks like thisApp develop in Tide SDK looks like this

The installer of the app is included. Although you can run it as an app, there is a Resources directory so you will have access to the source code.

You now can create a simple app that fetches dynamic data from a website and shows it.

The next step is to go ahead and practice creating your own desktop app!

 

To download the code associated with this article or the demo app, please visit: http://www.phpgang.com/creating-a-windows-app-in-html-css-jquery-php-using-tidesdk_856.html

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *


four × 3 =