New UI Manager System
Posted: Sun Oct 06, 2013 9:45 pm
Hi folks,
The dev branch of the premium version has just been updated to version 1.2.3 and includes a new UI manager.
The new UI system (UI manager) allows new UI elements (IgeUiElement instances) to be created, styled and interacted with in a similar way to the HTML DOM except it is all happening inside the canvas element with NO DOM interaction at all.
For instance, you can define a style using ige.ui.style():
You can then create a new UI element that will use this style via:
The call to styleClass() passing the style 'div' uses the style class defined above with the call to ige.ui.style(). When defining a style *class* just like in CSS you specify a period in front of the class name e.g. ".div" and the omit the period when assigning the class to a ui element.
You can also specify style states e.g.:
Then when your element is hovered, the border will change colour automatically.
You can also specify styling via an id to target individual elements using a #:
This will change the border colour of the element with the id "div1" when it has focus.
Observant users will also note that you can now use percentages in the top, right, left and bottom style values as well as calling those directly on IgeUiEntity instances (which IgeUiElement extends) e.g.:
That will cause the entity to position to left 10% of the parent entity and stretch it's width to 10% from the right of the parent. The same works for bottom and top values.
If you set both a left and right value then width is ignored. Both bottom and top means height is ignored.
You can turn off any value by passing null e.g.:
The 5.1-ui example has been updated to show the new IgeUiTextBox working using the new UI system as well.
Further updates are on their way to allow elements to "flow" like the HTML DOM so they will effectively auto-position themselves inside a parent based on the dimensions of the elements and their parent element.
All of this is available in the dev branch on the premium repo.
P.S. the IgeUiEntity class has been left mostly alone to provide non-breaking compatibility with existing code.
Please give it a go and let me know if you see any issues arise from the code or changes to IgeUiEntity.
Thanks!
The dev branch of the premium version has just been updated to version 1.2.3 and includes a new UI manager.
The new UI system (UI manager) allows new UI elements (IgeUiElement instances) to be created, styled and interacted with in a similar way to the HTML DOM except it is all happening inside the canvas element with NO DOM interaction at all.
For instance, you can define a style using ige.ui.style():
Code: Select all
ige.ui.style('.div', {
'backgroundColor': '#000000',
'borderColor': '#ffffff',
'borderWidth': 1,
'borderRadius': 5,
'width': 300,
'height': 24,
'left': '10%',
'top': '10%',
'bottom': '10%',
'right': '10%'
});
Code: Select all
var div1 = new IgeUiElement()
.id('div1')
.styleClass('div');
You can also specify style states e.g.:
Code: Select all
ige.ui.style('.div:hover', {
'borderColor': '#00ff00'
});
You can also specify styling via an id to target individual elements using a #:
Code: Select all
ige.ui.style('#div1:focus', {
'borderColor': '#ffff00'
});
Observant users will also note that you can now use percentages in the top, right, left and bottom style values as well as calling those directly on IgeUiEntity instances (which IgeUiElement extends) e.g.:
Code: Select all
var uiEntity = new IgeUiEntity()
.left('10%')
.right('10%');
If you set both a left and right value then width is ignored. Both bottom and top means height is ignored.
You can turn off any value by passing null e.g.:
Code: Select all
var uiEntity = new IgeUiEntity()
.left('10%')
.right('10%');
// Now switch off the right value
uiEntity.right(null);
Further updates are on their way to allow elements to "flow" like the HTML DOM so they will effectively auto-position themselves inside a parent based on the dimensions of the elements and their parent element.
All of this is available in the dev branch on the premium repo.
P.S. the IgeUiEntity class has been left mostly alone to provide non-breaking compatibility with existing code.
Please give it a go and let me know if you see any issues arise from the code or changes to IgeUiEntity.
Thanks!