Welcome to EverybodyWiki 😃 ! Nuvola apps kgpg.png Log in or ➕👤 create an account to improve, watchlist or create an article like a 🏭 company page or a 👨👩 bio (yours ?)...

PlannerFw

From EverybodyWiki Bios & Wiki




PlannerFw
Plannerfw-logo.svg
DeveloperThe W3Plan Team
First appearedMarch 5, 2015
Stable release
Websitewww.w3plan.net

 
Major implementations

PlannerFw for Production
PlatformCrossing browser
LicenseGNU GPLv3
File formatsASCII
Websitewww.w3plan.net,
github.com/w3plan/PlannerFw-for-Production
Amazon.com Logo.png Search PlannerFw on Amazon.

PlannerFw for Development
OSLinux, MacOs, Windows
LicenseGNU GPLv3, Proprietary
File formatsASCII and Binary
Websitewww.w3plan.net
Amazon.com Logo.png Search PlannerFw on Amazon.

Amazon.com Logo.png 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.[1]

Examples[edit]


Dynamic data in JSON,[2]


 1{
 2  "pfDataSet": {
 3    "_pfGlobal": {
 4      "age_fieldspace": {"type": "positiveInteger", "constraint": {"maxExclusive": 100}}
 5    },
 6    "grid": {
 7      "gridRow1": {
 8        "city": "New York",
 9        "name": "Jonesy Band",
10        "education": "No College",
11        "age": 16,
12        "age_pfsch": "fieldspace"
13      },
14      "gridRow2": {
15        "city": "Chicago",
16        "name": "Mary Kay",
17        "education": "Graduate School",
18        "age": 35,
19        "age_pfsch": "fieldspace"
20      },
21      "gridRow3": {
22        "city": "Los Angeles",
23        "name": "James Franco",
24        "education": "College",
25        "age": 28,
26        "age_pfsch": "fieldspace"
27      },
28      "gridRow4": {
29        "city": "San Diego",
30        "name": "Ellen Compell",
31        "education": "Some College",
32        "age": 20,
33        "age_pfsch": "fieldspace"
34      }
35    }
36  }
37}

Source template that manipulates dynamic data,


 1<table border="1" cellpadding="1" cellspacing="1" width="86%">
 2  <caption class="dcap"><strong>User data grid</strong></caption>
 3  <tr>
 4    <th rowspan="2">City</th>
 5    <th colspan="3">Users</th>
 6  </tr>
 7  <tr> 
 8    <th>Name</th>
 9    <th>Age</th>
10    <th>Education</th>
11  </tr>
12  <!--%
13    for (var key in pfDataSet.grid) {
14      if (pfDataSet.grid.hasOwnProperty(key)) {
15  %-->
16      <tr>
17        <td><!--%= pfDataSet.grid[key].city %--></td>
18        <td><!--%= pfDataSet.grid[key].name %--></td>
19        <td><!--%= pfDataSet.grid[key].age %--></td>
20        <td>
21          <select name="Education" style="cursor:pointer">
22            <!--% 
23              var educations = ["No College", "Some College", "Graduate School", "College"];
24              for (var i = 0, len = educations.length; i < len; i++) {
25                if (pfDataSet.grid[key].education.toLowerCase() == educations[i].toLowerCase()) {
26                  <!%= '<option value="' + educations[i] + '"' + " selected>" + educations[i] + "</option>" %>
27                } else {
28                  <!%= '<option value="' + educations[i] + '"' + ">" + educations[i] + "</option>" %>	
29                }
30              }
31            %-->
32          </select>
33        </td>
34      </tr>
35  <!--%
36      }
37    }
38  %-->
39</table>

Compile result from source template,


 1var pf7e53c287 = {
 2  run: function(pfDataSet) {
 3    var __pf19edb768 = "";
 4    __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';
 5    
 6    for (var key in pfDataSet.grid) {
 7      if (pfDataSet.grid.hasOwnProperty(key)) {
 8        __pf19edb768 += "\n<tr>\n<td>";
 9        __pf19edb768 += pfDataSet.grid[key].city;
10        __pf19edb768 += "</td>\n<td>";
11        __pf19edb768 += pfDataSet.grid[key].name;
12        __pf19edb768 += "</td>\n<td>";
13        __pf19edb768 += pfDataSet.grid[key].age;
14        __pf19edb768 += '</td>\n<td>\n<select name="Education" style="cursor:pointer">\n';
15
16        var educations = [ "No College", "Some College", "Graduate School", "College" ];
17        for (var i = 0, len = educations.length; i < len; i++) {
18          if ( pfDataSet.grid[key].education.toLowerCase() == educations[i].toLowerCase()
19          ) {
20            __pf19edb768 += '<option value="' + educations[i] + '"' + " selected>" + educations[i] + "</option>";
21          } else {
22            __pf19edb768 += '<option value="' + educations[i] + '"' + ">" + educations[i] + "</option>";
23          }
24        }
25        __pf19edb768 += "\n</select>\n</td>\n</tr>\n";
26      }
27    }
28    
29    __pf19edb768 += '\n </table>';
30    return __pf19edb768.replace(/\\'/g, "'").replace(/\\v/g, "\\'");
31  }
32};




References[edit]

  1. https://www.w3plan.net/
  2. "PlannerFw Template Testing".


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.