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


Generating Applications

January 21, 2012

A SIMPL Test Application

A SIMPL Test Application

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:

Also, there are the classes for creating a small demo app:

“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.

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:


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:

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

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. 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.