April 29, 2014

Simulating button groups

This question popped up recently on the forum:

“Smart has a toolbar control and a toolbar button control, but no radio button control and no “down” property.  Is there any way to simulate this effect in the current version of Smart Mobile Studio?”

HTML buttons don’t have the down property but it can be simulated by changing the button’s CSS. The easiest way to do this is to create a new CSS class which is equal to the one used by the button but with the additional border:2px inset; declaration. Of course, you’ll also have to write a bit of code which will change the CSS during the execution.




Start a new visual project and change its options to ‘Use Custom Theme’  (Options, Linker). This will add a ‘Custom CSS’ node to the project tree. Now double-click this node to open it in the editor. It will contain a copy of the previously active .css file which you can now modify.

Find defnition for the TW3ToolbarButton class and make a copy of all three definitions describing this class (main class, focus pseudoclass and disabled pseudoclass). Rename the copies to TW3ToolbarButtonDown. Add a following line to the TW3ToolbarButtonDown class: border:2px inset;. This will simulate a ‘Down’ button.

This is how definitions look if you started with the Android-HoloLight theme.

.TW3ToolbarButtonDown {
  color: #000;
  padding: 5px;
  border:2px inset;
  font-size: small;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  border-right: 1px solid #d4d4d4;
}

.TW3ToolbarButtonDown:focus { border: 5px solid white; }

.TW3ToolbarButtonDown:disabled { background-color: transparent; }

Drop a TW3Toolbar component on the form and rename it to ‘Toolbar’.

Next, write the code that creates buttons. Make sure that one, and only one of them will have StyleClass property set to ‘TW3ToolbarButtonDown’. This button will be initially ‘down’.

procedure TForm1.InitializeForm;

procedure AddButton(buttonName: string; down: boolean = false);
begin
var btn := Toolbar.Add;
btn.Caption := buttonName;
btn.OnClick := HandleButtonClick;
if down then
btn.StyleClass := 'TW3ToolbarButtonDown';
end;

begin
inherited;
AddButton('A', true);
AddButton('B');
AddButton('C');
end;

Next, write a button-click handler which will set button styles so that there will always be exactly one ‘down’ button.

procedure TForm1.HandleButtonClick(Sender: TObject);
begin
//change all other buttons to 'Up'
Toolbar.EnumChildren(lambda (child)
if child <> Sender then
TW3ToolbarButton(child).StyleClass := 'TW3ToolbarButton';
end);

//change clicked button to 'Down'
TW3ToolbarButton(Sender).StyleClass := 'TW3ToolbarButtonDown';

//do other processing as required by the application
end;

That’s all – just run it and you’re done.

image

image

image

You can get a demo project here.

No comments:

Post a Comment