Support and Documentation

Some models wrap models which themselves wrap models. For example, an article can contain two types of image models, one a closeup and another a panorama. Each of those models wraps an image model that is comprised of the raw image and a caption. For the article to access the image—

Brightspot provides a convenience function unwrap that saves the second step. Placing unwrap in the intermediate model allows access to the image directly.

Referring to the previous illustration—

The following example describes how to implement unwrap as envisioned in the previous illustration.

Step 1: Implement low-level model

package content.article;

import com.psddev.cms.db.Content;
import com.psddev.dari.util.StorageItem;

public class Image extends Content  {

    private StorageItem rawImage;

    private String caption;

    /* Getters and setters */

}

Step 2: Implement intermediate-level models

 /* The Model for CloseUp */
 package content.article;

 public class CloseUp extends ImageOption {

     @Embedded
     private Image image;

     public Image getImage() {
         return image;
     }

     public void setImage(Image image) {
         this.image = image;
     }

     @Override
     public Object unwrap() {
         return getImage();
     }
 }

 /* The Model for Panorama */
 package content.article;

 public class Panorama extends ImageOption {

     private Image image;

     public Image getImage() {
         return image;
     }

     public void setImage(Image image) {
         this.image = image;
     }

     @Override
     public Object unwrap() {
         return getImage();
     }

 }

In the previous snippet, lines 17–20 and 38–41 implement the unwrap method. When accessing CloseUp or Panorama, a parent model can immediately access the lower-level Image.

Step 3: Implement abstract model

package content.article;

import com.psddev.cms.db.Content;
import com.psddev.cms.view.ModelWrapper;
import com.psddev.dari.db.Recordable;

@Recordable.Embedded
public abstract class ImageOption extends Content implements ModelWrapper, Directory.Item {

}

The above snippet is an abstract marker class. Any of its concrete subclasses become available to its enclosing class.

Step 4: Implement top-level model

 package content.article;

 import com.psddev.cms.db.Content;

 public class Article extends Content implements Page, ImageOption {

     private ImageOption imageOption;

     public ImageOption getImageOption() {
         return imageOption;
     }

 }

In the previous snippet, line 7 declares the imageOption field. Because ImageOption is an abstract class, any concrete subclass becomes an option for Image Option in the content edit form.

Step 5: Implement low-level template

This file is saved as Image.hbs.

<div>
    <img src="{{imageSrc}}">
</div>
<div>
    {{caption}}
</div>

Step 6: Implement low-level data file

This file is saved as Image.json.

 {
     "_template": "Image.hbs",
     "imageSrc": "http://url/to/any/image.jpg",
     "caption": "Static caption"
 }

In the previous snippet, line 2 provides the link between the image's view and the template file.

Step 7: Implement low-level view model

 package content.article;

 import com.psddev.cms.db.ImageTag;
 import com.psddev.cms.view.ViewModel;
 import styleguide.content.article.ImageView;

 public class ImageViewModel extends ViewModel<Image> implements ImageView {

     public String getImageSrc() {
         return new ImageTag.Builder(model.getRawImage()).toUrl();
     }

     public String getCaption() {
         return model.getCaption();
     }

 }

The previous snippet provides the data for the embedded image's view. Line 10 retrieves the URL, and line 14 retrieves the caption.

Because of the implementation of unwrap, there is no need to create a view model for the intermediate-level CloseUp or Panorama.

By default, Brightspot's rich-text editors store escaped HTML tags. For example, rich-text editors store <b>bold text</b>&lt;/b&gt; as <b>bold text</b>. To ensure unescaped HTML tags appear in your rendered pages, you need to use the RichTextViewBuilder.buildHtml method. The following example shows how to implement a rich-text editor and render its output.

Step 1: Render string field as rich-text editor

 package content.article;

 import com.psddev.cms.db.Content;
 import com.psddev.cms.db.ToolUi;


 public class Article extends Content implements Page {

     @ToolUi.RichText
     private String body;

     public String getBody() {
         return body;
     }

     public void setBody(String body) {
         this.body = body;
     }
 }

In the previous snippet, the annotation in line 9 renders the body field as a rich-text editor. For detailed information about customizing the appearance and functionality of the rich-text editor, see Rich text.

For additional information about this annotation, see @ToolUi.RichText.

Step 2: Implement templates

The following file is saved as Article.hbs.

<div>
    {{headline}}
    {{body}}
</div>

The following file is saved as Article.json.

{
    "_template": "Article.hbs",
    "headline": "This is a placeholder for the headline",
    "body": "This is a placeholder for rich text"
}

Step 3: Implement view model

 package content.article;

 import com.psddev.cms.rte.RichTextViewBuilder;
 import com.psddev.cms.view.ViewModel;
 import styleguide.content.article.ArticleView;

 public class ArticleViewModel extends ViewModel<Article> implements ArticleView {

     @Override
     public CharSequence getBody() {
         return RichTextViewBuilder.buildHtml(model.getBody(),
                 rte -> createView(RichTextElementView.class, rte));
     }

 }

In the previous snippet—

Because the onCreate event occurs before Brightspot generates any of the view's components, you can use it to perform conditional redirects.

 package content.article;

 import com.psddev.cms.view.ViewModel;
 import com.psddev.cms.view.ViewResponse;

 public class ArticleViewModel extends ViewModel<Article> implements ArticleView {

     protected void onCreate(ViewResponse response) {
         if (somestatement == true) {
             response.redirectTemporarily("http://domain/temporary-redirect-page.html");
             throw response;
         }

     }

 }

In the previous snippet—