Dear Wiki user, You have subscribed to a wiki page or wiki category on "Lenya Wiki" for change notification.
The following page has been changed by JörnNettingsmeier: http://wiki.apache.org/lenya/GenericEditorAPI ------------------------------------------------------------------------------ - Status: '''DRAFT''' + Status: '''DRAFT''' This page describes the Lenya editor API as it slowly evolves into shape. - It might eventually contain all the information you need to make an editor of your choice work with Lenya. Currently, it is incomplete. Use the source, Luke: [http://svn.apache.org/viewvc/lenya/trunk/src/modules/editors/resources/javascript/org.apache.lenya.editors.js?view=markup org.apache.lenya.editors.js] + It might eventually contain all the information you need to make an editor of your choice work with Lenya. Currently, it is incomplete, since it omits the Java usecase handler side of things. - Note: this currently deals exclusively with client-side javascript. The next step is to create a generic JAVA usecase handler class and try to use that for all editors. == Quick start: how to make your editor work with Lenya == - 1. Create a module named after your editor (FIXME: Link to Andreas' presentation). + 1. Create a module named after your editor (check our [http://lenya.apache.org/docs/2_0_x/reference/modules/index.html modules documentation]). 1. Create a Java usecase handler, either by - 1. stealing the code from the editors module, putting it in $YOURMODULE/java and applying necessary changes. ''(current practice, BAD!)'' + 1. stealing the code from the editors module, putting it in $YOURMODULE/java and applying necessary changes ''(current practice, BAD!)'', or - 1. using it as it is (then you don't need to copy it). ''(good practice, not widely used - if you feel the existing stuff is not versatile enough, abstract your needs and put them upstream!)'' + 1. using it as it is (then you don't need to copy it) ''(good practice, not widely used - if you feel the existing stuff is not versatile enough, abstract your needs and put them upstream!)''. (FIXME: is the code from the editors module the best one we have?) + + For inspiration, read our [http://lenya.apache.org/docs/2_0_x/reference/usecase-framework/index.html usecase documentation]. - 1. Create a usecase view: either steal it from the One-Form-Editor (JXTemplate-based, for an out-of-context form: [http://svn.apache.org/viewvc/lenya/trunk/src/modules/editors/usecases/forms/oneform.jx?view=markup oneform.jx]), or follow the TinyMCE approach for an in-place WYSIWYG editor (pipeline-based, check out the sitemap ({{{<match pattern="tinymce.edit">}}})and the XSLT!). + 1. Create a usecase view: either steal it from the One-Form-Editor (JXTemplate-based, for an out-of-context form: [http://svn.apache.org/viewvc/lenya/trunk/src/modules/editors/usecases/forms/oneform.jx?view=markup oneform.jx]), or follow the TinyMCE approach for an in-place WYSIWYG editor (pipeline-based, check out the sitemap ({{{<match pattern="tinymce.edit">}}}) and the XSLT! See below under [#WYSIWYG]). (FIXME: this needs better documentation!) 1. Register your editor usecase by writing an xpatch file in {{{$YOURMODULE/config/cocoon-xconf/usecase-edit.xconf}}}: {{{ @@ -28, +29 @@ <view uri="cocoon://modules/$YOURMODULE/$YOURMODULE.edit" menu="false"/> <!-- but not both :-D --> </component-instance> - </xconf> + </xconf>}}} - }}} - - 1. Make sure that your view adds the following javascript snippets: + 1.#5 Make sure that your view adds the following javascript snippets: {{{ <script type="text/javascript" src="/modules/editors/javascript/org.apache.lenya.editors.js"/> - <script type="text/javascript" src="/modules/$YOURMODULE/javascript/youreditor_lenya_glue.js"/> + <script type="text/javascript" src="/modules/$YOURMODULE/javascript/youreditor_lenya_glue.js"/>}}} - }}} The first is the "API" file that defines the interaction between the usecase and your editor window, and it contains some utility functions you can (should) use for your window management (see [http://svn.apache.org/viewvc/lenya/trunk/src/modules/editors/resources/javascript/org.apache.lenya.editors.js?view=markup org.apache.lenya.editors.js]). The second is a file where you place all lenya-specific javascript code. - 1. Create some hooks in your editor: + 1.#6 Create some hooks in your editor: 1. "Insert Lenya Link", 1. "Insert Lenya Image", and 1. "Insert Lenya Asset", @@ -105, +103 @@ + == Using server-side validation == - == Contract between generic editor usecases (editors.insertImage, editors.insertLink) and editor-specific modules == - - === Requirements: === - - * the implementation must be completely editor-agnostic - * some editors have very good link/image editing facilities (to set title, class, target, size etc.), others are very rustic. the generic usecases should be able to provide all those features, but they must be switchable in case an editor wants to use its own facilities. - * the API must be really slick :) - - === Design: === - Idea: provide the new usecase window with a linkData/imageData object containing default settings (see below), and only display form fields for attributes with value !== undefined in linkData/imageData. - The linkData/imageData object lives in the original editor window and is accessed via a callback using the {{{window.opener}}} property, which allows a child window to call into code provided by the parent. - - === API === - - Each editor module can access and use the generic insertImage and insertLink implementations in the editors module. The most common way to do that is to use a javascript window.open call to create a separate window for the usecase: - {{{ - <img src="linkbutton.gif" onclick="window.open('?lenya.usecase=editors.insertLink)" /><br /> - <img src="imagebutton.gif" onclick="window.open('?lenya.usecase=editors.insertImage)" /><br /> - }}} - - The following data structure is used for data exchange between the editor and the generic usecases: - {{{ - org.apache.lenya.editors.ObjectData = function() { - this.url : "", // href for links, src for assets and images - this.title : "", // xhtml title attribute - this.text : "", // element content for links and assets, alt text for images - this.width : "", // width for images - this.height : "", // height for images - this.type : "" // MIME Type for images and assets, "link" for links. - } - - var myObjectData = new org.apache.lenya.editors.ObjectData(); - }}} - - - Each editor module that wishes to use the generic usecase implementations '''must''' provide the respective callbacks in the context of the opening window: - - {{{ - function org.apache.lenya.editors.getObjectData() { - return <some org.apache.lenya.editors.ObjectData object>; - }; - - function org.apache.lenya.editors.setObjectData(objectData) {}; - }}} - - - == Contract between validation on the server and editor modules == === Requirements: === @@ -160, +112 @@ This implies that the transmission of the document data and the receiving of result messages should happen via AJAX. thus it's a task for well after 2.0 is out. + FIXME! == Writing a usecase handler for your editor == - writeme! + FIXME! - == WYSIWYG == + == Spiffing things up with AJAX == + + FIXME! + + [[Anchor(WYSIWYG)]] + == Writing in-place true WYSIWYG editors == If you're keen to provide true WYSIWYG editing, you must delegate the rendering of the page to the publication sitemap, since your editor module cannot know about the correct rendering. This can be accomplished by mounting the publication sitemap into the editor sitemap. --------------------------------------------------------------------- To unsubscribe, e-mail: [EMAIL PROTECTED] For additional commands, e-mail: [EMAIL PROTECTED]
