Start of menu

 

 

 

 

End of menu
PlannerFw Exec Processor, Postprocessor pfComponent PlannerFw Dev Preprocessor DeployBuilder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-control" content="max-age=0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-Control" content="must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title>PlannerFw Exec Demo</title>
 
<!--
   
   Copyright 2015-2016 W3plan Technologies, http://w3plan.net
  
-->

<link type="text/css" href="/css/pfcss/pfm/b/double-ring.css" rel="stylesheet" >
<script type="text/javascript" src="/js/pfm/import-and-load-sample.js"></script>
<script type="text/javascript" src="/app/lib/postprocessor.min.js"></script>

<style type="text/css">
html, body {
  height: 95%;
  font-family:Sans-Serif;
  font-size: 100%;
}
#container {
  margin: 0;
  background: #fff;
  min-height: 100%;
}
#header {
  background: "#ccc";
}
#header img {
  margin: "15px 30px";
  padding:1px;
  border:1px solid #C0C0C0;
  cursor:crosshair;
}
#header h2 { 
  margin: 0; 
  padding: 40px;
}
#navigation {
  float: left; width: 100%; 
  background: #333;
}
#navigation ul {
  margin: 0;
  padding: 0;
}
#navigation ul li {
  list-style-type: none;
  display: inline;
  cursor: pointer;
}
#navigation li {
  display: block;
  float: left;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
#navigation li#tool1 {
  color: #ff0;
}
#navigation li:hover { 
  background: #383; 
}
.content {
  clear: left;
  padding: 40px 20px;
}
.demo {
  display: inline;
}
.democn {
  display: none;
}
.content h3 {
  color: #000;
  font-size: 160%;
  margin: 40px 0;
}
.inner-content { 
  padding: 20px 40px; 
}
.inner-content .dtable { 
  margin: 50px 10%; 
  line-height: 40px; 
} 
.inner-content .dtable .dcap { 
  font-style: italic; 
  font-size: 1.3em; 
}
.clock {
  padding: 40px 20px;
  float:right;
}
#footer {
  background: #ccc;
  text-align: right;
  padding: 20px;
  height: 2%;
  margin: .5% 0;
}
.about-off {
  display: none;
}
select { 
  width:100%; height:30px;
}
li:nth-child(even) {
  color: #707070;
}
td:nth-child(odd) {
  background: #F0F0F0;
}
dl {
  float:right;
}
dl dt {
  border-bottom: 1px solid #000;
}
.w3planIcon {
  margin: auto 15px auto 15px;
  vertical-align: middle;
}
</style>

<script type="text/javascript">
function showHomeEn() {
  document.getElementById("home-content").style.display = "inline";
  document.getElementById("tool1").style.color = "#ff0";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}
function showHomeCn() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "inline";
  document.getElementById("tool2").style.color = "#ff0";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}
function showHomeRet() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "inline";
  document.getElementById("tool4").style.color = "#ff0";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}
function showDcss() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";  
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "inline";
  document.getElementById("tool5").style.color = "#ff0";
}
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    if (m < 10) m = '0' + m;
    if (s < 10) s = '0' + s;
    document.getElementById('clocktxt').innerHTML = h + ':' + m + ':' + s;
    var t = setTimeout(function() {
        startTime() }, 500);
}
</script>
</head>

<body>
<div id="container">
  <div id="header">
    <div style="float:left;">
    <img id="header_img" src="/app/plannerfw-logo.jpg" alt="Header image" width="120" height="60" style="padding:1px;border:1px solid #C0C0C0;cursor:crosshair;" title=" PlannerFw Logo ">
    </div>
    <div class="clock" id="clocktxt"></div>
    <h2>PlannerFw Exec demo</h2>
  </div>
  <script type="text/javascript">startTime();</script>
  <div id="navigation">
    <ul>
      <li id="tool1" onclick="showHomeEn()">Single-byte-charaset</li>
      <li id="tool2" onclick="showHomeCn()">Multi-byte-charaset</li>
      <li id="tool4" onclick="showHomeRet()">Post processor</li>
      <li id="tool5" onclick="showDcss()">PFCSS</li>
    </ul>
  </div>
  <div id="home-content" class="content demo">
    <div class="inner-content">    
      <h3>NASA satellite spots a weakening Karina, now a tropical storm</h3>
      <p>NASA's Terra satellite passed over Hurricane Karina before it weakened to a tropical storm early on August 15 and imagery showed the vertical wind shear was already taking its toll.</p>
      <p>  NASA's Terra satellite passed over Karina on August 14 at 2:40 p.m. EDT when it was still clinging to hurricane status and noticed that wind shear was already having an effect on the storm's structure. The Moderate Resolution Imaging Spectroradiometer or MODIS instrument captured an image that showed that the bulk of Karina's clouds were being pushed to the western side of the storm. That was an indication that vertical wind shear was moderate to strong and it continued weakening the storm.</p>
      <p>On August 15, Karina continued to experience 20 to 25 knots of easterly vertical wind shear, which has caused the center to become partly exposed on the eastern side of the deep convection (rising air that forms the thunderstorms that make up the tropical storm).</p>
      <p>A tropical storm has maximum sustained wind speed between 39 and 73 mph. By 5 a.m. EDT (0900 UTC) on August 15, Karina's maximum sustained winds had decreased to 70 mph (110 kph) and the National Hurricane Center expects additional weakening over the next two days.</p>
      <p>Karina's center was located latitude 17.2 north and longitude 119.1 west, about 715 miles (1,150 km) west-southwest of the southern tip of Baja California, Mexico. Karina was moving toward the west near 12 mph (19 kph) and is expected to turn to the west-northwest. The estimated minimum central pressure is 990 millibars.</p>    
      <p>Wind shear is expected to decrease while Karina moves over sea surface temperatures of near 26C (80F). Tropical cyclones need sea surface temperatures of at least 26C/80F to maintain strength. The National Hurricane Center noted, "this could allow Karina to re-intensify as forecast by the GFDL and the Navy COAMPS computer forecast models. However, any deviation north of the forecast track would take the system over colder water, which would prevent strengthening."</p>
      <div style="text-align: center;">
        <img src="/images/pfm/karina_storm1.jpg" alt="MODIS Image of Karina" border="0">
        <div>Image caption</div>
      </div>      
      <h3>Dynamic unordered list</h3>      
      <ul> </ul>  
      
      <h3>Dynamic data table</h3>      
      <div class="dtable">
      <table border="1" cellpadding="1" cellspacing="1" width="60%">
        <caption class="dcap"><strong>User data grid</strong></caption>
        <tr>
          <th rowspan="2">City</th>
          <th colspan="3">Users</th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Education</th>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
      </div>
    </div>    
  </div>
  
  <div id="homecn-content" class="content democn">
    <div class="inner-content">  
      <h3>美国航空航天局卫星发现的弱卡琳娜飓风,现在已经减弱为热带风暴</h3>
      <p>美国宇航局的Terra卫星越过卡琳娜飓风之后,在8月15卡琳娜飓风已经减弱为热带风暴, 图像显示垂直风切变已经发生了变化</p>美国宇航局Terra卫星在8月14日下午2:40美国东部时间越过卡琳娜,当时它仍处于飓风状态,并发现风切变已经对飓风的结构产生影响。中分辨率成像光谱仪和MODIS仪器拍摄的结果表明,大部分卡琳娜的云层被推到了风暴的西侧。这个迹象表明,垂直风切变是中度到强,它继续削弱风暴。</p>
      <p>在8月15日卡琳娜继续垂直风切变20至25节,已经引起了飓风中心部分暴露在深对流东侧(上升气流形成并引发热带风暴的雷雨)</p>    
      <p>在8月15日上午5:00美国东部时间卡琳娜的最高持续风速已经下降到每小时70英里(110公里), 美国国家飓风中心预计未来两天将继续减弱</p>    <p>卡琳娜的中心位于北纬17.2,东经119.1西部,约715英里(1150公里),墨西哥下加利福尼亚州南端的西南偏西。卡琳娜朝着西边以近12英里每小时(19公里)的速度移动,并预计将转向西北偏西方向。估计最低中心气压为990毫巴。</p>
	  <p>当卡琳娜移动到近26℃(80F)温度的海面时风切变预计将减弱,热带气旋至少需要26℃/80°F的海洋表面温度才能保持力量。美国国家飓风中心说,"使用GFDL和海军COAMPS计算机预测模型可以让卡琳娜重新加强,无论无何,预测路径以北的任何偏差将使系统处于冷水上方,这样可以防止其强化。"</p>
      <div style="text-align: center;">
        <img src="/images/pfm/karina_storm2.jpg" alt="Tropical storm image" border="0">
        <div>Image caption</div>
      </div>
      
      <h4>动态无序列表</h4>      
      <ul>
         
      </ul>      
      
      <h4>动态数据表格</h4>      
      <div class="dtable">
      <table border="1" cellpadding="1" cellspacing="1" width="60%">
        <caption class="dcap"><strong>用户数据表</strong></caption>
        <tr>
          <th rowspan="2">城市</th>
          <th colspan="3">用户</th>
        </tr>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>教育</th>
        </tr>
        <tr>
          <td> </td>
          <td> </td>
          <td> </td>
          <td> </td>
        </tr>
      </table>
      </div>
    </div>
  </div>
  
  <div id="calender-css" class="content about-off">
    <div style="margin-top:100px;text-align:center;">
      <p><strong>A simple calendar to switch styles from Session Storage without any HTTP requests</strong></p>
      <button type="button" style="margin-top:50px;cursor:pointer;" onclick="doSwitch()"> Switch calendar styles </button>
      <div class="calender">
      </div>
    </div>
  </div>
  
  <div id="dynamic-css" class="content about-off">
    <div class="hoja">PlannerFw</div>
  </div> 
  
  <div id="about-content" class="content about-off">
    <div class="inner-content">
    </div>
  </div>
</div>

<div id="footer">
  Copyright 2015 - <script>document.write(new Date().getFullYear())</script> 
  <a href="http://w3plan.net/" target="_blank">
    <img class="w3planIcon" src="/images/w3plan-logo-small.png" width="25" height="15">
  </a> W3plan Technologies
</div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-control" content="max-age=0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-Control" content="must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">

<title>PlannerFw Exec Example</title>

<!--

  Copyright 2015-2016 W3plan Technologies, http://w3plan.net
  
-->
  
<link type="text/css" href="/css/pfcss/pfm/b/double-ring.css" rel="stylesheet" >

<!--%= 
  /* If CSS code is not in Session Storage then saving it from URL to Session Storage */
  planner.loadCss("/css/pfcss/pfm/b/theme-b.css")
%-->

<!--%= 
  /* 
   * If CSS code is not in Session Storage then saving it from URL to Session Storage then 
   * output style tag that includes css code in current position 
   */ 
  planner.importCss("/css/pfcss/pfm/a/theme-a.css")
%-->

<script type="text/javascript" src="/js/pfm/import-and-load-sample.js"></script>

<script type="text/javascript" src="/app/lib/postprocessor.min.js"></script>

<!--%= 
  /* 
   * section method only be used by PlannerFw output tag 
   * the first parameter is JSON object from model, the second parameter
   * is a raw-template file that was described by layout.json
   */
  planner.section(pfDataSet.pfSet1, "/template/pfm/a/section/s-head.html")
%-->

</head>

<body>
<!--
  When creating static HTML code to template using   as a place holder in 
  place of Plannner output tag because of Plannner tag is a HTML comment tag
