Page 1 of 1

How make IgeUIEntity behave like span tag?

PostPosted: Fri Feb 20, 2015 2:02 am
by darian311
I just want to mount 4 UiElements into a Parent element and not have them bunch on top of each other and instead layout inline like default behavior of span tag.

Any thoughts? UI example doesnt show this behavior.
:|

Re: How make IgeUIEntity behave like span tag?

PostPosted: Fri Feb 20, 2015 12:29 pm
by robaldred
Hello.
This behaviour is not currently present in the main repos.
It can be achieved very easily though.

However I've just pushed an Entity to the dev repo that will give you the basic functionality of what you need.
If you have a premium licence you can grab that right away.

I'm not authorised to distribute premium content for free however, in order to answer your question here's a snippet which should get you started.

Creating a simple class that extends the functionality of IgeUiElement.

Code: Select all
var MyInlineContainer = IgeUiElement.extend({
    tick: function(ctx) {
        var i,
            children = this.children(),
            currentX = 0;
        for(i = 0; i < children.length; i++) {
            var child = children[i];
            child.left(currentX);
            currentX += child.width();
        }
    }
});




Use it like so...

Code: Select all
var container = new MyInlineContainer();
container.mount(uiScene);

var element1 = new IgeUiElement()
    .width(20)
    .mount(container);
var element2 = new IgeUiElement();
    .width(50)
    .mount(container);
var element3 = new IgeUiElement();
    .width(100)
    .mount(container);






Mount your UI elements to this container and it should layout each child next to each other inline.
This could be extended further to support wrapping when the elements reach an X limit.

Re: How make IgeUIEntity behave like span tag?

PostPosted: Fri Feb 20, 2015 6:56 pm
by darian311
Thanks Rob, I have had premium license for a couple years now.

We're running on ige 1.5.5 merge something or other. .... Do you know if your code will become part of the new official release?

I'm not sure how to manage properly pulls from master vs putting dev code in my project.
If you have some best practices please share.

And thanks again.

Re: How make IgeUIEntity behave like span tag?

PostPosted: Sat Feb 21, 2015 8:45 pm
by robaldred
Hey. My code is in the ige dev branch.
You can add the ige upstream as a remote and just merge it into your working tree.

Code: Select all
git remote add upstream git@github.com:Irrelon/ige.git
git fetch upstream
git merge upstream/dev