Expanding the TYPO3 Form Builder Concept

I think the new Form/FormBuilder packages are an amazing addition to FLOW3. Here are some ideas to expand on that solid foundation.

Point Number One: UI Theme-ing

Phoenix needs a cool UI? No. Let's try again:
Phoenix needs a cool Theme-er (api and theme builder)

Arguably, WordPress and Drupal are as popular as they are because of customize-able eye candy. From what I've read (I don't remember where), WP had an ugly default theme for a long time. They built a solid core and the design community took off making custom themes, because, of course people didn't want to stick with the default ugly theme. Drupal is also popular with themers. The way Drupal is designed, people had to theme much of the backend whenever they created a new template/theme for the frontend (though the distinction between front and back ends is much fuzzier in Drupal than in TYPO3). Themes gave people, and the organizations they served, a sense of pride and ownership. "I did that!"

Perhaps you've used Trillian, the instant messenger? Several years ago, I was getting into theme-ing that beast because I wanted it to look different. An entire community of themers has grown up around Trillian, and a variety of other products. People love to style things their own way.

I say, make it theme-able and they will come. I like that the user interface doesn't feel totally polished right now. I think that leads us down the same path that WP took. I think we should use everything Jens did to create a themeable foundation. We organize the system with links across the top, typically stylized as tabs. We have a page tree and various other UI concepts that can live in phoenix no matter what they look like. I would like to see something to help people generate themes for Phoenix; something that will make theme-ing fun and very approacheable; something that says "Phoenix helps you be yourself".

It's interesting to note that the themeing capabilities of  TYPO3v4 never really took off. I'm guessing the system was too complex, and all of the extensions (TV comes to mind) took forever to support changes in just the default theme, let alone support any other themes. So, I think there needs to be some kind of theme-ing api. I'd imagine that extensions/plugins would register any new elements or icons through this api, and access the current theme's ui elements through the same. If a theme doesn't have something, then it falls back to the default or something like that.

So I guess that's two components: a graphical Theme Builder and a sweet Theme API that all phoenix extensions/plugins use.

Point Number Two: Phoenix Visual Framework and App UI Builder

Phoenix will have a lot of pretty standard UI elements.


Perhaps we can call these elements a visual framework and make them easy to use.

