Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 2 of 2 total
Thread How I changed the TRadioButtons
Fri, May 8 2015 10:38 AMPermanent Link

Doc

Now that EWB2b7 is out and all the problems I had with further versions in my programs are gone I had some time for fine tuning. I read about how to change the interface but didn’t understand everything, maybe because English is not my mother language. So I went through trial and error.

This is what I liked to have: A TRadioButton that was some amount smaller and that gives a visual feedback of being in indetermined state, more similar of what the old theme of EWBb5 showed. When I looked at an older project of mine under the new theme I was asthonished how big the TradioButtons now are, they don’t fit into the theme for me.

This is what I did: Created a subfolder named interface to my project folder. Copied the interface files into it: tradiobuttonindeterminate.wbi, tradiobuttonselected.wbi, tradiobuttonunselected.wbi
Then I had to do the changes: loading them into the IDE, either by a doubleclick or by menu file – open interface (I had better before closed all other files). I selected the element ‚icon‘ and changed Height and Width from 24 to 18, did this for all states (normal, hot, etc.), also changed font color to black, saved the files.
For the tradiobuttonindeterminate.wbi I changed the Icon Background Fill Color to clGainsboro. There was also a tradiobuttonselected.png, which represented a picture of the green spot within the Icon, which didn’t fit into the new smaller Radiobutton. So I changed this png using a picture editor to a smaller size, then I had to load this new picture in the Icon Background Picture property.

In the interface editor there is a drop down list on top named ‚Interface Class Name‘, I’m not sure what it is for, TradioButtonSelected is shown, but in the list there is only TRadioButton, I learned that I better didn’t touch this list.

The next step was to tell my program to use these new controls. I used the menu project – options – compilation – search path and added the path of the modified interfaces. Next time I was running the program the new designed RadioButtons were shown. The search path was saved with the project.

Now I wanted them to show in the IDE at design time. So I copied them to the User-Documents-Elevate Web Builder 2-Interfaces folder. I added this path to the IDE (Environment – Options –Component Library – Search Path at the top) and did a Library-Build. Now the new design was shown at design time, slightly different, the buttons not really round, but perfect at run time.
This search path is saved within the IDE, not the project. So if I simply delete the interface files there I have the old controls in the IDE (for a new project).

Any comments are welcome, is there a better or easier way of modifying the controls for a certain project?

I was only partly successfull in trying to get the text in the caption bar centered (which was easy in EWB1). I modified the tdialogcaptionbar Caption autosize = false, width = 482 and Format-Alignment = caCenter. This shows the text of the caption bar at run time almost centered, but not exactly, and had no effect on design time. Any ideas are welcome how to get that better.

I have attached a picture of my Radiobuttons before and after change.



Attachments: EWB2 TRadioButton changed.pdf
Sat, May 9 2015 7:12 AMPermanent Link

Walter Matte

Tactical Business Corporation

Doc:

Thank you for describing what you did,  it will help people understand the flexibility of the UI's that can be made.

Walter
Image