So what are You using for MV GUI?

I wrote a few blogs on what’s available for GUI development with the JACXX model, but I’m curious what tools you folks are using – especially tools that are less common in the MV space but well-known outside of this space. I’d also like to share thoughts about a new GUI tools project that I’ve just been thinking about.

I know when I talk about various technologies that some people scoff at the options that I’m presenting. OK, so what are YOU using that the rest of us should be considering? At the moment, I want to discuss more mainstream tools rather than products like DesignBais, Zen, Viságe, WebWizard, or FlashCONNECT. To some extent those products try to hide the difficulties of web development and/or the communications tier from the developer – which is usually a really good thing. But maybe it’s time to stop to stop sheltering the Pick/MV developer from the rest of the world and talk more seriously about how we can use our MV DBMS with all of the other tools that are out there.

ASP.NET is fairly common but the default controls that come with the free web developer toolkits are pretty basic. Even with ASP.NET you still need JavaScript if you want to avoid making a connection to the server for every action. So as always, if you want a basic web page it’s easy but if you want to go beyond that you’ll need to look elsewhere. With ASP.NET there are many free tools to improve the GUI and client-side scripting, and there are commercial offerings that go beyond the freeware but for a price. So as a simple example, I’m wondering how many people make use of the free Ajax Control Toolkit. What about Telerik Radcontrols or Infragistics?

In CDP, Peter McMurray recently mentioned WPF which is the base for Silverlight. I consider this to be just another JACXX tool, but with VB.NET and C# substituting for JavaScript. I know some people are plugin-adverse but how many of you are actually making use of this extremely valuable and versatile tool?

Speaking of plugins – has anyone here even tried Flex? I know Alan Grusgoff really likes it but I don’t know anyone else who uses it in our market. I really think this is because people aren’t connecting the dots to interface it to the MV back-end, but this is really dirt-simple.

I’ve spent some time with YUI and have some familiarity with ExtJS. Does anyone else here have any experience with these at all?

There are JavaScript libraries like jQuery and Prototype for better manipulation of the DOM, some for better CSS handling, and some with helpful UI widgets, but few that do a decent job of all of the above. Frankly I find all of them seem to do pretty much the same thing, and none of them do all; of the functions in a compelling "gotta have it" way. It seems most web developers are combining tools and just using what feels comfortable for a given piece of code. This makes reading web code very difficult, as now it’s not just JavaScript (which can be confusing enough) but now you need to understand the constructs and functionality of the libraries being used by JavaScript, and if people are mixing libs …

I write a lot about GUI options but I get little feedback. Maybe people aren’t reading this blog. Maybe everyone who is going to do GUI development already has a strategy and everyone is beyond my fundamental intros to mainstream technology. If that’s the case I’d like to know what you’re using.

How is this related to MV? Well, connectivity to the DBMS is trivial these days. Each MV platform has some connectivity mechanism and there are third-party offerings as well. I think we’ve had enough discussions in forums to answer all comms questions. So the next questions are :

• What exactly do we put on the wire?
• Do we generate GUI widgets on the back-end in HTML?
• Do we pass script to the client and let it generate the UI?
• Do we use a specific library to help with that?
• What techniques do we use to make the BASIC code less dependent on specific libraries?
• How do we code for browser-specific details?
• Or do we use BASIC purely for DBMS and business logic and push all UI details to a middle-tier?

There are no "right" answers just good and bad implementations of various preferences.

So what have you done in this area that you like? What failed dismally? What would you do differently? Would you separate MV from the UI? Use a different library? Put more control in the BASIC code?

Where my thinking has taken me

I’ve been knocking around ideas for creating tools that will help developers to create BUI / RIA (Browser User Interfaces / Rich Internet Applications) directly from BASIC. I think I know the mistakes made by most of our colleagues in this area, and the areas where they seem to have done a good job. I think a project like this would be mostly open source, allow for user/developer choice of connectivity, and it would need to be very versatile to accommodate different levels of developer experience as well as preferences by developers who understand their options.

Here are some examples of the versatility that I think is required.

• Some developers want to avoid XML / XHTML entirely, some like it. The tool needs to allow developers to manipulate XML objects which define GUI controls, but defaults need to be available for those who don’t want to mess with this.
• Some developers are more adept with JavaScript than others. They should be allowed to embed script wherever they feel it’s appropriate. But other developers want to avoid scripting entirely, and the tool should create the scripts for event handling and screen manipulations.
• Some developers don’t want to mess too much with script, but when they do they may prefer a specific library like jQuery or Prototype. It wouldn’t do for the tool to use one while the developer tries to use another, so the tool needs to be versatile enough to use whatever one of several libraries that may be supported.
• Based on the above we see that everything needs to be parameterized – nothing can be hardcoded. The generation and manipulation of controls and events needs to be described in BASIC in a more declarative fashion, and the lower-tier code needs to use the preferred libs to manifest whatever has been described. The developer should be allowed to change JS libraries or library versions without changes in BASIC.

