How should I create a simple GUI for screen design?

Getting Started
1

Further to a recommendation on another post on this forum I am creating this post as I need the ability to be able to create a simple IDE to allow end users to be able to drag and drop controls e.g. buttons, input boxes, labels, pre-defined things (labels with input boxes) etc onto a custom form with logic behind it so that the end user can write XojoScript to be able to talk to my application (in effect its parent). Also I would then need to be able to wrap all of the information into a file or files so that they can be encrypted and transferred between other users of my application. My initial thought is that I would need to use the Canvas control but that is about as far as I got (never used the canvas control and dont really understand what it does, need to watch Pauls webinar on it I think).

The idea is for a project that I have had sitting on the shelf for a while and is fundamental to its design so I need to be sure that whatever is done is not considered a hack or breach any EULA.

Suggestions, ideas, recommendations would be much appreciated.

2

hi Nathan,

i have built the latest version of my ERP system in Xojo, based on this very idea. we have base tables in the database and the user can create a table that contains user fields linked via the pk. we then raise an event “onSave” in this event they can set a flag that tells the calling program to load a form (container control). this form can then be altered by the user(or more usually an admin) to hide/show fields, change the language etc. they then hit save and another onSave event occurs which runs xojoscript that the customer defines.

its easy to do its just container controls on a window instantiated based on rules in a database, and events and xojoscript

I’m now trying to move this into xojoWeb as well.

its really not complicated, its more about making it pretty and handling the insane things that users do.

3

Download Lunduke’s open source IDE called Illumination Software Creator. It gives an idea of how you can build a basic IDE. It may be against the licensing of this project as I am not sure if it can be used for commercial stuff but at least you could learn from it.

http://lunduke.com/2013/06/02/illumination-software-creator-6-0-released-with-source/

4

[quote=93424:@Oliver Scott-Brown]Download Lunduke’s open source IDE called Illumination Software Creator. It gives an idea of how you can build a basic IDE. It may be against the licensing of this project as I am not sure if it can be used for commercial stuff but at least you could learn from it.

http://lunduke.com/2013/06/02/illumination-software-creator-6-0-released-with-source/[/quote]
Even if you know how you could build an IDE, it could still save you some time.

5

Hi,

For a long time I have envisioned creating an application and one of the features would be a customizable UI, with the possibility of moving controls around and selecting the desired controls from a list I would provide. My idea was using a designer that would be a canvas where the controls would be drawn and next to it a properties pane that would include the position, text/caption and functionality of the control. Something like the Xojo IDE in fact, but including a property to select the functionality intended for the control. For example, if there can be more than one actions triggered by buttons, the user would place a button somewhere on the window and would wave to choose from the functionality available/predefined for that control.

All that information would be stored in some file so that it can be read, loaded, edited, … and a user could try several UIs, for example.

Then, using control sets of subclassed controls (which would contain the events/methods required for each specific functionality) build the UI in code using the porperties stored in the above mentioned “UI preferences” file. The use of control sets would be required to create non existing controls in the execution time.

In my case no XojoScript would be needed since the functionality of each control is well defined and limited, but if required, and depending on the complexity of what needs be done in XojoScript, one of the properties of the controls could be the script and the control could execute it, I imagine.

As I said, this is something I have been thinking about. I don’t see any problem to this approach but I am not an experienced coder, so I wouldn’t take my word for it. It would be great if someone more experienced could comment on this idea.

Julen

6

[quote=93427:@Julen Ibarretxe Uriguen]Hi,

For a long time I have envisioned creating an application and one of the features would be a customizable UI, with the possibility of moving controls around and selecting the desired controls from a list I would provide. My idea was using a designer that would be a canvas where the controls would be drawn and next to it a properties pane that would include the position, text/caption and functionality of the control. Something like the Xojo IDE in fact, but including a property to select the functionality intended for the control. For example, if there can be more than one actions triggered by buttons, the user would place a button somewhere on the window and would wave to choose from the functionality available/predefined for that control.

All that information would be stored in some file so that it can be read, loaded, edited, … and a user could try several UIs, for example.

Then, using control sets of subclassed controls (which would contain the events/methods required for each specific functionality) build the UI in code using the porperties stored in the above mentioned “UI preferences” file. The use of control sets would be required to create non existing controls in the execution time.

In my case no XojoScript would be needed since the functionality of each control is well defined and limited, but if required, and depending on the complexity of what needs be done in XojoScript, one of the properties of the controls could be the script and the control could execute it, I imagine.

