IPD

The long wait for news on IP.Dynamic and IP.Nexus will be over soon…

Hot on the heels of the two previously finished features, here’s another completed feature for the “MyCP” area of IP.Dynamic.

Personal Topics, is - as the name implies, a feature that allows you to start a topic and invite specific members to participate. It’s a bit like a personal message but in a forum topic format.

The movie shows the main features such as the ability for the topic starter (and admins) to remove and ban members from a topic. Each participant can optionally remove themselves from the topic or block it completely.

Expect this feature to make it to IPB 3.0.

6.4mb Quicktime Movie

I’m just about done with the IP.Dynamic task manager. As the name suggests, it’s a little corner of the CMS to organize you and your staff.

It should be pretty self explanatory as-is. Just after I took the movie capture, I added in a check box to ‘Hide Completed Tasks’ and made it so the settings are stored in a cookie so they are remembered across pages and when you return.

4.6mb Quicktime Movie

I had previously blogged about IP.Dynamic’s calendar.

Thankfully, it’s nearing completion.

There’s not much to say that the movie clips won’t other than it has support for multiple calendars that can be viewed simultaneously a’la Google Calendar and it introduces ‘context sensitive’ menu options (the Calendar View Options above the left hand menu).

4.5mb Quicktime Movie

5.7mb Quicktime Movie

I hate writing calendars.

I suck at maths. For a programming nerd, that’s unsual - but it’s true. Even after a month of intense DS Lite Brain Training, I still can’t work out how much change I’m supposed to have at the till. Mainly because I use a visa card, but I digress.

Calendars suck because you have to take into account different timezones when storing the event and when showing the event. Stick on some daylight saving time variances and it’s enough to push me over the edge.

Not being satisfied by getting whipped by basic mathematics that my six year old nephew could do with both hands behind his back, I went and threw some javascript into the mix to ensure the last remaining clumps of hair I have were majestically pulled from my scalp.

Now I know there’s some fancy AJAX calendars out there. Google’s calendar app and 30boxes are both good examples of what can be done with enough time and enough programmers. I didn’t really want to compete with those programs because basically, I don’t have the time.

Here’s a quick look at the interface thus far. (Quicktime .mov, 1.1mb)

As alpha testing continues, I’ve been overhauling some areas which haven’t seen much attention for a while. One such area is the files and directories management screen.

I’ve re-done the entire section to make it not only much prettier but much easier to use and more functional. I’ve tried to keep it as “dynamic” as I could and utilized a fair bit of javascript (yes, with AJAX) and some fancy DHTML to produce a display that allows you to upload files and watch the file listing get updated in real time without the need to visit upload forms and have the page refresh.

Also included is drag and drop move and click and hold title editing. I had a small breakdown getting it to work in Safari (argh!) and IE (double argh!). I’m not brave enough to try Opera just yet.

Notice in the movie how, when we move into another folder by clicking on its name, the drop down boxes for the “upload into folder” and “create new folder” change automatically (that was the double argh! for IE).

(Sorry about the light yellow mouse pointer in the movie. Ambrosia Software are working on an intel version of Snapz Pro. The PowerPC version doesn’t work 100% on intel Macs)

IPD Files and Directories (Quicktime .mov 2.1mb)

Sorry for the lack of updates over the past few weeks.

It’s been a car-azy time at IPS towers as we’ve just kicked off the first round of alpha and beta testing for two new products: IP.Dynamic and IP.Converge.

Initial feedback is very positive and we’ve got some great ideas to work with. The ‘biggest’ stumbling block was MySQL 5 support. None of our products install and run with MySQL 5 when sql_mode is set to STRICT_TRANS_TABLES,NO_ENGINE_SUBSTITUTION because of sloppy SQL schematics.

I’ve spent the best part of the day cleaning up IP.Dynamic, IP.Converge and IP.Board so that they all install and run cleanly.

I had some trouble trying to get MySQL 5 installed. Regular readers will known that I’ve upgraded my main machine to an intel iMac. This causes a slight problem as the current PHP and MySQL installers don’t run so well under the intel chipset. I spent a few hours fiddling with MySQL 5 to no avail and came across MAMP which is a stand-alone webserver running Apache, MySQL 5 and PHP 5. It doesn’t interfere with the Mac’s own apache installation which is very handy. It’s enabled me to run MySQL 5 without messing up the rest of my mac. The old iMac is running as a webserver and uses MySQL 4 - and I don’t really want to upgrade that machine just yet.

I’ve also been amusing myself by writing perl scripts to export the latest release from SVN, clean it up and create an encoded (ioncube / zend) release for the alpha testers.

