Ramandeep Singh

Published

Tue 26 April 2011

←Home

Content Management System (Tiny MCE ,Richfaces and Jersey)

// under JSF REST java

In this post i will explain on how one can easily create a Content Management System using Tiny MCE , Richfaces and Jersey. This application as a whole can then be used to serve the content dynamically and can be integrated with your site. The usage of three components is mentioned below:-

  1. Tiny MCE :- A javascript based WYSIWYG editor  for editing HTML content. This will serve as a  HTML editor for CMS system.
  2. Jersey :- This framework will provide a way to expose the content as a Restful resource. The content will also be cached for performance.
  3. RichFaces:- This JSF framework will provide us with components for uploading the file and previewing the content of the file.

I have already covered the file uploading part in the RichFaces file upload tutorial , Now that the file has been uploaded in to the database , We have to enable the previewing of the file. The file preview feature mentioned below will enable viewing of flash files, images and movies. This is actually a pretty simple preview page with the option of deleting the file contents and retrieving the stored file URL.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<f:view >
<h:form id="vup1">
.....
   <h:panelGrid columns="1" columnClasses="top,top">

              <h:panelGroup id="info">
              <rich:panel bodyClass="info">

                    <rich:dataGrid columns="2" ajaxKeys="#{viewUploadedFilesBacking.files}" value="#{viewUploadedFilesBacking.files}"
                        var="file"  rowKeyVar="row">
                      <h:selectBooleanCheckbox value="#{file.selected}"></h:selectBooleanCheckbox>
                       <rich:spacer width="2" />
                       <rich:panel bodyClass="rich-laguna-panel-no-header">
                            <h:panelGrid columns="3">
                                <a4j:mediaOutput  element="#{file.elementType}"  uriAttribute="#{file.uriAttr}" type="#{file.mime}" mimeType="#{file.mime}"
                                    createContent="#{viewUploadedFilesBacking.paint}"  value="#{row}"
                                    style="width:150px; height:150px;" cacheable="false">

                                 </a4j:mediaOutput>

                             <h:panelGrid columns="2">
                                    <h:outputText value="File type:" />
                                    <h:outputText value="#{file.mime}"/>
                                     <h:outputText value="File URL:" />
                                       <h:inputTextarea  value="#{file.fullName}" readonly="true" cols="20" rows="2" style="overflow:auto"></h:inputTextarea>
                                    <h:outputText value="File Length(Kb):" />
                                    <h:outputText  value="#{file.lengthInKb}" />
                                </h:panelGrid>
                            </h:panelGrid>
                        </rich:panel>
                    </rich:dataGrid>
                </rich:panel>
                <rich:spacer height="3"/>
                <br />

            </h:panelGroup>
        </h:panelGrid>
</h:form>
<f:view>

The code above just shows the usage of a4j:mediaoutput tag that is used to render images,flash files etc. The code mentioned below shows the backing bean that fetches the relevant information.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
//imports here
public class ViewUploadedFilesBacking implements Serializable{

 private static final long serialVersionUID = 1L;
 //List of DTO's each representing a file
 private ArrayList<FileDTO> files = new ArrayList<FileDTO>();
 //Selection option for selecting all files
    private List<SelectItem> selectOptions=new ArrayList<SelectItem>();
    private int selectedOption;


    public List<SelectItem> getSelectOptions() {
  return selectOptions;
 }

 public void setSelectOptions(List<SelectItem> selectOptions) {
  this.selectOptions = selectOptions;
 }

 public static String trimFilePath(String fileName) {
        return fileName.substring(fileName.lastIndexOf("/") +
                                  1).substring(fileName.lastIndexOf("\\") + 1);
    }

    public ViewUploadedFilesBacking() {
     displayALL();
     this.setSelectOptions(populateSelection());
       }
    public String performSelectionChange(){
     if(selectedOption==0){
            return "";
     }
     if(selectedOption==1){
      for (int i = 0; i < files.size(); i++) {
          files.get(i).setSelected(true);
      }
      return "";

            }
     else{
      for (int i = 0; i < files.size(); i++) {
          files.get(i).setSelected(false);
              }
      return "";
     }

    }



 public int getSelectedOption() {
  return selectedOption;
 }


 public void setSelectedOption(int selectedOption) {
  this.selectedOption = selectedOption;
 }

    private List<SelectItem> populateSelection() {
     List<SelectItem> tempList=new ArrayList<SelectItem>();
  SelectItem item=new SelectItem(0,"-----Select------");
  tempList.add(item);
  item=new SelectItem(1,"Select ALL");
  tempList.add(item);
  item=new SelectItem(2,"Deselect ALL");
  tempList.add(item);
  return tempList;
 }
    //