As I said, this is something I have been thinking about. I don’t see any problem to this approach but I am not an experienced coder, so I wouldn’t take my word for it. It would be great if someone more experienced could comment on this idea.

Julen[/quote]
Sounds fun. It will probably take you a long time to build. I am not a very experienced programmer, I guess. I am programming a game making IDE. You UI design would all be handled by the user (as far as my plan goes right now) and that would be using a sort of level editor. It has been taking me at least a year and a half but I know that once I can release it the public it will be worth it! I have gained a lot of experience from doing so and it has been fun but very frustrating. Out of curiosity, how long have you been programming for?

Here is my project’s facebook if you are interested (as I tried to explain: it’s a game orientated IDE in my best words to describe it):
http://facebook.com/gamebuildersoft

Subscribe to that page. I post updates on my progress from time to time.

7

[quote=93427:@Julen Ibarretxe Uriguen]Hi,

For a long time I have envisioned creating an application and one of the features would be a customizable UI, with the possibility of moving controls around and selecting the desired controls from a list I would provide. My idea was using a designer that would be a canvas where the controls would be drawn and next to it a properties pane that would include the position, text/caption and functionality of the control. Something like the Xojo IDE in fact, but including a property to select the functionality intended for the control. For example, if there can be more than one actions triggered by buttons, the user would place a button somewhere on the window and would wave to choose from the functionality available/predefined for that control.

All that information would be stored in some file so that it can be read, loaded, edited, … and a user could try several UIs, for example.

Then, using control sets of subclassed controls (which would contain the events/methods required for each specific functionality) build the UI in code using the porperties stored in the above mentioned “UI preferences” file. The use of control sets would be required to create non existing controls in the execution time.

In my case no XojoScript would be needed since the functionality of each control is well defined and limited, but if required, and depending on the complexity of what needs be done in XojoScript, one of the properties of the controls could be the script and the control could execute it, I imagine.

As I said, this is something I have been thinking about. I don’t see any problem to this approach but I am not an experienced coder, so I wouldn’t take my word for it. It would be great if someone more experienced could comment on this idea.

Julen[/quote]
Some of the features include:

  • Asset management
  • Basic sprite editor
    -Drag and drop visual programming system (compiled into Javascript)
    -Scripting capabilities (I am creating my own programming language that is compiled into Javascript)
    -Level editor
    -Point and click variable manager
    -Basic spritesheet generator (like TexturePacker but way more basic)

And more…

8

Thanks oliver.

My needs would be simple, so I don’t think it would take a too long time (if I ever started coding it, that is :slight_smile: ).

I progammed something of my own for the first around 30 years ago (in basic), but I have never gone beyond being a hobbyist and I only sometimes program some small tools for my work. I have had an application that could be commercially interesting in mind for a few years now (but I don’t have the time for it), and that’s where the customizable UI would be a very nice feature (that the current competitors don’t provide).

As for facebook, I prefer to stay away from it, thank you. I have checked your page, though.

Julen

9

Nathan

  1. I’d get marginally comfortable with XojoScript and what it can and cannot do at least to get started
    One limitation you will run into is that IF you want your users to be able to “write code” for this UI then you’ll need to be comfortable with using it
    Theres a few examples in the distributed Example Projects > Advanced > Xojo Script

  2. One of the things you CANNOT DO with XojoScipt is pass objects of any kind
    So this means you can’t pass controls, class instances, dictionaries etc into or out of a xojoscript

Xojo Script runs with an attached “context object” and the context object is where YOU add methods, functions etc that your users can then access from their scripts.
In order to make it appear that you can create controls etc you’d have to add method to the context that create & then track these controls in the context’s properties and you have to provide methods to set & get all their properties.

But since YOU control everything you can, instead of having a “button” maybe have an object that is a “client list” with some built in functionality since you still have to write that control in your code base and expose it to xojo script

10

Thanks for starting a separate thread for this… First suggestion: if it’s not spitting out stand-alone applications, call it something other than an IDE to avoid the confusion from the previous thread. “Report Generator” covers a whole lot of space.

Second, split this up into a form designer and the scripting. Implement the form designer first. Drag objects onto a form, select, resize, set properties of them, etc.

Third, read Norman’s post above.

Fourth, all you have to do to steer clear of the spirit of the EULA is provide some access to higher level objects in your ERP system, which I’d imagine is what your users would want rather than have to write a whole bunch of “low-level” XojoScript to manipulate fields, buttons, and checkboxes.

11