-->
<div id="container">
  <div id="header">
    <div style="float:left;">
    <img id="header_img" src="/app/plannerfw-logo.jpg" alt="Header image" width="120" height="60" 
         style="padding:1px;border:1px solid #C0C0C0;cursor:crosshair;" title=" PlannerFw Logo ">
    </div>
    <div class="clock" id="clocktxt"></div>
    <h2>PlannerFw Exec Demo</h2>
  </div>
  <script type="text/javascript">
    startTime();
  </script>
  <div id="navigation">
    <ul>
      <li id="tool1" onclick="showHomeEn()">Single-byte-charaset</li>
      <li id="tool2" onclick="showHomeCn()">Multi-byte-charaset</li>
      <li id="tool4" onclick="showHomeRet()">PostProcessor</li>
      <li id="tool5" onclick="showDcss()">PFCSS</li>
    </ul>
  </div>
  
  <!--%= 
    /* one output tag can not include more then one section method */ 
    planner.section(pfDataSet.pfSet2, "/template/pfm/a/section/s-lang-en.html");
  %-->
  
  <!--%= planner.section(pfDataSet.pfSet3, '/template/pfm/a/section/s-lang-cn.html') ; %-->
  
  <div id="dynamic-css" class="content about-off">
    <div class="hoja">PlannerFw</div>
  </div>
  
  <div id="about-content" class="content about-off">
    <div class="inner-content">
    </div>
  </div>
</div>

<div id="footer">
  Copyright © 2015-<script>document.write(new Date().getFullYear())</script> 
  <a href="http://w3plan.net/" target="_blank">
    <img class="w3planIcon" src="/images/w3plan-logo-small.png" width="25" height="15">
  </a> W3plan
</div>
</body>
</html>
/**
 * This file was generated by PlannerFw's Preprocessor
 * 
 * Version    0.0.1
 * Author     W3plan
 * Category   Preprocessor
 * Copyright  Copyright 2015-2016 W3plan Technologies, http://w3plan.net
 * Licenses   MIT <http: //www.opensource.org/licenses/mit-license.php>
 */
