#tidesdk

var file=Ti.Filesystem.getFile(Ti.Filesystem.getResourcesDirectory(),'file.txt'); file.write('brabra');

CoffeeScript -> Javascript compiler plugin for Titanium Projects.

The ti_coffee_plugin simply scans your Titanium project's Resources folder at build time and looks for files with the .coffee extension. When it finds such files, it runs the CoffeeScript compiler (coffee -c) to produce a Javascript file of the same name. E.g., win.coffee would become win.js.

Anyway, let's get started. First you're gonna need WinRAR and Resource Hacker. Once you have the needed software, navigate to the package folder for your app. Normally, this is in the same folder as your project's source, inside the packages folder.

These are the typical contents of your compiled app folder.

Get started by deleting the following items:

installer (Folder)

.installed

CHANGELOG.txt

LICENSE.rtf

LICENSE.txt

Once you've deleted all of those files and folder, highlight all the remaining items and right click > Add to archive (WinRAR). On the WinRAR window, set the Compression method to Best. Keep the Archive format to RAR. Put a check on Create SFX archive, Create solid archive, and Lock archive.

Click on the Advanced tab and click SFX options. Type the name of the main executable file for your TideSDK app on the Run after extraction field.

Next, go to Modes tab and put a check on the Unpack to temporary folder. Don't forget to set the Silent mode to Hide all.

Moving on, go to the Update tab. On the Overwrite mode section, select Overwrite all files.

Afterwards, open up Resource Hacker and open your original TideSDK executable file. Navigate to Icon Group > IDI_ICON1 > 1033. Right click on 1033 and select Save [Icon Group : IDI_ICON1 : 1033]. Save the icon on any folder you want but it's best if it's easily accessible like on the same folder as the source.

Finally, back on the WinRAR window, go to the Text and icon tab and on the bottom, select the icon that you extracted awhile ago using Resource Hacker.

Press OK and OK again. When the compression is finished, you should now have a new *.exe file on your folder. You can tell that it's slightly bigger than the original exe file  but that's because it now contains all the resources. You can rename the new *.exe whatever you want. It is now safe to delete all the other files and folder aside from the new one.

Congratulations! You now have a single executable file which you can distribute without all your source code splattered around the folder. Here's how it works:

You run the new *.exe wrapper file.

It extracts the data to a temporary directory in the system.

It runs the actual *.exe file.

As soon as you exit the actual *.exe file, the temporary files are deleted.

The *.exe wrapper then exits.

If you have questions, don't hesitate to ask.

Basically, the problem is that, the default content of a New Project generated by TideSDK Developer looks like the following:

http://gist.github.com/ba5f0d49bbd2d785f641

It's really not friendly to the eyes. And the first thing I noticed was that misplaced semicolon on one of the styles. I can't seem to go on with my life knowing that that thing is present there. I have seen it as an issue on Titanium Developer before but didn't give it any thought thinking that it would be fixed on latest releases. It now proves to not be the case.

So how to fix said thing? Simples! Go to the folder where you've installed TideSDK Developer. Navigate to Resources > js. Next, open up project.js on your favorite code editor. I used Notepad++ for this one. Finally, locate the following line of code.

http://gist.github.com/0f6903452c1b0d959024

And replace it with this one.

http://gist.github.com/4ca7b74a71518a3618fd

Then save. After you're done with that, close TideSDK Developer and re-open it. Now when you create a New Project, it should now reflect the following code as opposed to the previous one.

http://gist.github.com/9564e74b30e7951edeba

Of course, you can use this very same knowledge to roll out your own custom New Project template. This can come in handy if you want your apps to have a definite base.

To get started, first, you need to download two things:

TideSDK v1.2.0-RC4

TiDev Community

Setting Up the SDK and Running Your First App

After you've downloaded the SDK, extract the contents to a folder and examine it. You should find three folders. Namely; modules, runtime, and sdk. You need to move these folders to /Library/Application Support/Titanium/. If the Titanium folder does not exist, create it.

Next thing to do is install TiDev Community. When you've finished installing it, open it up and click on the New Project button at the top left of the app. You should be presented with a form asking details about your project. Simply fill it up with information for your app. You can also opt to include PHP as your project's requirements but we're not gonna use that on this tutorial.

When you're done with filling the form up, click on Create Project. After your project is generated, go to the Code Editor tab and click on index.html from the sidebar. This file should be pre-filled with a base for your app.

This app is ready to be viewed by you so just head on to the Test & Package tab. Since TideSDK is in the middle of a transition to a purely standalone and open-source project from being a propriety product, you won't be able to use the Package option. You can, however, Launch it so click on that Launch App button.

At first, you will be prompted to install your app. This is only required the first time you're gonna run it. Finally, after it has been set up, your HTML app will finally greet you.

Yep, that's a "native" OS X app, made from HTML. You can now try messing around with the source of index.html or add your own.

Packaging Your App

After you've played around with the source, you may now want to package it for distribution to friends or other people. I mentioned before that because of the transition, TideSDK cannot compile using TiDev's built in method since the one on TiDev is still tied to the cloud servers that was used before TideSDK went open source.

Open up your Terminal and navigate your way (via cd) to /Library/Application Support/Titanium/sdk/osx/1.2.0.RC4/. Once there, you can now package your app up. Simply use the following command on the Terminal where YOURPROJECTPATH is, of course, the path to your project folder.

https://gist.github.com/021f29978a82753dc96c

If the packaging was successful, you should see a *.dmg file on the SDK folder, ready for distribution.

There you have it, you've just created and packaged an OS X app using HTML. Of course this doesn't tackle the TideSDK API which lets you access things such as the clipboard, the system tray, etc. I might discuss that on a separate post.