• The page tree will be available in a lot of places.
• The various Form elements will be ubiquitous (dropdowns, textareas, radio buttons, etc).
• Handling system feedback like errors or "processing..." or whatever will be all over the place.
• The various menus across the top or the context sensitive menus (like aloha's floating toolbar, or a right click menu)

When someone builds a new module/extension, in many cases they will need to create an interface to interact with it. The Form API and Form Builder look perfect for this, except that not everything is a form. Navigational things like the page tree or the menu of tabs across the top are not really form elements and I doubt we'd want to make the entire backend dependent on the Form API. I'm open to other thoughts on this, maybe we do want to build everything in the backend with the Form Builder, I don't know. I do, however, think that we need something; Something very much like the form builder that can create the fluid templates for use in Phoenix; Something that will help extension creators to use the theme api from the get-go; Something that will help to create a standard way to create user interface in Phoenix.


In this UI Builder, devs should be able to quickly say, include the page tree, and a menu across the top, and a content-editable element in the main section to use Aloha during data input, and a Form, probably designed in the Form builder, to show up in this section over here. The UI Builder builds on the theme-ing api to encourage developers to use the standard Phoenix elements before creating their own. Of course, devs can always drop down and add stuff in fluid and handlebars, but if they 80/20 rule is true, then 80% of the time, the standard elements will do, so they shouldn't have to rebuild them all the time.

I'd imagine that such an App UI Builder would be used to quickly put together functional mock-ups of the desired functionality before completing the data model and whatever controllers are needed.
So, Phoenix needs a visual framework of standard elements, a UI Builder that makes it easy to use those elements.

Point Number Three: Fluid Template Builder

I think the Builder concept could also be applied to creating templates.

Drupal and WP afficionados love creating themes and sharing them. There have been several different efforts to create the same share-ability with  TYPO3 v4's various templating systems, but none have attracted the attention needed to create a truely competitive library of templates that people can try and use as the basis for their own template. The social buzz generated by the "I made that" thought is really important to capture with this new version of  TYPO3 - our friend the Phoenix. I think that we could one-up the competition by extending the Form Builder concept, and the Application UI Builder concept mentioned above, and create a Fluid Template Builder to get people up and running as fast as possible.

There are standard template elements like menus, videos, columns, etc. Each of these elements can be created in Fluid/TypoScript (a la the Form API/Builder) and then people can create basic Fluid templates with drag and drop. They say "I want a three column layout" and then they drag a menu into the left column and say that the middle column is editable content. It would only support a limited number of things, but it would let people get into the flow with fluid, even faster.

On the other hand, this could also be something like the TV wizard where a designer or design team has created an html template that you must now 'fluidify'. They select the elements that need to be replaced, and either drag the standard fluid elements into replace them or they edit the fluid template in a kind of text box at the bottom of the page (think ide). It would also be nice to select, say, a menu that the designer created with ul and li tags. then a kind of modal wizard that runs through and helps to generate the fluid loops required to create the menu.

Point Number Four: Third Party Visual Frameworks

The catalysts for all of these thoughts are: The sweet new TYPO3.FormBuilder and the LDS Church's IxF (Interaction Framework).

I take a special interest in this organization because I'm a member of the Church of Jesus Christ of Latter-day Saints (members are also known as Mormons). The Church has a huge technology department of at least a couple thousand people. There are so many disparate development efforts (lots of web apps created mostly for internal use by other employees) that Aaron Barker (a UX designer who works for the Church) built an awesome Interaction Framework (IxF). I hope that final approvals will happen sometime soon so that the IxF can be used in things other than Church projects. For now, sadly, it's not publicly available, so I can't show it off to too many people.

In the meantime, as Phoenix matures, I would love to see some of the Church's PHP projects use  FLOW3 on the backend, with IxF as the standard frontend. I think one way to encourage that would be to create the App UI Builder, as described above, that uses the IxF elements. That way devs can generate the already standardized UI even faster in a visual interface like (based on) the Form Builder. This way,  FLOW3 becomes an easy choice - build the forms with this nice visual tool, and naturally they'll end up using the amazing  FLOW3 framework.

In the Form Builder, you have something like:
Form > Page* [> Section]* > Element*

That's somewhat analogous to the organization of IxF:
Template > Layout* [> Section]* > Element*

There are 4 basic templates (the IxF calls these Layouts as well, but they're more like super-layouts because they consist of the whole page, the stuff that goes around the internal layout).
6 standard layouts (inner layouts that go inside an outer layout/template) accessible from the Layouts section of the IxF docs.
Several section elements that allow for organizing other elements (like tabs or accordians).
And other standard widgets/elements are in the "Demos & Examples" section of the IxF docs.
Templates (accessible from the Interaction Framework menu in the upper left):

• The main IxF template demonstrated by the IxF docs (with the outer border that you can change colors).
• IxF Sign In Page
• IxF Alternate Layout - Fixed Small App (for simpler, or mobile apps)
• IxF LDS.org (this one is important as most public facing apps have to use this template.)

Currently the extent of publicly available info about IxF resides on Twitter: @ldsixf

Tying it all together

In the main IxF template, some of the elements in the top bar that are very similar to some of the Phoenix concepts. - messaging in the upper right, and app sections in tabs across the top.

I would love to be able to have a theme that reused the IxF elements in Phoenix itself (Point Number 1 above). When it comes time to try and convince people to switch over to Phoenix, that would be a very sweet spot to say "and see, it even uses the IxF". The App Builder (Point Number Four, based on Point Number Two) would help with  FLOW3 adoption now, before Phoenix is ready. Point 3 is, well, just because I think that would be way cool for Phoenix to have that to try and expand  TYPO3's potential market.

I'd imagine that other organizations would like to have their own theme used in Phoenix and other  FLOW3 based apps as well. I hope that this stuff can be generalized/abstracted enough to make it useful to more than just the Church. Maybe the themer would allow me to change the classes that are applied to different kinds of elements so that I can use standard stylesheets from whatever project I choose (not just twitter bootstrap, but the IxF or whatever else).

The only hangup (admittedly a significant one) with using the IxF, is that we have to wait for IxF to be open sourced - which should happen afaik, I just don't know when. I really hope sooner than later.