/* PlannerFw Layout Template */
function pfTemp(pfDataSet, planner) {
    var _pf19edb768 = '';
    _pf19edb768 += '<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="Cache-control" content="max-age=0"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache-Control" content="must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="-1"><title>PlannerFw Exec Example</title><!-- Copyright 2015-2016 W3plan Technologies, http://w3plan.net --><link type="text/css" href="/css/pfcss/pfm/b/double-ring.css" rel="stylesheet" > ';
    _pf19edb768 += /* If CSS code is not in Session Storage then saving it from URL to Session Storage */; 
    _pf19edb768 += planner.loadCss("/css/pfcss/pfm/b/theme-b.css");
    _pf19edb768 += /* * If CSS code is not in Session Storage then saving it from URL to Session Storage then * output style tag that includes css code in current position */; 
    _pf19edb768 += planner.importCss("/css/pfcss/pfm/a/theme-a.css");
    _pf19edb768 += ' <script type="text/javascript" src="/js/pfm/import-and-load-sample.js"></script><script type="text/javascript" src="/app/lib/postprocessor.min.js"></script> ';
    _pf19edb768 += /* * section method only be used by PlannerFw output tag * the first parameter is JSON object from model, the second parameter * is a raw-template file that was described by layout.json */;
    _pf19edb768 += pffeacffa8(pfDataSet.pfSet1, planner);
    _pf19edb768 += ' </head><body><!-- When creating static HTML code to template using   as a place holder in place of Plannner output tag because of Plannner tag is a HTML comment tag --><div id="container"><div id="header"><div style="float:left;"><img id="header_img" src="/app/plannerfw-logo.jpg" alt="Header image" width="120" height="60" style="padding:1px;border:1px solid #C0C0C0;cursor:crosshair;" title=" PlannerFw Logo "></div><div class="clock" id="clocktxt"></div><h2>PlannerFw Exec Demo</h2></div><script type="text/javascript"> startTime(); </script><div id="navigation"><ul><li id="tool1" onclick="showHomeEn()">Single-byte-charaset</li><li id="tool2" onclick="showHomeCn()">Multi-byte-charaset</li><li id="tool4" onclick="showHomeRet()">PostProcessor</li><li id="tool5" onclick="showDcss()">PFCSS</li></ul></div> ';
    _pf19edb768 += /* one output tag can not include more then one section method */; 
    _pf19edb768 += pfb9019b70(pfDataSet.pfSet2, planner);
    _pf19edb768 += pf37d2411b(pfDataSet.pfSet3, planner);
    _pf19edb768 += ' <div id="dynamic-css" class="content about-off"><div class="hoja">PlannerFw</div></div><div id="about-content" class="content about-off"><div class="inner-content"></div></div></div><div id="footer"> Copyright © 2015-<script>document.write(new Date().getFullYear())</script><a href="http://w3plan.net/" target="_blank"><img class="w3planIcon" src="/images/w3plan-logo-small.png" width="25" height="15"></a> W3plan </div></body></html>';
    return _pf19edb768;
}
/* Section Template */
function pffeacffa8(pfDataSet, planner) {
    var _pf19edb768 = '';
    _pf19edb768 += '<!-- PlannerFw implemented operational mechanisms to a dynamic stylesheet language like as Less and Sass --><style type="text/css"> '; 
    /* 1. Variable mechanism to style sheet Define variables that are used by style sheet */
    var headerImgMargin = "15px 30px";
    _pf19edb768 += ' html, body { height: 95%; font-family:Sans-Serif; font-size: 100%; } #container { margin: 0; background: #fff; min-height: 100%; } #header { background: ';
    _pf19edb768 += /* Use variable from HTTP request response */ 
    _pf19edb768 += pfDataSet.headerClr;
    _pf19edb768 += '; } #header img { margin: ';
    _pf19edb768 += /* There is no pfDataSet scope to variables defined in current template */ 
    _pf19edb768 += headerImgMargin;
    _pf19edb768 += '; padding:1px; border:1px solid #C0C0C0; cursor:crosshair; } #header h2 { margin: 0; padding: 40px; } '; 
    /* 2. Mixins mechanism to style sheet Multi-lines string */
    var navUlLi = " list-style-type: none; display: inline; cursor: pointer; "; 
    /* Arguments of Mixins */
    function navUl(cstr) {
        return "margin: " + cstr + ";" + "padding: " + cstr + ";";
    }
    _pf19edb768 += ' #navigation { ';
    _pf19edb768 += pfDataSet.nav;
    _pf19edb768 += ' } #navigation ul { ';
    _pf19edb768 += navUl(0);
    _pf19edb768 += ' } #navigation ul li { ';
    _pf19edb768 += navUlLi;
    _pf19edb768 += ' } #navigation li { display: block; float: left; padding: 8px 16px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #navigation li#tool1 { color: #ff0; } #navigation li:hover { background: #383; } .content { clear: left; padding: 40px 20px; } .demo { display: inline; } .democn { display: none; } '; 
    /* 3. Functions and operations to style sheet */
    var fontSize = "50%";
    var lineHeight = "10px";
    _pf19edb768 += ' .content h3 { color: #000; font-size: ';
    _pf19edb768 += planner.addCssUnit(planner.stripCssUnit(fontSize) * 2 + 60, "%");
    _pf19edb768 += '; margin: ';
    _pf19edb768 += planner.addCssUnit(planner.stripCssUnit(lineHeight) * 4);
    _pf19edb768 += ' 0; } '; 
    /* 4. Nesting mechanism to style sheet Nesting style sheet under a root node as a multiline string literal, PlannerFw would parse nesting mechanism to generate CSS code */
    var css = " .inner-content { padding: 20px 40px; .dtable { margin: 50px 10%; .dcap { font-style: italic; font-size: 1.3em; } line-height: 40px; } } "; 
    /* Write parsed result to output stream */ ;
    _pf19edb768 += planner.parseNestedCss(css);
    _pf19edb768 += ' .clock { padding: 40px 20px; float:right; } #footer { background: #ccc; text-align: right; padding: 20px; height: 2%; margin: .5% 0; } .about-off { display: none; } select { width:100%; height:30px; } li:nth-child(even) { color: #707070; } td:nth-child(odd) { background: #F0F0F0; } dl { float:right; } dl dt { border-bottom: 1px solid #000; } .w3planIcon { margin: auto 10px auto 30px; vertical-align: middle; } </style><script type="text/javascript"> function showHomeEn() { document.getElementById("home-content").style.display = "inline"; document.getElementById("tool1").style.color = "#ff0"; document.getElementById("homecn-content").style.display = "none"; document.getElementById("tool2").style.color = "#fff"; document.getElementById("about-content").style.display = "none"; document.getElementById("calender-css").style.display = "none"; document.getElementById("tool4").style.color = "#fff"; document.getElementById("dynamic-css").style.display = "none"; document.getElementById("tool5").style.color = "#fff"; } function showHomeCn() { document.getElementById("home-content").style.display = "none"; document.getElementById("tool1").style.color = "#fff"; document.getElementById("homecn-content").style.display = "inline"; document.getElementById("tool2").style.color = "#ff0"; document.getElementById("about-content").style.display = "none"; document.getElementById("calender-css").style.display = "none"; document.getElementById("tool4").style.color = "#fff"; document.getElementById("dynamic-css").style.display = "none"; document.getElementById("tool5").style.color = "#fff"; } function showHomeRet() { document.getElementById("home-content").style.display = "none"; document.getElementById("tool1").style.color = "#fff"; document.getElementById("homecn-content").style.display = "none"; document.getElementById("tool2").style.color = "#fff"; document.getElementById("about-content").style.display = "none"; document.getElementById("calender-css").style.display = "inline"; document.getElementById("tool4").style.color = "#ff0"; document.getElementById("dynamic-css").style.display = "none"; document.getElementById("tool5").style.color = "#fff"; } function showDcss() { document.getElementById("home-content").style.display = "none"; document.getElementById("tool1").style.color = "#fff"; document.getElementById("homecn-content").style.display = "none"; document.getElementById("tool2").style.color = "#fff"; document.getElementById("about-content").style.display = "none"; document.getElementById("calender-css").style.display = "none"; document.getElementById("tool4").style.color = "#fff"; document.getElementById("dynamic-css").style.display = "inline"; document.getElementById("tool5").style.color = "#ff0"; } ';
    _pf19edb768 += /* Dynamic JavaScript Sample JavaScript code from HTTP response */ 
    _pf19edb768 += pfDataSet.startTime;
    _pf19edb768 += ' </script>';
    return _pf19edb768;
}
/* Section Template */
function pfb9019b70(pfDataSet, planner) {
    var _pf19edb768 = '';
    _pf19edb768 += '<div id="home-content" class="content demo"><div class="inner-content"> ';
    if ((pfDataSet.comment1) && (pfDataSet.comment2)) {
        _pf19edb768 += ' <dl><dt><strong>Comment one: </strong></dt><dd>';
        _pf19edb768 += pfDataSet.comment1;
        _pf19edb768 += '</dd><dt><strong>Comment two: </strong></dt><dd>';
        _pf19edb768 += pfDataSet.comment2;
        _pf19edb768 += '</dd></dl> ';
    }
    _pf19edb768 += ' <h3>NASA satellite spots a weakening Karina, now a tropical storm</h3><p> NASA\'s Terra satellite passed over Hurricane Karina before it weakened to a tropical storm early on August 15 and imagery showed the vertical wind shear was already taking its toll. </p><p> NASA\'s Terra satellite passed over Karina on August 14 at 2:40 p.m. EDT when it was still clinging to hurricane status and noticed that wind shear was already having an effect on the storm\'s structure. The Moderate Resolution Imaging Spectroradiometer or MODIS instrument captured an image that showed that the bulk of Karina\'s clouds were being pushed to the western side of the storm. That was an indication that vertical wind shear was moderate to strong and it continued weakening the storm. </p><p> On August 15, Karina continued to experience 20 to 25 knots of easterly vertical wind shear, which has caused the center to become partly exposed on the eastern side of the deep convection (rising air that forms the thunderstorms that make up the tropical storm). </p><p> A tropical storm has maximum sustained wind speed between 39 and 73 mph. By 5 a.m. EDT (0900 UTC) on August 15, Karina\'s maximum sustained winds had decreased to 70 mph (110 kph) and the National Hurricane Center expects additional weakening over the next two days. </p><p> Karina\'s center was located latitude 17.2 north and longitude 119.1 west, about 715 miles (1,150 km) west-southwest of the southern tip of Baja California, Mexico. Karina was moving toward the west near 12 mph (19 kph) and is expected to turn to the west-northwest. The estimated minimum central pressure is 990 millibars. </p><p> Wind shear is expected to decrease while Karina moves over sea surface temperatures of near 26C (80F). Tropical cyclones need sea surface temperatures of at least 26C/80F to maintain strength. The National Hurricane Center noted, "this could allow Karina to re-intensify as forecast by the GFDL and the Navy COAMPS computer forecast models. However, any deviation north of the forecast track would take the system over colder water, which would prevent strengthening." </p><p> </p><div style="text-align: center;"><img src="';
    _pf19edb768 += pfDataSet.image.src;
    _pf19edb768 += '" alt="MODIS Image of Karina" border="0"><div>';
    _pf19edb768 += pfDataSet.caption;
    _pf19edb768 += ' </div></div><h3>Dynamic unordered list</h3><ul> '; 
    /* Nested planner tag sample */
    for (var i = 0, len = pfDataSet.imageType.length; i < len; i++) {
        _pf19edb768 += "<li>" + pfDataSet.imageType[i] + "</li>";
    }
    _pf19edb768 += ' </ul><h3>Dynamic data table</h3><div class="dtable"><table border="1" cellpadding="1" cellspacing="1" width="60%"><caption class="dcap"><strong>User data grid</strong></caption><tr><th rowspan="2">City</th><th colspan="3">Users</th></tr><tr><th>Name</th><th>Age</th><th>Education</th></tr> ';
    for (var key in pfDataSet.grid) {
        if (pfDataSet.grid.hasOwnProperty(key)) {
            _pf19edb768 += ' <tr><td>';
            _pf19edb768 += pfDataSet.grid[key].city;
            _pf19edb768 += '</td><td>';
            _pf19edb768 += pfDataSet.grid[key].name;
            _pf19edb768 += '</td><td>';
            _pf19edb768 += pfDataSet.grid[key].age;
            _pf19edb768 += '</td><td><select name="Education" style="cursor:pointer"> ';
            var educations = ["No College", "Some College", "Graduate School", "College"];
            for (var i = 0, len = educations.length; i < len; i++) {
                if (pfDataSet.grid[key].education.toLowerCase() == educations[i].toLowerCase()) {
                    _pf19edb768 += '<option value="' + educations[i] + '"' + " selected>" + educations[i] + "</option>";
                } else {
                    _pf19edb768 += '<option value="' + educations[i] + '"' + ">" + educations[i] + "</option>";
                }
            }
            _pf19edb768 += ' </select></td></tr> ';
        }
    }
    _pf19edb768 += ' </table></div></div></div>';
    return _pf19edb768;
}
/* Section Template */
function pf37d2411b(pfDataSet, planner) {
    var _pf19edb768 = '';
    _pf19edb768 += '<div id="homecn-content" class="content democn"><div class="inner-content"><h3>美国航空航天局卫星发现的弱卡琳娜飓风,现在已经减弱为热带风暴</h3><p> 美国宇航局的Terra卫星越过卡琳娜飓风之后,在8月15卡琳娜飓风已经减弱为热带风暴, 图像显示垂直风切变已经发生了变化 </p><p> 美国宇航局Terra卫星在8月14日下午2:40美国东部时间越过卡琳娜,当时它仍处于飓风状态,并发现风切变已经对飓风的结构产生影响。中分辨率成像光谱仪和MODIS仪器拍摄的结果表明,大部分卡琳娜的云层被推到了风暴的西侧。这个迹象表明,垂直风切变是中度到强,它继续削弱风暴。 </p><p> 在8月15日卡琳娜继续垂直风切变20至25节,已经引起了飓风中心部分暴露在深对流东侧(上升气流形成并引发热带风暴的雷雨) </p><p> 在8月15日上午5:00美国东部时间卡琳娜的最高持续风速已经下降到每小时70英里(110公里), 美国国家飓风中心预计未来两天将继续减弱 </p><p> 卡琳娜的中心位于北纬17.2,东经119.1西部,约715英里(1150公里),墨西哥下加利福尼亚州南端的西南偏西。卡琳娜朝着西边以近12英里每小时(19公里)的速度移动,并预计将转向西北偏西方向。估计最低中心气压为990毫巴。 </p><p> 当卡琳娜移动到近26℃(80F)温度的海面时风切变预计将减弱,热带气旋至少需要26℃/80°F的海洋表面温度才能保持力量。美国国家飓风中心说,"使用GFDL和海军COAMPS计算机预测模型可以让卡琳娜重新加强,无论无何,预测路径以北的任何偏差将使系统处于冷水上方,这样可以防止其强化。" </p><p> </p><div style="text-align: center;"><img src="';
    _pf19edb768 += pfDataSet.image_cn.src;
    _pf19edb768 += '" alt="Tropical storm image" border="0"><div>';
    _pf19edb768 += pfDataSet.caption_cn;
    _pf19edb768 += ' </div></div><p> </p><h4>动态无序列表</h4><ul> '; 
    /* Nested planner tag sample */
    for (var i = 0, len = pfDataSet.imageType_cn.length; i < len; i++) {
        _pf19edb768 += "<li>" + pfDataSet.imageType_cn[i] + "</li>";
    }
    _pf19edb768 += '   </ul><p> </p><h4>动态数据表格</h4><div class="dtable"><table border="1" cellpadding="1" cellspacing="1" width="60%"><caption class="dcap"><strong>用户数据表</strong></caption><tr><th rowspan="2">城市</th><th colspan="3">用户</th></tr><tr><th>姓名</th><th>年龄</th><th>教育</th></tr> ';
    for (var key in pfDataSet.grid_cn) {
        if (pfDataSet.grid_cn.hasOwnProperty(key)) {
            _pf19edb768 += ' <tr><td>';
            _pf19edb768 += pfDataSet.grid_cn[key].city;
            _pf19edb768 += '</td><td>';
            _pf19edb768 += pfDataSet.grid_cn[key].name;
            _pf19edb768 += '</td><td>';
            _pf19edb768 += pfDataSet.grid_cn[key].age;
            _pf19edb768 += '</td><td><select name="Education" style="cursor:pointer"> ';
            var educations = ["大学以下", "未完成大学", "大学", "研究生"];
            for (var i = 0, len = educations.length; i < len; i++) {
                if (pfDataSet.grid_cn[key].education.toLowerCase() == educations[i].toLowerCase()) {
                    _pf19edb768 += '<option value="' + educations[i] + '"' + " selected>" + educations[i] + "</option>";
                } else {
                    _pf19edb768 += '<option value="' + educations[i] + '"' + ">" + educations[i] + "</option>";
                }
            }
            _pf19edb768 += ' </select></td></tr> ';
        }
    }
    _pf19edb768 += ' </table></div></div></div><div id="calender-css" class="content about-off"><div style="margin-top:100px;text-align:center;"><p><strong>A simple calendar to switch styles from Session Storage without any HTTP requests</strong></p><button type="button" style="margin-top:50px;cursor:pointer;" onclick="doSwitch()"> Switch calendar styles </button><div class="calender"><script type="text/javascript"> writeCalendar(); var num = 0; function doSwitch() { if (num % 2) { postplanner.switchCssByUrl("/css/pfcss/pfm/a/theme-a.css", "/css/pfcss/pfm/a/theme-a.css"); } else { postplanner.switchCssByUrl("/css/pfcss/pfm/a/theme-a.css", "/css/pfcss/pfm/b/theme-b.css"); } num += 1; } </script></div></div></div>';
    return _pf19edb768;
}
{
  "description": "Sample of PlannerFw's model for layouts",
  "version": "0.0.1",
  "category": "JSON data model",
  "author": "W3plan",
  "company": "W3plan",
  "copyright": "Copyright 2015-2016 W3plan Technologies, http://w3plan.net",
  "licenses": "GNU GPLv3 <http://www.gnu.org/licenses/gpl.html>",
  "expiration": 0,
  "pfDataSet": {
    "pfSet1": {
      "headerClr__pfvld": ["#ccc", {"type": "clrstr"}],
      "nav__pfcrc": ["float: left; width: 100%; background: #333;", "2064493575"],
      "startTime__pfenc": "XgRcJiwaNixmdmoQP1IaFT4vKwtcSFxiYG1HXEJ8VSh8eEodAz9jVGI+KQAXEXVVBgMVOXNFAh0KNj9RfwFOfm4TfhBkQURBNxAWS1hQbmkzBV0ANTdbMQEFcA4WOipAU05nU2lfAA91QXIxETN1AUoMZncyLjowFzdpBjICPScZBAMLIhx2AEtoAXEHCRx2CD4zC3QAaCdEQyU1CiAyLEgGCwI4Jgg9KB4bEURrVgF6HEIAckpkHh4cYmVxZkosRH4FdVUkU2NiZlFmRnpkaF4KFmIIdgolYGt1dmYACVIAZVxHBXNBdkBGRiZfBzpBfwgiUVBxXhdLfikQcQJoeXtUAHVpQ3xwemFoUzgWWlFPdQJLS0pBdWVkR1xFfFBafHg4TlB9NUNhCGNWRgw/BTcAFSAiWVU8Hwc2ESBcBTgVTwQ2ZEFMEmRVUBUHWyAuDwUXVmNrR29KGFYPBjoRMSw6Z1NgXwAJdUFyL1VzYBZII2Z2Rn9nY1N9BkRlQVV8R1RFLHQLdFVLaAhxBgkcdghtYE50ARlxU0dEc1VhYRdDU14FTnApd3RKHlUEdkEDNxxDcnJLEFJKCSMwIAAbLAQjQCRDVU43JzkCNx0sL39cXxZiAXYOIzYtJCEgY1AaV3dLTRBkShFSMFN5ORFKVHgIexJHeksBO2NtcQ=="
    },
    "pfSet2": {
      "comment1": "",
      "comment2": "",
      "caption__pfenc": "djBhBH1BbjFmdmo3LkEaAE90dh0YDgErPj0WC1drUho4OQkOBmh0Vj08IxZTWmAtIx8ZIDdSAGkCLH9GfU0DKXIEfTcgAABSJAwWS1hoKjkeF1sHcXxFc1cyWhNGexxAU0YNAjUbXWhiQy0pVXNgcg8GbWFEamRgU3x3ACNTQn5FVEQvZQlhCl4qVXoReQkBfBx3S2FFMDEPVVNxDDB2Z1YWDwVOcVshMhMEWFNhQ1JmC0EqIgomHhtYPjA=",
      "image": {
        "src__pfcrc": ["/images/pfm/karina_storm1.jpg", "1856105291"],
        "altSrc__pfvld": ["http://media.eurekalert.org/multimedia_prod/pub/web/77823_web.jpg", {"type": "urlstr"}]
      },
      "imageType__pfenc": "HURwYGpBPislYWhRbgErRFh2Y1xLEBQgd2ZQS0AaR1hpb0hZCD0jAXd4dEFEK3VUckhCfCYZVXxZcH9GDhxZfHIEfyYoFVEFZEcGPQ==",
      "grid": {
        "gridRow1": {
          "city": "New York",
          "name": "Jonesy Band",
          "age__pfvld": [16, {"type": "intnum", "constraint": {"minExc": 10, "maxExc": 90}}],
          "education": "No College"
        },
        "gridRow2__pfenc": "HUZwYGpBOis3PX9ReRZbIE90dktLSCcvOzcDCR18UFh8eDlOUH8oBz8vY1ZETWMnZ19Aa2RFfzgZO39GfXIKNXIEf3dzMFEFZANUHE0KeX9EMBdWZH1Ac1YyHVNRLT0QAhc2CD8UFn9iVnEGVXNgFkhTBDYXPiA1AitiU2clEyYYHhtLYwthDyo=",
        "gridRow3": {
          "city": "Los Angeles",
          "name": "James Franco",
          "age__pfvld": [28, {"type": "intnum", "constraint": {"minExc": 6, "maxExc": 80}}],
          "education": "College"
        },
        "gridRow4": {
          "city": "San Diego",
          "name": "Ellen Compell",
          "age__pfvld": [20, {"type": "intnum"}],
          "education": "Some College"
        }
      }
    },
    "pfSet3": {
      "caption_cn__pfenc": "HTQFYBo2fHoGYR9WbgoqRCgCYytMXyUCd2xVSzdhR1JhbzsqRwhzQxB7Y1xGPDUUMAxVC2NSCh1OAxhRCA9OdW8TdBRkNkESbyEWOFAAbh9BVAsncXZNZ1BUfVdGcW5AIENnJGRfcXV1SwBiNXR1Cz5Ee3xEf2YVQn5iUhQUAmtENFIrZhwGfUtifXFxfhx9em0QPXR3bHEjSER4JmEWbENZXVMqe04XcF9RA1MRRRYGAFR7YF0WQ118aHAWYld5IGlwaEMlMHRqYEQGQWZ5HksmAnV9ZBxYdXwHYHFyDFJzalxMdnM2AkBNQW44Al0heB0KclB7XRc8fn93BRd0ch00BGBhS3wDBWEfV25xUERSdmMrTV8mf3cVI0s3YEcram9DWEcIf0MTeWNcMw==",
      "image_cn": {
        "src__pfcrc": ["/images/pfm/karina_storm2.jpg", "687968667"],
        "altSrc__pfvld": ["http://media.eurekalert.org/multimedia_prod/pub/web/77824_web.jpg", {"type": "urlstr"}]
      },
      "imageType_cn__pfenc": "HURwYGpBPislYR9VbnJYRCgFYytMXyYEd2wkS0BrR1gab0hbR390DCItYyFATRFWZy8zaxNCFxsoZ2IyaAtZaWV1aGBxVkYFPBJWHk19fX82QRcmF2swY0Eze0RbDnxXU1NwInVIA2hiQTIpF2QVBV8gc2E0GXARQ2sFInJONmtFQ1JcEhx2CEtoCiBdLRwBDm0TSXRwG3EkRUQDJmFrE0NTXFNeBw==",
      "grid_cn": {
        "gridRow1": {
          "city": "纽约",
          "name": "Jonesy Band",
          "age__pfvld": [16, {"type": "intnum", "constraint": {"minExc": 10, "maxExc": 90}}],
          "education": "大学以下"
        },
        "gridRow2": {
          "city": "芝加哥",
          "name": "Mary Kay",
          "age__pfvld": [35, {"type": "intnum", "constraint": {"minExc": 15, "maxExc": 100}}],
          "education": "研究生"
        },
        "gridRow3___pfenc": "HUZwYGpBOis3PX9ReRZbIE90dktLSEECZHEgWldgIE8cfF9SJmh+X3cPcUFPLnUkdEhCfHNFcXxZcDQVIFxOfmUTfhNkQUQSZFB5GAVdOH9FQXQWNSAWOUFDCkRRC3xXUxclBHVIAWhjMmd1QHNoFkgiZnZEPzEhFS8zCDgYVXxFVEQvdAt0HVxoHREBbnhwHQllXBQHfRUlVSB3QHZhcFEl",
        "gridRow4": {
          "city": "圣地亚哥",
          "name": "Ellen Compell",
          "age__pfvld": [20, {"type": "intnum"}],
          "education": "未完成大学"
        }
      }
    }
  }
}
{
  "description": "Sample of PlannerFw's model for layouts",
  "version": "0.0.1",
  "category": "JSON data model",
  "author": "W3plan",
  "company": "W3plan",
  "copyright": "Copyright 2015-2016 W3plan Technologies, http://w3plan.net",
  "licenses": "GNU GPLv3 <http://www.gnu.org/licenses/gpl.html>",
  "expiration": 0,
  "pfDataSet": {
    "pfSet1": {
      "headerClr": "#ccc",
      "nav": "float: left; width: 100%; background: #333;",
      "startTime": "function startTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); if (m < 10) m = '0' + m; if (s < 10) s = '0' + s; document.getElementById('clocktxt').innerHTML = h + ':' + m + ':' + s; var t = setTimeout(function(){startTime()}, 500);}"
    },
    "pfSet2": {
      "comment1": "",
      "comment2": "",
      "image": {
        "src": "/images/pfm/karina_storm1.jpg",
        "altSrc": "http://media.eurekalert.org/multimedia_prod/pub/web/77823_web.jpg"
      },
      "grid": {
        "gridRow1": {
          "city": "New York",
          "name": "Jonesy Band",
          "education": "No College",
          "age": 16
        },
        "gridRow3": {
          "city": "Los Angeles",
          "name": "James Franco",
          "education": "College",
          "age": 28
        },
        "gridRow4": {
          "city": "San Diego",
          "name": "Ellen Compell",
          "education": "Some College",
          "age": 20
        },
        "gridRow2": {
          "city": "Chicago",
          "name": "Mary Kay",
          "age": 35,
          "education": "Graduate School"
        }
      },
      "caption": "NASA's Terra satellite passed over Karina in the eastern Pacific 
Ocean on Aug. 14 at 2:40 pm. EDT when it was still a hurricane", "imageType": ["gif", "jpg", "jpeg", "png", "tif"] }, "pfSet3": { "image_cn": { "src": "/images/pfm/karina_storm2.jpg", "altSrc": "http://media.eurekalert.org/multimedia_prod/pub/web/77824_web.jpg" }, "grid_cn": { "gridRow1": { "city": "纽约", "name": "Jonesy Band", "education": "大学以下", "age": 16 }, "gridRow2": { "city": "芝加哥", "name": "Mary Kay", "education": "研究生", "age": 35 }, "gridRow4": { "city": "圣地亚哥", "name": "Ellen Compell", "education": "未完成大学", "age": 20 }, "gridRow3_": { "city": "洛杉矶", "name": "James Franco", "age": 28, "education": "大学" } }, "caption_cn": "美国宇航局Terra卫星在8月14日下午2:40
美国东部时间越过卡琳娜时它还是一个飓风", "imageType_cn": ["gif格式", "jpg格式", "jpeg格式", "png格式", "tif格式"] } } }
<!-- /template/pfm/a/section/s-head.html -->

<!-- PlannerFw implemented operational mechanisms to a dynamic stylesheet language like as Less and Sass -->
<style type="text/css">
<!--%
/*
  1. Variable mechanism to style sheet
  Define variables that are used by style sheet
*/ 
  var headerImgMargin = "15px 30px";
%-->
html, body {
  height: 95%;
  font-family:Sans-Serif;
  font-size: 100%;
} 
#container {
  margin: 0;
  background: #fff;
  min-height: 100%;
} 
#header {
  background: <!--%= /* Use variable from HTTP request response */
          pfDataSet.headerClr %-->;
}
#header img {
  margin: <!--%= /* There is no pfDataSet scope to variables defined in current template */
          headerImgMargin  %-->;
  padding:1px;
  border:1px solid #C0C0C0;
  cursor:crosshair;
}
#header h2 { 
  margin: 0; 
  padding: 40px;
} 
<!--%
/* 
  2. Mixins mechanism to style sheet
  Multi-lines string
*/
  var navUlLi = "\
          list-style-type: none;\
          display: inline;\
          cursor: pointer;\
          ";
  
    /* Arguments of Mixins */
  function navUl(cstr) {
    return  "margin: " + cstr + ";" + 
        "padding: " + cstr + ";";
  }
