PoNG: Unterschied zwischen den Versionen

Aus MH
Wechseln zu: Navigation, Suche
 
(24 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
IMHO there is no good reason to render dynamic web pages server side.
+
__NOTOC__
 +
== Project is on GitHub now ==
 +
All you need to create dynamic web apps is now on GitHub:
  
Server side HTML rendering prevents easy scaling, simple architecture, barrier free content and device independence.  
+
[https://github.com/ma-ha/rest-web-ui GitHub rest-web-ui]
  
'''Everything may get easy, when you throw all legacy truth away and rethink the web.'''
+
Nevertheless here is still a lot of useful documentation.
  
A prototype I made is PoNG.  
+
== About Portal NG ===
 +
'''Create web portals for backend service (APIs) w/o programming.'''
 +
[[Category:PoNG]]
 +
 
 +
Quick Links:
 +
* [[PoNG Modules]]
 +
* [[PoNG Structure Specification]]
 +
* [[PoNG Module Programming]]
 +
 
 +
== Basic Idea: Portal NG ==
 +
Build a Web GUI for REST/JOSN API backends without programing HTML and JS.
 +
 
 +
=== Main Structure ===
 +
 
 +
The ''portal'' has always a '''header''', some '''rows''' and a '''footer''':
 +
 
 +
[[Datei:Pong-struct-1.png|200px]]
 +
 
 +
You can specify the hight of each row individually.
 +
 
 +
=== Structured Views ===
 +
A row can contain a '''view''' or a set of '''columns''' ...
 +
 
 +
[[Datei:Pong-struct-2.png|200px]]
 +
 
 +
... and columns can contain views or rows, containing views or ... (you understand?). You can define the width of each column.
 +
 
 +
With this construct you should be able to do every possible arrangement of views.
 +
 
 +
=== Views use Plug-Ins ===
 +
Views can use ready to use plug-ins with different functionality
  
''BTW (it is ridiculous): If dynamic HTML is rendered client side, it is possible that server only serves static files -- so no Tomcat, Sharepoint, Liferay, PHP ... is required.''
+
[[Datei:Pong-struct-3a.png|300px]]
  
''(OK, that is only half the truth ;-).'' But have a look at the [http://mh-svr.de/PoNG/ static demo].
+
There are also plug-ins for the header and footer, e.g. to display navigation bars, logos, link-lists or language switch buttons.
  
== Vision ==
+
=== Configure the Views ===
Wouldn't it be fine to say: "I need these content, that data tables, blog, these forms on my web page without any HTML coding."
+
All views load their own configuration to initialize the view. The configuration comes from a web server or application server (dynamic configuration).
  
For all standard tasks, the browser should be able to render an appropriate web page, described with a few information only. Also the data and content can be given to the browser in a structured and raw, but non HTML format. Data can be any product catalog, any blog messages, any database result.  
+
[[Datei:Pong-struct-4.png|400px]]
  
Of course -- the description of the page layout and the content data should be in a machine readable format and precise enough, that your browser is able to understand it. But these description of layout and data must still be human readable, self explaining and without HTML.
+
=== Data and Content in Views ===
 +
After the initialization the view can load, modify, save or create data on a RESTful server backend. I.e. the WIKI content plug-in can load pages from a MediaWiki server.
  
'''Why?'''
+
[[Datei:Pong-struct-5.png|400px]]
  
HTML can do a lot of good things and it will still be the best way to explain the browser how to do the rendering details. But is there a reason that humans write HTML? There are so many standard tasks on the web, which are always the same. I looked through a bunch of web sites and found always the same elements. Only the layout and graphical design looks different -- and of course the content.  
+
=== ... and Action! ===
 +
For a dynamic page, all views can do different interactions:
 +
# Views can call functions on a HTTP server backend (via REST calls)
 +
# Views can call update method of other views. These views typically call the server backend to load data.
 +
# Views can load a view into a row or a column, replacing the view there.
 +
# Views can navigate to another page. Hopefully another portal page.
  
An other good thing is, that you only have to provide the "raw information" and all the rendering is transfered to the frontend. In the past, there was a huge gap of computing power of servers and clients. The gap has been closed and there is no reason to have all the workload in the backends. We have no good reason to render all dynamic web pages in the backend.
+
[[Datei:Pong-struct-6.png|400px]]
  
Rendering HTML in the backend is also a bad idea, since the client types of are so different and you have to do all the client specific decisions on the wrong point.
+
The interactions are defined in the configuration of the view. E.g. in a view using the form plug-in you can define a button to save the form data and triggering an update of a table view afterwards.
  
[[Datei:PoNG.jpg|right|600px]]PoNG is '''"Portal NG"''' (next generation):
+
Of course -- the description of the page layout and the content data should be in a machine readable format and precise enough, that your browser is able to understand it. But these description of layout and data must still be human readable, self explaining and without HTML or JS coding necessary.
* It is a prototype or study, how it may work!!
 
* Collect information from different RESTful resources into one HTML5 + JavaScript portal
 
* Easy set up: Complete separation of layout, information, style
 
* Modular: see [[PoNG Modules]]
 
* Flexible backends: Static HTML, PHP, Java Web Container, JEE, ...
 
  
Things that are implemented already:
+
Please read also the [[PoNG Description]].
* [[PoNG Structure Specification|Basic rendering of the layout]]
 
* Plug-in programming model for modules using hooks
 
* [[PoNG Modules|Some very useful ready to use modules]]
 
* Modal dialogs
 
  
Planned:
+
== A Quick Start in 2 min (local installation) ==
* I18N
+
You need a (simple) Web Server, so install Apache package on you Unix or get e.g. XAMPP or ... or ...
* Security model: Authentication
+
# Download the [[PoNG_Static_HTML_Distribution|static HTML distribution]] package [[http://keller.minidns.net/mh/pong_v0.3a1.zip here]] (523 kB)
* Personal customizing
+
# Unpack the archive into your web server HTML directory, e.g. /var/www/portal
* Zoom views to full width
+
# Point your web browser to the portal root, e.g. http://mydomain.com/portal
* Tomcat Backend
 
* PHP Backend
 
* Dynamic Administration
 
  
[[Category:PoNG]]
+
Start [[PoNG_Static_HTML_Distribution#Start_customizing_the_static_portal|customizing the portal]] ...
 +
 
 +
== PoNG: Portal as a Service ==
 +
We offer a [[Portal as a Service]] for free (v0.3 beta test phase).
  
== How does PoNG works ==
+
You can sign up an account and design a new portal on our [http://mh-svr.de/portal/ Portal as a Service] with seconds.
# The browser loads a standard index file (do not edit this file)
 
# The index file pushes the browser to request the layout resource for the layout information and renders the response
 
# The layout in the browser will contain different additional information resources, which are loaded and processed to a web page
 
  
 
== Layout Configuration ==
 
== Layout Configuration ==
Zeile 106: Zeile 132:
 
             "type": "pong-table",
 
             "type": "pong-table",
 
             "decor" : "decor",
 
             "decor" : "decor",
        "actions" : [ { "actionName": "Help", "type": "pong-help" } ]
+
            "actions" : [ { "actionName": "Help", "type": "pong-help" } ]
 
           },
 
           },
 
           {
 
           {
Zeile 114: Zeile 140:
 
             "resourceURL": "gnuplot",
 
             "resourceURL": "gnuplot",
 
             "callback": "grmh()",
 
             "callback": "grmh()",
             "actions" : [ { "actionName": "Config", "type": "modal-form" },{ "actionName": "fullWidth" } ]
+
             "actions" : [ { "actionName": "Config", "type": "modal-form" } ]
 
           }
 
           }
 
         ]
 
         ]
Zeile 120: Zeile 146:
 
     ],
 
     ],
 
     "footer": {
 
     "footer": {
       "copyrightText": "Copyright 2013, MH.",
+
       "copyrightText": "Copyright 2015, MH.",
 
       "linkList": [
 
       "linkList": [
 
       { "text":"Impressum", "url": "impress.html"},
 
       { "text":"Impressum", "url": "impress.html"},
Zeile 128: Zeile 154:
 
   }
 
   }
 
  }
 
  }
 +
 
