Creating a View Model and View (Java)

To render a new HTML element in your Web site, create a corresponding MVC View Model and View. A View Model is a simple class to represent the content you want to display and the View defines the HTML layout of this content

Procedure

  1. Create the View Model:

    A View Model is a simple class to represent the content you want to display. The class has strongly typed properties to enable you to easily refer to them in your View.

    Create a class SpecialOffer, for example:
    package com.sdl.webapp.common.api.model.entity;
    
    import org.joda.time.DateTime;
    import java.util.List;
    
    public class SpecialOfferModel extends AbstractEntityModel {
    
       
        private String headline;
        private Image image; 
        private DateTime expireDate;
        private String link;
        private String description;
    
        public String getHeadline() {
            return headline;
        }
    
        public void setHeadline(String headline) {
            this.headline = headline;
        }
    
        public Image getImage() {
            return image;
        }
    
        public void setImage(Image image) {
            this.image = image;
        }
    
        public DateTime getExpireDate() {
            return date;
        }
    
        public void setDate(DateTime expireDate) {
            this.expireDate = expireDate;
        }
    
        public String getDescription() {
            return description;
        }
    
        public void setDescription(String description) {
            this.description = description;
        }
    
        public String getLink() {
            return link;
        }
    
        public void setLink(String link) {
            this.link = link;
        }
    }
    
  2. Creating the View:

    Define a View to render the View Model. Create a view SpecialOffer.jsp in an Entity subfolder of the Views folder.

    Sample view:
    <jsp:useBean id="entity" type=" Example.Models.SpecialOffer" scope="request"/>
    
    <div class="container-fluid ${entity.htmlClasses}" ${markup.entity(entity)}
    
        <div id="location-tile" class="row">
            <c:if test="${not empty entity.image}">
                <div class="col-sm-6" ${markup.property(entity, "image")}>
                     <dxa:media media="${entity.image}" aspect="3.3"/>
                </div>
            </c:if>
    
            <div class="col-sm-6">
                <div class="tile">
                    <h1 ${markup.property(entity, "headline")}> ${ entity.headline }</h1>
                    <p ${markup.property(entity, "description")}> ${ entity.description }</p>
                    <a href=”${ entity.link }" class="btn btn-primary" ${markup.property(entity, "link")}>More info</a>
                    <br />
                    <p class="meta small">Valid until <span ${markup.property(entity, "headline")}> ${markup.formatDate(entity.date)}</span></p>
                </div>
            </div>
        </div>
    </div>
    
  3. Add Semantics to the View and the View Model:

    You need to add semantics to your rendered output. Semantics enable Editors to edit the content inline in Experience Manager and make the content understandable by search engines when they index your content.

    JSP View with Semantics
    package com.sdl.webapp.common.api.model.entity;
    
    import org.joda.time.DateTime;
    import java.util.List;
    
    @SemanticEntity(entityName = "SpecialOffer", vocabulary = SCHEMA_ORG, prefix = "s", public_ = true)
    public class SpecialOffer extends AbstractEntityModel {
    
       
        @SemanticProperty("s:headline")    
        private String headline;
    
        @SemanticProperty("s:image")  
        private Image image; 
    
        @SemanticProperty("s:validThrough")
        private DateTime expireDate;
    
        @SemanticProperty("s:url")
        private String link;
    
        @SemanticProperty("s:description")
        private String description;
    
        public String getHeadline() {
            return headline;
        }
    
        public void setHeadline(String headline) {
            this.headline = headline;
        }
    
        public Image getImage() {
            return image;
        }
    
        public void setImage(Image image) {
            this.image = image;
        }
    
        public DateTime getExpireDate() {
            return date;
        }
    
        public void setDate(DateTime expireDate) {
            this.expireDate = expireDate;
        }
    
        public String getDescription() {
            return description;
        }
    
        public void setDescription(String description) {
            this.description = description;
        }
    
        public String getLink() {
            return link;
        }
    
        public void setLink(String link) {
            this.link = link;
        }
    }