Invision Power Dynamic is a very modular system. At IP.Dynamic’s core is nothing more than a framework - the actual functionality comes from the ‘components’.

IP.Dynamic will ship with default components, such as the menu manager, articles manager, RSS import/export manager and a form manager.

The form manager has been designed as a flexible system that can handle pretty much every form requirement you might have; from a simple contact form to a more complex customer survey.

The form manager allows one to capture the input as well as email the results to multiple addresses or activate a custom module when the form has been completed so that you can use the form manager to power your own mini-applications.

The movie shows a form group’s options, a form field’s options as well as browsing the form results. The ‘public’ side looks very scrappy - this is because we’ve still to create the ‘default’ site HTML and CSS so we’re still using the alpha tester’s demo site for the output with IPB CSS. This will all be cleaned up prior to shipping.

IPD: Form Manager (Quicktime .mov 9.1mb)

We, at IPS towers, often eat our own dog food. We do this with development builds to discover new better ways of presenting our product and to high light any areas which can be improved.

Rob (IPS designer / web site lead) has been working with IPD at a top secret location for top secret reasons and he’s been busily offering suggestions which he’d find useful and it’s been a very productive experience.

One area highlighted was the initial confusion with the components and how one uses components in a page. It was felt that it was too cumbersome to have one click on the components tab, click on the component ‘Manage’ link and then proceed to add or edit a new instance of that component (such as a new articles group, etc) and then, click back on the ‘Content’ tab, click on the page one wishes to edit to use the ‘Insert IPD Tag’ from the text editor.

My solution was to tweak the components framework a little and allow the IPD user to choose which type of page they want to create. If they choose advaned, they are taken immediately to the normal IPD page form (complete with proxy options, etc). If they choose a component page, they get a slightly ‘dumbed’ down form with separate rich text editors for content above and below the component along with a link that creates a pop-up window with the component’s manage screen loaded.

The result is a much easier introduction to IPD. Advanced users will appreciate the flexibility of being able to use multiple components on a single page.

IPD: Adding a new page (Quick time .mov 7.2mb)

I’ve finally finished the IPD attachments system (which will likely come to IPB 3.0 along with the new RTE) and I’m pretty pleased with it.

I’ve spent a lot of time on the interface to allow one to make multiple uploads without leaving or refreshing the current page. I finally went with a scripted solution that manages an iFrame. It’s at this point that someone (yes, you Dean) says “Hey, why not use AJAX?”. Well, for one - there wasn’t the need to do so. An iFrame suits this job perfectly and degrades nicely when javascript is disabled. If I wrote an AJAX engine for the attachment system, I’d have either had to accept that non-AJAX equipped browsers (admittedly very few) couldn’t upload files or create an iFrame alternative. Secondly, lets only use AJAX when we need to, OK?

As you can see from the movie below, the result is pretty seamless and - paradoxically - you wouldn’t know that it was an iFrame unless you read this blog. The first one to comment “or read the HTML” gets a slap.

The attachments system in IPD is another little framework that accepts ‘plugin’ modules to the main attachment class to generate permissions / file size restrictions. This means that I can quickly add the attachments system to any area of IPD just by adding a bit of HTML mark-up (and the relevant JS loader) and a little plugin class. The rest is handled by the attachments framework.

There’s a bit of tidy up to do. I’m thinking of changing the colour of the status bar if an error is reported and adding the number of stored attachments to the drop down box title: “Manage Current Attachments (4)” to make it obvious that the page / article / whatever already has attachments.

IPD Attachments (3.1mb Quicktime .mov)

I feel that I often start with “Work continues on IP.Dynamic…” so I’ll skip that bit and dive straight into what’s new.

I’ve all-but-finished the Articles manager. The articles manager rather unsurprisingly allows one to manage articles. Articles are contained in a hierarchical format (what’s the buzz-word of the day, ‘taxonomy’?). Articles are contained in article categories (which can be children of other categories) and article categories are contained in an article group.

So, for example, you can create a group called “Knowledge Base” and populate it with articles. Another group could be called “Matt’s Blog”. Each article group exports a ‘default view’ component tag (available via the ‘Insert Special’ menu). This default view shows the articles in the classic knowledge base format of a list of categories which, when clicked, show the category’s child categories and articles.

The really cool thing is that you can also create custom views. You can filter by category, creation / updated date as well as meta-data such as article title, content, etc. You can apply a template to handle the output and export it as a tag. IP.Dynamic will come with a few of these custom views already set up. On my test site I have a view set up as a blog, complete with Permalinks and links to comments. This gives great power over your articles and this single component is capable of providing content for your FAQs, KBs, news and blogs.

