User avatar
rurwin
Forum Moderator
Forum Moderator
Posts: 4258
Joined: Mon Jan 09, 2012 3:16 pm
Contact: Website

Re: Even easier GUI app design

Fri Mar 16, 2012 5:52 pm

Here's an idea I just  came up with. I don't think it has been implemented before, but it would greatly ease the development of GUI applications under languages such as Python. Therefore it would be useful to use on the RaspPi in an educational setting.

There's loads of guru engineers on here, what so you all think?

Graphical User Interface Design Integrated Into Application Under Development

GUI design tools are complex beasts. They have to draw a representation of the controls and allow them to be moved and rearranged. Then they have to generate a program that produces exactly the same layout using a different algorithm. Designing a new application requires learning to use the resource designer and flipping back and forth between the designer, the editor and the application. The you have to tie the program into the GUI resources -- pull up the right dialog at the right time, provide the on-click action to each button correctly -- sometimes that is integrated into the GUI design app to some extent, sometimes it isn't, but it all adds complexity.

Therefore, use the application program being developed to generate its own interface. A framework library extends all GUI framework controls to support a "Design" flag. When this flag is set clicking the control brings up a context menu allowing the properties of the control to be set, or the control to be deleted, or other controls to be added to it. The configured resources are saved to a configuration file on program exit and reloaded on start-up. During development, the design mode is entered and exited via a menu option. This menu option is disabled in the final product and resources that are only required during development may not be loaded.

There are difficulties in providing click capability to pure layout objects (eg grids), but it should be possible to work around that. Maybe an unobtrusive handle could be added in design mode. Also a tree view could be made available. Such a thing is easy to produce; it's the layout that is difficult.

For extra credit, build an editor into the framework so that the underlying behaviour can be modified without stopping the app and flipping to the editor. That should be possible with an interpreted language such as Python, but rather harder in C. Note that the whole point is that this is not an emulation of the running program; it is the real thing.

dave j
Posts: 117
Joined: Mon Mar 05, 2012 2:19 pm

Re: Even easier GUI app design

Fri Mar 16, 2012 7:22 pm

IBM's Visual Age products (for Smalltalk and Java) used to work in this way.

The GUI designer also let you draw lines to define the links between UI controls and would generate the code to support them. The problem was the generated code looked pretty horrible. If you just used default names for controls and links, which everybody did because defining names really slowed down creating your new UI, your code ended up connecting the clicked event on button3 via link13 to the delete action on listbox2 - completely unintelligible. It's notable that IBM's current, Eclipse based, development environments don't have such a facility.

Chris.Rowland
Posts: 239
Joined: Thu Jan 12, 2012 5:45 pm

Re: Even easier GUI app design

Fri Mar 16, 2012 8:40 pm

Aren't you describing Visual Studio?

The GUI design is done by  dragging and dropping items onto the window, resizing and arranging them as appropriate.

You can set the item names and other properties - or leave the auto generated ones. I rename the ones I use but tend to leave the ones with no events attached alone.

The auto generated code seems OK, just a long list of assignments, difficult to see a way to optimise it without making it unmaintainable. It's off in it's own file so you don't need to look at it.

I've always been surprised that there doesn't seem to be anything similar in the Linux world.

User avatar
SN
Posts: 1014
Joined: Mon Feb 13, 2012 8:06 pm
Location: Romiley, UK
Contact: Website

Re: Even easier GUI app design

Fri Mar 16, 2012 9:12 pm

And gambas2 (continues to bang drum)
Steve N – binatone mk4->intellivision->zx81->spectrum->cbm64->cpc6128->520stfm->pc->raspi ?

dave j
Posts: 117
Joined: Mon Mar 05, 2012 2:19 pm

Re: Even easier GUI app design

Fri Mar 16, 2012 9:21 pm

Chris Rowland said:


Aren't you describing Visual Studio?


Nope. Definitely IBM's VisualAge.


The GUI design is done by  dragging and dropping items onto the window, resizing and arranging them as appropriate.

You can set the item names and other properties - or leave the auto generated ones. I rename the ones I use but tend to leave the ones with no events attached alone.

The auto generated code seems OK, just a long list of assignments, difficult to see a way to optimise it without making it unmaintainable. It's off in it's own file so you don't need to look at it.


I'm not familiar with Visual Studio, maybe MS's code generation was better than IBM's. Does VS have the application code is the UI design feature that rurwin described?


I've always been surprised that there doesn't seem to be anything similar in the Linux world.


It was available for Linux.

Chris.Rowland
Posts: 239
Joined: Thu Jan 12, 2012 5:45 pm

Re: Even easier GUI app design

Fri Mar 16, 2012 10:09 pm

I wouldn't say the VS implementation is exactly the same as ruwin has suggested but it seems to solve the same problem - allow the developer to design the GUI without writing code.

