Fun with HaxeUI CSS!

Its important that version 2 of HaxeUI is just as customisable as version 1, if not more. To that end, I took a little step back and had a little fun changing styles of components to make sure that the resulting UI was visually flexible.

Every single visible aspect of a components appearance is achieved using as CSS type language. Its not a fully W3C compliant version of CSS as certain things dont apply, and there are others that arent easily achievable using standard CSS, an example would be an icon for a button, it would be possible to use "standard" set of css as in:

.button .icon {
    src: "...";
}

However, its actually a lot simpler and straight forward to just use:

.button {
    icon: "...";
}

Anyways, here are a few experiments with CSS to change the visual lookout of various components

Dark buttons / checkboxes using only css (no images):

Custom buttons using 9-slice images: 

Progress bars and sliders

Ill be updating the demos on the site soon once all the backends support the same features. At the moment full support for custom fonts, 9 slice and background images is for:

  • OpenFL
  • Flambe
  • Luxe
  • NME
  • HTML5

 



Re: Fun with HaxeUI CSS!

wow very beautiful!

it reminds me of the gradients in rebol's gui.

 

I would like to ask:

is it possible to add a new control at runtime (from code)?

for example if i have a listbox, and i want to add another one.

Re: Fun with HaxeUI CSS!

 Certainly! 

You can either build your UI from a mark up language (like XML) or you can completely do it by hand and in code. In fact using mark up is really just a short cut as its easier to maintain and visualise, but there is no reason why you can do it all in code with, for example:

"new VBox()" and ".addComponent"

Cheers,

Ian

Re: Fun with HaxeUI CSS!

That's really smart using a domain specific language like CSS, since it's exactly what it's made for. very concise, easy to experiment, i like it a lot !!


Add a comment Send a TrackBack