%-->

#navigation {
<!--%= pfDataSet.nav %-->
}

#navigation ul {
<!--%= navUl(0) %-->
}

#navigation ul li {
<!--%= navUlLi %-->
}
#navigation li {
  display: block;
  float: left;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
#navigation li#tool1 {
  color: #ff0;
}
#navigation li:hover { 
  background: #383; 
}
.content {
  clear: left;
  padding: 40px 20px;
}
.demo {
  display: inline;
}
.democn {
  display: none;
}
<!--% 
/*
  3. Functions and operations to style sheet
*/
  var fontSize = "50%"; 
  var lineHeight = "10px";
%-->
.content h3 {
  color: #000;
  font-size: <!--%= planner.addCssUnit(planner.stripCssUnit(fontSize) * 2 + 60 , "%"); %-->;
  margin: <!--%= planner.addCssUnit(planner.stripCssUnit(lineHeight) * 4); %--> 0;
}
<!--%
/*
  4. Nesting mechanism to style sheet
  Nesting style sheet under a root node as a multiline string literal, 
  PlannerFw would parse nesting mechanism to generate CSS code
*/
var css = "\
  .inner-content {\
    padding: 20px 40px;\
    .dtable {\
      margin: 50px 10%;\
      .dcap {\
          font-style: italic;\
          font-size: 1.3em;\
        }\
      line-height: 40px;\
    }\
  }\
";

/* Write parsed result to output stream */
<!-%= planner.parseNestedCss(css); %->
%-->
.clock {
  padding: 40px 20px;
  float:right;
}
#footer {
  background: #ccc;
  text-align: right;
  padding: 20px;
  height: 2%;
  margin: .5% 0;
}
.about-off {
  display: none;
}
select { 
  width:100%; height:30px;
}
li:nth-child(even) {
  color: #707070;
}
td:nth-child(odd) {
  background: #F0F0F0;
}
dl {
  float:right;
}
dl dt {
  border-bottom: 1px solid #000;
}
.w3planIcon {
  margin: auto 10px auto 30px;
  vertical-align: middle;
}
</style>

<script type="text/javascript">
function showHomeEn() {
  document.getElementById("home-content").style.display = "inline";
  document.getElementById("tool1").style.color = "#ff0";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}
function showHomeCn() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "inline";
  document.getElementById("tool2").style.color = "#ff0";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}
function showHomeRet() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "inline";
  document.getElementById("tool4").style.color = "#ff0";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}
function showDcss() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";  
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "inline";
  document.getElementById("tool5").style.color = "#ff0";
}

<!--%=
  /*
   Dynamic JavaScript Sample
   JavaScript code from HTTP response
  */ 
  pfDataSet.startTime
%-->

</script>

 

<!-- /template/pfm/a/section/s-lang-en.html -->

<div id="home-content" class="content demo">
  <div class="inner-content">
    <!--% if((pfDataSet.comment1) && (pfDataSet.comment2)) { %-->
    <dl>
      <dt><strong>Comment one: </strong></dt> 
      <dd><!--%= pfDataSet.comment1 %--></dd>
      <dt><strong>Comment two: </strong></dt>
      <dd><!--%= pfDataSet.comment2 %--></dd>
    </dl> 
    <!--% } %-->
    
    <h3>NASA satellite spots a weakening Karina, now a tropical storm</h3>
    <p>NASA's Terra satellite passed over Hurricane Karina before it weakened to a tropical storm early on August 15 and imagery showed the vertical wind shear was already taking its toll.</p>
    <p>NASA's Terra satellite passed over Karina on August 14 at 2:40 p.m. EDT when it was still clinging to hurricane status and noticed that wind shear was already having an effect on the storm's structure. The Moderate Resolution Imaging Spectroradiometer or MODIS instrument captured an image that showed that the bulk of Karina's clouds were being pushed to the western side of the storm. That was an indication that vertical wind shear was moderate to strong and it continued weakening the storm.</p>
    <p>On August 15, Karina continued to experience 20 to 25 knots of easterly vertical wind shear, which has caused the center to become partly exposed on the eastern side of the deep convection (rising air that forms the thunderstorms that make up the tropical storm).</p> 
    <p>A tropical storm has maximum sustained wind speed between 39 and 73 mph. By 5 a.m. EDT (0900 UTC) on August 15, Karina's maximum sustained winds had decreased to 70 mph (110 kph) and the National Hurricane Center expects additional weakening over the next two days.</p>
    <p>Karina's center was located latitude 17.2 north and longitude 119.1 west, about 715 miles (1,150 km) west-southwest of the southern tip of Baja California, Mexico. Karina was moving toward the west near 12 mph (19 kph) and is expected to turn to the west-northwest. The estimated minimum central pressure is 990 millibars.</p>
    <p>Wind shear is expected to decrease while Karina moves over sea surface temperatures of near 26C (80F). Tropical cyclones need sea surface temperatures of at least 26C/80F to maintain strength. The National Hurricane Center noted, "this could allow Karina to re-intensify as forecast by the GFDL and the Navy COAMPS computer forecast models. However, any deviation north of the forecast track would take the system over colder water, which would prevent strengthening."</p>
	
    <div style="text-align: center;">
      <img src="<!--%= pfDataSet.image.src %-->"
        alt="MODIS Image of Karina" border="0">
      <div><!--%= pfDataSet.caption %--> </div>
    </div>
    
    <h3>Dynamic unordered list</h3>    
    <ul>
      <!--% 
        /* Nested planner tag sample */
        for(var i = 0, len = pfDataSet.imageType.length; i < len; i++) {
          <!-%= "<li>" + pfDataSet.imageType[i] + "</li>" %->
        }
      %-->
    </ul>
    
    <h3>Dynamic data table</h3>    
    <div class="dtable">
    <table border="1" cellpadding="1" cellspacing="1" width="60%">
      <caption class="dcap"><strong>User data grid</strong></caption>
      <tr>
        <th rowspan="2">City</th>
        <th colspan="3">Users</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Education</th>
      </tr>
      <!--% 
        for(var key in pfDataSet.grid) {
          if (pfDataSet.grid.hasOwnProperty(key)) {
      %-->
      <tr>
      <td><!--%= pfDataSet.grid[key].city %--></td>
      <td><!--%= pfDataSet.grid[key].name %--></td>
      <td><!--%= pfDataSet.grid[key].age %--></td>
      <td><select name="Education" style="cursor:pointer">
        <!--%
          var educations = ["No College", "Some College", "Graduate School", "College"];
          for (var i = 0, len = educations.length; i < len; i++) {
            if (pfDataSet.grid[key].education.toLowerCase() == educations[i].toLowerCase()) {
              <!-%= '<option value="' + educations[i] + '"' + " selected>" + educations[i] + "</option>" %->
            } else {
              <!-%= '<option value="' + educations[i] + '"' + ">" + educations[i] + "</option>" %->  
            }
          }
        %-->
        </select></td></tr>
      <!--%
          }
        }
      %--> 
    </table>
    </div>
  </div>    
</div>

 

<!-- /template/pfm/a/section/s-lang-cn.html -->

<div id="homecn-content" class="content democn">
  <div class="inner-content">
    <h3>美国航空航天局卫星发现的弱卡琳娜飓风,现在已经减弱为热带风暴</h3>
    <p>美国宇航局的Terra卫星越过卡琳娜飓风之后,在8月15卡琳娜飓风已经减弱为热带风暴, 图像显示垂直风切变已经发生了变化</p>
    <p>美国宇航局Terra卫星在8月14日下午2:40美国东部时间越过卡琳娜,当时它仍处于飓风状态,并发现风切变已经对飓风的结构产生影响。中分辨率成像光谱仪和MODIS仪器拍摄的结果表明,大部分卡琳娜的云层被推到了风暴的西侧。这个迹象表明,垂直风切变是中度到强,它继续削弱风暴。</p>
    <p>在8月15日卡琳娜继续垂直风切变20至25节,已经引起了飓风中心部分暴露在深对流东侧(上升气流形成并引发热带风暴的雷雨)</p>
    <p>在8月15日上午5:00美国东部时间卡琳娜的最高持续风速已经下降到每小时70英里(110公里), 美国国家飓风中心预计未来两天将继续减弱</p>
    <p>卡琳娜的中心位于北纬17.2,东经119.1西部,约715英里(1150公里),墨西哥下加利福尼亚州南端的西南偏西。卡琳娜朝着西边以近12英里每小时(19公里)的速度移动,并预计将转向西北偏西方向。估计最低中心气压为990毫巴。</p> <p>当卡琳娜移动到近26℃(80F)温度的海面时风切变预计将减弱,热带气旋至少需要26℃/80°F的海洋表面温度才能保持力量。美国国家飓风中心说,"使用GFDL和海军COAMPS计算机预测模型可以让卡琳娜重新加强,无论无何,预测路径以北的任何偏差将使系统处于冷水上方,这样可以防止其强化。"</p>
    
    <div style="text-align: center;">
      <img src="<!--%= pfDataSet.image_cn.src %-->"
        alt="Tropical storm image" border="0"> 
      <div><!--%= pfDataSet.caption_cn %--> </div>
    </div>
    
    <h4>动态无序列表</h4>    
    <ul>
      <!--%
        /* Nested planner tag sample */
        for(var i = 0, len = pfDataSet.imageType_cn.length; i < len; i++) {
          <!-%= "<li>" + pfDataSet.imageType_cn[i] + "</li>" %->
        }
      %-->
    </ul>
     
    <h4>动态数据表格</h4>    
    <div class="dtable">
    <table border="1" cellpadding="1" cellspacing="1" width="60%">
      <caption class="dcap"><strong>用户数据表</strong></caption>
      <tr>
        <th rowspan="2">城市</th>
        <th colspan="3">用户</th>
      </tr>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>教育</th>
      </tr>
      <!--% 
        for(var key in pfDataSet.grid_cn) {
          if (pfDataSet.grid_cn.hasOwnProperty(key)) {
      %-->
      <tr>
      <td><!--%=pfDataSet.grid_cn[key].city%--></td>
      <td><!--%=pfDataSet.grid_cn[key].name%--></td>
      <td><!--%=pfDataSet.grid_cn[key].age%--></td>
      <td><select name="Education" style="cursor:pointer">
        <!--% 
          var educations = ["大学以下", "未完成大学", "大学", "研究生"];
          for (var i = 0, len = educations.length; i < len; i++) {
            if (pfDataSet.grid_cn[key].education.toLowerCase() == educations[i].toLowerCase()) {
              <!-%= '<option value="' + educations[i] + '"' + " selected>" + educations[i] + "</option>" %->
            } else {
              <!-%= '<option value="' + educations[i] + '"' + ">" + educations[i] + "</option>" %->
            }
          }
        %-->
        </select></td></tr>
      <!--%
          }
        }
      %-->
    </table>
    </div>
  </div>
</div>

<div id="calender-css" class="content about-off">
  <div style="margin-top:100px;text-align:center;">
    <p><strong>A simple calendar to switch styles from Session Storage without any HTTP requests</strong></p>    
    <button type="button" style="margin-top:50px;cursor:pointer;" onclick="doSwitch()"> Switch calendar styles </button>    
    <div class="calender">
      <script type="text/javascript">
        writeCalendar();        
        var num = 0;
        function doSwitch() {
          if (num % 2) {
            postplanner.switchCssByUrl("/css/theme/theme-one.css", "/css/theme/theme-one.css");
          } else {
            postplanner.switchCssByUrl("/css/theme/theme-one.css", "/css/theme/theme-two.css");
          }
          num += 1;
        } 
      </script>
    </div>
  </div>
</div>

 