I’ve finished tweaking the skin, too. We’re thinking of posting a dev update after the weekend which will contain screenshots and some short movies of the really nifty stuff.

’till then…

Work continues on IP.Dynamic at a good speed. The make-over is almost complete and everyone agrees that it’s looking good. I’ve finished the bulk of the page options including a “Proxy Options” tab that allows one to set a page as an alias of another (secret redirect while retaining the same URL), to redirect to another URL or to pass off to a custom module for pre-compilation and post-compilation processing (great extensibility right there).

There are rumblings around the web of the term ‘Ajax’ falling out of favour with the uber-geeks now that the media has raced in, coined the term ‘Web 2.0′ proclaimed it to be the best thing since ‘Web 1.0′ and subsequently disappeared in a trail of vapour after the next big thing. Ajax and Web 2.0 do seem to be pointless words that only exist in corporate presentations (”Our new AJAX enabled product is right at the cutting edge of the Web 2.0″) and the machinations of be-suited media types.

The other danger of “Ajax” (hey, lets call it Document Object Model Synchronous Information Transfer).. the other danger of “DOMSIT” is that suddenly there is an influx of “AJAX” feature requests from the inane to the banal. You know we’re heading the wrong way down a path when people are creating problems for an existing technology instead of creating technology to take care of existing problems.

I like Ajax/HTTPXMLRequest/DOMSIT and it does solve many genuine problems, for example: I wanted to allow one to create or edit a menu entry for a page while editing a page. In other words, while editing a page I wanted the user to be able to click a “Menu Options” tab and edit that pages entry in the menu. The problem with this is that IP.Dynamic allows multiple menu groups and allows multiple entries tied to a single page. I could load all the menu group data and all the menu item data at run time, populate a javascript array and filter select boxes based on the user’s choices. This would work, but it would create a potentially huge HTML page.
Aja.. DOMSIT makes this easier by simply asking the user which menu group they wish to modify (ping the server for that menu group’s list), then ask which menu entry of those linked to that page you wish to modify (ping back to the server for that menu item’s data) and finally present the form for editing.
A much neater solution.

AJAX digression aside, this entry was meant to be about the improved HTML logic handling in IP.Dynamic and IPB 3.0. So here we go.

I’ve finished the new template engine for IP.Dynamic which will also be used for IPB 3.0. The new template engine allows embedded IF logic and also FOREACH blocks. This is going to be a great template bit saver for IPB - I think we can cut the number of templates down by half, at least. It also means that in IPD I can have a single template for an article’s view (more about that later) rather than assinging multiple template bits. Needless to say, it’ll make things much easier on template editors.

Here’s an example of the what the new template engine can handle:

It still caches to PHP files in the same way too, making it just as quick as the current template engine.

So I was faced with either writing the AJAX menu selection system located in the “Menu” tab of the page content editor which interfaces with the Dynamic menu system to make it easier to add the current page to the menu, or start the IPD make-over.

The make-over won out. It’s nice to use the creative part of my brain after frying the logic side with pure coding over the past few months.

A while ago Rikki came up with a pretty cool new look for our IPS products, with an extra twist for IP.Nexus. Josh has taken this template design and started working it into Nexus. Now, the Nexus navigation is pretty unique because there are context sensitive options for certain pages. I’m not going to go into detail as I’m sure Josh would rather talk about that in a different blog at a different time. Needless to say, the new design wasn’t ideal for the IPD navigational structure.

With that in mind, I’ve created a very close proximation of the new design which cleans up IP.Dynamic and makes it feel much more open and less cluttered. Gone are the murky reds and grays and in comes… some new colours.

I’ve also written a new OOP javascript class to handle form ‘button’ generation. This new class accepts a DIV id name and turns it into a button. This means that IP.Dynamic administrators / editors must have javascript enabled to use IP.Dynamic but I think that’s acceptable. IP.Dynamic is a feature rich application and I don’t think a good interface can be created without the use of some client-side scripting.

It’s about now that I would post a screenshot and invite comment - but I’m not going to do this just yet. The reason being that we’re close to the first public beta test and I want to keep the interface under wraps until then.

It’s nice, though. Trust me.

I’ve spent most of the morning cleaning up some javascript classes to finish off IP Dynamic’s menu feature(s) and to try and find out why Firefox is freaking out when I load up the page content form.

To make the form cleaner, I’ve introduced a tabbed form concept which (via correctly marking up the HTML and using my tab-factory javascript class) allows the form to be broken up into different tabs.

This was going perfectly well until I stumbled across a rather odd javascript / Firefox bug. I’m using Firefox 1.5 RC 1 mainly because of the ability to re-order tabs and cleaned up dialogue boxes. Overall it’s a great release, but there are a few oddities (and it’s to be expected as it is only a release candidate).

