Categories
Haxe Misc Open source / Freeware

Write CSS with HSS and Haxe on OSX

I’m playing around with Haxe for a while now. My recent experiments are with Neko and PHP.

It’s a little flatfile CMS/website that lets you write Markdown (I’m using mdown from Jason O’Neil) for posts.
For styling (css) I’m using Twitter Bootstrap and for the animations the jQuery wrapper (jQueryExternForHaxe) from Andi Li.
This all is not important for the post, I was just showing off… πŸ˜› …. or showing what you can controle in one project using Haxe (jQuery, php, neko, js and now CSS)!

Using Twitter bootstrap for styling is very quick and nice. But when you want to modify that you will need to write css.
Not a problem, but what if you want to do it the awesome way?

Meet HSS

From the creator of Haxe (Nicolas Cannasse) comes HSS!

HSS is tool that extends the CSS syntax with powerful features such as variables and nested blocks. HSS is a CSS compiler which supports valid CSS syntax, so for every error that occurs during the parsing of the HSS file, it will display and error indicating at which file and which line the error occurred.

Sounds great and it’s written by someone who knows what he is doing, so lets give that a try.
And there comes trouble…

Remember this: I work on Mac OS X 10.6.8.

hss example code

Five steps to get started with HSS on OSX

#1
Download the file: HSS OSX version
The normal way of downloading (just click on the link) for some reason didn’t work for me. I had to download it with right-mouseclick and “Save link as…” (Google Chrome).

#2
Extract the file: the file you downloaded is a “gzip” compression file.
The normale decompression program on OSX don’t work with that (Archive Utility), my default decompression program didn’t work either (The Unarchiver).
Stuffit expander works!

And this is important! The other programs seem to work because there is a file created but its not a “exec”. Stuffit expander creates a file name “hss” other programs create a file named “hss-1.3-osx”

There is probably a terminal version to extract (here) but I stopped trying when I had the file.

#3
Where to leave the HSS executable?
I had a little help with that: (Source) for Linux AND OSX you can place it in the “usr/bin/” directory.
That is a hidden folder normally so you need to change that (but I hope you already did that) (read this post about it)
BTW “Users” is not the same as “usr”
When you drop the HSS executable in the bin folder you will be asked for you password

#4
I’m not 100% sure, but when I think about it while I write this I don’t think that you have to do this.
But just in case I’m wrong….
You need to give the file permission to execute (this is still true if you don’t copy the file in the usr/bin folder).
Open the terminal and type “chmod +x ” (without the quotes and don’t forget the space after x) and drag the HSS file in the terminal.
Press enter and you are done.

Create CSS with HXML

Now we can start with the cool stuff. Lets create an hss file:
(the examples are from Nicolas Cannasse himself)

// Property Variables
var mycolor = #1111AA;
var myfont = "Trebuchet MS", Arial, sans-serif;
body {
    color : $mycolor;
    font : $myfont;
}
// Block Variables
var nomargin = { margin : 0px; padding : 0px; }
pre {
    $nomargin;
    color : #FF0000;
}
// nested blocks
.faq {
	color : #BC683C;
	.form {
		width : 100px;
		textarea {
			width : 100%;
			height : 80px;
		}
		.name {
			font-weight : bold;
		}
	}
	ul {
		margin-left : 20px;
		margin-bottom : 20px;
	}
}
It’s probably useful to mention that ANY CSS file is an HSS file as long it’s validates.
That means that you can take a .css file and rename it to .hss!

(save the file as “style.hss” without quotes in the hss folder; see the folder structure below)

Now update your .hxml file!
Remember I use MonoDevelop 3.0 for OSX

Here a example of the folder structure I used for this example

+ Export
	+ neko
	+ php
+ Source
	+ hss
		- style.hss
	- Foobar.hx
Foobar.hxml

Open your Foobar.hxml file and it should look something like this:

-cp Source
-main Foobar
-neko Export/neko/index.n

--next
-cp Source
-main Foobar
-php Export/php

--next
-cmd "cd Source/hss/"
-cmd "hss style.hss" 
-cmd "hss style.hss -output ../../Export/php/" 
-cmd "hss style.hss -output ../../Export/neko/" 
The quotes are important when on OSX (possibly also for Linux)