<?xml version="1.0" encoding="UTF-8" ?>
<!-- An XML needs a root node with any effective name,  and root node could be with namespace declaring -->
<root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="schema1.xsd" 
      xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <description>XML data model for layout</description>
  <version>0.0.1</version>
  <category>JSON data model</category>
  <author>W3plan</author>
  <company>W3plan</company>
  <copyright>Copyright 2015-2016 W3plan Technologies, http://w3plan.net</copyright>
  <licenses>GNU GPLv3 <http://www.gnu.org/licenses/gpl.html></licenses>
    <expiration>0</expiration>
  <pfDataSet>
    <pfSet1>
      <!-- Data part would be used for templates  -->
      <headerClr>#ccc</headerClr>
      <nav__pfcrc>float: left; width: 100%; background: #333;</nav__pfcrc>
      <nav__pfcrc>2064493575</nav__pfcrc>
	  <startTime__pfenc>XgRcJiwaNixmdmoQP1IaFT4vKwtcSFxiYG1HXEJ8VSh8eEodAz9jVGI+KQAXEXVVBgMVOXNFAh0KNj9RfwFOfm4TfhBkQURBNxAWS1hQbmkzBV0ANTdbMQEFcA4WOipAU05nU2lfAA91QXIxETN1AUoMZncyLjowFzdpBjICPScZBAMLIhx2AEtoAXEHCRx2CD4zC3QAaCdEQyU1CiAyLEgGCwI4Jgg9KB4bEURrVgF6HEIAckpkHh4cYmVxZkosRH4FdVUkU2NiZlFmRnpkaF4KFmIIdgolYGt1dmYACVIAZVxHBXNBdkBGRiZfBzpBfwgiUVBxXhdLfikQcQJoeXtUAHVpQ3xwemFoUzgWWlFPdQJLS0pBdWVkR1xFfFBafHg4TlB9NUNhCGNWRgw/BTcAFSAiWVU8Hwc2ESBcBTgVTwQ2ZEFMEmRVUBUHWyAuDwUXVmNrR29KGFYPBjoRMSw6Z1NgXwAJdUFyL1VzYBZII2Z2Rn9nY1N9BkRlQVV8R1RFLHQLdFVLaAhxBgkcdghtYE50ARlxU0dEc1VhYRdDU14FTnApd3RKHlUEdkEDNxxDcnJLEFJKCSMwIAAbLAQjQCRDVU43JzkCNx0sL39cXxZiAXYOIzYtJCEgY1AaV3dLTRBkShFSMFN5ORFKVHgIexJHeksBO2NtcQ==</startTime__pfenc>
    </pfSet1>
    <pfSet2>
      <comment1></comment1>
      <comment2></comment2>
	  <caption__pfenc>djBhBH1BbjFmdmo3LkEaAE90dh0YDgErPj0WC1drUho4OQkOBmh0Vj08IxZTWmAtIx8ZIDdSAGkCLH9GfU0DKXIEfTcgAABSJAwWS1hoKjkeF1sHcXxFc1cyWhNGexxAU0YNAjUbXWhiQy0pVXNgcg8GbWFEamRgU3x3ACNTQn5FVEQvZQlhCl4qVXoReQkBfBx3S2FFMDEPVVNxDDB2Z1YWDwVOcVshMhMEWFNhQ1JmC0EqIgomHhtYPjA=</caption__pfenc>
      <image>
        <src__pfcrc>/images/pfm/karina_storm1.jpg</src__pfcrc>
        <src__pfcrc>1856105291</src__pfcrc>
        <altSrc__pfvld>http://media.eurekalert.org/multimedia_prod/pub/web/77823_web.jpg</altSrc__pfvld>
        <altSrc__pfvld>
          <type>urlstr</type>
        </altSrc__pfvld>
      </image>
      <imageType__pfenc>HURwYGpBPislYWhRbgErRFh2Y1xLEBQgd2ZQS0AaR1hpb0hZCD0jAXd4dEFEK3VUckhCfCYZVXxZcH9GDhxZfHIEfyYoFVEFZEcGPQ==</imageType__pfenc>
      <grid>
        <gridRow1>
          <city>New York</city>
          <name>Jonesy Band</name>
          <age__pfvld>16</age__pfvld>
          <age__pfvld>
            <type>intnum</type>
            <constraint>
              <minExc>10</minExc>
              <maxExc>90</maxExc>
            </constraint>
          </age__pfvld>
          <education>No College</education>
        </gridRow1>
		<gridRow2__pfenc>HUZwYGpBOis3PX9ReRZbIE90dktLSCcvOzcDCR18UFh8eDlOUH8oBz8vY1ZETWMnZ19Aa2RFfzgZO39GfXIKNXIEf3dzMFEFZANUHE0KeX9EMBdWZH1Ac1YyHVNRLT0QAhc2CD8UFn9iVnEGVXNgFkhTBDYXPiA1AitiU2clEyYYHhtLYwthDyo=
        </gridRow2__pfenc>
        <gridRow3>
          <city>Los Angeles</city>
          <name>James Franco</name>
          <age__pfvld>28</age__pfvld>
          <age__pfvld>
            <type>intnum</type>
            <constraint>
              <minExc>6</minExc>
              <maxExc>80</maxExc>
            </constraint>
          </age__pfvld>
          <education>College</education>
        </gridRow3>
        <gridRow4>
          <city>San Diego</city>
          <name>Ellen Compell</name>
          <age__pfvld>20</age__pfvld>
          <age__pfvld>
            <type>intnum</type>
          </age__pfvld>
          <education>Some College</education>
        </gridRow4>
      </grid>
    </pfSet2>
    <pfSet3>
	<caption_cn__pfenc>HTQFYBo2fHoGYR9WbgoqRCgCYytMXyUCd2xVSzdhR1JhbzsqRwhzQxB7Y1xGPDUUMAxVC2NSCh1OAxhRCA9OdW8TdBRkNkESbyEWOFAAbh9BVAsncXZNZ1BUfVdGcW5AIENnJGRfcXV1SwBiNXR1Cz5Ee3xEf2YVQn5iUhQUAmtENFIrZhwGfUtifXFxfhx9em0QPXR3bHEjSER4JmEWbENZXVMqe04XcF9RA1MRRRYGAFR7YF0WQ118aHAWYld5IGlwaEMlMHRqYEQGQWZ5HksmAnV9ZBxYdXwHYHFyDFJzalxMdnM2AkBNQW44Al0heB0KclB7XRc8fn93BRd0ch00BGBhS3wDBWEfV25xUERSdmMrTV8mf3cVI0s3YEcram9DWEcIf0MTeWNcMw==</caption_cn__pfenc>       
      <image_cn>
        <src__pfcrc>/images/pfm/karina_storm2.jpg</src__pfcrc>
        <src__pfcrc>687968667</src__pfcrc>
        <altSrc__pfvld>http://media.eurekalert.org/multimedia_prod/pub/web/77824_web.jpg</altSrc__pfvld>
        <altSrc__pfvld>
          <type>urlstr</type>
        </altSrc__pfvld>
      </image_cn>
	  <imageType_cn__pfenc>HURwYGpBPislYR9VbnJYRCgFYytMXyYEd2wkS0BrR1gab0hbR390DCItYyFATRFWZy8zaxNCFxsoZ2IyaAtZaWV1aGBxVkYFPBJWHk19fX82QRcmF2swY0Eze0RbDnxXU1NwInVIA2hiQTIpF2QVBV8gc2E0GXARQ2sFInJONmtFQ1JcEhx2CEtoCiBdLRwBDm0TSXRwG3EkRUQDJmFrE0NTXFNeBw==</imageType_cn__pfenc>
      <grid_cn>
        <gridRow1>
          <city>纽约</city>
          <name>Jonesy Band</name>
          <age__pfvld>16</age__pfvld>
          <age__pfvld>
            <type>intnum</type>
            <constraint>
              <minExc>10</minExc>
              <maxExc>90</maxExc>
            </constraint>
          </age__pfvld>
          <education>大学以下</education>
        </gridRow1>
        <gridRow2>
          <city>芝加哥</city>
          <name>Mary Kay</name>
          <age__pfvld>35</age__pfvld>
          <age__pfvld>
            <type>intnum</type>
            <constraint>
              <minExc>15</minExc>
              <maxExc>100</maxExc>
            </constraint>
          </age__pfvld>
          <education>研究生</education>
        </gridRow2>
		<gridRow3___pfenc>HUZwYGpBOis3PX9ReRZbIE90dktLSEECZHEgWldgIE8cfF9SJmh+X3cPcUFPLnUkdEhCfHNFcXxZcDQVIFxOfmUTfhNkQUQSZFB5GAVdOH9FQXQWNSAWOUFDCkRRC3xXUxclBHVIAWhjMmd1QHNoFkgiZnZEPzEhFS8zCDgYVXxFVEQvdAt0HVxoHREBbnhwHQllXBQHfRUlVSB3QHZhcFEl</gridRow3___pfenc>
        <gridRow4>
          <city>圣地亚哥</city>
          <name>Ellen Compell</name>
          <age__pfvld>20</age__pfvld>
          <age__pfvld>
            <type>intnum</type>
          </age__pfvld>
          <education>未完成大学</education>
        </gridRow4>
      </grid_cn>
    </pfSet3>
  </pfDataSet>
</root>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="Cache-control" content="max-age=0">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache-Control" content="must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title>PlannerFw Exec Example</title>
<!-- Copyright 2015-2016 W3plan Technologies, http://w3plan.net -->
<link type="text/css" href="/css/pfcss/pfm/b/double-ring.css" rel="stylesheet">
<style type="text/css" id="pf_JTJGY3NzJTJGcGZjc3MlMkZwZm0lMkZhJTJGdGhlbWUtYS5jc3M">
span.label {
  color: #000;
  width: 30px;
  height: 18px;
  text-align: center;
  margin-top: 0;
  background: #ffF;
  font: bold 13px Arial;
}
span.c1 {
  cursor: hand;
  color: #000;
  width: 30px;
  height: 18px;
  text-align: center;
  margin-top: 0;
  background: #ffF;
  font: bold 13px Arial;
}
span.c2 {
  cursor: hand;
  color: red;
  width: 30px;
  height: 18px;
  text-align: center;
  margin-top: 0;
  background: #ffF;
  font: bold 13px Arial;
}
span.c3 {
  cursor: hand;
  color: #b0b0b0;
  width: 30px;
  height: 18px;
  text-align: center;
  margin-top: 0;
  background: #ffF;
  font: bold 12px Arial;
}
form {
  display: inline-block;
  text-align: center;
}
td {
  padding: 10px;
}
select {
  padding: 5px;
}
.calender {
  width: 1000px;
  margin: 50px auto;
}
</style>
<script type="text/javascript" src="/js/pfm/import-and-load-sample.js"></script>
<script type="text/javascript" src="/app/lib/postprocessor.min.js"></script>

<!-- PlannerFw implemented operational mechanisms to a dynamic stylesheet language like as Less and Sass -->
<style type="text/css">
html, body {
  height: 95%;
  font-family: Sans-Serif;
  font-size: 100%;
}
#container {
  margin: 0;
  background: #fff;
  min-height: 100%;
}
#header {
  background: #ccc;
}
#header img {
  margin: 15px 30px;
  padding: 1px;
  border: 1px solid #C0C0C0;
  cursor: crosshair;
}
#header h2 {
  margin: 0;
  padding: 40px;
}
#navigation {
  float: left;
  width: 100%;
  background: #333;
}
#navigation ul {
  margin: 0;
  padding: 0;
}
#navigation ul li {
  list-style-type: none;
  display: inline;
  cursor: pointer;
}
#navigation li {
  display: block;
  float: left;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
  border-right: 1px solid #fff;
}
#navigation li#tool1 {
  color: #ff0;
}
#navigation li:hover {
  background: #383;
}
.content {
  clear: left;
  padding: 40px 20px;
}
.demo {
  display: inline;
}
.democn {
  display: none;
}
.content h3 {
  color: #000;
  font-size: 160%;
  margin: 40px 0;
}
.inner-content {
  padding: 20px 40px;
}
.inner-content .dtable {
  margin: 50px 10%;
  line-height: 40px;
}
.inner-content .dtable .dcap {
  font-style: italic;
  font-size: 1.3em;
}
.clock {
  padding: 40px 20px;
  float: right;
}
#footer {
  background: #ccc;
  text-align: right;
  padding: 20px;
  height: 2%;
  margin: .5% 0;
}
.about-off {
  display: none;
}
select {
  width: 100%;
  height: 30px;
}
li:nth-child(even) {
  color: #707070;
}
td:nth-child(odd) {
  background: #F0F0F0;
}
dl {
  float: right;
}
dl dt {
  border-bottom: 1px solid #000;
}
.w3planIcon {
  margin: auto 10px auto 30px;
  vertical-align: middle;
}
</style>
<script type="text/javascript">
function showHomeEn() {
  document.getElementById("home-content").style.display = "inline";
  document.getElementById("tool1").style.color = "#ff0";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}

function showHomeCn() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "inline";
  document.getElementById("tool2").style.color = "#ff0";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}

function showHomeRet() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "inline";
  document.getElementById("tool4").style.color = "#ff0";
  document.getElementById("dynamic-css").style.display = "none";
  document.getElementById("tool5").style.color = "#fff";
}

function showDcss() {
  document.getElementById("home-content").style.display = "none";
  document.getElementById("tool1").style.color = "#fff";
  document.getElementById("homecn-content").style.display = "none";
  document.getElementById("tool2").style.color = "#fff";
  document.getElementById("about-content").style.display = "none";
  document.getElementById("calender-css").style.display = "none";
  document.getElementById("tool4").style.color = "#fff";
  document.getElementById("dynamic-css").style.display = "inline";
  document.getElementById("tool5").style.color = "#ff0";
}

function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  if (m < 10) m = '0' + m;
  if (s < 10) s = '0' + s;
  document.getElementById('clocktxt').innerHTML = h + ':' + m + ':' + s;
  var t = setTimeout(function() {
    startTime()
  }, 500);
}
</script>
</head>

