Advanced Frontend Editing in ConfigBox
I uploaded a screen recording to youtube to show the frontend editing functionality of ConfigBox, our in-house developed product configurator for Joomla. There, you log into the frontend and simply doubleclick anything to edit it via AJAX. Short strings like titles get edited in the same style as the text looks like, html text is edited with the user's html editor. This shouldn't be advertisement for my component, but rather show some features easily done with the extended framework on which the component is based on (for the framework library, see my recent blog post).
The idea is simple. Extract the HTML editor parameters set in the user editor plugin, invoke the editor dynamically with JavaScript instead of JEditor, do some JavaScript that fires the editor or any form element on double click on the content and have your backend models respond to a request with JSON data. That way, all your validation and storage methods already implemented can be used to do the backend business.
Doing it was not all that straight forward...
1st extract the HTML editor parameters:
There is a nice onInit method in each editor plugin file, that puts stuff like the js includes in the head, put's together the parameters for the editor and so on. Well, I'm only interested in the parameters and would need it in JSON format to invoke the editor manually later on. So I copied the method's code (for tinyMCE and JCE so far) and rewrote it so it returns a JSON object with my dear params. With an JDocument addScriptDeclaration I had the params in the DOM for later. You can have that script (Updated with MIT/GPL license block) if you need it to save yourself the hassle.
2nd do some javascript that loads the form element:
That would be quite individual for each component, the rough idea behind it is to bind doubleclick events to certain elements with a certain class or ID and have the callback see what kind of element it is and do the rest.
3rd receive the data and save it:
The only thing you have to do here is loading the record first, replace the field/fields changed and then save the record. Otherwise your check() method will complain or your record will be empty except the field you changed.
The idea is simple. Extract the HTML editor parameters set in the user editor plugin, invoke the editor dynamically with JavaScript instead of JEditor, do some JavaScript that fires the editor or any form element on double click on the content and have your backend models respond to a request with JSON data. That way, all your validation and storage methods already implemented can be used to do the backend business.
Doing it was not all that straight forward...
1st extract the HTML editor parameters:
There is a nice onInit method in each editor plugin file, that puts stuff like the js includes in the head, put's together the parameters for the editor and so on. Well, I'm only interested in the parameters and would need it in JSON format to invoke the editor manually later on. So I copied the method's code (for tinyMCE and JCE so far) and rewrote it so it returns a JSON object with my dear params. With an JDocument addScriptDeclaration I had the params in the DOM for later. You can have that script (Updated with MIT/GPL license block) if you need it to save yourself the hassle.
2nd do some javascript that loads the form element:
That would be quite individual for each component, the rough idea behind it is to bind doubleclick events to certain elements with a certain class or ID and have the callback see what kind of element it is and do the rest.
3rd receive the data and save it:
The only thing you have to do here is loading the record first, replace the field/fields changed and then save the record. Otherwise your check() method will complain or your record will be empty except the field you changed.
Views: 44
-
Comment by Amy Stephen on October 3, 2009 at 8:53pm
-
What's the license?
-
Comment by Martin Rasser on October 3, 2009 at 8:56pm
-
On ConfigBox? It's an evil, cut-throat commercial license for a whopping EUR 699,-, but the source code is open to edit for customers and their 3rd party devs.
-
-
Martin - I'm sorry. You shared some code in your post and it doesn't have a license on it, so, it's not clear to me if people can reuse it or not. Is it proprietary? (meaning we can't reuse it?) or GPL (so, we could?)
We probably should talk as a group about expectations on how we want to market our work, and what the implications are of not following Joomla org standards. I can start a thread later for us in a different area, but not today. I'd rather poke my eye with a sharp stick today. ;-)
Thanks for the learning material - still pouring over the last one. Had a few errors with the gallery that are probably PHP 5.3 related. Will get back with you on that later.
-
-
@Amy: Oh, you mean the script dealing with the editor parameters. Ah, let's say it's MIT/GPL2 dual-licensed, I'll update the file after this comment. But you're right, it should be made clear what people can do with a script, even if it's just dropped somewhere on the internet.
Bugs in the gallery component? If you want you can send me the error messages so I can debug. Generally the library works fine on PHP 5.3, I'm using 5.3 since a month on my dev machine.
-
-
@Faisal: Yeah, I was inspired from that project. I'd love to see a website that can be managed from top to bottom in this way! Would sure put me out of business as Joomla Trainer. ;)
-
-
Boy, it sure makes things a lot easier when you can edit right where you are - to fix a problem you see. I think what Martin is showing will be standard expectation n the future. When I get a chance, Martin, I'll post back in that other topic. Life is too busy!
Comment
© 2012 Created by Amy Stephen.
You need to be a member of All Together, As A Whole to add comments!
Join All Together, As A Whole