AJAX/Manager Action Pages [was: Semantic Manager pages]

I went ahead and tackled the beast that is the configuration settings page since it renders horribly in Safari.

Here’s some stasts:

  before - 976 lines @ 53.5Kb
 
  after - 718 lines @ 38.3Kb

So there’s a lot less gunk floating aroud and you can see a lot better what’s going on in the code. There is lots more tweaking and optimization to  do in that one file, but not bad for a couple hours work and getting the formatting standards down.

Now, we need to really look at how we’re going to handle this... Resources to consider:

• Scriptaculous -- currently used for QE
• Early Scriptaculized tabs -- an example
• Moo.fx -- 3Kb effects-only library... tiny!
• Dojo Toolkit -- another JS library
• Open Rico -- yet another one (check out their table stuff!)
• SAJAX -- wild guess (yes another one)
• Interesting comparison of stuff
• Mochikit -- apparently very well documented AJAX toolkit

And one more cool resource: JS Source Code highlighter:

http://www.dreamprojections.com/SyntaxHighlighter/Examples.aspx

I’ve finished a very rough demonstration page showing one way we might think about revising the manager that mimics the current styling. It uses the latest scriptaculous (rc5) and only works on one page (the System Configuration Page). There are still some bugs to work out styling wise, but this should give a decent view of general functionality. Currently, some caveats:

• IE will most likely have some serious (but easily fixable) styling issues; please look at it in FireFox (don’t have Win IE fired up at home as the stupid PC is virus-laden and not working).
• All the stylesheets have been merged, except the top menus. Please ignore anything but the System Configuration page, including the login page, as that’s not the point of this demonstration at all.
• Only preliminary cleanups have been done on the stylesheets. There’s a lot of good that can be done there to optimize and eliminate the overlaps and implement stanard CSS that works in all browsers. Tweaking the look and feel to further de-Etomize it would be pretty trivial at worst. (smaller/faster opportunity)
• Buttons are handled purely via CSS and are styled similarly to the coolbuttonsFX stuff... this would let us get rid of some JS and a lot of CSS. (smaller/faster)
• Tabbed Panes implementation is handled via Sciptaculous + a new/tiny tabs.js file. This would let us get rid of more WebFX stuff from the 90s. (smaller/faster)
• The mutate.settings.dyanmic.action.inc.php file itself needs further optimization for checking which inline JS is still needed.
• The header.inc.php file would need to be tweaked to remove references to now rendant JS/CSS code.
• At the end of the day, I suspect that we could loose 25-30% of the code size from the manager and pick up some speed by switching to this code structure. I’d need some help from everyone, but I bet we convert and test the whole thing in 2 days.

To see it in action, login to http://pixelhick.com/manager/ using admin / 123456

Go to the System Settings tabbed page and play around. Again, please make sure to ignore any other page BUT that one.

Dangit... I broke my own rule and have been updating some more.

I got the edit document page to work as well... another one of the more intense ones. (mutate_content.dynamic.action.php). I also updated several other ones there as well...couldn’t stand looking at all those darned buttons being broken!

access_permissions.dynamic.action.php
mutate_settings.dynamic.action.php
mutate_content.dynamic.action.php
document_data.static.action.php

Looks good so far!

Minor issues in Konqueror:

Editing a page shows a ">" in the button bar (after the save button, but could be on another location in your browswer)
Cancel, move button worked, Save button didn’t do anything in Konqi, could be due the ">" ...

Keep going! ;-)

Remon

Definitely would need to work on the CSS stuff. It’s a bit flawed in IE so...might need some work.

It’s going to need a LOT of little tweaky stuff, but the main functionality is there now. Here’s the pages that I haven’t touched yet:

• manage users
• manage webusers
• manage roles
• modules
• resources (will be similar to settings or edit document tab)
• files
• export
• import
• login page

I also did add a rule to make the tabular data snap back better into line, but it’s much better I think. I’m committing to my SVN tree soon if anyone wants to take a peek and play.

The Konq bugs I fear are due to Konq’s JS support.

Yeah, Konquer is definitely a finicky browser...probably more so than Safari (even though Safari was more or less based on the the Konquer code...go figure!).

I’m playing a bit with the Configuration Settings part of the manager based on the code you added, Ryan. Man...definitely some cleaning up to do! I’m thinking we can more or less just rewrite the CSS file and fix a few things in the code as we go to simplify things. That’ll make going into a new manager layout much, much easier in the longrun. Probably a good time to look at the classnames and see if there’s a way we can rename them for API purposes. Sometimes simple names aren’t always best if there’s a chance someone might use a similar name in a snippet or module.

I think all of the pages in the manager at pixelhick have now had the coolbuttons removed and replaced with the pure-CSS variety now. There should be a few pages that need tabbed panes done and then it will be ready for manager CSS organization and cleanup:

• Users
• Webusers
• Modules
• Resources (plus 5 sub-pages)

Here’s something along the lines of what I’d like to move towards for a reskin of 0.9.1. Shouldn’t take too long to get this knocked out: