7. 有关 liferay 5.23 的 Web Content List 与 Web Content Display 的研究

**************
 有关 liferay 5.23 的 Web Content List 与 Web Content Display 的研究
 也就是 structure 和 template 的问题.
 structure: 顾名思义,结构.假如说,你要在页面显示一个内容,包括题目,内容,备注等等,都在这儿定义.
  template: 同理,样式.也就是控制你的structure 所显示的样子.
**************

1.  Add Page
 新建一个页面,如 MyHome
 
2.  Add Application - Content Management
 Web Content List
 Web Content Display
 将这两个 portlet 拖到页面中

3.  Control Panel - Portal - Communities 添加一个新的社区 MyHome
 
 Control Panel - Content - 最顶部，Content for - 选择 MyHome
 WebContent - Add WebContent
 填写自己想填进去的内容,可以有源代码模式或者直接编辑
 注: ID 可以自己填写,也可以系统自动生成
 Save And Approve
 
4. Structures - Add Structure
 我选择 ID: Autogenerate ID
   Name: MyFirstStructure
  Description: This is my first structure
  Permissions: Public
 
 **********
 走到这步,注意了.因为页面显示的structure, 我们可以在这儿自定义field.
 点击 Add Row
 填入field name, 并选择类型
 例如 Title | Text
   Content | Text Area(HTML)
 点击 Save  
 (Add Row 旁边有个 Launch Editor 的按钮,等下解释)
 **********

5. 有Structure, 那就有template
 选中刚刚建立好的 structure, 点击 Action,选择 Add template
 ID, Name, Description, Permissions 都和structure 差不多,随自己意思或者跟着自己的规划.
 
 *********
 重点:
 Language Type 有三种语言可供你选择:VM, XSL, CSS 我选择了VM (VM也就是 velocity模板语言)
 旁边有个按钮 Launch Editor,这是一个说明例子
 
 里面包含一个文件,内容如下:
 
  ##
  ## Velocity Transform Template
  ##
  ## All dynamic elements in a structure can be accessed as a Velocity variable.
  ##
  ## The given structure:
  ##
  ## <root>
  ##   <dynamic-element name="main-text" type="text_area">
  ##     <dynamic-element name="sub-image" type="image"></dynamic-element>
  ##     <dynamic-element name="sub-text" type="text"></dynamic-element>
  ##   </dynamic-element>
  ##   <dynamic-element name="more-text" type="text_area"></dynamic-element>
  ##   <dynamic-element name="ms-list" type="multi-list">
  ##     <dynamic-element name="chocolate" type="Chocolate"></dynamic-element>
  ##     <dynamic-element name="strawberry" type="Strawberry"></dynamic-element>
  ##     <dynamic-element name="vanilla" type="Vanilla"></dynamic-element>
  ##   </dynamic-element>
  ## </root>
  ##
  ## The dynamic element "main-text" can be accessed in the following ways:
  ##
  ## $main-text.getName()     - The name "main-text"
  ## $main-text.getData()     - The data in the article for main-text
  ## $main-text.getType()     - The type "text-area"
  ## $main-text.getChildren() - A collection with two nodes (sub-image and
  ##                            sub-text) that can be used in the #foreach clause
  ## $main-text.getSiblings() - A collection of elements with the name
  ##                            "main-text". This will only return more than one
  ##                            element if this element is repeatable.
  ##
  ## One special accessor exists for elements of type "multi-list":
  ##
  ## $ms-list.getOptions() - A collection with up to three string entries
  ##                         (chocolate, strawberry, or vanilla) that can be used
  ##                         in the #foreach clause
  ##
  ## Another special accessor exists for elements of type "link_to_layout":
  ##
  ## $linkToPage.getUrl() - The URL that links to the selected page in the current
  ##                        community, organization, etc.
  ##
  ## The variable $journalTemplatesPath can be used to include
  ## another Journal template, e.g. #parse ("$journalTemplatesPath/LAYOUT-PARENT")
  ##
  ## The variable $viewMode specifies which mode the article is being viewed in.
  ## For example, if $viewMode evaluates to "print", that means the user clicked
  ## the print icon to view this article.
  ##
 
 ** 解释下这个文件,root 部分的,在创建 structure 的时候,如果你不想手动的Add Row,那就点击旁边的
    Launch Editor 按钮,在里面可以自己定义. 类似上面的例子.
    $main-text.getName() 这些句子,看看注释就明白了,main-text 也就是file name.
    这个例子中的 <dynamic-element name="main-text" type="text_area">,所以就要这样取值.
    而我上面添加到的是Title, 所以,应该写为 $Title.getName()
       Content   $Content.getType()
    其余同理.
 *********

6.  OK,看完了这个例子.那我们就开始建立我们自己的VM文件

     template_test.vm
 ***********

 <style>
 .title {
  border: 0px solid silver;
  font-family: Verdana;
  font-size: small;
  color: red;
  font-weight: 700;
 }
 .content {
  border: 0px solid silver;
  font-family: Verdana;
  font-size: x-small;
  color: black;
 }
  
 </style>
 <table width="100%">
  <tr>
   <td class="title">$Title.getData()</td>
  </tr>
  <tr>
   <td class="content">$Content.getData()</td>
  </tr>
 </table> 
 ***********
 保存,再导入.
 点击 Save and continue
 当你看到 URL  : http://localhost:8080/c/journal/get_template?groupId=16&templateId=11301
    WebDAV URL : http://localhost:8080/tunnel-web/secure/webdav/liferay.com/guest/journal/Templates/11301
 出现值的时候,就说明创建成功了.
 
7.  Back to guest 返回到本人创建的页面 MyHome
 在 Web Content Display 中点击 Add Web Content （注意此时的默认界面，等下与我们自己做的对比）
 在右边的 Form and Presentation 中 选择 Structure的 select 按钮，选择自己刚刚建好的My First Structure
 Template同理.
 然后具体内容自己任意发挥.
 完成之后 点击 Save and Approve，当然也也可以点击 Preview 预览下.
 
8.  当完成这些步骤的时候，Back to guest 返回到本人创建的页面 MyHome
 Web Content List ，选择 Configuration 配置
 Community ：选择 MyHome
 ...
 ...
 ... 余下几项都是实现控制每页有多少记录，怎么显示，排序之类的.
 选择好之后，这个步骤没有Save 按钮，直接点击右上角的 Return to Full Page
 然后就可以看到MyHome下有多少条记录了.
 尝试去点击不同的记录看看...不同的效果吧~
 
 // 非常感谢Martin 的鼎力帮助
 // 本文仓促，如有错误，还请见谅
 // 大家多多指教