Now every time you compile the source for Neko/PHP the css will be compiled in the correct folder!

Brrrrr

Okay, okay, I know I promote MonoDevelop for Haxe coding.
But… for hss/css I don’t think you should use it…
I haven’t tried it yet, but the Haxe plugin for Textmate looks good for it.

happy haxe-ing

Sources used:

Categories
Haxe

Haxe IDE for OSX: Monodevelop 3.0

Update #1: I thought I had finished this post already, but it was not finished yet… In the mean while MonoDevelop is update to 3,0,3,2

I’ve been using MonoDevelop and the MonoDevelop Haxe Language Binding addin for all my Haxe experiments. It’s better than FDT 5 (I haven’t update to FDT 5.5 yet, because I’m at work in the middle of a project: I never update my computer/software during a project!!!)

This all is possible because Joshua Granick decided that MonoDevelop could be used for Haxe development.

Don’t get me wrong: MonoDevelop is great compared to the competition, especially because it’s free! But there are still some bugs to be crushed:
A while back I send a bug to the MonoDevelop development team about templates.

The formatter in 2.8.x is dead – can you switch somehow to monodevelop 2.9.x or master ?

So I was glad to get a message from the MonoDevelop IDE that I could update to 3.0.
To bad that they changed the api, and that broke the MonoDevelop Haxe Language Binding addin.

I’ve tried to update the plugin myself:
Forked the git repository.
First I thought I just had to change 2.8 to 3.0: no luck there I got error on excisting packages:
using MonoDevelop.Projects.CodeGeneration
First I thought it was a OSX related problem: so Installed MonoDevelop 2.8 again.
And there I didn’t have this problem: so I compiled the plugin there and installed it in MonoDevelop 3.0.
Still no go: only errors. Perhaps they changed something in the API? Could find that anywhere on the website and documentation. It had to end for me there: other stuff needed my attention.

Luckely Joshua fixed everything (there was indeed an API change) and got the plugin working again.

Installing MonoDevelop 3.0

Some extra issues I encountered installing the new MonoDevelop 3.0 (3.0.1):

I’m not a 100% sure but the release notes from MonoDevelop 3.0 mentioned:

This release of MonoDevelop needs at least Mono 2.10.9 version 11 and GTK#2.12.8 to run.

That would mean that we need to install a beta version of Mono
http://www.go-mono.com/mono-downloads/download.html
Beta Version: 2.10.9 (Release Notes)

Because the new version broke the ‘automatic’ install you need to install the haxe addin manually:
visit http://addins.monodevelop.com/Project/Index/41
and download:
Monodevelop 3.0
get the first one in the list
package mac

How to install the addin?
Monodevelop >> addin-manager >> left bottom button “Install from file”
find the file you just downloaded and “Open” it

your good to go

Source can be found at github for people who want to contribute to the plugin (yes please!):
https://github.com/jgranick/md-haxebinding

On of the most pleasant improvement of MonoDevelop on OSX is:
* anoying copy/paste bug (copied part duplicates the last character)

example:
_sp.graphics.
change _sp into _sprite
becomes
_sprite..graphics.

happy haxe-ing

Categories
Haxe

Installing Haxe and NME on OSX

I recently had to (uninstall and) reinstall Haxe, so I decided that it would be useful to document the process!

Remember this is a post for OSX(10.6.8) install of Haxe(2.09) and NME(3.3.0)!

This entire post started because MonoDevelop didn’t show any auto-completion anymore. It cost me 4 nights to fix the ‘problem’. I deleted Haxe entirely and reinstalled it (and NME/extra libraries) again. I had written the process of install down before to blog about it later, so there is some stuff that happened the previous time I install Haxe and NME (and that means that this it’s not exactly a clean install)

About the deletion/uninstall of Haxe: at the bottom of the post

I can’t thank Joshua Granick (one of the programmers of NME) enough for his help! The man must be a superhero: helping everybody on twitter, writing tutorials/post on his blog, programming an haxe/nme add-in for MonoDevelop, NME (duh), being a dad, having his own game company….(!!)

Start installing Haxe

