PlannerFw

---

PlannerFw

Developer	The W3Plan Team
First appeared	March 5, 2015
Stable release	4.0         (January 27, 2020)
Website	www.w3plan.net
Major implementations
PlannerFw for Production Platform Crossing browser License GNU GPLv3 File formats ASCII Website www.w3plan.net, github.com/w3plan/PlannerFw-for-Production Search PlannerFw on Amazon. PlannerFw for Development OS Linux, MacOs, Windows License GNU GPLv3, Proprietary File formats ASCII and Binary Website www.w3plan.net Search PlannerFw on Amazon.

Search PlannerFw on Amazon.

PlannerFw is a template-path driven, universal content-presenting frontend framework.

The principles of developing with PlannerFw are:

• Separating dynamic data(modeldata) from web presentation(template) since the web server, the web server doesn't output dynamic data and web presentation together in the same HTTP/HTTPS response.
• Clients use template-path to request template and dynamic data from web server for page mount and page update.
• Production web server applies resource access controls for private template and related dynamic data accesses.
• Web server doesn't involve any creations of the web presentation in the production environment.
• Web presentation follows same-origin policy in the client, crossing domain template and dynamic data access only via the web server.

PlannerFw uses PlannerFw tags, PlannerFw APIs and JavaScript to manipulate dynamic data in templates, automatically compile source template into JavaScript object in the development environment.

PlannerFw usesPlannerFw tags, PFCSS APIs and ECMAScript 6+ to manipulate CSS in PFCSS files, automatically compile PFCSS into CSS files in the development environment.

Examples

Dynamic data in JSON,

{
  "pfDataSet": {
    "_pfGlobal": {
      "age_fieldspace": {"type": "positiveInteger", "constraint": {"maxExclusive": 100}}
    },
    "grid": {
      "gridRow1": {
        "city": "New York",
        "name": "Jonesy Band",
        "education": "No College",
        "age": 16,
        "age_pfsch": "fieldspace"
      },
      "gridRow2": {
        "city": "Chicago",
        "name": "Mary Kay",
        "education": "Graduate School",
        "age": 35,
        "age_pfsch": "fieldspace"
      },
      "gridRow3": {
        "city": "Los Angeles",
        "name": "James Franco",
        "education": "College",
        "age": 28,
        "age_pfsch": "fieldspace"
      },
      "gridRow4": {
        "city": "San Diego",
        "name": "Ellen Compell",
        "education": "Some College",
        "age": 20,
        "age_pfsch": "fieldspace"
      }
    }
  }
}

Source template that manipulates dynamic data,

<table border="1" cellpadding="1" cellspacing="1" width="86%">
  <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>

Compile result from source template,

var pf7e53c287 = {
  run: function(pfDataSet) {
    var __pf19edb768 = "";
    __pf19edb768 += '<table border="1" cellpadding="1" cellspacing="1" width="86%">\n<caption class="dcap"><strong>User data grid</strong></caption>\n<tr>\n<th rowspan="2">City</th>\n <th colspan="3">Users</th>\n</tr>\n<tr>\n<th>Name</th>\n<th>Age</th>\n<th>Education</th>\n</tr>\n';
    
    for (var key in pfDataSet.grid) {
      if (pfDataSet.grid.hasOwnProperty(key)) {
        __pf19edb768 += "\n<tr>\n<td>";
        __pf19edb768 += pfDataSet.grid[key].city;
        __pf19edb768 += "</td>\n<td>";
        __pf19edb768 += pfDataSet.grid[key].name;
        __pf19edb768 += "</td>\n<td>";
        __pf19edb768 += pfDataSet.grid[key].age;
        __pf19edb768 += '</td>\n<td>\n<select name="Education" style="cursor:pointer">\n';

        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 += "\n</select>\n</td>\n</tr>\n";
      }
    }
    
    __pf19edb768 += '\n </table>';
    return __pf19edb768.replace(/\\'/g, "'").replace(/\\v/g, "\\'");
  }
};

References

This article "PlannerFw" is from Wikipedia. The list of its authors can be seen in its historical and/or the page Edithistory:PlannerFw. Articles copied from Draft Namespace on Wikipedia could be seen on the Draft Namespace of Wikipedia and not main one.

---