The express versions of C#and VB are available free for the download so it's easy to try it and get ideas and inspiration.

User avatar
rurwin
Forum Moderator
Forum Moderator
Posts: 4258
Joined: Mon Jan 09, 2012 3:16 pm
Contact: Website

Re: Even easier GUI app design

Fri Mar 16, 2012 11:53 pm

There are several IDEs that allow you to design dialogs by dragging and dropping. I was using one in SunOS while Windows was still at version 1. I can imagine Smalltalk doing what I am talking about, but I've not got that deeply into it.

Imagine you take a tiny template:


import bootstrap

bootstrap.application("myapp", EnableDesign=True)


You run it. It produces an application window with a File menu. Under File are just two options: Design and Exit. You click Design and it becomes checked. Now you can add other menu entries and put controls on the application window. Maybe you add a menu entry that brings up a dialog box. Now you can add controls to that dialog box. In the most natural form, if you left click anything then the application runs as normal, but if you right-click it then you get the option to change it. Maybe the controls wont do that so you need the Design thing to be checked and then you're designing, and when it's unchecked you're running the application normally, but that would not be as smooth.

There is no IDE and you don't have to build a dialog and then tie it to a menu entry. You just create a menu entry and define it to create a dialog. Then you hit that menu entry and a blank dialog comes up and you put controls on it. The application grows organically and the only IDE you have to learn is your own program.

User avatar
nick.mccloud
Posts: 804
Joined: Sat Feb 04, 2012 4:18 pm

Re: Even easier GUI app design

Sat Mar 17, 2012 10:07 am

rurwin said:


You click Design and it becomes checked. Now you can add other menu entries and put controls on the application window. Maybe you add a menu entry that brings up a dialog box. Now you can add controls to that dialog box.


But you need an interface to do this - which is an IDE ...

dave j
Posts: 117
Joined: Mon Mar 05, 2012 2:19 pm

Re: Even easier GUI app design

Sat Mar 17, 2012 10:33 am

rurwin said:


There are several IDEs that allow you to design dialogs by dragging and dropping. I was using one in SunOS while Windows was still at version 1. I can imagine Smalltalk doing what I am talking about, but I've not got that deeply into it.


Classic Smalltalk is more a case of you change your IDE so it includes the functionality of your application. Then, when you want to release your application, you have to extract it from your IDE (with all it's dependencies) to make a new IDEless Smalltalk environment.

Lakes
Posts: 267
Joined: Wed Aug 24, 2011 2:17 pm

Re: Even easier GUI app design

Sat Mar 17, 2012 12:23 pm

Koda is a GUI designer which I`ve used but its windows only

budgieboy
Posts: 20
Joined: Sat Jan 14, 2012 12:11 am

Re: Even easier GUI app design

Sat Mar 17, 2012 1:07 pm

@SN And gambas2 (continues to bang drum)

+1

And there is Gambas3

If either could be compiled for ARM/R-PI then it could be viable as it is reasonably mature and has its own GUI (Written in Gambas!) so another language available for R-PI to go with Scratch, Pyhton et al.

User avatar
rurwin
Forum Moderator
Forum Moderator
Posts: 4258
Joined: Mon Jan 09, 2012 3:16 pm
Contact: Website

Re: Even easier GUI app design

Sat Mar 17, 2012 1:25 pm

Gambas might be a very good language and environment, but it does not have this feature:

http://gambasdoc.org/help/howt.....getstarted



Select the Form Tools.
Select one of the object, e.g. a button, place it in the window.
Use F4 to display its properties
Double click the button the see the code, which will be executed when you click it.
Enter a code line e.g.PRINT "Hello World. It is now: ";now

In the project window find the start button, press it (or press F5 key).
An Immediate Window will be created and shows the result of the PRINT command in the debug windows.


The GUI design is clearly not being done in the running application.

User avatar
johnbeetem
Posts: 945
Joined: Mon Oct 17, 2011 11:18 pm
Location: The Mountains
Contact: Website

Re: Even easier GUI app design

Sat Mar 17, 2012 7:44 pm

JMO/YMMV

Personally, I dislike having to use separate tools for GUI design and programming, so I use a language (GalaxC) and programming environment (XXICC) where I can write GUIs using the same language as regular code.  XXICC's editor supports both textual code and graphics such as dialogs, so source code can include both.  GalaxC and XXICC are still works in progress (what isn't?), but plenty reliable for my needs and they keep getting better.

rurwin said:

For extra credit, build an editor into the framework so that the underlying behaviour can be modified without stopping the app and flipping to the editor.
This sounds pretty dangerous IMO.  Any significant application is liable to have lots of pointers all over the place and changing any part of it would make some of those pointers invalid leading to a spectacular crash.  With XXICC, you must close your application before changing it, but the editor is still around so you can quickly edit, recompile, and launch.

Return to “Off topic discussion”