UI Styling and Element System Like CSS and DOM

UI Styling and Element System Like CSS and DOM

Postby rob » Tue Sep 12, 2017 11:37 am

Hi folks,

The engine includes a UI manager.

The 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%'
});


You can then create a new UI element that will use this style via:

Code: Select all
var div1 = new IgeUiElement()
   .id('div1')
   .styleClass('div');


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.:

Code: Select all
ige.ui.style('.div:hover', {
   'borderColor': '#00ff00'
});


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 #:

Code: Select all
ige.ui.style('#div1:focus', {
   'borderColor': '#ffff00'
});


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.:

Code: Select all
var uiEntity = new IgeUiEntity()
    .left('10%')
    .right('10%');


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.:

Code: Select all
var uiEntity = new IgeUiEntity()
    .left('10%')
    .right('10%');

// Now switch off the right value
uiEntity.right(null);


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 stable branch.

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!
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Return to Version 1.x

Who is online

Users browsing this forum: No registered users and 1 guest
cron