Hi everyone,
Is there a way to group UI Elements and have common background for them? Right now I’m using nUITableElement to add controls to each row and set a background to the table but this doesn’t seem right. Also rendered table doesn’t look very nice as a grouped controls element on native platform. For example on iOS it doesn’t have rounded corners etc.
I was considering to use nUIContainerElement for such purposes but it lacks setBgcolor method.

I’ll appreciate any suggestions.

Thanks,
Nenko

Grouped buttons (of the style that are prevelant in iOS settings screens) are partially implemented. In the Java nUI implementation the buttons group together with rounded corners as you describe. On Android and Windows grouped buttons look no different to normal buttons. iOS is the next platform to be added. It is likely that this will be added as part of the next sprint, although pressure from projects being developed for Cebit may knock this back.

It might seem odd that this remains uncompleted, but understand that this is a UI scheme unique to iOS. We have decided to add it to Mobile Designer, but most users will see little difference when buttons are grouped.

However, it is worth mentioning that you refer to a ‘common background’. Grouped buttons (set using the group_id) will just render how the OS wants them rendered. You can’t change the background (colour, image etc.)

Please contact Nick if having this feature in iOS is vital and he will assess if it can be advanced.

Thanks, Glenn.

Thanks for the explanation Glenn.

What is the API for groupped buttons? Is it enought to set one and the same groupId to every button used? Is there a specific range for this id or any non-overlapping id can be used?

About the common background my question is more general. It’s not just about buttons but for elements. For example it’ll be nice if there’s a possibility to add some UI Elements to common container and be able to set a background color for that container.

Regards,
Nenko

Hi Nenko,

The intent is that you can use any arbitrary positive number as the groupID, and neighbouring buttons of the same ID will render as grouped (on those platforms that support such rendering styles).

Can you clarify on the container concept - table row / cell colouring is supported already, so this would allow colouring behind objects. Additionally images could be placed using the absolute positioning techniques behind other objects too if you wanted more framing possibilities beyond simple colouring.

Regards,

Nick.

Hi Nick,
adding elements to table works fine (however the corners are not rounded but I guess this is something specific) but using it is somehow strange. New row should be created each time, etc. and adding separators is even trickier. The container concept I’m thinking is more like this way:

nUIContainerElement container = new nUIContainerElement (-1);
container.setBgcolor(COLOR_WHITE);
container.add(new nUIButtonElement (-1, “Label”));
container.add(new nUITeftfieldElement (-1, “Click the button above!”));
container.add(new nUISeparatorElement(-1));

etc.

This looks more convenient and the API is the same as adding UI Elements to a view so this is a nice abstraction for code reuse.

What do you think?

Regards,
Nenko

Apologies for the delay on getting back to you on this one.

The above code would just (theoretically) render a number of buttons on a white background. Please note that containers are not really going to work within a scrollable view though (i.e. nesting scrolling components doesn’t work on a number of platforms). Also, the nUIContainer will note have rounded corners on any platform either - it’s simply an inset portion of the screen that has its own independent scrolling frame.

Regards,

Nick.

Hi Nick,
Thanks for the explanation. I think it’s OK if the nUIContainerElement is just an insert portion (at least for me) and more like logical grouping of controls. However I can’t see any way to control the background of such a container. I’m looking at nUIContainerElement and I don’t see setBgcolor or something like that. Am I looking at the wrong element or these methods are added recently?

Thanks,
Nenko

Hi Nenko,

That was the cause of the “(theoretically)” note in my email.

No method has yet been added to the container object to set its background colour.

Regards,

Nick.