Building an Image based GUI.

Hello,

I'm currently struggling to try and create an image based home menu system based upon a GridLayout. I've not been able to place a border around any of the pictures, and thus can't highlight them. Im also struggling a bit to even recognise key presses, could you please give a basic example to help me move forward.

Thanks

Ross

First you need to know that every component in Kuix is a widget !

A widget is a container that can contains other widgets placed according to a specific layout (InlineLayout, BorderLayout, Gridlayout, StaticLayout, TableLayout, FlowLayout).

Each widget can be styled. Styles can define borders, backgrounds, alignment, color, margins, padding, ...

Only two type of widget could not have any children : Text and Picture.

By default, a widget is not focusable and do not intercept any user actions.  But special widgets exists for this : Button, RadioButton, CheckBox, ... But those spscial widgets stay widget and do not bring any more fonctionnality. For exemple a button do not contains by default any text or picture.

Then creating a "New Game" button consist in creating a button widget and adding a "New Game" text widget inside.

<button><text text="New Game"/></button> or smaller <button>New Game</button> because every flying text are converted to Text's widget.

Now creating a menu like you want is very simple. This type of menu is a container that contains one or more button.

<container>

    <button>New Game</button>

    <button>Options</button>

</container>

You need to know, that by default a container is a widget and Widget default layout is an inlineLayout horizontal. @see Widget in javadoc to know default style properties.

Then edit the <container> tag by :

<container style="layout:inlinelayout(false,fill)">

inlinelayout(false,fill) = an inlineLayout vertical (false) where all children have the same width (fill) : the largest child.

Now put your container into a screen :

<screen>

    <container style="layout:inlinelayout(false,fill)">

        <button>New Game</button>

        <button>Options</button>

    </container>

</screen>

And center the menu on the screen by editing <screen> tag :

<screen style="align:center">

You can now add onAction on buttons to do what ever you want ;)

Now you have 2 very nice buttons with text inside, but you can replace texts by images (Picture widgets).

To change the buttons style, tke a look at the kuixDemo sources available on the download page.

To add actions on each button, please read this tutorial.

Hi Ross, I achieved some thing similar to what you asked for, by creating a container conatining some buttons. in weach button i inserted a picture

and then for the focus change management i used this procedure (see link below)

http://www.kalmeo.org/forum/topic/69/intercept-focus-change/1

If you want to change a button's picture according to its state focused or not, do this :

<button onFocus="ButtonGotFocus" onLostFocus="ButtonLostFocus">
                <picture>@{vResult}</picture>
 </button>

and set vResult in your dataprovider.

@freesailor :

It's a way, but you can use style too :

(in your css file)

button {

    bg-image: url(myBgImageDefault.png);

    padding: [image width] [image height] 0 0;      /* if you don't add any text to your button */

}

button:hover {

    bg-image: url(myBgImageHover.png);

}

hi, using this method (css) will apply the same picture to all buttons on the screen and I need different picures for each button, thats why I proposed to catch the focus event.

An other question, how to set size of picture according to the screen resolution.

Else, you can use a different class for each button.

At present, Kuix does not implement Image resizing. Again to do this you can dynamicaly (DataProvider) customize the style class according to the screen resolution.

Great, it works with button classses and I saved a lot of code .

I suppose, in order to apply a zoom to the picture I should play around padding : @{sW}*width, etc.

I will try that later.

Thanks.

I can't seem to get this to work, Ive placed my images in the res/img folder and It doesn't complain about not finding images. It just doesn't show any images on my buttons :(

Just try like this : define a button class lets call it type1 that will use 2 pictures image1.png for the non selected state and image1hover.png for the selected state.

(in your css file)

button.type1 {

    bg-image: url(image1.png);

    padding: [image width] [image height] 0 0;      /* if you don't add any text to your button */

}

button.type1:hover {

    bg-image: url(image1hover.png);

}

Then, in your xml file, add a type1 button. thats all.

<button class = "type1"></button>

these steps should be repeated for every button on the screen.

Cheers Freesailor. It was just a frustrating evening trying to get things work. As much as I love KUIX, It frustrates me with the lack of documentation. Im trying to get my company to buy a multi-licence but convincing the CTO, that KUIX is a decent investment is a little tricky when there is little to no documentation!

Ross

At present we'd prefer to concentrate our efforts on the Kuix stability and features and after we will writing a stronger documentation.

I appreciate your response, maybe I should write you some documentation :D