Category Archives: Javascript

jQuery UI Layout 1.1.0 is out!

Kevin and I released the new fantastic version of the UI Layout plugin for jQuery, changelog:

* RENAMED raisePaneZindexOnHover ==> showOverflowOnHover
* REMOVED "overflow: auto" from base-styles. Overflow must now be set by
CSS - unless applyDefaultStyles==true. No longer need "!important" to
set pane overflow in your stylesheet.
* CHANGED minSize default from 50 to 0 (still auto-limited to 'css size')
* FIXED bug in allowOverflow - now works with 'custom paneClass'
* EXPOSED two CSS utility methods
o myLayout.cssWidth( elem )
o myLayout.cssHeight( elem )
* NEW auto-resize for ALL layouts on windows.resize
* UPDATED auto-resizing of panes after a container-resize
* NEW flow-code to prevent simultaneous pane animations
* NEW options to add text inside toggler-buttons
* NEW options for hotkeys - standard (cursors) and user-defined

Hungry for new capabilities demos? check the powerful nesting and the droppable portlets demo

So now go directly to jQuery UI Layout official website for documentation, download and DEMOS!

jQuery UI Layout 1.0

You may already know that Kevin Dalman and I were working on a new jQuery UI Layout project, based on my FBBorderLayout now you have the layout system based on jQuery!

Some features:

  • unlimited layout capabilities: 5 regions per layout – unlimited nesting
  • simple to use: powerful but simple syntax is easy to learn
  • dozens of options: every aspect is customizable, globally and by region
  • total CSS control: dozens of auto-generated classes create ANY UI look
  • extensible: callbacks, methods, and special utilities provide total control
  • custom buttons: integrates with your own buttons for a custom UI look
  • use any elements: use divs, iframes or any elements you want as a ‘pane’
  • collapsable: each pane can be closed, using any UI animation you want
  • hidable: panes can be completely hidden, either on startup or at any time
  • resizable: each pane can be resized, within automatic or specified limits
  • slidable: panes can also ‘slide open’ for temporary access
  • headers & footers: each region has unlimited headers or footers
  • nesting capabilities: put layouts within layouts to create complex layouts
  • demo mode: set applyDefaultStyles option for a fully functional layout
  • compatible with UI widgets: intended to be used with other UI widgets
  • and MORE

Visit jQuery UI Layout official website for demos, documentation and download!

FBBorderLayout 0.9

Looking for a jquery border layout?

Changelog for this release:

  • a few bugs were fixed (thanks to Matteo Ligabue)
  • nested layouts support was added


  • the syntax to start the borderlayout was changed thus please check the new samples
  • this release has some issue with Internet Explorer, if you don’t need nested layouts or you’re not using Internet Explorer please wait for 1.0 before update

FBBorderLayout home page

jQuery borderlayout

Todady I had a couple of spare hours so I wanted to try working on something about javascript and jQuery.

AFAIK jQuery and jQuery UI are missing a borderlayout, something like extjs’ one (check it out, it’s beautiful), so, after the jQuery UI 1.5 release, I thought to start creating one (thinking to P4A 3.2…).

The code is really early stage but it’s quite working cross-browser too, I did a quick screencast:

What do you think about this? Is someone interested in the project?

UPDATE: after some work the code is faster and bulletproof, take a look at it here:

Someone interested in having this code released as a jQuery plugin? Let me know. :-)

UPDATE 2: the project has been released, check it out!

Confirmation of my doubts about ExtJS licensing

ExtJs is a great javascript development library, some time ago I did some tests to port P4A to ExtJs and I wrote a post with my considerations about it and other javascript libraries.

In that post I wrote:

ExtJs as really a killer graphic layout, and it’s released under LGPL3 (developers wrote some licensing notes that I can’t really understand… actually I think that those notes could conflict with LGPL3 itself)

Today I found a post by Matt Asay called “ExtJs: When open source is not open at all“.

A quote from that post:

It’s a bit like saying, “You can use this as open source so long as you use the software how we’d like you to use it. If you have any money, forget open source: pay us instead.”