For right now, this is all smoke. You can probably imagine the code that would go into something like that. I’d probably FLOSS the project in part because it’s just too big for one person to work on in a reasonable amount of time, or to maintain over a period of time. The business model would have to be fee-for-services for help, fixes, enhancements, etc. Sure, FLOSS software is free like beer and you have the liberty to see the software too, but if you want it to work and you want continued enhancements,you can make the changes yourself or you can pay someone else to do it – that’s the way the FLOSS model works … and sometimes doesn’t. Really, to kick off a project like this I would probably need a few companies to sponsor development – you can’t expect too much free code from someone who has died from starvation.  Ah, but I digress…

BASIC and GUI objects

Related to that, one of the things I think about is – what would be the most elegant way for an MV developer to create objects purely from BASIC?

You see, in object-oriented languages we have typed objects and collections. So I can have a Label, a Button, an Image, or a Grid, and those can be put into collections of like objects or in a collection as a related group. For most MV platforms, BASIC isn’t typed and only goes a couple levels deep, so there’s no "natural" BASIC way to create objects, set properties, assign event handlers, etc. Because the language is limited, we need alternative constructs.

In Nebula products I do this with well-defined items that get passed to subroutines. So for example you set STYLE="", then use something like this to set the font: STYLE<X.FONT>=X.COURIER. Developers seem to like this approach. I use values and subvalues to add more detail, like : STYLE<X.FONT,X.SIZE> = 16. But that’s not real object-oriented code.

Here is an example one way to create a label and input box on a web form. I don’t like it but it’s just one simple example of the many ways that this can be approached:

(I really hate the way I need to break up code lines in this blog, I’m going to upgrade soon and change the blog theme to something that’s more code-friendly. [EDIT: Done the deed…2009/06/07])

* define object type and ID
LABEL1 = X.LABEL : @VM : "label1"
LABEL1<X.TEXT> = "Cust ID"
LABEL1<X.POSX> = 100 ; * x position on screen
LABEL1<X.POSY> = 150 ; * y position on screen
CALL SET.CONTROL(LABEL1)
* assume X,Y is after last control
CUSTBOX = X.INPUT : @VM : "custID"
CUSTBOX<X.TEXT> = "New" ; * provide a default
* define BASIC handler
CUSTBOX<X.ONLOSTFOCUS> = "PROG.CUSTID.001"
CALL SET.CONTROL(CUSTBOX)
* Fast approach for cust name label and textbox
CALL SET.CONTROL("LABEL,lbl2,Name~INPUT,custname")

I’m sure you get the idea. The Set.Control subroutine would save the definition and then render the controls when this program returns control to the web client. There are a ton of details that would need to be handled.

Some developers might like this approach better:

CUSTID = \<label id=’label1’\
CUSTID :=\ x=100 y=150 text=’Cust ID’ />\

Some developers would want to hardcode creation of buttons and handlers – for example:

BUTTON= \var oButton = new YAHOO.widget.Button({\
BUTTON := \id: "mybuttonid", type: "button",\
BUTTON := \ label: "My Button"});\
BUTTON := \YAHOO.util.Event.addListener(\
BUTTON := \"mybuttonid", "click", handler);\
BUTTON := \var handler = function(e)\
BUTTON := { notifyMV("button clicked: " + e.id); }\

Again, these are just a couple ways of creating code that ultimately gets pushed into a browser – and then compelling the browser to return data via events back into MV BASIC code.

The trick is to make this simple enough in a default mode so that it works without a lot of fuss, but with many levels of extensibility so that developers can get more control over object types, scripts, XHTML controls, CSS, event handling, and whatever else they want.

Taking a step back, sometimes we need to ask people to meet us in the middle. It would be much easier to create an interface for BASIC that did a number of things but relied on the developer to know a little something about UI development – which is one of the reasons why I’m asking what you folks are already using. If jQUERY and YUI, for example, are standards that people can accept, then it wouldn’t be so bad to provide basic functionality but require developers to add custom jQUERY and YUI scripting where they want more finite control over the UI. If we can’t rely on the developer to meet us half-way here, then either the project will take a lot longer to code – or we may need to leave behind people who are unwilling to take a step toward their own future. This reminds me of the blog I wrote on the price for "simple".

On object orientated BASIC

I know Caché is natively object oriented, even with MVBASIC, and that QM also supports object notation. U2 also supports functions so we can do something like LABEL = CreateLabel( "label1", "Cust ID", x, y ). But this functionality isn’t universal. I refuse to code into syntax that is only supported by one or two MV platforms because it just locks developers down instead of the intended purpose which is to make web development easier for everyone.

Summary

So that’s what’s been on my mind with all of this, but you might have some idea that will make me slap my head and say "why didn’t I think of that?!" I’m not writing any code yet. I’m still trying to think of what sort of magic can be used to allow MV developers to get the most functionality with the least amount of learning and "burden" in their code. Ideas here are welcome.

As always, please feel free to post brief comments here, or to start a more lengthy discussion in the Nebula Forum.