    public void paint(OutputStream stream, Object object) throws IOException {
        stream.write(getFiles().get((Integer)object).getData());
    }




   public void displayALL(){
    FileStoreDAO fdao = FileStoreDAO.getInstance();
       files=fdao.getFiles();

    }

    public String deleteData() {
      FileStoreDAO fdao = FileStoreDAO.getInstance();
      FileUtility util=FileUtility.getInstance();
      Iterator it=files.listIterator();
      int i=0;
     while(it.hasNext()) {

      FileDTO fdto=(FileDTO)it.next();
      if(fdto.getSelected()){
            fdao.removeData(ViewUploadedFilesBacking.trimFilePath(fdto.getName()));
            util.deleteFile(ViewUploadedFilesBacking.trimFilePath(fdto.getName()));
     it.remove();

      }

        }
     FacesContext context = FacesContext.getCurrentInstance();
     String viewId = context.getViewRoot().getViewId();
     ViewHandler handler = context.getApplication().getViewHandler();
     UIViewRoot root = handler.createView(context, viewId);
     root.setViewId(viewId);
     context.setViewRoot(root);

        return null;
    }

    public long getTimeStamp() {
        return System.currentTimeMillis();
    }

    public ArrayList<FileDTO> getFiles() {
        return files;
    }

    public void setFiles(ArrayList<FileDTO> files) {
        this.files = files;
    }


}