<body>
<!-- When creating static HTML code to template using   as a place holder in place of Plannner output tag because of Plannner tag is a HTML comment tag -->
<div id="container">
<div id="header">
  <div style="float:left;"><img id="header_img" src="/app/plannerfw-logo.jpg" alt="Header image" width="120" height="60" style="padding:1px;border:1px solid #C0C0C0;cursor:crosshair;" title=" PlannerFw Logo "></div>
  <div class="clock" id="clocktxt">15:39:22</div>
  <h2>PlannerFw Exec Demo</h2></div>
<script type="text/javascript">
  startTime();
</script>
<div id="navigation">
  <ul>
    <li id="tool1" onclick="showHomeEn()" style="color: rgb(255, 255, 255);">Single-byte-charaset</li>
    <li id="tool2" onclick="showHomeCn()" style="color: rgb(255, 255, 255);">Multi-byte-charaset</li>
    <li id="tool4" onclick="showHomeRet()" style="color: rgb(255, 255, 255);">PostProcessor</li>
    <li id="tool5" onclick="showDcss()" style="color: rgb(255, 255, 0);">PFCSS</li>
  </ul>
</div>
<div id="home-content" class="content demo" style="display: none;">
  <div class="inner-content">
    <h3>NASA satellite spots a weakening Karina, now a tropical storm</h3>
    <p> NASA's Terra satellite passed over Hurricane Karina before it weakened to a tropical storm early on August 15 and imagery showed the vertical wind shear was already taking its toll. </p>
    <p> NASA's Terra satellite passed over Karina on August 14 at 2:40 p.m. EDT when it was still clinging to hurricane status and noticed that wind shear was already having an effect on the storm's structure. The Moderate Resolution Imaging Spectroradiometer or MODIS instrument captured an image that showed that the bulk of Karina's clouds were being pushed to the western side of the storm. That was an indication that vertical wind shear was moderate to strong and it continued weakening the storm. </p>
    <p> On August 15, Karina continued to experience 20 to 25 knots of easterly vertical wind shear, which has caused the center to become partly exposed on the eastern side of the deep convection (rising air that forms the thunderstorms that make up the tropical storm). </p>
    <p> A tropical storm has maximum sustained wind speed between 39 and 73 mph. By 5 a.m. EDT (0900 UTC) on August 15, Karina's maximum sustained winds had decreased to 70 mph (110 kph) and the National Hurricane Center expects additional weakening over the next two days. </p>
    <p> Karina's center was located latitude 17.2 north and longitude 119.1 west, about 715 miles (1,150 km) west-southwest of the southern tip of Baja California, Mexico. Karina was moving toward the west near 12 mph (19 kph) and is expected to turn to the west-northwest. The estimated minimum central pressure is 990 millibars. </p>
    <p> Wind shear is expected to decrease while Karina moves over sea surface temperatures of near 26C (80F). Tropical cyclones need sea surface temperatures of at least 26C/80F to maintain strength. The National Hurricane Center noted, "this could allow Karina to re-intensify as forecast by the GFDL and the Navy COAMPS computer forecast models. However, any deviation north of the forecast track would take the system over colder water, which would prevent strengthening." </p>
    <p> </p>
    <div style="text-align: center;">
      <img src="/images/pfm/karina_storm1.jpg" alt="MODIS Image of Karina" border="0">
      <div>NASA's Terra satellite passed over Karina in the eastern Pacific <br> Ocean on Aug. 14 at 2:40 pm. EDT when it was still a hurricane </div>
    </div>
    <h3>Dynamic unordered list</h3>
    <ul>
      <li>gif</li>
      <li>jpg</li>
      <li>jpeg</li>
      <li>png</li>
      <li>tif</li>   </ul>
    <h3>Dynamic data table</h3>
    <div class="dtable">
      <table border="1" cellpadding="1" cellspacing="1" width="60%">
        <caption class="dcap"><strong>User data grid</strong></caption>
        <tbody>
          <tr>
            <th rowspan="2">City</th>
            <th colspan="3">Users</th>
          </tr>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Education</th>
          </tr>
          <tr>
            <td>New York</td>
            <td>Jonesy Band</td>
            <td>16</td>
            <td><select name="Education" style="cursor:pointer"> <option value="No College" selected="">No College</option><option value="Some College">Some College</option><option value="Graduate School">Graduate School</option><option value="College">College</option> </select></td>
          </tr>
          <tr>
            <td>Los Angeles</td>
            <td>James Franco</td>
            <td>28</td>
            <td><select name="Education" style="cursor:pointer"> <option value="No College">No College</option><option value="Some College">Some College</option><option value="Graduate School">Graduate School</option><option value="College" selected="">College</option> </select></td>
          </tr>
          <tr>
            <td>San Diego</td>
            <td>Ellen Compell</td>
            <td>20</td>
            <td><select name="Education" style="cursor:pointer"> <option value="No College">No College</option><option value="Some College" selected="">Some College</option><option value="Graduate School">Graduate School</option><option value="College">College</option> </select></td>
          </tr>
          <tr>
            <td>Chicago</td>
            <td>Mary Kay</td>
            <td>35</td>
            <td><select name="Education" style="cursor:pointer"> <option value="No College">No College</option><option value="Some College">Some College</option><option value="Graduate School" selected="">Graduate School</option><option value="College">College</option> </select></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div id="homecn-content" class="content democn" style="display: none;">
  <div class="inner-content">
    <h3>美国航空航天局卫星发现的弱卡琳娜飓风,现在已经减弱为热带风暴</h3>
    <p> 美国宇航局的Terra卫星越过卡琳娜飓风之后,在8月15卡琳娜飓风已经减弱为热带风暴, 图像显示垂直风切变已经发生了变化 </p>
    <p> 美国宇航局Terra卫星在8月14日下午2:40美国东部时间越过卡琳娜,当时它仍处于飓风状态,并发现风切变已经对飓风的结构产生影响。中分辨率成像光谱仪和MODIS仪器拍摄的结果表明,大部分卡琳娜的云层被推到了风暴的西侧。这个迹象表明,垂直风切变是中度到强,它继续削弱风暴。 </p>
    <p> 在8月15日卡琳娜继续垂直风切变20至25节,已经引起了飓风中心部分暴露在深对流东侧(上升气流形成并引发热带风暴的雷雨) </p>
    <p> 在8月15日上午5:00美国东部时间卡琳娜的最高持续风速已经下降到每小时70英里(110公里), 美国国家飓风中心预计未来两天将继续减弱 </p>
    <p> 卡琳娜的中心位于北纬17.2,东经119.1西部,约715英里(1150公里),墨西哥下加利福尼亚州南端的西南偏西。卡琳娜朝着西边以近12英里每小时(19公里)的速度移动,并预计将转向西北偏西方向。估计最低中心气压为990毫巴。 </p>
    <p> 当卡琳娜移动到近26℃(80F)温度的海面时风切变预计将减弱,热带气旋至少需要26℃/80°F的海洋表面温度才能保持力量。美国国家飓风中心说,"使用GFDL和海军COAMPS计算机预测模型可以让卡琳娜重新加强,无论无何,预测路径以北的任何偏差将使系统处于冷水上方,这样可以防止其强化。" </p>
    <div style="text-align: center;">
      <img src="/images/pfm/karina_storm2.jpg" alt="Tropical storm image" border="0">
      <div>美国宇航局Terra卫星在8月14日下午2:40<br>美国东部时间越过卡琳娜时它还是一个飓风 </div>
    </div>
    <h4>动态无序列表</h4>
    <ul>
      <li>gif格式</li>
      <li>jpg格式</li>
      <li>jpeg格式</li>
      <li>png格式</li>
      <li>tif格式</li>   </ul>
    <h4>动态数据表格</h4>
    <div class="dtable">
      <table border="1" cellpadding="1" cellspacing="1" width="60%">
        <caption class="dcap"><strong>用户数据表</strong></caption>
        <tbody>
          <tr>
            <th rowspan="2">城市</th>
            <th colspan="3">用户</th>
          </tr>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>教育</th>
          </tr>
          <tr>
            <td>纽约</td>
            <td>Jonesy Band</td>
            <td>16</td>
            <td><select name="Education" style="cursor:pointer"> <option value="大学以下" selected="">大学以下</option><option value="未完成大学">未完成大学</option><option value="大学">大学</option><option value="研究生">研究生</option> </select></td>
          </tr>
          <tr>
            <td>芝加哥</td>
            <td>Mary Kay</td>
            <td>35</td>
            <td><select name="Education" style="cursor:pointer"> <option value="大学以下">大学以下</option><option value="未完成大学">未完成大学</option><option value="大学">大学</option><option value="研究生" selected="">研究生</option> </select></td>
          </tr>
          <tr>
            <td>圣地亚哥</td>
            <td>Ellen Compell</td>
            <td>20</td>
            <td><select name="Education" style="cursor:pointer"> <option value="大学以下">大学以下</option><option value="未完成大学" selected="">未完成大学</option><option value="大学">大学</option><option value="研究生">研究生</option> </select></td>
          </tr>
          <tr>
            <td>洛杉矶</td>
            <td>James Franco</td>
            <td>28</td>
            <td><select name="Education" style="cursor:pointer"> <option value="大学以下">大学以下</option><option value="未完成大学">未完成大学</option><option value="大学" selected="">大学</option><option value="研究生">研究生</option> </select></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div id="calender-css" class="content about-off" style="display: none;">
  <div style="margin-top:100px;text-align:center;">
    <p><strong>A simple calendar to switch styles from Session Storage without any HTTP requests</strong></p><button type="button" style="margin-top:50px;cursor:pointer;" onclick="doSwitch()"> Switch calendar styles </button>
    <div class="calender">
      <script type="text/javascript">
        writeCalendar();
        var num = 0;

        function doSwitch() {
          if (num % 2) {
            postplanner.switchCssByUrl("/css/pfcss/pfm/a/theme-a.css", "/css/pfcss/pfm/a/theme-a.css");
          } else {
            postplanner.switchCssByUrl("/css/pfcss/pfm/a/theme-a.css", "/css/pfcss/pfm/b/theme-b.css");
          }
          num += 1;
        }
      </script>
      <form name="calForm">
        <table border="1">
          <tbody>
            <tr>
              <td>
                <table width="100%">
                  <tbody>
                    <tr>
                      <td align="left"><select name="selMonth" onchange="changeCal()"><option value="0">January</option><option value="1">February</option><option value="2">March</option><option value="3">April</option><option value="4">May</option><option value="5">June</option><option value="6">July</option><option value="7" selected="">August</option><option value="8">September</option><option value="9">October</option><option value="10">November</option><option value="11">December</option></select></td>
                      <td align="right"><select name="selYear" onchange="changeCal()"><option value="2014">2014</option><option value="2015">2015</option><option value="2016" selected="">2016</option><option value="2017">2017</option><option value="2018">2018</option></select></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <table border="1">
                  <tbody>
                    <tr>
                      <td align="center"><span class="label">Sun</span></td>
                      <td align="center"><span class="label">Mon</span></td>
                      <td align="center"><span class="label">Tue</span></td>
                      <td align="center"><span class="label">Wed</span></td>
                      <td align="center"><span class="label">Thu</span></td>
                      <td align="center"><span class="label">Fri</span></td>
                      <td align="center"><span class="label">Sat</span></td>
                    </tr>
                    <tr>
                      <td align="center"><span id="sp0" onclick="changeBg(this.id)" class="c3">31</span></td>
                      <td align="center"><span id="sp1" onclick="changeBg(this.id)" class="c1">1</span></td>
                      <td align="center"><span id="sp2" onclick="changeBg(this.id)" class="c1">2</span></td>
                      <td align="center"><span id="sp3" onclick="changeBg(this.id)" class="c1">3</span></td>
                      <td align="center"><span id="sp4" onclick="changeBg(this.id)" class="c1">4</span></td>
                      <td align="center"><span id="sp5" onclick="changeBg(this.id)" class="c1">5</span></td>
                      <td align="center"><span id="sp6" onclick="changeBg(this.id)" class="c2">6</span></td>
                    </tr>
                    <tr>
                      <td align="center"><span id="sp7" onclick="changeBg(this.id)" class="c2">7</span></td>
                      <td align="center"><span id="sp8" onclick="changeBg(this.id)" class="c1">8</span></td>
                      <td align="center"><span id="sp9" onclick="changeBg(this.id)" class="c1">9</span></td>
                      <td align="center"><span id="sp10" onclick="changeBg(this.id)" class="c1">10</span></td>
                      <td align="center"><span id="sp11" onclick="changeBg(this.id)" class="c1">11</span></td>
                      <td align="center"><span id="sp12" onclick="changeBg(this.id)" class="c1">12</span></td>
                      <td align="center"><span id="sp13" onclick="changeBg(this.id)" class="c2">13</span></td>
                    </tr>
                    <tr>
                      <td align="center"><span id="sp14" onclick="changeBg(this.id)" class="c2">14</span></td>
                      <td align="center"><span id="sp15" onclick="changeBg(this.id)" class="c1">15</span></td>
                      <td align="center"><span id="sp16" onclick="changeBg(this.id)" class="c1">16</span></td>
                      <td align="center"><span id="sp17" onclick="changeBg(this.id)" class="c1">17</span></td>
                      <td align="center"><span id="sp18" onclick="changeBg(this.id)" class="c1">18</span></td>
                      <td align="center"><span id="sp19" onclick="changeBg(this.id)" class="c1">19</span></td>
                      <td align="center"><span id="sp20" onclick="changeBg(this.id)" class="c2">20</span></td>
                    </tr>
                    <tr>
                      <td align="center"><span id="sp21" onclick="changeBg(this.id)" class="c2">21</span></td>
                      <td align="center"><span id="sp22" onclick="changeBg(this.id)" class="c1" style="background-color: rgb(144, 238, 144);">22</span></td>
                      <td align="center"><span id="sp23" onclick="changeBg(this.id)" class="c1">23</span></td>
                      <td align="center"><span id="sp24" onclick="changeBg(this.id)" class="c1">24</span></td>
                      <td align="center"><span id="sp25" onclick="changeBg(this.id)" class="c1">25</span></td>
                      <td align="center"><span id="sp26" onclick="changeBg(this.id)" class="c1">26</span></td>
                      <td align="center"><span id="sp27" onclick="changeBg(this.id)" class="c2">27</span></td>
                    </tr>
                    <tr>
                      <td align="center"><span id="sp28" onclick="changeBg(this.id)" class="c2">28</span></td>
                      <td align="center"><span id="sp29" onclick="changeBg(this.id)" class="c1">29</span></td>
                      <td align="center"><span id="sp30" onclick="changeBg(this.id)" class="c1">30</span></td>
                      <td align="center"><span id="sp31" onclick="changeBg(this.id)" class="c1">31</span></td>
                      <td align="center"><span id="sp32" onclick="changeBg(this.id)" class="c3">1</span></td>
                      <td align="center"><span id="sp33" onclick="changeBg(this.id)" class="c3">2</span></td>
                      <td align="center"><span id="sp34" onclick="changeBg(this.id)" class="c3">3</span></td>
                    </tr>
                    <tr>
                      <td align="center"><span id="sp35" onclick="changeBg(this.id)" class="c3">4</span></td>
                      <td align="center"><span id="sp36" onclick="changeBg(this.id)" class="c3">5</span></td>
                      <td align="center"><span id="sp37" onclick="changeBg(this.id)" class="c3">6</span></td>
                      <td align="center"><span id="sp38" onclick="changeBg(this.id)" class="c3">7</span></td>
                      <td align="center"><span id="sp39" onclick="changeBg(this.id)" class="c3">8</span></td>
                      <td align="center"><span id="sp40" onclick="changeBg(this.id)" class="c3">9</span></td>
                      <td align="center"><span id="sp41" onclick="changeBg(this.id)" class="c3">10</span></td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>
