https://docs.brightspot.com/assets/js/b0dae7e8.e5d2d8aa.js

1"use strict";(self.webpackChunktemp=self.webpackChunktemp||[]).push([["11352"],{722704:function(e,n,t){t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>p,frontMatter:()=>d,metadata:()=>i,toc:()=>a});var i=t(200386),o=t(785893),s=t(250065);let d={brightspotPermalink:"/brightspot-cms-developer-guide/latest/headless",brightspotId:"0000017d-718d-dc6e-a17f-719d9e7d0000",slug:"/headless"},r="Headless",l={},a=[{value:"Model",id:"model",level:2},{value:"View Model",id:"view-model",level:2}];function c(e){let n={a:"a",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",ul:"ul",...(0,s.a)(),...e.components},{Code:t}=n;return t||function(e,n){throw Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Code",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"headless",children:"Headless"})}),"\n",(0,o.jsx)(n.p,{children:"In a headless Brightspot implementation, the view system delivers content via a JSON API to a consuming application; that application processes and transforms the content using its own logic. In headless Brightspot implementations, two scenarios are common:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"Delivering APIs to mobile applications"}),"\n",(0,o.jsxs)(n.li,{children:["Delivering APIs to JavaScript frameworks (",(0,o.jsx)(n.a,{href:"https://reactjs.org/",children:"React"}),", ",(0,o.jsx)(n.a,{href:"https://angular.io/",children:"Angular"}),", or others)"]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"Producing your JSON API requires two steps:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsx)(n.li,{children:"Create a model"}),"\n",(0,o.jsx)(n.li,{children:"Create a view model"}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"The following sections provide examples for each of those steps."}),"\n",(0,o.jsx)(n.h2,{id:"model",children:"Model"}),"\n",(0,o.jsx)(n.p,{children:"The following snippet is a basic model for an article."}),"\n",(0,o.jsx)(t,{codeblock:{value:"import com.psddev.cms.db.Content;\nimport com.psddev.dari.db.Recordable;\n\npublic class Article extends Content {\n\n    private String headline;\n\n    private String body;\n\n    public String getHeadline() {\n        return headline;\n    }\n\n    public void setHeadline(String headline) {\n        this.headline = headline;\n    }\n\n    public String getBody() {\n        return body;\n    }\n\n    public void setBody(String body) {\n        this.body = body;\n    }\n}",lang:"java",meta:"",code:"import com.psddev.cms.db.Content;\nimport com.psddev.dari.db.Recordable;\n\npublic class Article extends Content {\n\n    private String headline;\n\n    private String body;\n\n    public String getHeadline() {\n        return headline;\n    }\n\n    public void setHeadline(String headline) {\n        this.headline = headline;\n    }\n\n    public String getBody() {\n        return body;\n    }\n\n    public void setBody(String body) {\n        this.body = body;\n    }\n}",tokens:[["import","#CF222E"]," ",["com.psddev.cms.db.Content;","#24292F"],"\n",["import","#CF222E"]," ",["com.psddev.dari.db.Recordable;","#24292F"],"\n\n",["public class","#CF222E"]," ",["Article","#953800"]," ",["extends","#CF222E"]," ",["Content","#0550AE"]," ",["{","#24292F"],"\n\n    ",["private","#CF222E"]," ",["String headline;","#24292F"],"\n\n    ",["private","#CF222E"]," ",["String body;","#24292F"],"\n\n    ",["public","#CF222E"]," ",["String","#24292F"]," ",["getHeadline","#8250DF"],["() {","#24292F"],"\n        ",["return","#CF222E"]," ",["headline;","#24292F"],"\n    ",["}","#24292F"],"\n\n    ",["public void","#CF222E"]," ",["setHeadline","#8250DF"],["(String","#24292F"]," ",["headline","#953800"],[") {","#24292F"],"\n        ",["this","#0550AE"],[".headline","#24292F"]," ",["=","#CF222E"]," ",["headline;","#24292F"],"\n    ",["}","#24292F"],"\n\n    ",["public","#CF222E"]," ",["String","#24292F"]," ",["getBody","#8250DF"],["() {","#24292F"],"\n        ",["return","#CF222E"]," ",["body;","#24292F"],"\n    ",["}","#24292F"],"\n\n    ",["public void","#CF222E"]," ",["setBody","#8250DF"],["(String","#24292F"]," ",["body","#953800"],[") {","#24292F"],"\n        ",["this","#0550AE"],[".body","#24292F"]," ",["=","#CF222E"]," ",["body;","#24292F"],"\n    ",["}","#24292F"],"\n",["}","#24292F"]],annotations:[],themeName:"github-light",style:{color:"#24292f",background:"#ffffff"}}}),"\n",(0,o.jsx)(n.h2,{id:"view-model",children:"View Model"}),"\n",(0,o.jsx)(n.p,{children:"The following snippet is a headless view model that serializes a model\u2019s data into JSON format."}

1),"\n",(0,o.jsx)(t,{codeblock:{value:"import com.psddev.cms.view.JsonView;\nimport com.psddev.cms.view.PageEntryView;\nimport com.psddev.cms.view.ViewInterface;\nimport com.psddev.cms.view.ViewModel;\n\n// !ref Indicates output format for this view model is a JSON representation.\n@JsonView\n@ViewInterface\n// !ref Indicates the source model is Article.\npublic class ArticleViewModel extends ViewModel<Article> implements PageEntryView {\n\n    public String getBody() {\n        return model.getBody();\n    }\n\n    public String getHeadline() {\n        return model.getHeadline();\n    }\n}",lang:"java",meta:"",code:"import com.psddev.cms.view.JsonView;\nimport com.psddev.cms.view.PageEntryView;\nimport com.psddev.cms.view.ViewInterface;\nimport com.psddev.cms.view.ViewModel;\n\n@JsonView\n@ViewInterface\npublic class ArticleViewModel extends ViewModel<Article> implements PageEntryView {\n\n    public String getBody() {\n        return model.getBody();\n    }\n\n    public String getHeadline() {\n        return model.getHeadline();\n    }\n}",tokens:[["import","#CF222E"]," ",["com.psddev.cms.view.JsonView;","#24292F"],"\n",["import","#CF222E"]," ",["com.psddev.cms.view.PageEntryView;","#24292F"],"\n",["import","#CF222E"]," ",["com.psddev.cms.view.ViewInterface;","#24292F"],"\n",["import","#CF222E"]," ",["com.psddev.cms.view.ViewModel;","#24292F"],"\n\n",["@","#24292F"],["JsonView","#CF222E"],"\n",["@","#24292F"],["ViewInterface","#CF222E"],"\n",["public class","#CF222E"]," ",["ArticleViewModel","#953800"]," ",["extends","#CF222E"]," ",["ViewModel","#0550AE"],["<","#24292F"],["Article","#CF222E"],[">","#24292F"]," ",["implements","#CF222E"]," ",["PageEntryView","#0550AE"]," ",["{","#24292F"],"\n\n    ",["public","#CF222E"]," ",["String","#24292F"]," ",["getBody","#8250DF"],["() {","#24292F"],"\n        ",["return","#CF222E"]," ",["model.","#24292F"],["getBody","#8250DF"],["();","#24292F"],"\n    ",["}","#24292F"],"\n\n    ",["public","#CF222E"]," ",["String","#24292F"]," ",["getHeadline","#8250DF"],["() {","#24292F"],"\n        ",["return","#CF222E"]," ",["model.","#24292F"],["getHeadline","#8250DF"],["();","#24292F"],"\n    ",["}","#24292F"],"\n",["}","#24292F"]],annotations:[{name:"ref",query:"Indicates output format for this view model is a JSON representation.",fromLineNumber:6,toLineNumber:6},{name:"ref",query:"Indicates the source model is Article.",fromLineNumber:8,toLineNumber:8}],themeName:"github-light",style:{color:"#24292f",background:"#ffffff"}}}),"\n",(0,o.jsx)(n.p,{children:"At run time, Brightspot manages the interaction between the model and view model to produce the JSON file containing field names and associated values."}),"\n",(0,o.jsx)(t,{codeblock:{value:'{\n  "headline" : "JSON Example",\n  "body" : "Brightspot automatically produces JSON from the view model."\n}',lang:"json",meta:"",code:'{\n  "headline" : "JSON Example",\n  "body" : "Brightspot automatically produces JSON from the view model."\n}',tokens:[["{","#24292F"],"\n  ",['"headline"',"#116329"]," ",[":","#24292F"]," ",['"JSON Example"',"#0A3069"],[",","#24292F"],"\n  ",['"body"',"#116329"]," ",[":","#24292F"]," ",['"Brightspot automatically produces JSON from the view model."',"#0A3069"],"\n",["}","#24292F"]],annotations:[],themeName:"github-light",style:{color:"#24292f",background:"#ffffff"}}}),"\n",(0,o.jsx)(n.p,{children:"The consuming application has the responsibility of processing the JSON output for downstream purposes."})]})}function p(e={}){let{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},250065:function(e,n,t){t.d(n,{Z:()=>r,a:()=>d});var i=t(667294);let o={},s=i.createContext(o);function d(e){let n=i.useContext(s);return i.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:d(e.components),i.createElement(s.Provider,{value:n},e.children)}},200386:function(e){e.exports=JSON.parse('{"id":"developer-guide/view-system/headless","title":"Headless","description":"In a headless Brightspot implementation, the view system delivers content via a JSON API to a consuming application; that application processes and transforms the content using its own logic. In headless Brightspot implementations, two scenarios are common:","source":"@site/bundle/public/docs/developer/default/developer-guide/view-system/headless.md","sourceDirName":"developer-guide/view-system","slug":"/headless","permalink":"/docs/developer/headless","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"brightspotPermalink":"/brightspot-cms-developer-guide/latest/headless","brightspotId":"0000017d-718d-dc6e-a17f-719d9e7d0000","slug":"/headless"},"sidebar":"developer","previous":{"title":"Traditional","permalink":"/docs/developer/traditional"},"next":{"title":"View models","permalink":"/docs/developer/view-models"}}')}}]);