SIMPL GUI Designer – 1

February 7, 2012

SIMPL GUI Designer

SIMPL GUI Designer

http://ec2-50-19-46-70.compute-1.amazonaws.com/apps/demo4/

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.

Database Metadata

January 30, 2012

"Table Builder" window

"Table Builder" window

http://simplphp.com

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

http://simplphp.com

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:
Object->Widget->Window->WindowHSplit->DocBuilder

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:

collect(dblist(‘docs’),function(x){{‘name’:x}})

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…

Code Refactoring

January 25, 2012

SIMPL/PHP Class Browser

SIMPL/PHP Class Browser

http://simplphp.com/

There are now eighty-six classes in the SIMPL class hierarchy.

And this number will increase substantially over the next few weeks as more ExtJs widgets, Css styles, and code generators are added. The system will probably have about five hundred core classes when it is complete.

Smalltalk maintains its class libraries through the use of sophisticated refactoring tools.

I have now added some of these capablities to the SIMPL class browser.

You can now:
— rename classes
— move subclasses to different parents

SIMPL/PHP already is capable of writing serialized classes to the database (see the “DbBrowser” tool) and I do a complete “rebuild” cycle at least once a day as a system integrity check.

The tools will continue to get more advanced as the class library grows.

Development is starting to resemble that of Smalltalk environments.

— Peter

Generating Applications

January 21, 2012

A SIMPL Test Application

A SIMPL Test Application

http://simplphp.com

The image above shows a very basic application generated by SIMPL.

The most complex application generated to date is the SIMPL development environment itself. It is now almost completely generated using SIMPL. And this means that it becomes increasingly easy to extend the development environment — more tools make it easier to build ever better tools.

But the main purpose of SIMPL/PHP is to create end-user web applications. Mostly these applications will run in a PHP/Python/Ruby environment with either a MySQL or Postgres database. My preferred user interface is ExtJs 4.x, but there is sometimes a requirement for either a lightweight library (Ext-Core,jQuery) or just HTML/CSS without JavaScript.

SIMPL/PHP is a “Smalltalk-like” environment in the sense that development is interactive, immediate, and has rich tools and class libraries. And this makes me much more productive than traditional web development practices.

At the end of the development process, SIMPL/PHP uses code generators to output code in the target languages required for a project. These will usually include code for (PHP, Python, or Ruby), SQL, HTML, and CSS.

In other words, SIMPL/PHP can produce the same output as I would produce manually – except that it is much faster and more accurate.

This becomes very important for large projects. For example, when applications have dozens or hundreds of tables and the client wants numerous highly customized ways of viewing or editing them.

In the ClassBrowser, there are now some “factory” classes for code generation:
Object->Tools->AppFactory
Object->Tools->CssFactory
Object->Tools->JavaScriptFactory

Also, there are the classes for creating a small demo app:
Object->Application->AppExtJs->Demo2

“Demo2” is generated in PHP for the CodeIgniter framework.

Time to generate all of the code (PHP,HTML,CSS) once I “export” the application is only a few seconds. And the application is immediately available since the code is written directly to the app directory on the server.

A SIMPL Introduction

January 20, 2012

Creating a SIMPL window.

Creating a SIMPL window.

http://simplphp.com

The best way to understand a new language is to try it out.

1) open a SIMPL console – select “SimplConsole” in the “Launcher” window and click the “Open” button.

2) input is in the bottom panel and output goes to the top panel.

3) enter: “builtins()” (without quotes) in the bottom panel and click “Run” – you should see a list of all of the built-in commands in the top panel.

4) enter: “globals()” and click run – you should see a list of all globally defined variables in the top panel.

5) enter this script into the lower panel and click “Run” – the output goes to the Transcript:

for(i=0;iWidget->Window->WindowSingle->WindowSingleText

3) You should see “WindowSingleText” in the text box at the bottom left.
Change the text to some new name such as “DemoWindow” and click “AddCls”.

4) The class tree will refresh; locate your new class:
Object->Widget->Window->WindowSingle->WindowSingleText->DemoWindow

5) The text box now contains “DemoWindow” (or whatever you named the new class)

6) Change the textbox content to: “title”

7) In the code area, enter this:
function(self) {
‘This is my new window title!’
}

8) Click “Save”

9) In the SIMPLConsole, try this:
send(DemoWindow, ‘open’)

10) You should see your new window with the new title.
And the window will contain a stylized text area, just like its parent.

11) Congratulations, you have just created a new class of window.

12) In normal development, you would probably “Save” the image at this point to keep the changes.

SIMPL Development Environment

SIMPL Development Environment

http://simplphp.com

Above is an image of an online development environment that I recently developed to create and maintain websites. You can click on the link below the image to open

SIMPL’s (“SIMple Programming Language) environment is directly inspired by Smalltalk and its language syntax comes mostly from JavaScript and Ruby.

The SIMPL client interface uses the excellent ExtJs 4.1 JavaScript library; the compiler and runtime are written in PHP and are integrated with the CodeIgniter/MySql framework.

http://simplphp.com is a site (written in SIMPL) running on an Amazon cloud server.

From the “Launcher”, you can open a “ClassBrowser” window to examine the class structures or a “Database Browser” to see a serialized format stored in the MySql database.

SIMPL/PHP is very new and very incomplete. However, it has reached the point where it is stable and, most importantly, where additional tools can be created within the environment itself.

So, I expect that development will now progress very rapidly. Upcoming tools will include a database structure browser and generator for ExtJs “grid” components, a GUI builder, and a CSS style generator.