loading table of contents...

4.3.4. Developing with Studio

New Studio modules can be added to the project using the Blueprint extensions mechanism or by adding them as child modules to the studio-plugins module. This section describes how to add a new Studio module to the list of studio-plugins. Adding a new Studio module as an extension works the same way but requires additional Maven configurations.

Maven Configuration

First, add the new plugin to the modules section of the studio-plugins pom.xml file:

<modules>
  <module>taxonomy-studio-plugin</module>
  <module>pagegrid-studio-plugin</module>
  <module>contentchooser-studio-plugin</module>
  <module>dynamic-content-query-studio-plugin</module>
  <module>struct-editor-studio-plugin</module>

  <!-- add module -->
  <module>sample-studio-plugin</module>
</modules<
    

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-plugins</artifactId>
    <version>8-SNAPSHOT</version>
    <relativePath>../pom.xml</relativePath>
  </parent>

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

  <description>Sample Studio 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>
    <sourceDirectory>src/main/joo</sourceDirectory>
    <resources>
      <resource>
        <directory>src/main/resources</directory>
        <filtering>true</filtering>
        <includes>
          <include>META-INF/resources/joo/${project.artifactId}.module.js</include>
        </includes>
      </resource>
      <resource>
        <directory>src/main/resources</directory>
        <filtering>false</filtering>
        <excludes>
          <exclude>META-INF/resources/joo/${project.artifactId}.module.js</exclude>
        </excludes>
      </resource>
      <resource>
        <directory>target/generated-resources</directory>
      </resource>
    </resources>

    <plugins>
      <plugin>
        <groupId>net.jangaroo</groupId>
        <artifactId>jangaroo-maven-plugin</artifactId>
        <extensions>false</extensions>
        <executions>
          <execution>
            <goals>
              <goal>properties</goal>
            </goals>
            <configuration>
              <resourceDirectory>src/main/joo</resourceDirectory>
            </configuration>
          </execution>
        </executions>
      </plugin>

      <plugin>
        <groupId>net.jangaroo</groupId>
        <artifactId>exml-maven-plugin</artifactId>
        <version>${jangaroo.version}</version>
        <extensions>true</extensions>
        <configuration>
          <configClassPackage>com.coremedia.blueprint.studio.config.contentchooser</configClassPackage>
        </configuration>
      </plugin>
    </plugins>
  </build>

</project>

Example 4.34. POM file of a new Studio module


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

Your IDE should display the new plugin as a successfully linked Maven module. Now the module must be added as a dependency to the Studio web application. Open the pom.xml of the studio-webapp module and add 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:

The new sample studio plugin

Figure 4.4. The new sample studio plugin


Source Files and Folders

A Studio module contains at least two files: the plugin descriptor file located in the resource folder (sample-studio-plugin.module.js) of the module and the initializing plugin class (SampleStudioPlugin.as).

[Caution]Caution

Ensure that the name prefix of the plugin descriptor matches the name of the Maven module.

The sample studio plugin with plugin class and descriptor

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


Add the class to the corresponding package, created in the subfolder src/main/joo. You can use the IDEA context menu to apply the newly created joo folder as the source path. It shows the formatted package name of the class afterwards. Create an additional source path resources next to the joo folder and create the subfolders META-INF/resources/joo. Create the file sample-studio-plugin.module.js afterwards.

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 {
  }

}
}

The plugin descriptor class is read when the Studio's web page is invoked. It contains the class name of the plugin class and can declare additional CSS files or other resources required for the plugin.

joo.loadModule("${project.groupId}", "${project.artifactId}");
coremediaEditorPlugins.push({
name:"Sample Plug-in",
mainClass:"com.coremedia.blueprint.studio.sample.SampleStudioPlugin"
});

The object pushed onto the array coremediaEditorPlugins 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.

When set up correctly, your project structure should compile successfully.

[Note]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 supplies unit testing of ActionScript classes inside the Studio modules. Please refer to Jangaroo Tools Wiki, chapter "Unit Testing". The tests can be triggered by following applicable conditions:

  • By stating the Maven profile "joo-unit-tests" explicitly

  • By stating the property phantomjs.bin with suitable value leading to the phantomjs bin path

  • phantomJS is located in /usr/local/bin/phantomjs on Linux/Unix OS

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:jetty-run-tests

within the appropriate module and open the URL listed below with the browser.