SIMPL GUI Designer – 1

February 7, 2012

SIMPL GUI Designer

SIMPL GUI Designer

Above is an image of the first build of a web-based GUI designer for SIMPL.

Sencha Designer 2.0

Sencha Designer 2.0

And here is an image of the Sencha Designer 2.0 that I am using to build the web-based version. The web-based version will use the same general layout, but may have different drag-n-drop capabilities.

GUI design is one of the most complex tasks in building many Internet applications. Hopefully, the SIMPL GUI Designer will make this a lot less painful, at least for applications of moderate complexity.

Windows 3.x started to become popular in the early 1990’s and the only way to build Windows applications at first was to use the “C” language. And Windows 3.x was based upon a hybrid 16/24/32 bit model which required programmers to specify “NEAR” and “FAR” pointer types for most function calls. Programming Windows in the early days was *very* hard.

Digitalk released versions of Smalltalk/V for Windows in 1991/1992 which made the complexity disappear – you simply sent a message to a “Window” object and it performed the requested actions (“open”, “close”, “move”, “resize”, etc). There were no “pointers” in Smalltalk. A company called “ObjectShare” (IIRC) released a product named “WindowBuilder” which made building GUI’s even easier with layout being accomplished by “dragging” and “dropping” components into place.

Microsoft, of course, realized that the difficult nature of building Window’s applications was costing them sales. They released the first version of Visual Basic in 1991. VB was very easy to program, (although much less flexible than “C”) and this led to an explosion of VB applications and probably was a major factor in Windows becoming ubiquitous.

I think that RIA (Rich Internet Application) GUI’s are at a similar situation to Windows 3.0/3.1 in the earlier 1990’s.

The technology obviously works and Sencha has done an outstanding job in engineering and documenting ExtJs 4.x.

But building ExtJs applications can still be challenging (although not nearly as difficult as building the early Windows apps). Sencha Designer 2.0 is a big step in the right direction although, at $399, it is likely to appeal mostly to professional programmers.

A more accessible web-based tool, like SIMPL GUI Designer, might provide a way for web designers and part-time developers to use the ExtJs library as well.

ExtJs 4.x Class Hierarchy Browser

ExtJs 4.x Class Hierarchy Browser

This is a web-based browser for the ExtJs 4.x class hierarchy. It is modeled after some of Smalltalk’s browser tools.

Some of my previous posts discussed tools for SIMPL on the server – SIMPL is an object-oriented scripting language integrated into a PHP environment.

And now, I am adding some client-focused tools for examining the browser environment. This tool displays the loaded JavaScript libraries – there will be other tools for building/examining widget layouts and CSS styling.

The goal is an integrated set of online tools for developing and maintaining all aspects of an application from database tables to GUI design.

Database Metadata

January 30, 2012

"Table Builder" window

"Table Builder" window

The image shows a new browser called “TableBuilder”.

At the top-left, is a panel showing the accessible MySql databases and below it is a panel which shows the tables defined within the selected database. The large panel in the center shows field information for the selected table.

At the moment, there are only two databases visible without a login account:
— simpl (which contains all of the SIMPL objects)
— demo (tables for use in demos)

This browser will be used for generating ExtJs specifications from database metadata.

In particular:
— field definitions for data stores
— column definitions for grids
— data validation functions
— table relationships for SQL queries

The goal is to automate the most tedious and error-prone tasks of creating a use interface.

And all the more important the larger the project.

Documentation Builder

Documentation Builder

Here is an image of a new documentation builder/browser that I just added to the site. This tool will help me with documenting my projects while at the same time serving as a general reference tool for those who are interested.

The tool can be opened by selecting “DocBuilder” from the “Launcher” window and clicking the “Open” button at the bottom. If the “Launcher” window is hidden, there is a context menu (right click) on the desktop that can be used to open it.

Use the ClassBrowser to see the SIMPL source code for the “DocBuilder” class:

