Latest Posts

Archives [+]

Entries by Alexander Saar

    Posted by Alexander Saar AUG 16, 2010

    Comments 2

    CRXDE Lite is a web-based repository browser for CRX's JCR repository and a development environment for CQ5 Platform in CRX, based on Apache Sling content delivery and development platform and Apache Felix OSGi runtime framework.

    In contrast to the CRX 1.x Content Explorer, which maintains a server-side CRX session, CRXDE Lite handles all modifications directly within the browser and uses the JCR remoting interface to retrieve content and persist changes.

    This article looks behind the scenes of how this rich set of functionalities was implemented in the browser. CRXDE Lite functionality and tips&tricks for using it were presented in the previous blog entry on CRXDE Lite.

    CRXDE Lite Design Goal. The most important design goal for CRXDE Lite was providing rich functionality with a near-desktop experience in a web application. There were three main architectural decisions we had to make while designing CRXDE Lite:

    • Which web Javascript framework to use for the user interface?
    • Where to host the CRXDE Lite web application?
    • How to implement remote access to JCR repository & server-side features from the browser user interface code?

    For the user interface framework the natural choice was the ExtJs library, which provides good user experience and is used in CQ5 Platform hosted in CRX. It also has a good internal architecture, separating the underlying model from the view.

    For the deployment model, we decided to host the CRXDE Lite application in CRX's web application. It minimizes the dependencies on other parts of the system, like OSGi container & Apache Sling content delivery platform. CRXDE Lite is available also when Apache Sling does not run, which helps in cases of system troubleshooting, recovery, etc.

    Transient space architecture. We were considering a number of approaches of providing remote interface to the JCR repository to the in-browser implementation of the user interface. In the end we decided to leverage CRX's JCR Remoting Server based on Jackrabbit JCR WebDAV Server, which provides an end-point for remotely accessing the repository. The JCR remoting protocol, extending WebDAV and adding DAVEx batch operations, is used as one of the possible remoting layers in the overall Apache Jackrabbit client-server SPI Architecture, upon which CRX is built. As the protocol is based on HTTP and uses JSON format, it is a good match for the user interface code written in browser's Javascript.

    The only, somewhat challenging, thing left to do was to implement a JCR remoting client on the browser side. We implemented a simplified JCR transient state layer (client code) in Javascript, leveraging ExtJS model classes.

    file

    ExtJS provides a good separation of model and view. In ExtJs, list-style content, like properties of a node, is stored in records which are maintained by so-called stores. Stores are responsible for retrieving and persisting the content and defines the serialization format and the server endpoint. For tree-style data, like JCR nodes, ExtJS defines a tree node type that handles the common properties of a node like display text, parent node or child nodes. When a tree node is assigned to a tree the rendering of that node is delegated to a separate configurable view class. Retrieval of data is managed by an instance of the tree loader class.

    For CRXDE Lite we make use of both, JCR nodes are represented as tree nodes and properties of a node are handled as records. To integrate with the JCR remoting server endpoint a custom tree loader was implemented that is able to deal with the JSON format that is used by JCR remoting and which creates nodes and records for the properties of a node.

    The records for properties can be displayed and edited in the property grid at the bottom. Once a record was edited it automatically gets marked dirty so we can easily find modified records when we want to persist our changes.

    Handling content changes. If a new node is created, it gets marked as transient and gets added to a list of transient nodes that is maintained by the store. Like with dirty records this allows for easy finding of new nodes in order to persist them. Deleting a node that is already persisted does not remove it automatically from the tree but just hides the according node and all its children. This allows to easily revert such changes by just displaying it again. We don't need to keep the path somewhere. If changes are persisted those nodes are deleted on the server first and only if this was successful they are deleted locally.

    When the changes that a user has made should be persisted, the transient storage generates a multi-part message body that is send via an AJAX call. Once all changes are persisted and the call returns successfully all dirty flags are removed from the according records, the list of transient nodes gets cleared and deleted nodes are removed from the tree.

    Note: The current version of CRXDE Lite persists all changes since the last save operation at once, which is similar to saving the changes made in a CRX Session. Future version might support more fine grained support for saving so you can just save single files like with a Desktop based IDE. While this is technically possible with JCR remoting, it will require some more research on display models and user feedback. Imagine you want to save a file whose parent is a transient node and not stored in the repository yet. In this case you either need to persist the parent automatically or prevent saving only that file in which case we need some means to find the parent that can be saved.

    Plugins. CRXDE Lite architecture is internally based on a plugin concept. The plugin architecture helped us to develop and maintain CRXDE Lite code in a clean, modular manner.

    Plugins are plain Javascript files that are loaded during CRXDE Lite loading phase. The implementor of a plugin is responsible for registering the plugin with the statically available plugin registry. This can be done by calling the following method:

    CRX.PluginRegistry.reg(ID, CRX.ide.MyAction);

    The first parameter has to be the ID of the widget that will be extended (e.g., the ID of a menu or toolbar) and the second will be the plugin class.

    Each plugin has to provide 2 static methods:

     

    • canHandle(context): check if plugin is active for the current context (e.g., menu item active for selected node
    • getInstance(context, args): return instance of the plugin

    Note: CRXDE Lite Plugin API is not yet a supported CRXDE Lite feature as of CRX 2.1 and is only used internally by the implementation. It may change or be removed in the next versions.

    At the moment plugins are not loaded from the repository but have to reside in the web-apps working directory and added to the index.jsp manually. One of the possible extensions in the future future would be to allow loading of the plugins directly from the repository so you could modify and adapt CRXDE Lite according to your needs.

    Posted by Alexander Saar JUL 22, 2010

    Comments 3

    Since version 2.0 CRX comes with CRXDE Lite (CRX Development Environment - Lite), a web based tool to ease the development of CRX based applications. CRXDE Lite is implemented using the ExtJS Javascript library and aims to replace the CRX 1.x Content Explorer with a modern AJAX-based repository editor and browser, but it also provides improved means for searching, code editing and integrations for code version management and handling of non-scripted code. As a tool primarily for developers, it also comes with server side development functionalities like compilation of Java code, OSGi bundle creation and autodeployment, project wizard, etc.

    file

    You can access CRXDE Lite by clicking the "Develop" button on the CRX Welcome screen, or by entering the http://localhost:7402/crx/de/ URL in your browser (assuming the default installation).

    This article gives an overview of the features that are provided
    by CRXDE Lite.

    Editing

    CRXDE Lite provides all the basic features for node and property editing that were already available in CRX Explorer. In addition it provides in-place editing for files stored in the repository like CSS, Javascript, HTML, or Java and JSP files. For file editing we integrated Christophe Dolivet's EditArea, a fully web-based code editor that comes with a pluggable model for syntax highlighting. Future versions of CRXDE Lite may also support other (HTML5) editors since it comes with a plugin model that allows to hook in other functionality like editors.

    file

    Hint: A hidden feature that comes in handy when editing large files is the maximize edit area function. As you may have noticed the panels that contain the property list and repository tree can be collapsed to get more display space for the editor. You also can (un-)collapse both by just double clicking the title of the editor tab.

    Searching

    CRXDE Lite provides many ways to search and find content.

    Path search. The most obvious is the path search field at the top. Some may already know this from CQ. It provides selection of a node based on its path as well as autocompletion. You can also just enter the name of a node (e.g., html.jsp) and it will show you a list of all nodes with this name. Upon selection the path of this node is inserted into the field so you can go directly to that node by hitting Enter.

    file

    While name and path search is very valuable if you know the structure of your content, sometimes you are looking for things you don't have any idea where they could be located in the repository. Examples for this are uses of a class in code files or places where a certain Apache Sling resource type is used. There are two features provided for such cases.

    Full-text search on Home screen. It not only provides plain full text search but also has full support for the Jackrabbit GQL (Google Query Language) implementation which allows you to restrict searches to a path or node type.

    Using GQL on the CRXDE Lite Home screen it is trivial, e.g., to find all content, which has a given Sling resource type (and will be rendered by the specified component). Example:

    "sling:resourceType":bookstore/components/product

    will find all pieces of content, which will be rendered using the bookstore/components/product component. You might want to try this query out after you have installed our Bookstore sample application.

    file

    Query Editor. Another way for advanced content search is the query editor. This is similar to the query feature in CRX Explorer and can be used to find content or to test function and performance of queries that you plan to use in your application. In contrast to CRX explorer you can open multiple query editors and compare or re-run queries for optimization. If you want to just test the performance of a query with large content sets you can uncheck the "Display Results" checkbox, which will prevent all hits from being rendered but only display the size of the result set. If you choose to display all hits a double click on a hit will select the related node in the content tree.

    Tree Filter. Last but not least a tree filter is provided that allows to filter the content tree that comes with CRXDE Lite. This is useful not only to find content when you know the name of a node but also to reduce the number of nodes that are displayed in the tree.

    Note that the tree filter will only show the content, that has been already loaded (visited) in the tree browser in the current user session, so it's a quick, convenience feature to filter out certain JCR nodes you've been working with recently.

    file

    Code and Packages

    To become a full CRX IDE that provides all integrations for the compilation and bundle generation, these features were released with the latest version of CRX. With this you can create and build OSGI bundles or just compile Java classes that are stored directly in your repository. All classes that are exported by the bundles installed into the CRX OSGi runtime are available for your code and scripts.

    In addition CRXDE Lite also provides full integration for the new CRX SVN integration feature which allows you to checkout content directly from SVN into your CRX instance, modify it and commit the changes.

    The current version of CRX ships with a new and improved package manager. One interesting thing to mention is that if you install or preview package content, the list of content in the Activity Log contains links to directly open that content in CRXDE Lite. You can navigate to the given piece of content by clicking the link.

    file

    What's next?

    In one of the next articles in the CRX Gems series I'll write about the internal architecture of CRXDE Lite.