So how is this open source? This is a wholesale rejection of the Open Source Definition (#6).

That’s a confirmation of my doubts about ExtJs licensing and a confirmation that we took the right choice not to use it for P4A at the moment.

Now, I always try to be constructive also when writing critics about a project so here there are some suggestions for the ExtJs team:

  • clarify your licensing model, choose LGPL3 (or AGPL3 or whatever) definitively and remove your own notes (this will make ExtJs grow both within the final users market and the server-side market)
  • open your SVN, it’s ugly for FLOSS developers not to be able to follow the development
  • listen to user requests, when I wrote in the forums that there was no way to get a field’s label displayed if the field is not inside a form panel, the only answer I got (not from the team which didn’t answer at all, but from a premium member) was “buy a license and ask for that feature” […]
  • think general purpose because not all the users want to build all the application from javascript, ExtJs could do fireworks if it could be better combined with server-side frameworks

P4A 3 rendering layer discussion

This post will not be easy to write… I’ll try to explain you what kept us really busy in the past 2 weeks. ok a screenshot could help me :-)

In the P4A 3 roadmap post, I told you about a new widget rendering system… I didn’t post more technical info intentionally, I wanted to create a bit of suspense :) but I also wanted to do some tests before publishing news.

For P4A 3 we’d like to have a killer graphic with killer features (resizable widgets, border layouts, beautiful and powerful menu and so on) thus we looked to the biggest javascript frameworks out there: extjs and dojo. Both have great features and both have issues.

Extjs as really a killer graphic layout, and it’s released under LGPL3 (developers wrote some licensing notes that I can’t really understand… actually I think that those notes could conflict with LGPL3 itself) but it has not an open SVN and development is quite closed. Another note: only community support is for free.

Dojo is more polite with licensing and it’s released under BSD, but I don’t like the graphic layout too much and the way you’ve to code your applications writing a non-standard HTML with dojo-only attributes. It has some accessibility features.

Some considerations:

  • In my tests I found bugs in both frameworks
  • porting P4A to one of these tools is a “1 way road”
  • relying the rendering layer to a 3rd party project means we’ve to 1000% trust this project
  • these tools do not have a good print CSS support

We would have a 3rd option: continue on our road with quite standard HTML but rewrite our CSS from scratch with a CSS reset and a modular design which will give us better control.

I wrote extjs developers to know if they’re interested in a collaboration with P4A, I’m waiting for an answer but I’m looking for your considerations too, community it’s important to me, please let me know what you think and what are your experiences with those tools (or suggest others).

P4A 2.2 is finally out

This is the month of the big releases :-) first was UCK 2.0 a few days ago, now it’s time for P4A – PHP For Applications 2.2!

Highlights of this release:

  • Prototype/scriptaculous were dropped and jQuery was added. Thanks to jQuery and some wonderful plugins we added a new color picker field type, the ajax file upload feature, some great improvements to the popup system also with the ability to block the underlying interface and a beautiful audio/video preview system.
  • Answering to many request the tooltip system was implemented, $field->setTooltip() and you’ve done the work of providing information about fields on your mask.
  • Another requested feature: field autocomplete, similar to the google suggest one, enjoy it
  • A smooth “helpers system” was introduced, now everyone can really write plugins for P4A, overriding core mothods without having to patch framework’s file (this only works with PHP5)
  • The getid3 library was added, its work is to read all data from multimedia files and pass them to P4A that will use them and store them. Now we have a better width/height/mime-type detection for many and many multimedia file formats.
  • …and many many improvements and bugfixes, check the changelog for the complete list

You should have no problems directly upgrading from 2.0.6 to 2.2.0, otherwise write us on the help forum!

Can’t you wait? Here you have:
P4A 2.2.0 download

You already know that we can’t stop, things are already moving… we’ll publish more info very soon, also because I’m going to commit some preliminary tests for the next big step: P4A 3.0. Don’t miss it, I swear you’ll like it.

Technical note:
If you use P4A SVN, please switch to the 2.2 branch and don’t use the main trunk anymore!!! That’s because we’re working on it for P4A 3.0!

see you :)