There are only a few methods in this class:
bbar – sets the toolbar at the bottom of the window
height – height of window
leftPanelCfg – what goes in the left panel
rightPanelCfg – what goes in the right panel
splitPos – the initial position of the vertical splitter bar
title – window title
width – width of window

Most of this is obvious, but two deserve more attention.
bbar – DocBuilderToolbar is found at Object->Widget->Toolbar->DocBuilderToolbar
leftPanelCfg – DocNamesList is found at Object->Widget->ListPanel->DocNamesList

There are only two methods for DocBuilderToolbar:
config – what buttons to place on the toolbar
table – what database table to use (“docs”)

And there are only two methods in DocNamesList:
config – some config info for the names grid widget
table – what database table to use (“docs”)

Finally, DocNamesList also refers to another class (in the config method):
DocStore found at: Object->Data->Store->DocStore

And there is only one method for DocStore:
config – sets up the server request

Notice that the server request consists of a SIMPL script:


which gets a list of keys from the database, “collects” a list of dictionary objects (like Python list comprehensions), and returns the data structure back to the client as a JSON string.

And that is all there is to setting up a fully functional (CRUD) database editing/browsing tool.

The magic here is that DocNamesList inherits a lot of its functionality from its parent class, ListPanel.

DocBuilderToolbar inherits most of its functionality from its parent class, Toolbar.

The time it took to create the classes and methods for DocBuilder was probably about five minutes. And it was immediately available for use as soon as its classes were specified.

This kind of rapid app construction is typical of Smalltalk environments.

But in SIMPL/PHP, there is no Smalltalk – it is just pure vanilla PHP/HTML/CSS/JavaScript.

It just “feels” like Smalltalk for development…

Generated Application - "Demo 2"

Generated Application - "Demo 2"

Generated App – “Demo 2

This is a very simple application – just a set of styled containers using the custom CSS (generated by the CssFactory class) and some custom JavaScript (generated by the JavaScriptFactory class) for handling the selection tabs.

However, it has been built using the complete CodeIgniter/PHP framework with a newly generated default controller and view. It is deployed on an Amazon AWS/EC2 webserver.

The application is built using the “Demo2” class which generates all of the customized CSS, JavaScript, and ExtJs definition files.

I did a small experiment to see how long it took me to generate the application from a clean start. Here are the steps:

1) Use “FileBrowser” to clone the CodeIgniter libraries to the deployment directory.

2) Use AppBuilder to set the default controller name, set the default view name, “initialize” the app to use ExtJs, and set the code generator class.

3) Generate the custom code and build the required PHP files.

4) Done – the app is deployed.

Total time was about 53 seconds.

Of course more complicated apps will take a bit longer and, of course, there was the time to build the “Demo2” class itself.

But as the libraries get more comprehensive, creating a new application which is similar to something already existing in the library (by subclassing existing classes) will become very quick.

The created application is vanilla CodeIgniter-PHP-CSS-JavaScript-ExtJs – none of the SIMPL libraries are used in the deployed app.

If you look at the source code for the demo, you will see this meta-tag near the top:

The square brackets will hold an identifier of the SIMPL class generator used to build the application. This will be used for application maintenance in the future.

Custom ExtJs CSS Generation

January 23, 2012

CssFactory Class

CssFactory Class

Demo 2

The “CssFactory” class can be used to generate custom styling for ExtJs containers (or for plain HTML).

Here is the CssFactory “standardStyle” method:

function(self) {

It simply concatenates a number of styles generated by other methods. Of course, you can make other styles using a different selection of methods.

Also, CssFactory can be subclassed making it possible to have a specific style generator for each project while still retaining a common style library for use across all projects.

The same technique applies to adding JavaScript functions through the use of JavaScriptFactory.

SIMPL is based on concept of having a large library of classes and re-using the classes for multiple applications.

This styling creates rounded edges for a series of nested “Ext.container.Container” classes.

Demo 2