The relevant part of DAO for retrieving the file is mentioned below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//fetch records by executing prepared statement
rs=pstmt.executeQuery();
   FileDTO fdto=null;
   byte b[]=null;
   while(rs.next())
   {
    fdto=new FileDTO();
    int size=Integer.parseInt(rs.getString("file_size"));
    fdto.setLength(size);
    fdto.setLengthInKb((int)(size/1024));
    b=new byte[size];
    rs.getBinaryStream("file_data").read(b);
    fdto.setData(b);
    String contentType=rs.getString("file_type");
    fdto.setMime(contentType);
      if(contentType.contains("image")){
            fdto.setElementType("img");
            fdto.setUriAttr("src");
           }
           else if(contentType.contains("flash")){
            fdto.setElementType("object");
            fdto.setUriAttr("data");
           }
           else if(contentType.contains("javascript")){
            fdto.setElementType("script");
            fdto.setUriAttr("src");
           }
           else{
            fdto.setElementType("img");
            fdto.setUriAttr("src");
           }
ResourceBundle rb =
                ResourceBundle.getBundle("bundle location here");

 fdto.setFullName(rb.getString("context root")+"rest servlet path"+rs.getString("file_name"));
 fdto.setName(rs.getString("file_name"));
 files.add(fdto);
return files;
.....

The thing to note in the above code is the element type and URI attribute properties these will be used by the a4j media output tag to render the file such as flash, images etc. The FileDTO class is mentioned below

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
public class FileDTO {
    private String fullName;
    private String uriAttr;
    private int lengthInKb;
    private String Name;
    private String mime;
    private Boolean selected;
    private String fileName;
    private long length;
    private byte[]data;

    public  FileDTO(){

    }

    public int getLengthInKb() {
  return lengthInKb;
 }

 public void setLengthInKb(int lengthInKb) {
  this.lengthInKb = lengthInKb;
 }

 public String getUriAttr() {
  return uriAttr;
 }

 public void setUriAttr(String uriAttr) {
  this.uriAttr = uriAttr;
 }

 public String getFullName() {
  return fullName;
 }

 public void setFullName(String fullName) {
  this.fullName = fullName;
 }



    public Boolean getSelected() {
  return selected;
 }

 public void setSelected(Boolean selected) {
  this.selected = selected;
 }

 private String elementType;
 public String getElementType() {
  return elementType;
 }

 public void setElementType(String elementType) {
  this.elementType = elementType;
 }

    public String getFileName() {
  return fileName;
 }

 public void setFileName(String fileName) {
  this.fileName = fileName;
 }


    public void setData(byte []b){
     this.data=b;

    }
    public byte[] getData(){

     return data;
    }


 public void setMime(String mime) {
  this.mime = mime;
 }


    public String getName() {
        return Name;
    }
    public void setName(String name) {
        Name = name;

    }
    public long getLength() {
        return length;
    }
    public void setLength(long length) {
        this.length = length;
    }

    public String getMime(){
        return mime;
    }
}

Now that previewing and uploading is done, we can now use the uploaded files and create our own html pages on the fly and expose these pages as rest resources. The jsf code for using tiny mce is mentioned below. Note that here there is no option of creating a file, this can easily be added. The code below shows how to edit a file that is already stored in the database.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
// taglib imports go here
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">

//valid elements tag is there to ensure that tiny mce does not strip these tags
//off as invalid html this is crucial.

 tinyMCE.init({
 // General options
 mode : "exact",
 elements:"form1:data",
 theme : "advanced",
 skin : "o2k7",
 cleanup : true,

 valid_elements:"blink,"
  +"a[accesskey|charset|class|coords|dir<ltr?rtl|href|hreflang|id|lang|name"
    +"|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|rel|rev"
    +"|shape<circle?default?poly?rect|style|tabindex|title|target|type],"
  +"abbr[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"acronym[class|dir<ltr?rtl|id|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"address[class|align|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"applet[align<bottom?left?middle?right?top|alt|archive|class|code|codebase"
    +"|height|hspace|id|name|object|style|title|vspace|width],"
  +"area[accesskey|alt|class|coords|dir<ltr?rtl|href|id|lang|nohref<nohref"
    +"|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup"
    +"|shape<circle?default?poly?rect|style|tabindex|title|target],"
  +"base[href|target],"
  +"basefont[color|face|id|size],"
  +"bdo[class|dir<ltr?rtl|id|lang|style|title],"
  +"big[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"blockquote[cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick"
    +"|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
    +"|onmouseover|onmouseup|style|title],"
  +"body[alink|background|bgcolor|class|dir<ltr?rtl|id|lang|link|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onload|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|onunload|style|title|text|vlink],"
  +"br[class|clear<all?left?none?right|id|style|title],"
  +"button[accesskey|class|dir<ltr?rtl|disabled<disabled|id|lang|name|onblur"
    +"|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup|onmousedown"
    +"|onmousemove|onmouseout|onmouseover|onmouseup|style|tabindex|title|type"
    +"|value],"
  +"caption[align<bottom?left?right?top|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"center[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"cite[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"code[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"col[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id"
    +"|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown"
    +"|onmousemove|onmouseout|onmouseover|onmouseup|span|style|title"
    +"|valign<baseline?bottom?middle?top|width],"
  +"colgroup[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl"
    +"|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown"
    +"|onmousemove|onmouseout|onmouseover|onmouseup|span|style|title"
    +"|valign<baseline?bottom?middle?top|width],"
  +"dd[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],"
  +"del[cite|class|datetime|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"dfn[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"dir[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"dl[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"dt[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],"
  +"em/i[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"fieldset[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"font[class|color|dir<ltr?rtl|face|id|lang|size|style|title],"
  +"form[accept|accept-charset|action|class|dir<ltr?rtl|enctype|id|lang"
    +"|method<get?post|name|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onreset|onsubmit"
    +"|style|title|target],"
  +"frame[class|frameborder|id|longdesc|marginheight|marginwidth|name"
    +"|noresize<noresize|scrolling<auto?no?yes|src|style|title],"
  +"frameset[class|cols|id|onload|onunload|rows|style|title],"
  +"h1[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"h2[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"h3[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"h4[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"h5[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"h6[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"head[dir<ltr?rtl|lang|profile],"
  +"hr[align<center?left?right|class|dir<ltr?rtl|id|lang|noshade<noshade|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|size|style|title|width],"
  +"html[dir<ltr?rtl|lang|version],"
  +"iframe[align<bottom?left?middle?right?top|class|frameborder|height|id"
    +"|longdesc|marginheight|marginwidth|name|scrolling<auto?no?yes|src|style"
    +"|title|width],"
  +"img[align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|height"
    +"|hspace|id|ismap<ismap|lang|longdesc|name|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|src|style|title|usemap|vspace|width],"
  +"input[accept|accesskey|align<bottom?left?middle?right?top|alt"
    +"|checked<checked|class|dir<ltr?rtl|disabled<disabled|id|ismap<ismap|lang"
    +"|maxlength|name|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onselect"
    +"|readonly<readonly|size|src|style|tabindex|title"
    +"|type<button?checkbox?file?hidden?image?password?radio?reset?submit?text"
    +"|usemap|value],"
  +"ins[cite|class|datetime|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"isindex[class|dir<ltr?rtl|id|lang|prompt|style|title],"
  +"kbd[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"label[accesskey|class|dir<ltr?rtl|for|id|lang|onblur|onclick|ondblclick"
    +"|onfocus|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
    +"|onmouseover|onmouseup|style|title],"
  +"legend[align<bottom?left?right?top|accesskey|class|dir<ltr?rtl|id|lang"
    +"|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"li[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title|type"
    +"|value],"
  +"link[charset|class|dir<ltr?rtl|href|hreflang|id|lang|media|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|rel|rev|style|title|target|type],"
  +"map[class|dir<ltr?rtl|id|lang|name|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"menu[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"meta[content|dir<ltr?rtl|http-equiv|lang|name|scheme],"
  +"noframes[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"noscript[class|dir<ltr?rtl|id|lang|style|title],"
  +"object[align<bottom?left?middle?right?top|archive|border|class|classid"
    +"|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
    +"|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
    +"|vspace|width],"
  +"ol[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|start|style|title|type],"
  +"optgroup[class|dir<ltr?rtl|disabled<disabled|id|label|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"option[class|dir<ltr?rtl|disabled<disabled|id|label|lang|onclick|ondblclick"
    +"|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
    +"|onmouseover|onmouseup|selected<selected|style|title|value],"
  +"p[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|style|title],"
  +"param[id|name|type|value|valuetype<DATA?OBJECT?REF],"
  +"pre/listing/plaintext/xmp[align|class|dir<ltr?rtl|id|lang|onclick|ondblclick"
    +"|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout"
    +"|onmouseover|onmouseup|style|title|width],"
  +"q[cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"s[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],"
  +"samp[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"script[charset|defer|language|src|type],"
  +"select[class|dir<ltr?rtl|disabled<disabled|id|lang|multiple<multiple|name"
    +"|onblur|onchange|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|size|style"
    +"|tabindex|title],"
  +"small[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"span[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"strike[class|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title],"
  +"strong/b[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"style[dir<ltr?rtl|lang|media|title|type],"
  +"sub[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"sup[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],"
  +"table[align<center?left?right|bgcolor|border|cellpadding|cellspacing|class"
    +"|dir<ltr?rtl|frame|height|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|rules"
    +"|style|summary|title|width|bordercolor],"
  +"tbody[align<center?char?justify?left?right|char|class|charoff|dir<ltr?rtl|id"
    +"|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown"
    +"|onmousemove|onmouseout|onmouseover|onmouseup|style|title"
    +"|valign<baseline?bottom?middle?top],"
  +"td[abbr|align<center?char?justify?left?right|axis|bgcolor|char|charoff|class"
    +"|colspan|dir<ltr?rtl|headers|height|id|lang|nowrap<nowrap|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|rowspan|scope<col?colgroup?row?rowgroup"
    +"|style|title|valign<baseline?bottom?middle?top|width],"
  +"textarea[accesskey|class|cols|dir<ltr?rtl|disabled<disabled|id|lang|name"
    +"|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onselect"
    +"|readonly<readonly|rows|style|tabindex|title],"
  +"tfoot[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id"
    +"|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown"
    +"|onmousemove|onmouseout|onmouseover|onmouseup|style|title"
    +"|valign<baseline?bottom?middle?top],"
  +"th[abbr|align<center?char?justify?left?right|axis|bgcolor|char|charoff|class"
    +"|colspan|dir<ltr?rtl|headers|height|id|lang|nowrap<nowrap|onclick"
    +"|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
    +"|onmouseout|onmouseover|onmouseup|rowspan|scope<col?colgroup?row?rowgroup"
    +"|style|title|valign<baseline?bottom?middle?top|width],"
  +"thead[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id"
    +"|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown"
    +"|onmousemove|onmouseout|onmouseover|onmouseup|style|title"
    +"|valign<baseline?bottom?middle?top],"
  +"title[dir<ltr?rtl|lang],"
  +"tr[abbr|align<center?char?justify?left?right|bgcolor|char|charoff|class"
    +"|rowspan|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title|valign<baseline?bottom?middle?top],"
  +"tt[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],"
  +"u[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup"
    +"|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title],"
  +"ul[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown"
    +"|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover"
    +"|onmouseup|style|title|type],"
  +"var[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress"
    +"|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style"
    +"|title],font[size|*]",

 convert_fonts_to_spans : false,
 convert_urls : false,
 skin_variant : "black",
 plugins : "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
    width:1000,
    height:700,
    trim_span_elements : false,


 // Theme options
 theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
 theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
 theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
 theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
 theme_advanced_toolbar_location : "top",
 theme_advanced_toolbar_align : "left",
 theme_advanced_statusbar_location : "bottom",
 theme_advanced_resizing : true,

 // Example content CSS (should be your site CSS)
 content_css : "css/example.css",

 // Drop lists for link/image/media/template dialogs
 template_external_list_url : "js/template_list.js",
 external_link_list_url : "js/link_list.js",
 external_image_list_url : "js/image_list.js",
 media_external_list_url : "js/media_list.js",


});



</head>
<body>
<h:form id="form1">
...
<div id="heading">
                                                <h1><label>CMS Editor</label></h1>
                                                <div class="clear">
                 <fieldset style="width:96%; ">
                  <legend style="background-color:#cc6666;color:#FFFFFF;font-size:small; font-weight:bold;">Content File Editor</legend>
                    <h:messages id="message" errorClass="error"/>
                   <table border="0">
                 <tr >


<h:selectOneMenu id="file"   value="#{EditFile.fileID}" >
                        <f:selectItems value="#{EditFile.fileList}"/>
                       <a4j:support event="onchange" action="#{EditFile.getDataFromDB}" reRender="data"/>

</h:selectOneMenu>

<h:inputTextarea id="data" value="#{EditFile.data}"/>
<br/>
<h:commandButton value="Save Changes" action="#{EditFile.storeData}" />

<rich:effect event="onmouseover" for="message" type="Fade"/>
</h:form>

</body>
</html>
</f:view>

The thing to note above is on selection change you will need to force refresh in JSF code so that tiny mce element is populated with the stored file from the database. Below is the code for refreshing the JSF page after fetching data from the database.

1
2
3
4
5
6
7
8
9
...
this.setData(dao.getFileData(fileID));
FacesContext context = FacesContext.getCurrentInstance();
String viewId = context.getViewRoot().getViewId();
ViewHandler handler = context.getApplication().getViewHandler();
UIViewRoot root = handler.createView(context, viewId);
root.setViewId(viewId);
context.setViewRoot(root);
...

Now this editor can be used to edit the files, when you need to insert an image or flash file just use the preview files window to get the restful path of the uploaded files and then place that path in the tiny mce when you insert an image or flash object. After you are done with making changes just save the file and changes will be written to the database, After the changes are written you can use the path appended with the rest resource path and the file name to expose this saved file as a rest resource to retrieve the updated html page. The jersey code is mentioned below

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
@Path("/")
public class FileResource {


/**
* @param filename passed in the get request
* @returns the requested resource as stream
*
*
**/
 @GET
 @Path("/files/{filename}")
 @Produces(MediaType.WILDCARD)
 public Response returnFileAsStream(@PathParam("filename") String fileName){
  FileStoreDAO ftDAO=FileStoreDAO.getInstance();
  FileUtility futil=FileUtility.getInstance();


        FileDTO fdto=ftDAO.readFile(fileName);
  if(fdto!=null){
        String contentType=fdto.getMime();
  InputStream is=fdto.getFileData();
  return Response.ok(is,contentType).build();
  }
  InputStream is=null;

  if((is=futil.getDataAsStream(fileName))!=null){

                      MediaType mt=DefaultMediaTypePredictor.CommonMediaTypes.getMediaTypeFromFileName(fileName);
                      return Response.ok(is,mt).build();


  }
  return Response.noContent().build();
 }
 @GET
 @Path("/content/{filename}")
 @Produces(MediaType.TEXT_HTML)
 public Response returnContentAsStream(@PathParam("filename") String fileName)
 {
  FileDataDAO fdDAO= new FileDataDAO();
  FileUtility futil=FileUtility.getInstance();
  String data=fdDAO.getFileData(fileName);
  if(data!=null&&!data.trim().equals("")){
  return Response.ok(fdDAO.getFileData(fileName),MediaType.TEXT_HTML).build();
  }
  InputStream is=null;

  if((is=futil.getDataAsStream(fileName))!=null){
    MediaType mt=DefaultMediaTypePredictor.CommonMediaTypes.getMediaTypeFromFileName(fileName);
    return Response.ok(is,mt).build();
  }
  else
  {
   return Response.noContent().build();
  }
 }

}

The above code exposes two resources one that returns the HTML page, the other returns the stored files like images, flash, movies.Note: You should employ the cache control header to reduce the fetching from database, increase performance and reduce load both on client and server side. Hope this tutorial will be indicative enough on how one can easily make their own Content Management System through which content can be edited in real time.

Go Top
comments powered by Disqus