Download the Haxe OSX install zip from: http://haxe.org/download
And install it like you normally do.

After install you can check if everything went okay (and you need the terminal later on):
open the terminal
(CMD+SPACE and type terminal)

type in the terminal
haxe
to check the install

Download the NME OSX install zip from: http://www.haxenme.org/download/
And install.

type in the terminal
haxelib list
to check what libraries are installed

This is probably not useful for everybody, but these are some of the extra libraries I use…
type in the terminal

haxelib install swf
haxelib install jeash
haxelib install spritesheet
haxelib install format
haxelib install actuate
haxelib install box2d
haxelib install waxe

You probably only want to install these to get NME working
jeash for html5 and actuate to animate stuff

haxelib install jeash
haxelib install actuate

Next we will make a short cut to NME
Type in the terminal
haxelib run nme setup

Explanation from Joshua Granick

If you execute β€œhaxelib run nme setup” from a command-line or terminal, it will add a script to your PATH (in the Haxe directory) that shortens the command string. Instead of having to call β€œhaxelib run nme”, you can simply call β€œnme”.

This failed on my computer; the terminal spit this back at me

haxelib run nme setup
chmod: Unable to change file mode on /usr/lib/haxe/nme: Operation not permitted
rm: /usr/bin/nme: Permission denied
ln: /usr/bin/nme: File exists

