New CoreMedia Studio modules can be added to the project using the Blueprint extensions mechanism or by adding them as direct dependencies of the studio-base-app or studio-app module. Using the extension mechanism is the preferred way. But as it is based on the same steps of adding a module directly, this is firstly covered and the additional required steps for adding Studio modules as extensions are described at the end of the section.

Maven Configuration

First, add the new plugin module, say sample-studio-plugin, to the modules section of the apps/studio-client/modules/studio/pom.xml file.

Next, create the child folder of the new module and its pom.xml file.

<project>
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>com.coremedia.blueprint</groupId>
    <artifactId>studio-client.studio</artifactId>
    <version>1-SNAPSHOT</version>
    <relativePath>../pom.xml</relativePath>
  </parent>

  <artifactId>sample-studio-plugin</artifactId>
  <packaging>swc</packaging>

  <description>Sample Plugin for the CoreMedia Studio</description>

  <dependencies>
    <dependency>
      <groupId>com.coremedia.ui.toolkit</groupId>
      <artifactId>ui-components</artifactId>
    </dependency>

    <dependency>
      <groupId>com.coremedia.ui.sdk</groupId>
      <artifactId>editor-components</artifactId>
    </dependency>

    <dependency>
      <groupId>net.jangaroo</groupId>
      <artifactId>ext-as</artifactId>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>net.jangaroo</groupId>
        <artifactId>jangaroo-maven-plugin</artifactId>
        <extensions>true</extensions>
      </plugin>
    </plugins>
  </build>
</project>

The module contains the packaging swc which is necessary so that during the Maven build time, the module is recognized as a Studio module.

After reimporting the Maven project, IntelliJ IDEA should display the new plugin module as a Flash/Flex module (tiny letter "f" on the module node in the project tree). Now the module must be added as a dependency to the Studio application. Open the pom.xml of the studio-base-app module and add the following dependency:

<dependency>
  <groupId>${project.groupId}</groupId>
  <artifactId>sample-studio-plugin</artifactId>
  <version>${project.version}</version>
  <scope>runtime</scope>
</dependency>

Your module should have the following structure by now:

Figure 4.6. The new sample studio plugin

Source Files and Folders

A Studio plugin module contains at least two files: the plugin descriptor file located in the module root folder (package.json) and the initializing plugin class (SampleStudioPlugin.as).

The plugin class only implements the init method of the EditorPlugin interface:

package com.coremedia.blueprint.studio.sample {
    import com.coremedia.cms.editor.sdk.EditorPlugin;
    import com.coremedia.cms.editor.sdk.IEditorContext;

    public class SampleStudioPlugin implements EditorPlugin {

    public function init(editorContext:IEditorContext):void {
    }

    }
}

Add the class to the corresponding package, created in the subfolder src/main/joo. After reimporting the Maven project, IntelliJ IDEA should display the newly created joo folder in blue, indicating that it was recognized as source folder. Moreover, it should show the formatted package name of the new ActionScript class.

Figure 4.7. The sample studio plugin with plugin class and descriptor

Now it's time to create the file package.json. The plugin descriptor specified therein is read after a user logs in to the Studio web app. It contains the ActionScript class name and a user-friendly name of the Studio plugin.

{
  "studioPlugins": [
    {
      name: "Sample Plug-in",
      mainClass: "com.coremedia.blueprint.studio.sample.SampleStudioPlugin"
    }
  ]
}

Each JSON object in the studioPlugins array may use the attributes defined by the class EditorPluginDescriptor, especially name and mainClass as shown above. In addition, the name of a group may be specified using the attribute requiredGroup, restricting access to the plugin to members of that group.

Additional CSS files or other resources required for the plugin can be declared in the configuration of jangaroo-maven-plugin in the module's pom.xml.

When set up correctly, your project structure should build successfully using

mvn install -DwithoutJangarooApp

Using the withoutJangarooApp flag is recommended for development mode. Building CoreMedia Studio in "Jangaroo App" mode takes substantially longer and is only needed for deployment, not for local testing.

Note

Additional steps would be adding resource bundles and plugin rules to your plugin. For more details about this and developing Studio plugins and property editors have a look at the Studio Developer Manual.

Joo Unit Testing

The jangaroo-maven-plugin supports unit testing of ActionScript classes inside the Studio modules. Please refer to Jangaroo Tools Wiki, chapter "Unit Testing". To run the tests, you need to meet one of the following preconditions:

If none of the preconditions are met, you can still build by skipping Jangaroo unit tests by activating Maven profile skip-joo-unit-tests.

The test results are gathered in the /target/surefire-reports directory of modules containing Joo unit tests. To debug the Joo unit tests, run

mvn jangaroo:run

within the appropriate module and open the printed-out test URL with the browser.

Adding Studio Client Modules as Blueprint extensions

How to work with Blueprint extensions is described in detail in Section Section 4.1.5, “Project Extensions”. For Studio client modules there exist two extension points: studio and studio-dynamic.

The Studio client modules are packaged into apps. CoreMedia distinguishes between so-called base apps and app overlays. A base app is a Sencha ExtJs app and includes the ExtJs framework, Studio core modules and generally all modules that participate in theming. Modules of a base app are included in the Sencha Cmd build of the Sencha ExtJs app and are thus statically linked into the app. An app overlay in contrast references a base app and adds further modules to this base app. These modules are not included in the Sencha Cmd build of the Sencha ExtJs app and instead can be loaded at runtime into the app. Consequently, they are dynamically linked into the app.

The CoreMedia Blueprint features one Studio base app, namely the studio-base-app module with Maven packaging type jangaroo-app. In addition, there is one app overlay, namely the studio-app module with Maven packaging type jangaroo-app-overlay. It references the studio-base-app. If something is wrong with the overall Studio app, it is typically sufficient to just re-compile studio-base-app.

Both apps come with their own extension points. Use the extension point studio (for the studio-base-app) for new modules that do theming and the extension point studio-dynamic (for the studio-app) for modules that come without theming. Also, note that there must never be a dependency of a studio module to a studio-dynamic module.

Adding Studio Server Modules as Blueprint extensions

Additional modules for the Studio REST Service use the studio-lib extension point.