<div id="dynamic-css" class="content about-off" style="display: inline;">
  <div class="hoja">PlannerFw</div>
</div>
<div id="about-content" class="content about-off" style="display: none;">
  <div class="inner-content"></div>
</div>
</div>
<div id="footer"> Copyright © 2015-
<script>
  document.write(new Date().getFullYear())
</script>2016
<a href="http://w3plan.net/" target="_blank"><img class="w3planIcon" src="/images/w3plan-logo-small.png" width="25" height="15"></a> W3plan </div>
</body>

</html>

 

PlannerFw is able to work with all server-side web frameworks and extremely reduced complexity of backend processes as web framework only performs database access and data output, PlannerFw would take over view part of a web framework.

The following text is a simple example of PlannerFw working with PHP CodeIgniter framework, the project code could be downloaded from this site or downloaded from GitHub https://github.com/w3plan/PlannerFw-CodeIgniter

 

Original controller and view of a CRUD CodeIgniter application

 

function index($offset = 0) {
	// offset
	$uri_segment = 3;
	$offset = $this->uri->segment($uri_segment);
	
	// load data
	$persons = $this->Person_model->get_paged_list($this->limit, $offset)->result();
	
	// generate pagination
	$this->load->library('pagination');
	$config['base_url'] = site_url('person/index/');
	$config['total_rows'] = $this->Person_model->count_all();
	$config['per_page'] = $this->limit;
	$config['uri_segment'] = $uri_segment;
	$this->pagination->initialize($config);
	$data['pagination'] = $this->pagination->create_links();
	
	// generate table data
	$this->load->library('table');
	$this->table->set_empty(" ");
	$this->table->set_heading('No', 'Name', 'Gender', 'Date of Birth (yyyy-mm-dd)', 'Operations');
	$i = 0 + $offset;
	foreach ($persons as $person) {
		$this->table->add_row(++$i, $person->name, 
                strtoupper($person->gender)=='M'? 'Male':'Female', 
                date('Y-m-d',strtotime($person->dob)), 
                anchor('person/view/'.$person->id, 'view', array('class'=>'view')).' '.
                anchor('person/update/'.$person->id, 'update', array('class'=>'update')).' '.
                anchor('person/delete/'.$person->id, 'delete',array('class'=>'delete', 
                       'onclick'=>"return confirm('Are you sure want to delete this person?')"))
		);
	}
	$data['table'] = $this->table->generate();
	
	// load view
	$this->load->view('personList', $data);
}

 

// personList view file for MVC controller index.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>PlannerFw + PHP CodeIgniter Application</title>

<link href="<?php echo base_url(); ?>css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>
	<div class="content">
		<h1>PlannerFw + PHP CodeIgniter Application</h1>
		<div class="paging"><?php echo $pagination; ?></div>
		<div class="data"><?php echo $table; ?></div>
		<br />
		<?php echo anchor('person/add/','add new data',array('class'=>'add')); ?>
	</div>
</body>
</html>

 

Updated controller and PlannerFw's page processor as views

 

function index($offset = 0) {
	// offset
	$uri_segment = 3;
	$offset = $this->uri->segment($uri_segment);
	
	// generate pagination
	$this->load->library('pagination');
	$config['base_url'] = site_url('person/index/');
	$config['total_rows'] = $this->Person_model->count_all();
	$config['per_page'] = $this->limit;
	$config['uri_segment'] = $uri_segment;
	$this->pagination->initialize($config);
	
	$pagination = $this->pagination->create_links();		
	// replace " with ' as JSON string can't include " inside 		
	$pagination = str_replace('"', "'", $pagination);
	
	// load data
	$persons = $this->Person_model->get_paged_list($this->limit, $offset)->result();		
	$persons = json_encode($persons);
	
	// assigned template url
	$data['pftml'] = "/template/pfm/a/person-list.html.js";
	// assigned model variable 
	$data['pfmdl'] = <<<EOD
{
	"description": "Persons list of PlannerFw model",
	"expiration": 0,
	"pfDataSet": {
		"pagination": "$pagination",		
		"set_empty": "&nbsp;",
		"persons": $persons
	}
}
EOD;
	$this->load->view('be-index', $data);
}

 

// PlannerFw's page processor be-index.php is an only view for all MVC controller.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>View of CodeIgniter</title>

<!--
  Apply Page Processor Library
-->
<script src="/app/lib/planner.min.js"></script>

<!-- Output a template URL and model -->
<script type="text/javascript">
    var pftml = "<?php echo $pftml ?>";
    var pfmdl = <?php echo $pfmdl ?>;
</script>

<!--
  Apply Page processor
-->
<script src="/app/lib/be-processor.min.js"></script>

</head>
<body>
</body>
</html>

 

Related raw PlannerFw template

 

Using String.fromCharCode(39) to output ' or String.fromCharCode(34) to output " if there is not enough " or ' characters to use in PlannerFw tags.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PlannerFw + PHP CodeIgniter Application</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">
  <h1>PlannerFw + PHP CodeIgniter Application</h1>
  <div class="paging">
    <!--%= pfDataSet.pagination %-->
  </div>
  <div class="data">
    <!--%
      <!-%=
        '<table border="0" cellpadding="4" cellspacing="0">' + 
        "<thead><tr>" + 
        "<th>No</th><th>Name</th><th>Gender</th><th>Date of Birth (yyyy-mm-dd)</th><th>Operations</th>" + 
        "</tr></thead><tbody>"
      %->
      for (i = 0; i < pfDataSet.persons.length; i++) {   
        <!-%=
          '<tr><td>' + pfDataSet.persons[i]['id'] + '</td>' +
          '<td>' + pfDataSet.persons[i]['name'] + '</td>'
        %->
        if (pfDataSet.persons[i]['gender'].toUpperCase() == "M") {
          <!-%= "<td>Male</td>" %->
        } else {
          <!-%= "<td>Female</td>" %->
        }
        <!-%= 
          /*
           *  Using String.fromCharCode(39) to output ' 
           */
          '<td>' + pfDataSet.persons[i]['dob'] + '</td>' +
          '<td>' +
            '<a href="/person/view/' + pfDataSet.persons[i]['id'] + '" class="view">view</a>' +
            '<a href="/person/update/' + pfDataSet.persons[i]['id'] + '" class="update">update</a>' +
            '<a href="/person/delete/' + pfDataSet.persons[i]['id'] + '" class="delete" ' +  
            'onclick="return confirm(' + String.fromCharCode(39) + 'Are you sure want to delete this person?' + 
            String.fromCharCode(39) + ')">delete</a>' + 
          '</td></tr>'
        %->
      }
      <!-%=
        "</tbody>" + 
        "</table>"
      %->
    %-->
  </div><br>
  <a href="/person/add" class="add">add new data</a>
</div>
</body>
</html>

 

 

Automatic compilation

 

Preprocessor of pfdevelop package is a binary file that could be run as a daemon program on different operation systems, the preprocessor could monitor file sizes of /template, /layout and /css/pfcss folders under website root, automatically compile raw template file to JavaScript file (called template by PlannerFw), a group of raw section-template files to JavaScript file (called layout by PlannerFw) and PFCSS file(s) to CSS file as long as file size updated by any text editor. An example of automatic compilation on windows is