1. Discussion - how do you GUI?
- Posted by ryanj Apr 14, 2016
- 2140 views
I am working on the next release of RedyCode, which will have lots of improvements such as:
- Simpler configuration for paths and Euphoria
- Default application template, which creates a main window and some dialogs that most applications need (preferences, about, tips, help)
- Redylib improvements such as a new "actions" system that manages responses to user input or scripts and integrates easily with customizeable menus, toolbars, and hotkeys and an undo history (for actions that are allowed to be undone)
- Official Redy icon set for common types of actions and items (16x16 bitmaps for tool buttons, menu items, tree nodes, and list items)
I'm trying to figure out how to improve the overall design RedyCode IDE and Redylib API to work well with common scenarios.
Here are some questions for euphoria programmers, to hopefully spark some discussion:
What do you use GUI programming for?
Do you usually create some sort of file editor/viewer? Or database front end? Or just a few simple controls to process or view some data?
Do you have a single view? or tabs with multiple views or different types of views?
Do you have multiple windows or a single main window?
What types of controls, editors, or viewers do you use? or wish were available?
What graphics features are important?
Do you make custom graphics or controls or just use whatever widgets/controls are available?
Do you separate GUI from non-GUI code? What methods do you use to keep your code well-structured?
Are there some things that you wish were easier to do when designing a GUI? What problems have you faced when designing a GUI? What solutions or work-arounds did you have to come with?
Is there a particular GUI library that works well for you?
2. Re: Discussion - how do you GUI?
- Posted by Spock Apr 15, 2016
- 2160 views
..
I'm trying to figure out how to improve the overall design RedyCode IDE and Redylib API to work well with common scenarios.
Here are some questions for euphoria programmers, to hopefully spark some discussion:
What do you use GUI programming for? Do you usually create some sort of file editor/viewer? Or database front end? Or just a few simple controls to process or view some data? Do you have a single view? or tabs with multiple views or different types of views? Do you have multiple windows or a single main window? What types of controls, editors, or viewers do you use? or wish were available? What graphics features are important? Do you make custom graphics or controls or just use whatever widgets/controls are available? Do you separate GUI from non-GUI code? What methods do you use to keep your code well-structured? Are there some things that you wish were easier to do when designing a GUI? What problems have you faced when designing a GUI? What solutions or work-arounds did you have to come with? Is there a particular GUI library that works well for you?
I make GUI programs for my work and at home for various projects. For work the tasks are mainly conversion that take some type of data and process it to produce another form. I generally break up the task into these common discrete phases:
1 Load data into a form for viewing 2 Check/augment the data 3 Output the data to destination
I try to make the programs as simple as possible since my users are non-technical. Windows are kept to a minimum. Listviews are used a LOT for viewing the kinds of data we deal with. A common control theme I use is to have a tab control sitting on the main window with each functional module sitting self-contained inside its own tab. Each tab/module has its own include file to keep the code structure intuitive. For work the only graphics I (currently) need are for dollying up pushbuttons. However, I have had to use my own 2d graphics library in the past to create a document previewer. I manually (or copy n paste) create each form in my IDE (which is really just a glorified text editor). One thing that would help the form design phase is to have a proper GUI designer. For my home projects I use the graphics library a lot in GUI programs.
As an aside, you mention support for 16 x 16 icons. As you know, Windows has different formats for different types of graphics (icons, cursors, bitmaps, dibsections). This has been such an annoyance for me that I ignored adding support for these things directly into my win32 library. I think it'd be better to have one format that can be manipulated by the one graphics library. This would imply creating certain controls as custom controls. For instance, instead of having a PushButton and a PictureButton, why not just have a Button that can have both an image and/or text on the face? Another annoyance to do with graphics is the sizing issue. Your 16x16 icons become too small at certain resolutions. But is the way to solve this to create a set of icon images at different resolutions? A smart graphics library should be able to resize (a copy of) the icon to the desired resolution without amplifying jaggies. Using similar logic the same icon could serve as the basis of a disabled version. I do this with my custom HotButton controls. Only one icon is associated with the control. When the button state changes a new image is made, based on that one icon. I don't have to manually create a set of images beforehand to reflect the different button states.
Spock
3. Re: Discussion - how do you GUI?
- Posted by jessedavis Apr 15, 2016
- 2094 views
I deal with non-computer people that need computer services. A GUI can give a straight forward intuitive approach to the computer say for data entry. A clever GUI can mitigate typos, etc. for more reliable data. I make liberal use of pop-ups that interact with the user for, say, to correct mistakes or check that the user really means it. If there are limited choices, pop up a list to select from. I am a modular programmer. The smaller the better. For me, the GUI needs to use available graphics already found on the machine. Having to carry along or download a package is a pain. A layout program is nice; however, I usually do it by hand
4. Re: Discussion - how do you GUI?
- Posted by ryanj Apr 16, 2016
- 2094 views
I make GUI programs for my work and at home for various projects. For work the tasks are mainly conversion that take some type of data and process it to produce another form. I generally break up the task into these common discrete phases:
1 Load data into a form for viewing 2 Check/augment the data 3 Output the data to destination
It seems to me that it could be useful to have textboxes that can automatically format data to reduce the amount of logic code needed, or pop up an error when you click OK if data is invalid, and explain why it is invalid. I wrote some code that does this, and i was thinking about how to integrate it into Redy's GUI.
I try to make the programs as simple as possible since my users are non-technical. Windows are kept to a minimum. Listviews are used a LOT for viewing the kinds of data we deal with. A common control theme I use is to have a tab control sitting on the main window with each functional module sitting self-contained inside its own tab. Each tab/module has its own include file to keep the code structure intuitive.
That sounds similar to what i have been doing lately. Either lists or tabs to switch between views or files. I only use separate windows/dialogs for things that are a "separate thought process", like a Preferences dialog that you specifically open, change some things, and close, then going back to thinking about information in main window.
For work the only graphics I (currently) need are for dollying up pushbuttons. However, I have had to use my own 2d graphics library in the past to create a document previewer. I manually (or copy n paste) create each form in my IDE (which is really just a glorified text editor). One thing that would help the form design phase is to have a proper GUI designer. For my home projects I use the graphics library a lot in GUI programs.
As an aside, you mention support for 16 x 16 icons. As you know, Windows has different formats for different types of graphics (icons, cursors, bitmaps, dibsections). This has been such an annoyance for me that I ignored adding support for these things directly into my win32 library. I think it'd be better to have one format that can be manipulated by the one graphics library. This would imply creating certain controls as custom controls. For instance, instead of having a PushButton and a PictureButton, why not just have a Button that can have both an image and/or text on the face?
In Redy, i created a simple graphics "language", which is really just a simple parser that converts a sequence of drawing commands to platform-specific API calls. It can load images into memory and set up fonts and styles so you don't have to deal with the complicated handles and device contexts. Once an image is loaded from a file (or an embedded euphoria sequence), you can use in a canvas widget or other widget classes can use them (menu items, tool buttons, list items, tree nodes). I plan to add more features to this drawing language later, such as an "iff" command that can select a branch of commands based on the return value of a routine_id (for choosing a color, for example).
Another annoyance to do with graphics is the sizing issue. Your 16x16 icons become too small at certain resolutions. But is the way to solve this to create a set of icon images at different resolutions? A smart graphics library should be able to resize (a copy of) the icon to the desired resolution without amplifying jaggies. Using similar logic the same icon could serve as the basis of a disabled version. I do this with my custom HotButton controls. Only one icon is associated with the control. When the button state changes a new image is made, based on that one icon. I don't have to manually create a set of images beforehand to reflect the different button states.
Spock
I agree with this. I wanted to at least have 16x16 bitmaps for typical menu items and tool buttons for now, but it's definitely not a long-term solution. The problem i am running in to is i haven't wrapped enough API to load common image formats (besides bmp), scale images, fade them to grey, or use transparency. Then, there is the problem of putting together a collection of good icons. Definitely a lot of work.
5. Re: Discussion - how do you GUI?
- Posted by ryanj Apr 16, 2016
- 2060 views
I deal with non-computer people that need computer services. A GUI can give a straight forward intuitive approach to the computer say for data entry. A clever GUI can mitigate typos, etc. for more reliable data. I make liberal use of pop-ups that interact with the user for, say, to correct mistakes or check that the user really means it. If there are limited choices, pop up a list to select from. I am a modular programmer. The smaller the better. For me, the GUI needs to use available graphics already found on the machine. Having to carry along or download a package is a pain. A layout program is nice; however, I usually do it by hand
I also used popups on a form: when the user clicks OK and some data is invalid, it gives a useful explanation of what is wrong with the data.
Instead of using popups, i thought it would be nice if each textbox could display an "invalid" indicator on it, and display an explanation under it when it has focus. I may incorporate that concept into Redy's textboxes.
It is annoying to have to provide a bunch of bmp files with the exe. If i use images in a program that is released to the public, i embed them into euphoria sequences.
6. Re: Discussion - how do you GUI?
- Posted by Spock Apr 17, 2016
- 2025 views
.. I generally break up the task into these common discrete phases:
1 Load data into a form for viewing
2 Check/augment the data
3 Output the data to destination
It seems to me that it could be useful to have textboxes that can automatically format data to reduce the amount of logic code needed, or pop up an error when you click OK if data is invalid, and explain why it is invalid. I wrote some code that does this, and i was thinking about how to integrate it into Redy's GUI.
Are you thinking of something along the lines of RegEx? I use this a lot when importing data from text files. For me it is less important to have automatic formating in text boxes since we try to avoid manual input as much as possible. My work has largely been to automate bulk data transfers/conversions and manual updating of data is permitted only when deemed necessary.
We generally deal with long lists of data or transactions in a ListView. I used to display error messages in a message box but for the volumes of data we deal with I found it more practical to add an additional column to the ListView and use that for error messages.
..Only one icon is associated with the control. When the button state changes a new image is made, based on that one icon. I don't [want] to manually create a set of images beforehand to reflect the different button states.
Spock
I agree with this. .. The problem i am running in to is i haven't wrapped enough API to load common image formats (besides bmp), scale images, fade them to grey, or use transparency. Then, there is the problem of putting together a collection of good icons. Definitely a lot of work.
Too true. My graphics library will probably do all of this but it was put together in an adhoc way and uses a lot of ASM (and fasm.dll) which may or may not suit the genericity of Redy. The icons I use in my programs come from a bitmap kept in the include folder and periodically embedded into an include file (icons.e). Whenever a program is run through Orac that folder is first checked to see if the bitmap has been updated since last compile. If it has Orac will recreate icons.e which is then incorporated into the current program. This works well for me but the whole system does have a lot of inter-dependencies.
Spock
7. Re: Discussion - how do you GUI?
- Posted by ryanj Apr 22, 2016
- 1890 views
I worked very hard on "actions", menus, toolbars, and a default set of icons for Redy in the last two weeks. I downloaded and converted the "tango-icon-theme" 16x16 icons to bmp, then converted to sequences in an .e file. For disabled items, i wrote a function that converts icons to grey upon first use and caches them in memory.
(I'll post more exciting details about the upcoming release of redy, soon!)
8. Re: Discussion - how do you GUI?
- Posted by ryanj Apr 22, 2016
- 1904 views
Are you thinking of something along the lines of RegEx? I use this a lot when importing data from text files. For me it is less important to have automatic formatting in text boxes since we try to avoid manual input as much as possible. My work has largely been to automate bulk data transfers/conversions and manual updating of data is permitted only when deemed necessary.
I guess i was thinking of having a function that gets called when the textbox changes, to determine if the format is correct, and display an error indicator without interrupting the user. I plan to add a feature like that into Redy's textbox widgetclass.
That's a good idea.
9. Re: Discussion - how do you GUI?
- Posted by Spock Apr 26, 2016
- 1862 views
Are you thinking of something along the lines of Regex? I use this a lot when importing data from text files. For me it is less important to have automatic formatting in text boxes since we try to avoid manual input as much as possible. My work has largely been to automate bulk data transfers/conversions and manual updating of data is permitted only when deemed necessary.
I guess i was thinking of having a function that gets called when the textbox changes, to determine if the format is correct, and display an error indicator without interrupting the user. I plan to add a feature like that into Redy's textbox widgetclass.
I think this is a good technique but for a small number of use cases. For instance, validating bank account numbers, IRD (IRS) numbers, etc. To do this in my Win32 library I would add a line of code in the control's Handler routine to call a validation routine, eg:
if msg = WM_CHAR then ValidateMyText() end if ... ... procedure ValidateMyText() sequence s = GetText( MyText ) -- do validation here and provide feedback end procedure
If I needed to validate a lot of different data fields I would consider putting all the different types into an independent include file and call them via the Handlers (in the app rather than the GUI library). To me this is the simplest thing that would work but YMMV.
Spock
