ExtJs 4.x Class Hierarchy Browser

ExtJs 4.x Class Hierarchy Browser

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

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.

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…