This is probably because I’m on OSX and not on Linux as “root” user….
So fix this with:
sudo haxelib run nme setup, type your password and try again!
(source: http://www.haxenme.org/developers/get-started/)

After this you install the ‘stuff’ you need for development on mobile devices.
I only need android so I installed that (for now):

nme setup android
Download and install the Android SDK? [y/n/a] ? y
Output directory [/opt/Android SDK] : /opt/Android SDK
or just use enter to use the default path

after install the “Android SDK Manager” will be started

download Android 4.0.3 (API 15)

After the “Android SDK Manager” is ready with downloading and install you can close it (it will ask you to do so)

The terminal will start yelling stuff:
Download and install the Android NDK? [y/n/a] ? y
Path to Android NDK [/opt/Android NDK] : /opt/Android NDK
or just use enter to use the default path

Okay.. your good to go!

Install IDE

Install an IDE (read about the choices that I made)

Let’s assume that you will also use MonoDevelop (2.8.8.4):
Download the OSX files (yes 2!) from: http://monodevelop.com/Download
Click on osx and you will get two download options

  • MonoDevelop 2.8.8.4 installer
  • Mono 2.10.5 + GTK#

Click/Download MonoDevelop (pretty straight forward)
Click on Mono and you will go here http://www.go-mono.com/mono-downloads/download.html.
Do you need “An open source, cross-platform, implementation of C# and the CLR that is binary compatible with Microsoft.NET”???
Well… yes: see Mono as the car-engine and MonoDevelop as the rest of the car (you as the driver)… you need both to go on a road trip!

We want stable release: “Latest Stable Version: 2.10.8” and click again on OSX.
At the bottom of the page you will see some links appears
download the Intel Mac: “Runtime”

Install both files you just downloaded
And open MonoDevelop (in Applications)!

Add-in Manager Monodevelop
The only thing you need to do now is:
MonoDevelop > Add-in Manager > Gallery tab > Language bindings > Haxe language Binding
Install that add-in (0.2.1).

Your MonoDevelop is ready for Haxe/NME programming.
Moving from FDT to MonoDevelop? I wrote something about that to make it somewhat easier: Moving from FDT to Monodevelop for Haxe and NME

About your first NME > Flash project, visit Joshua Granick post: getting-started-with-haxeflash-in-monodevelop/ he has also one form cpp and html5..

Happy Haxe-ing

Uninstall Haxe on OSX

something you should never do πŸ˜€

After updating to Haxe 2.09 (and updated the Add-in) I noticed that the MonoDevelop auto-completion didn’t work anymore.
I mentioned this to Joshua Granick but we couldn’t figur out what it was.

This is probably what happend: I installed Haxe 2.09 very quickly after it was released and after that there was a hotfix which I couldn’t install over the previous installed Haxe…
Eventually Joshua gave me this advice on twitter.

Open the terminal (CMD+SPACE and type terminal) and typerm /usr/bin/haxe
I got “rm: /usr/bin/haxe: Permission denied”
This is probably because I’m on OSX and not on Linux as “root” user….
I fixed this with sudo rm /usr/bin/haxe: you will be asked to fill in you password (there is no feedback of typing) and hit enter, the Haxe folder will be deleted.
(you will lose Haxe and everything you installed in there: NME and libraries, the other install you need to do for NME will still be installed: Android/IOS for example)

After the reinstall everything worked again.
I can finally use my evenings for programming again πŸ˜€

Categories
Haxe

Moving from FDT to MonoDevelop for haXe and NME

Before I start with this post I should mention that Joshua Granick (on of the creators of NME) has a post about:How to Install Haxe, NME and MonoDevelop! That will save me some time and who can explain that better than Joshua.

I wrote something similar when I moved from PC (FlashDevelop) to OSX (FDT) (read my post: moving-from-flashdevelop-to-fdt/). Which also was a reminder when I needed to reinstall or explain it to a college.

Want to know why I’m using MonoDevelop?
Moving from FDT to MonoDevelop is not a big step (my opinion πŸ˜› )

After reading my post, it looks like I’m leaving FDT… That is not what I’m doing: I’ll keep on using it for AS3.
But I hope to ‘take’ some features from FDT to MonoDevelop

Adding your own short-cuts / key-binding

First let add some features that I use a lot:
MonoDevelop > Preferences... (CMD+,) > Key Bindings
search for “comment”
Toggle Line Comment : Edit Binding > (CMD + 7)
search for “case”
Uppercase Selection : Edit Binding > (CTRL + SHIFT + X)
Lowercase Selection : Edit Binding > (CTRL + SHIFT + Y)
search for “template”
Insert template.. : Edit Binding > (CMD + SHIFT + 1) [doesn’t work yet]

Using default Short cuts – (besides the ‘normal’ short cuts)

Then there are some default shortcuts you use a lot:
run >> ALT + CMD + enter
debug >> CMD + enter (doesn’t work)
move the line or highlighted section down >> ALT + ARROWDOWN
move the line or highlighted section up >> ALT + ARROWUP
show completion window >> ALT + SPACE

Adding personal info

Don’t have to explain this … right?
MonoDevelop > Preferences... (CMD+,) > Author Information

Changing settings

Perhaps this is very personal, but I’m not writing this for you alone (it’s also a reminder to myself!)
MonoDevelop > Preferences... (CMD+,) > Text Editor > Behavior >

  • check: Insert matching brace
  • check: Smart semicolon placement
  • check: Enable on the fly code formatting (doesn’t do anything)
  • check: Format document on save (doesn’t do anything)

and
MonoDevelop > Preferences... (CMD+,) > Text Editor > Behavior > XML

  • check all

Moving on:
MonoDevelop > Preferences... (CMD+,) > Text Editor > Syntax Highlighting
I installed Monokai for Darius Kucinskas: you can get it from github. That because I use it on TextMate and gotten use to it….
Joshua Granick has created a FlashDevelop color scheme (if there are people who want to move from PC to Mac/Linux).

Templates/snippets

And then the most interesting… the one that doesn’t seems to be working
MonoDevelop > Preferences... (CMD+,) > Text Editor > Code Templates
Code templates are awesome and speed up your development a lot (create a getter/setter in just one click for example)
Just do the following:
Edit > Insert template...
And remember that the mime type is:
mime: text/x-haxe
It really doesn’t matter what you do… for example // test


but then only bugs…

πŸ™

Something to read: The official statement from MonoDevelop about Code Templates.

I would like to see

I miss some stuff that I was very use to, so lets make that a NICE-TO-HAVE-LIST

  • feedback when exporting/compiling to a target like SublimeText 2 or in the terminal.
  • code completion on variables and functions
  • templates that work
  • duplicate line (up/down)
  • code formatting
  • auto import
  • code checking while typing/checking without running
  • if auto code checking is not going to happen: a shortcut to check your code
  • automatic “add to folder” (for all folders)
  • TODO added to “Task list”