This example layout structure will result in a "myBlog" box of full width and below are two columns, one with the "resX" and the other smaller one with a "plot". If you just starts with this file, all views will be empty, because no one defined the resource details, that are just resource names at the moment.
 
This example layout structure will result in a "myBlog" box of full width and below are two columns, one with the "resX" and the other smaller one with a "plot". If you just starts with this file, all views will be empty, because no one defined the resource details, that are just resource names at the moment.
  
 
And if you think, the there is a bunch of work in defining e.g. the "blog", then check out, what is [[PoNG Module: List View|the todo of this resource definition]].
 
And if you think, the there is a bunch of work in defining e.g. the "blog", then check out, what is [[PoNG Module: List View|the todo of this resource definition]].
  
[http://mh-svr.de/PoNG/ Test the prototype]
+
'''[http://mh-svr.de/PoNG/ Test the prototype]'''
  
 
== Installation Manual ==
 
== Installation Manual ==
 
Please refer also the [[PoNG Release Notes]].
 
Please refer also the [[PoNG Release Notes]].
 
=== Static HTML Installation ===
 
=== Static HTML Installation ===
Simply load and extract the [[PoNG Static HTML Distribution]] to any subdirectory of your web server and customize the structure file <code>/svc/layout/main/structure</code>, logo and CSS files to your needs.  
+
Perhaps you start here. Since PoNG is client centric, you can play a lot with a static backend. You can focus on implementing, configuring or integrating REST web services and view the data in the browser.
 +
 +
Simply load and extract the [[PoNG Static HTML Distribution]] to any subdirectory of your web server and customize the structure file <code>/svc/layout/main/structure</code>, logo and CSS files to your needs.
 +
 
 
=== Tomcat based Installation ===
 
=== Tomcat based Installation ===
 
TODO
 
TODO
 
=== PHP based Installation ===
 
=== PHP based Installation ===
Simply load and extract the [[PoNG Static PHP Distribution]] to any subdirectory of your PHP-enabled web server and customize the structure file <code>/svc/layout/main/structure</code>, logo and CSS files to your needs.
+
The [[PoNG PHP Backend]] powers the [[Portal as a Service]].  
 +
 
 +
For local installations please contact ''admin (at) mh-svr dot de''
  
 
== Browser Support ==
 
== Browser Support ==
Zeile 147: Zeile 179:
 
* Firefox 27.0.1 (Ubuntu 13.10 64bit)
 
* Firefox 27.0.1 (Ubuntu 13.10 64bit)
 
* Safari (iPad, iOS 7)
 
* Safari (iPad, iOS 7)
 
+
* Chrome on Android
== PoNG License ==
 
The MIT License (MIT)
 
 
 
Copyright (c) 2014 Markus Harms, ma@mh-svr.de
 
 
 
Permission is hereby granted, free of charge, to any person obtaining a copy
 
of this software and associated documentation files (the "Software"), to deal
 
in the Software without restriction, including without limitation the rights
 
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 
copies of the Software, and to permit persons to whom the Software is
 
furnished to do so, subject to the following conditions:
 
 
 
The above copyright notice and this permission notice shall be included in
 
all copies or substantial portions of the Software.
 
 
 
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 
THE SOFTWARE.
 

Aktuelle Version vom 26. März 2016, 09:34 Uhr

Project is on GitHub now

All you need to create dynamic web apps is now on GitHub:

GitHub rest-web-ui

Nevertheless here is still a lot of useful documentation.

About Portal NG =

Create web portals for backend service (APIs) w/o programming.

Quick Links:

Basic Idea: Portal NG

Build a Web GUI for REST/JOSN API backends without programing HTML and JS.

Main Structure

The portal has always a header, some rows and a footer:

Pong-struct-1.png

You can specify the hight of each row individually.

Structured Views

A row can contain a view or a set of columns ...

Pong-struct-2.png

... and columns can contain views or rows, containing views or ... (you understand?). You can define the width of each column.

With this construct you should be able to do every possible arrangement of views.

Views use Plug-Ins

Views can use ready to use plug-ins with different functionality

Pong-struct-3a.png

There are also plug-ins for the header and footer, e.g. to display navigation bars, logos, link-lists or language switch buttons.

Configure the Views

All views load their own configuration to initialize the view. The configuration comes from a web server or application server (dynamic configuration).

Pong-struct-4.png

Data and Content in Views

After the initialization the view can load, modify, save or create data on a RESTful server backend. I.e. the WIKI content plug-in can load pages from a MediaWiki server.

Pong-struct-5.png

... and Action!

For a dynamic page, all views can do different interactions:

  1. Views can call functions on a HTTP server backend (via REST calls)
  2. Views can call update method of other views. These views typically call the server backend to load data.
  3. Views can load a view into a row or a column, replacing the view there.
  4. Views can navigate to another page. Hopefully another portal page.

Pong-struct-6.png

The interactions are defined in the configuration of the view. E.g. in a view using the form plug-in you can define a button to save the form data and triggering an update of a table view afterwards.

Of course -- the description of the page layout and the content data should be in a machine readable format and precise enough, that your browser is able to understand it. But these description of layout and data must still be human readable, self explaining and without HTML or JS coding necessary.

Please read also the PoNG Description.

A Quick Start in 2 min (local installation)

You need a (simple) Web Server, so install Apache package on you Unix or get e.g. XAMPP or ... or ...

  1. Download the static HTML distribution package [here] (523 kB)
  2. Unpack the archive into your web server HTML directory, e.g. /var/www/portal
  3. Point your web browser to the portal root, e.g. http://mydomain.com/portal

Start customizing the portal ...

PoNG: Portal as a Service

We offer a Portal as a Service for free (v0.3 beta test phase).

You can sign up an account and design a new portal on our Portal as a Service with seconds.

Layout Configuration

The layout-structure is a JSON file, requested by the layout resource. By default the /svc/layout/main/structure is loaded first.

Your site may have other layouts than "main", e.g. /svc/layout/admin/structure.

The "structure" JSON format

PoNG Example1.png

The basic object hierarchy of the objects are:

  • layout
    • title
    • header
    • rows
      • cols
        • rows
          • ...
    • footer

The rows can contain either nested cols or alternatively a resource. The same for cols. A resource specifies the URL, where to load information about the content, has some meta data to define its layout, actions and dialogs.

You can get every possible layout with this nesting of rows, cols and resources.

Please refer the PoNG Structure Specification for details.

The example shows, that you can set up a complex portal page with different information resource views on it with a very view lines of meta data definition. The result of this example is shown on the screen shot on the right (no fake). BTW, I would describe it in this way: "This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."

So how can you explain your browser this w/o any HTML code? Let's try:

Example

{
 "layout": {
   "title": "Title",
   "header": {
     "logoURL": "logo.png"
   },
   "rows": [
     {
       "rowId": "myBlog",
       "height": "185px",
       "resourceURL": "blog",
       "type": "pong-list",
       "decor" : "decor"
     },
     {
       "rowId": "r1",
       "height": "450px",
       "cols": [
         {
           "columnId": "tbl",
           "width": "40%",
           "resourceURL": "resX",
           "type": "pong-table",
           "decor" : "decor",
           "actions" : [ { "actionName": "Help", "type": "pong-help" } ]
         },
         {
           "columnId": "plot",
           "width": "60%",
           "decor" : "decor",
           "resourceURL": "gnuplot",
           "callback": "grmh()",
           "actions" : [ { "actionName": "Config", "type": "modal-form" } ]
         }
       ]
     }
   ],
   "footer": {
     "copyrightText": "Copyright 2015, MH.",
     "linkList": [
     	{ "text":"Impressum", "url": "impress.html"},
     	{ "text":"Privacy Note", "url": "privacy.html"}
     ]	
   }
 }
}

This example layout structure will result in a "myBlog" box of full width and below are two columns, one with the "resX" and the other smaller one with a "plot". If you just starts with this file, all views will be empty, because no one defined the resource details, that are just resource names at the moment.

And if you think, the there is a bunch of work in defining e.g. the "blog", then check out, what is the todo of this resource definition.

Test the prototype

Installation Manual

Please refer also the PoNG Release Notes.

Static HTML Installation

Perhaps you start here. Since PoNG is client centric, you can play a lot with a static backend. You can focus on implementing, configuring or integrating REST web services and view the data in the browser.

Simply load and extract the PoNG Static HTML Distribution to any subdirectory of your web server and customize the structure file /svc/layout/main/structure, logo and CSS files to your needs.

Tomcat based Installation

TODO

PHP based Installation

The PoNG PHP Backend powers the Portal as a Service.

For local installations please contact admin (at) mh-svr dot de

Browser Support

PoNG is tested with

  • Firefox 27.0.1 (Ubuntu 13.10 64bit)
  • Safari (iPad, iOS 7)
  • Chrome on Android