PoNG: Unterschied zwischen den Versionen

Aus MH
Wechseln zu: Navigation, Suche
(Basic Idea)
 
(10 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
__NOTOC__
 +
== Project is on GitHub now ==
 +
All you need to create dynamic web apps is now on GitHub:
 +
 +
[https://github.com/ma-ha/rest-web-ui 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.'''
 
[[Category:PoNG]]
 
[[Category:PoNG]]
'''Quick Links:'''
+
 
 +
Quick Links:
 
* [[PoNG Modules]]
 
* [[PoNG Modules]]
 
* [[PoNG Structure Specification]]
 
* [[PoNG Structure Specification]]
 
* [[PoNG Module Programming]]
 
* [[PoNG Module Programming]]
  
== Basic Idea ==
+
== Basic Idea: Portal NG ==
 +
Build a Web GUI for REST/JOSN API backends without programing HTML and JS.
  
=== Basic Structure ===
+
=== Main Structure ===
  
The ''Portal'' has always a header, some rows and a footer:
+
The ''portal'' has always a '''header''', some '''rows''' and a '''footer''':
  
 
[[Datei:Pong-struct-1.png|200px]]
 
[[Datei:Pong-struct-1.png|200px]]
Zeile 15: Zeile 27:
 
You can specify the hight of each row individually.
 
You can specify the hight of each row individually.
  
=== Content structure ===
+
=== Structured Views ===
A row can contain a view or a set of columns ...
+
A row can contain a '''view''' or a set of '''columns''' ...
  
 
[[Datei:Pong-struct-2.png|200px]]
 
[[Datei:Pong-struct-2.png|200px]]
Zeile 22: Zeile 34:
 
... and columns can contain views or rows, containing views or ... (you understand?). You can define the width of each column.
 
... 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.  
+
With this construct you should be able to do every possible arrangement of views.
  
 
=== Views use Plug-Ins ===
 
=== Views use Plug-Ins ===
Zeile 55: Zeile 67:
  
 
Please read also the [[PoNG Description]].
 
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 ...
 +
# Download the [[PoNG_Static_HTML_Distribution|static HTML distribution]] package [[http://keller.minidns.net/mh/pong_v0.3a1.zip here]] (523 kB)
 +
# Unpack the archive into your web server HTML directory, e.g. /var/www/portal
 +
# Point your web browser to the portal root, e.g. http://mydomain.com/portal
 +
 +
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).
 +
 +
You can sign up an account and design a new portal on our [http://mh-svr.de/portal/ Portal as a Service] with seconds.
  
 
== Layout Configuration ==
 
== Layout Configuration ==
Zeile 146: Zeile 171:
 
TODO
 
TODO
 
=== PHP based Installation ===
 
=== PHP based Installation ===
Simply load and extract the [[PoNG PHP Backend]] to any subdirectory of your PHP/MySQL-enabled web server.  
+
The [[PoNG PHP Backend]] powers the [[Portal as a Service]].  
  
IMPORTANT: The [[PoNG PHP Backend]] is work in progress.
+
For local installations please contact ''admin (at) mh-svr dot de''
  
 
== Browser Support ==
 
== Browser Support ==
Zeile 155: Zeile 180:
 
* Safari (iPad, iOS 7)
 
* Safari (iPad, iOS 7)
 
* Chrome on Android
 
* 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, 08: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