One other possibility is to create a “template” project in Xojo that has a pile of prebuilt and encrypted objects (client list etc).
That way your users can’t mess with the logic in the objects.
Then give that to your users & they use the prebuilt objects in whatever programs they want to write.

Depending on the level of sophistication of your end users that might work.

When I have used such an approach it’s been with very technically savvy users and not “newbies”.

However it’s not trivial for you or your users since you have to worry about things like if you have a “database login panel” object then where do you stash the database connection so EVERY other object in whatever UI they put together can access it and you DONT expose it to random coding errors (not a trivial issue)

12

For the form designer portion you may want to check out the following link. I used it many years ago to get off the ground with a touch screen POS system I was designing that allowed users to decide the layout of their touch screen.

http://great-white-software.com/rblibrary/index.php?main_page=product_info&cPath=10&products_id=39

13

[quote=93516:@Joseph Morgan]For the form designer portion you may want to check out the following link. I used it many years ago to get off the ground with a touch screen POS system I was designing that allowed users to decide the layout of their touch screen.

http://great-white-software.com/rblibrary/index.php?main_page=product_info&cPath=10&products_id=39[/quote]
Second that. I wrote my own interface builder for a seminar management system on the base of Mark Nutter’s article above. His example project helped my a lot to get it up and running.

14

Thanks everyone for the suggestions, as I thought it apears to be a whole heap of work and something I will have to look at in more detail. As requested by Brad I have renamed this post avoid any confusion to “How should I create a simple GUI for screen design?”. I am going to try and get my head around XojoScript a bit first and then read the book on IDE to see what thats all about. Also I may look at creating an IDE using some other system (if an IDE building already exists as Open Source I’m not yet sure). I have also been thinking about if it might be possible to have the IDE designer as an HTML editor that then gets embedded within the main app but thats another thought.

It might even be possible and easier for me and the user to have a wizard that asks them what they want to appear on the screen where they can chose from a list and they then get put onto a page as dynamic controls. I could then use these to pass to the XojoScript in some way and some method to pass the results back from the XojoScript back to my app in a very structured way to minimise the bit the user does from screwing up the main app.

Hmm, lots of food for thought.

Thanks again.

15

Except you really won’t be passing the gui objects to xojoscript. You will have some premade controls that, as an option, can call a Xojoscript to do some processing. Come to think of it, each control could have its own context which can be specific to that kind of control. Keep the xojoscript piece of it as limited and specific as possible.

16

something similar to this

17

[quote=93424:@Oliver Scott-Brown]Download Lunduke’s open source IDE called Illumination Software Creator. It gives an idea of how you can build a basic IDE. It may be against the licensing of this project as I am not sure if it can be used for commercial stuff but at least you could learn from it.

http://lunduke.com/2013/06/02/illumination-software-creator-6-0-released-with-source/[/quote]

Illumination is an extended version of Alex Restrepos RBComposer source code, with very little modification…

18

[quote=93688:@Dave S]something similar to this <…>
[/quote]
How did you implement the forward/backward etc functionality? Are the controls on the forms editor just canvases, ie representations of real controls?

In my own editor I work with real controls and I have an issue with not being able to set a z-index. I would have to rebuild the whole user interface each time the user changes the z-index… is that what you are doing?

1200×635 476 KB

19

The controls are stored in an array of a very specialized custom class… So z-Order is implied by the index position in the array.

The control class has a self-draw method, which in conjungtion with some other techniques :slight_smile: allows it to draw a near pixel perfect representation of the controls.

This version is intended to create mock-ups, with the next version being able to create Xcode that will create the exact same controls in a ObjC program that can be viewed on the iOS Simulator, or if you have the certs etc, you could test it on your own device.

There is no “code” (ie. logic behind it…yet)

20

[quote=93790:@Dave S]The controls are stored in an array of a very specialized custom class… So z-Order is implied by the index position in the array.

The control class has a self-draw method, which in conjungtion with some other techniques :slight_smile: allows it to draw a near pixel perfect representation of the controls.

This version is intended to create mock-ups, with the next version being able to create Xcode that will create the exact same controls in a ObjC program that can be viewed on the iOS Simulator, or if you have the certs etc, you could test it on your own device.

There is no “code” (ie. logic behind it…yet)[/quote]

I actually just finished ripping the control templates code from the ios builder for you Monday :slight_smile: will zip them and send them along… should help with your endeavor. I also found a way to test on the device via an xcode hook without certs… but as soon as the simulator/xcode is closed the icon on the device remains, yet does nothing. … still good for native testing though.