One of these oddities has to do with Mozilla’s Midas engine (enableDesignMode) and changing the “display” attribute of a parent DIV after designMode has been enabled. The result is hard to explain, so here’s a little movie.

The fix was fairly straightforward (wrap the form with a DIV that has “display:block” set) but finding out what was the problem has cost me a morning.

IPD Gone Bad 132k Quicktime .Mov(ie)

Does anyone remember that Metallica song? It was off their first album. Yeah, that’s way before they went all country and western.

Anyhoo, work continues on IP.Dynamic now that Brandon is settled with Invision Power Board maintenance and Invision Gallery is in the QA phase. The first thing I wanted to nail was the page / template search and replace functions. It’s a function I use a great deal on BBEdit and I wanted to be able to search and replace on several pages / folders at once and use full regex. It can be a real time-saver when making sweeping changes to syntax, etc.

(I also need this feature because I’ve made a few core changes and need to remove a bunch of template tags from the page content)…

Now that we’re being all professional, I wrote up the spec and worked out the logic of the feature and how it’s presented before I wrote a line of code. This enabled me to rough out the UI and save messing around with the HTML. Once the spec was complete, I wrote up a few classes and this is the result:

The UI is scrappy at the moment. That’s to be fleshed out later as well as the ajax “search in progress” screen which has an iFrame back-up for those non-ajax folk. In this example, we do a regex search and replace in test mode which shows a DIFF report of the potential changes; great for making sure you don’t screw up a bunch of files by mistake - even though IPD has a versioning / roll-back system in place.

IP Dynamic Search.mov (1.1mb)

I blogged previously about my new UI javascript classes; “Drag ‘n Drop Move” and “Click and hold edit” which allows one to drag and drop a folder or file over another file to move it and to click and hold a file or folder title to trigger the in-line edit features. Adding this functionality to new HTML areas is as simple as adding the correct IDs to various A, IMG and DIV objects.

Today, I spent a little time re-vamping the templates layout screen. IPD has three main types of templates: “Content Templates” are templates that one uses with pages and content blocks, “System Templates” are templates IPD uses for searching, logging in, member control panel, etc and “Email Templates” are so cleverly titled an explanation shouldn’t be needed.

The content templates area now has three main groups:
“Custom Templates” are templates that the site owner creates to make his or her or their (ok, enough) site.
“Global Templates” are templates that are used on every page (unless asked otherwise). The page header and page footer are applied to every single page automatically (unlike previous versions) unless specifically stated.
“IPD Generated Templates” are templates that IPD generates internally. Some components generate template bits that cannot be deleted, renamed or edited or else!

As these new folders are pre-set and undeletable / uneditable - and the files in “Global Templates” and “IPD Generated Templates” are undeletable and cannot be renamed, I needed to find a way to prevent individual files from being moveable (via drag ‘n drop) and uneditable (via in-line edit).

The result is shown in the movie below. Yes, the red alert box does punch you between the eyes and, like most things with IPD, it’ll be refined at a later date.

IPD-Templates.mov (1.1mb Quicktime .mov file)

Since I started work on IP.Dynamic back in January this year I had only a limited knowledge of javascript and thus the interface was pretty much your old school (that’s like, sooo 2004) PHP + HTML with the menu being the only fancy scripted item.

My work with Invision Power Board has expanded my javascript knowledge and with the sudden explosion of the recently slow burning “Ajax” technology has led to me to rethink the main content interface.

The movie below is the culmination of three days work. This seems rather excessive; and indeed it is for the results but I’ve written all of the javascript code as OOP classes which can be re-used with any output just as long as all the ID names are specified correctly.

This outlines just how young this technology is. There are no shortcuts available. You have to code everything from the group up: the dragging functions, collision detection functions, highlighting functions, original row colour changing functions; everything. You also have to fight through browser bugs and limitations and different proprietry methods of attaching events, etc. It’s a long haul and a huge time vacuum and definitely not for the faint hearted.

However, now that I have my “drag-drop-move” class and my “inline-edit” class, it’ll be very easy to build the same functionality to the content blocks and template areas. The key to a good interface is consistency and building trust with the user. There’s little point in letting them drag and drop to move when working with pages but not so when working in other areas.

Check out the movie and notice how the row which is being dragged fades out (semi-transparent CSS layer using a semi-transparent PNG image for non-IE and IE filters for IE (yay for PNG support in IE7)) and how it won’t let you move a child into its existing parent.

ipd-pages.mov (Quicktime .mov 780k)