Portal as a Service - User Agreement

2015-08-12T18:30:20Z

Mh: Mh verschob die Seite SaaS Pro Account User Agreement nach Portal as a Service - User Agreement

__NOTOC__
== Introduction ==
The SaaS offering is a hosted solution based on "ReST Web GUI Framework".

Free sign up is limited to one portal with max. 3 pages and max. 100 page views per month.

The "pro account" offers unlimited portals with unlimited pages per portal.
== "Pro Account" ==
=== Fees ===
* Sign up: 5 EUR once
* 0.029 EUR per portal page view
=== Service Agreement ===
* unlimited portals with unlimited pages per portal
* no page view limitation
* Email support
* 99.9 % uptime*, otherwise 50% price discount <br/>*) on monthly bases: uptime = ( "Maximum Available Minutes" - "Downtime minutes" ) / "Maximum Available Minutes" x 100
== Privacy Policy ==
We act according German data protection law. We store data at out hosting partner to provide this service.

Stored data may be used to create reports to improve the service for our customers.
== Content ==
User is responsible for all content provided by his portal pages.

We will delete portals and accounts, if pages violate German law.
== General ==
The policies posted on our sites may be changed from time to time. Changes take effect when we post them on this site.
== Warranty ==
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
SERVICE PROVIDERS OR 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.

SaaS Pro Account User Agreement

2015-08-12T18:30:20Z

Mh: Mh verschob die Seite SaaS Pro Account User Agreement nach Portal as a Service - User Agreement

#WEITERLEITUNG [[Portal as a Service - User Agreement]]

2015-02-23T19:33:42Z

PoNG

2015-02-23T19:15:48Z

Mh:

'''Create web portals for backend service (APIs) w/o programming.'''
[[Category:PoNG]]
'''Quick Links:'''
* [[PoNG Modules]]
* [[PoNG Structure Specification]]
* [[PoNG Module Programming]]

== Basic Idea ==

=== 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

[[Datei:Pong-struct-3a.png|300px]]

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).

[[Datei:Pong-struct-4.png|400px]]

=== 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.

[[Datei:Pong-struct-5.png|400px]]

=== ... 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.

[[Datei:Pong-struct-6.png|400px]]

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 ...
# 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 ==
The layout-structure is a JSON file, requested by the layout resource. By default the <tt>/svc/layout/main/structure</tt> is loaded first.

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

=== The "structure" JSON format ===
[[Datei:PoNG Example1.png|right|350px]]
The basic object hierarchy of the objects are:
* layout
** title
** header
** rows
*** cols
**** rows
***** ...
** footer

The <code>rows</code> can contain either nested <code>cols</code> or alternatively a resource. The same for <code>cols</code>. 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: <i>"This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."</i>

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 [[PoNG Module: List View|the todo of this resource definition]].

'''[http://mh-svr.de/PoNG/ 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 <code>/svc/layout/main/structure</code>, 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

Portal as a Service

2015-02-22T19:42:10Z

Mh: /* How do I start? */

__NOTOC__ [[Category:PoNG]]
== What is it? ==
* It is a web based configuration for PoNG portals.
* It is a hosting for PoNG portals designed by you.
* It is free! [[Portal_as_a_Service#Disclaimer|*]]

== How do I start? ==
# Create your account on the [http://mh-svr.de/portal/ Portal as a Service page].
# Log in with your account and create a new Portal
# Click ''Customize'' to jump to the portal administration page
# Add a page and click ''Edit''
# You can use the interactive '''Page Layout Designer''' to create your portal page
# Click the page name in the layout designer to jump to your new portal page and preview it.

== Page Layout Designer Guide ==
You can create page layouts interactively:

[[Datei:PoNG LayoutDesigner.png]]

The basic layout structure is are '''rows''', containing views. You can add rows using the ''horizontal split'' button. Using the ''vertical split'' button, you can convert the rows view into a '''set of columns''' containing views. With the ''vertical split button'', you can concert a column view into a set of rows.

At the end you are able to create any layout with a hierarchy of rows and columns,

== Disclaimer ==
This is a '''free public beta test''' of the ''Portal NG'' SERVICE.

The beta test may end at any time. Any data and configuration stored inside the SERVICE may be removed at any time.

'''Important:'''
THE SERVICE 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 SERVICE OR THE USE OR OTHER DEALINGS IN
THE SERVICE.

PoNG Static HTML Distribution

2015-02-22T18:16:47Z

Mh: /* PoNG License */

Static does not mean, the [[PoNG]] portal is not dynamic -- it just needs only a static backend!! So no need of PHP or Tomcat or JEE servers ...

Please also check the [[PoNG Release Notes]].

== [[PoNG]] Quick Start: ==
The ''PoNG JS Framework V0.3'' and the ''PoNG Static HTML Distribution V0.3'' are released under [[PoNG_Static_HTML_Distribution#PoNG_License|MIT License]]
# Download the static html package [http://mh-svr.de/downloads/pong_0.3.zip here (V0.3, 620 kB)]
# Unpack the archive into your web server html directory, e.g. <code>/var/www/portal</code>
# Start the web browser and point it to the portal root, e.g. <code>http://mydomain.com/portal</code>

The portal contains two pages, one static welcome page and a second form type page.

Please read the [[PoNG|abstract]] to understand [[PoNG Description|the idea and vision]].

[[Category:PoNG]]

== What is inside the install package ==
{|
| . || index.html || an empty page, just to initialize the framework -- there is no need to edit this file
|-
| . || nav || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define the navigation bar's items
|-
| /i18n/ || || translation packages, add your translations here
|-
| /i18n/ || DE.json
|-
| /i18n/ || EN.json
|-
| /css/ || || style sheets to customize the look and feel
|-
| /css/ || custom.css || define your modifications here
|-
| /css/ || ... || other files, you won't need to customize any of them
|-
| /img/ || ... || folder for graphic decoration and pictures
|-
| /js/ || || The heart of the framework
|-
| /js/ || portal-ng-XY.js || (main framework
|-
| /js/ || portal-ng-modules.js || (modules hook list
|-
| /js/ || /pong-modules || ... folder with some ready to use plug ins ...
|-
|-
| /svc/ || || your services, should deliver [[PoNG_Structure_Specification#JSON_basics|JSON]] data, HTML and JS content
|-
| /svc/layout/ || || serve [[PoNG_Structure_Specification|JSON config]] for portal pages
|-
| /svc/layout/main/ || structure || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define start page and main layout, other layouts may include the header and footer from here
|-
| /svc/layout/test/ || structure || JSON for a layout with two rows, with a form in the 1st row and two columns for output in the second row
|-
| /svc/test/ || || This is a REST service
|-
| /svc/test/ || pong-form || [[PoNG_Structure_Specification#JSON_basics|JSON]] to initialize the [[PoNG Module: Form View|web form]] and the actions)
|-
| /svc/test/info/ || (index.html) || delivers dummy output for the "info" button
|-
| /svc/test/check/ || (index.html) || delivers dummy output for the "check" button
|-
| /svc/test/help/ || (index.html) || PHP -ui- to deliver help text in different languages
|}

== Start customizing the static portal ==
'''Step 1:'''

Customize the [[PoNG Module: Navigation Bar|nav bar]] by editing the <code>nav</code> file.

If you add an item, e.g. "blah", you have to add a layout file, so <code>/svc/layout/blah/structure</code>, refer "step 2"

'''Step 2:'''

Customize the [[PoNG_Structure_Specification|layout specification]]:
* Customize the [[PoNG_Structure_Specification#Header|header]] and [[PoNG_Structure_Specification#Footer|footer]] as you like. I think you may want to replace the logo.
* Edit the [[PoNG_Structure_Specification|structure file]] and define your own set of rows and columns and point them to [[PoNG_Structure_Specification#Resources|resources]] and [[PoNG Modules|define module]] types. Now you have to configure the resources and modules, refer "step 3".

'''Step 3:'''

The resources are "folders" in the static backend, so you have to create the folders with the resource names (specified in "step 2") and put the module config there to tell the [[PoNG Modules|module plug-ins]], how to deal with the content of the resource.

== Shared scipts and CSSs ==
To share the JS scripts for modules and CSS files you can modify the main <code>index.html</code> file. By default a relative path to subdirectories is used.

To change the loaders, please search and modify the following section in the <code>index.html</code>:
// EDIT THIS VAR TO SHARE THE INSTALL PACKAGES
var cssPath = "css/";
var jsPath = "js/";
var modulesJsPath = "js/pong-modules/";
var modulesCssPath = "css/pong-modules/";

== PoNG JS Framework 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.

PoNG

2015-02-22T18:15:56Z

Mh: /* PHP based Installation */

[[Category:PoNG]]
'''Quick Links:'''
* [[PoNG Modules]]
* [[PoNG Structure Specification]]
* [[PoNG Module Programming]]

== Basic Idea ==

=== 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

[[Datei:Pong-struct-3a.png|300px]]

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).

[[Datei:Pong-struct-4.png|400px]]

=== 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.

[[Datei:Pong-struct-5.png|400px]]

=== ... 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.

[[Datei:Pong-struct-6.png|400px]]

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 ...
# 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 ==
The layout-structure is a JSON file, requested by the layout resource. By default the <tt>/svc/layout/main/structure</tt> is loaded first.

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

=== The "structure" JSON format ===
[[Datei:PoNG Example1.png|right|350px]]
The basic object hierarchy of the objects are:
* layout
** title
** header
** rows
*** cols
**** rows
***** ...
** footer

The <code>rows</code> can contain either nested <code>cols</code> or alternatively a resource. The same for <code>cols</code>. 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: <i>"This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."</i>

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 [[PoNG Module: List View|the todo of this resource definition]].

'''[http://mh-svr.de/PoNG/ 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 <code>/svc/layout/main/structure</code>, 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

PoNG

2015-02-22T18:15:15Z

Mh: /* Layout Configuration */

[[Category:PoNG]]
'''Quick Links:'''
* [[PoNG Modules]]
* [[PoNG Structure Specification]]
* [[PoNG Module Programming]]

== Basic Idea ==

=== 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

[[Datei:Pong-struct-3a.png|300px]]

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).

[[Datei:Pong-struct-4.png|400px]]

=== 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.

[[Datei:Pong-struct-5.png|400px]]

=== ... 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.

[[Datei:Pong-struct-6.png|400px]]

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 ...
# 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 ==
The layout-structure is a JSON file, requested by the layout resource. By default the <tt>/svc/layout/main/structure</tt> is loaded first.

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

=== The "structure" JSON format ===
[[Datei:PoNG Example1.png|right|350px]]
The basic object hierarchy of the objects are:
* layout
** title
** header
** rows
*** cols
**** rows
***** ...
** footer

The <code>rows</code> can contain either nested <code>cols</code> or alternatively a resource. The same for <code>cols</code>. 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: <i>"This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."</i>

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 [[PoNG Module: List View|the todo of this resource definition]].

'''[http://mh-svr.de/PoNG/ 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 <code>/svc/layout/main/structure</code>, logo and CSS files to your needs.

=== Tomcat based Installation ===
TODO
=== PHP based Installation ===
Simply load and extract the [[PoNG PHP Backend]] to any subdirectory of your PHP/MySQL-enabled web server.

IMPORTANT: The [[PoNG PHP Backend]] is work in progress.

== Browser Support ==
PoNG is tested with
* Firefox 27.0.1 (Ubuntu 13.10 64bit)
* Safari (iPad, iOS 7)
* Chrome on Android

Portal as a Service

2015-02-22T09:21:22Z

Mh: /* How do I start? */

__NOTOC__ [[Category:PoNG]]
== What is it? ==
* It is a web based configuration for PoNG portals.
* It is a hosting for PoNG portals designed by you.
* It is free! [[Portal_as_a_Service#Disclaimer|*]]

== How do I start? ==
# Create your account on the [http://mh-svr/portal/ Portal as a Service page].
# Log in with your account and create a new Portal
# Click ''Customize'' to jump to the portal administration page
# Add a page and click ''Edit''
# You can use the interactive '''Page Layout Designer''' to create your portal page
# Click the page name in the layout designer to jump to your new portal page and preview it.

== Page Layout Designer Guide ==
You can create page layouts interactively:

[[Datei:PoNG LayoutDesigner.png]]

The basic layout structure is are '''rows''', containing views. You can add rows using the ''horizontal split'' button. Using the ''vertical split'' button, you can convert the rows view into a '''set of columns''' containing views. With the ''vertical split button'', you can concert a column view into a set of rows.

At the end you are able to create any layout with a hierarchy of rows and columns,

== Disclaimer ==
This is a '''free public beta test''' of the ''Portal NG'' SERVICE.

The beta test may end at any time. Any data and configuration stored inside the SERVICE may be removed at any time.

'''Important:'''
THE SERVICE 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 SERVICE OR THE USE OR OTHER DEALINGS IN
THE SERVICE.

Portal as a Service

2015-02-22T09:20:14Z

Mh: Die Seite wurde neu angelegt: „__NOTOC__ Category:PoNG == What is it? == * It is a web based configuration for PoNG portals. * It is a hosting for PoNG portals designed by you. * It is f…“

__NOTOC__ [[Category:PoNG]]
== What is it? ==
* It is a web based configuration for PoNG portals.
* It is a hosting for PoNG portals designed by you.
* It is free! [[Portal_as_a_Service#Disclaimer|*]]

== How do I start? ==
# Create your account on the [http://mh-svr/portal/ Portal as a Service page].
# Log in with your account and create a new Portal
# Click ''Customize'' to jump to the portal administration page
# Add a page and click ''Edit''
# You can use the interactive [[Portal as a Service#Page Layout Designer Guide| page layout designer]] to create your portal page
# Click the page name in the layout designer to jump to your new portal page and preview it.

== Page Layout Designer Guide ==
You can create page layouts interactively:

[[Datei:PoNG LayoutDesigner.png]]

The basic layout structure is are '''rows''', containing views. You can add rows using the ''horizontal split'' button. Using the ''vertical split'' button, you can convert the rows view into a '''set of columns''' containing views. With the ''vertical split button'', you can concert a column view into a set of rows.

At the end you are able to create any layout with a hierarchy of rows and columns,

== Disclaimer ==
This is a '''free public beta test''' of the ''Portal NG'' SERVICE.

The beta test may end at any time. Any data and configuration stored inside the SERVICE may be removed at any time.

'''Important:'''
THE SERVICE 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 SERVICE OR THE USE OR OTHER DEALINGS IN
THE SERVICE.

Datei:PoNG LayoutDesigner.png

2015-02-22T09:20:09Z

Mh:

PoNG Static HTML Distribution

2015-02-22T07:50:32Z

Mh: /* PoNG Quick Start: */

Static does not mean, the [[PoNG]] portal is not dynamic -- it just needs only a static backend!! So no need of PHP or Tomcat or JEE servers ...

Please also check the [[PoNG Release Notes]].

== [[PoNG]] Quick Start: ==
The ''PoNG JS Framework V0.3'' and the ''PoNG Static HTML Distribution V0.3'' are released under [[PoNG_Static_HTML_Distribution#PoNG_License|MIT License]]
# Download the static html package [http://mh-svr.de/downloads/pong_0.3.zip here (V0.3, 620 kB)]
# Unpack the archive into your web server html directory, e.g. <code>/var/www/portal</code>
# Start the web browser and point it to the portal root, e.g. <code>http://mydomain.com/portal</code>

The portal contains two pages, one static welcome page and a second form type page.

Please read the [[PoNG|abstract]] to understand [[PoNG Description|the idea and vision]].

[[Category:PoNG]]

== What is inside the install package ==
{|
| . || index.html || an empty page, just to initialize the framework -- there is no need to edit this file
|-
| . || nav || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define the navigation bar's items
|-
| /i18n/ || || translation packages, add your translations here
|-
| /i18n/ || DE.json
|-
| /i18n/ || EN.json
|-
| /css/ || || style sheets to customize the look and feel
|-
| /css/ || custom.css || define your modifications here
|-
| /css/ || ... || other files, you won't need to customize any of them
|-
| /img/ || ... || folder for graphic decoration and pictures
|-
| /js/ || || The heart of the framework
|-
| /js/ || portal-ng-XY.js || (main framework
|-
| /js/ || portal-ng-modules.js || (modules hook list
|-
| /js/ || /pong-modules || ... folder with some ready to use plug ins ...
|-
|-
| /svc/ || || your services, should deliver [[PoNG_Structure_Specification#JSON_basics|JSON]] data, HTML and JS content
|-
| /svc/layout/ || || serve [[PoNG_Structure_Specification|JSON config]] for portal pages
|-
| /svc/layout/main/ || structure || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define start page and main layout, other layouts may include the header and footer from here
|-
| /svc/layout/test/ || structure || JSON for a layout with two rows, with a form in the 1st row and two columns for output in the second row
|-
| /svc/test/ || || This is a REST service
|-
| /svc/test/ || pong-form || [[PoNG_Structure_Specification#JSON_basics|JSON]] to initialize the [[PoNG Module: Form View|web form]] and the actions)
|-
| /svc/test/info/ || (index.html) || delivers dummy output for the "info" button
|-
| /svc/test/check/ || (index.html) || delivers dummy output for the "check" button
|-
| /svc/test/help/ || (index.html) || PHP -ui- to deliver help text in different languages
|}

== Start customizing the static portal ==
'''Step 1:'''

Customize the [[PoNG Module: Navigation Bar|nav bar]] by editing the <code>nav</code> file.

If you add an item, e.g. "blah", you have to add a layout file, so <code>/svc/layout/blah/structure</code>, refer "step 2"

'''Step 2:'''

Customize the [[PoNG_Structure_Specification|layout specification]]:
* Customize the [[PoNG_Structure_Specification#Header|header]] and [[PoNG_Structure_Specification#Footer|footer]] as you like. I think you may want to replace the logo.
* Edit the [[PoNG_Structure_Specification|structure file]] and define your own set of rows and columns and point them to [[PoNG_Structure_Specification#Resources|resources]] and [[PoNG Modules|define module]] types. Now you have to configure the resources and modules, refer "step 3".

'''Step 3:'''

The resources are "folders" in the static backend, so you have to create the folders with the resource names (specified in "step 2") and put the module config there to tell the [[PoNG Modules|module plug-ins]], how to deal with the content of the resource.

== Shared scipts and CSSs ==
To share the JS scripts for modules and CSS files you can modify the main <code>index.html</code> file. By default a relative path to subdirectories is used.

To change the loaders, please search and modify the following section in the <code>index.html</code>:
// EDIT THIS VAR TO SHARE THE INSTALL PACKAGES
var cssPath = "css/";
var jsPath = "js/";
var modulesJsPath = "js/pong-modules/";
var modulesCssPath = "css/pong-modules/";

== 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.

PoNG Static HTML Distribution

2015-02-22T07:46:45Z

Mh:

Static does not mean, the [[PoNG]] portal is not dynamic -- it just needs only a static backend!! So no need of PHP or Tomcat or JEE servers ...

Please also check the [[PoNG Release Notes]].

== [[PoNG]] Quick Start: ==
# Download the static html package [http://mh-svr.de/downloads/pong_0.3.zip here (V0.3, 620 kB)]
# Unpack the archive into your web server html directory, e.g. <code>/var/www/portal</code>
# Start the web browser and point it to the portal root, e.g. <code>http://mydomain.com/portal</code>

The portal contains two pages, one static welcome page and a second form type page.

Please read the [[PoNG|abstract]] to understand [[PoNG Description|the idea and vision]].

[[Category:PoNG]]

== What is inside the install package ==
{|
| . || index.html || an empty page, just to initialize the framework -- there is no need to edit this file
|-
| . || nav || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define the navigation bar's items
|-
| /i18n/ || || translation packages, add your translations here
|-
| /i18n/ || DE.json
|-
| /i18n/ || EN.json
|-
| /css/ || || style sheets to customize the look and feel
|-
| /css/ || custom.css || define your modifications here
|-
| /css/ || ... || other files, you won't need to customize any of them
|-
| /img/ || ... || folder for graphic decoration and pictures
|-
| /js/ || || The heart of the framework
|-
| /js/ || portal-ng-XY.js || (main framework
|-
| /js/ || portal-ng-modules.js || (modules hook list
|-
| /js/ || /pong-modules || ... folder with some ready to use plug ins ...
|-
|-
| /svc/ || || your services, should deliver [[PoNG_Structure_Specification#JSON_basics|JSON]] data, HTML and JS content
|-
| /svc/layout/ || || serve [[PoNG_Structure_Specification|JSON config]] for portal pages
|-
| /svc/layout/main/ || structure || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define start page and main layout, other layouts may include the header and footer from here
|-
| /svc/layout/test/ || structure || JSON for a layout with two rows, with a form in the 1st row and two columns for output in the second row
|-
| /svc/test/ || || This is a REST service
|-
| /svc/test/ || pong-form || [[PoNG_Structure_Specification#JSON_basics|JSON]] to initialize the [[PoNG Module: Form View|web form]] and the actions)
|-
| /svc/test/info/ || (index.html) || delivers dummy output for the "info" button
|-
| /svc/test/check/ || (index.html) || delivers dummy output for the "check" button
|-
| /svc/test/help/ || (index.html) || PHP -ui- to deliver help text in different languages
|}

== Start customizing the static portal ==
'''Step 1:'''

Customize the [[PoNG Module: Navigation Bar|nav bar]] by editing the <code>nav</code> file.

If you add an item, e.g. "blah", you have to add a layout file, so <code>/svc/layout/blah/structure</code>, refer "step 2"

'''Step 2:'''

Customize the [[PoNG_Structure_Specification|layout specification]]:
* Customize the [[PoNG_Structure_Specification#Header|header]] and [[PoNG_Structure_Specification#Footer|footer]] as you like. I think you may want to replace the logo.
* Edit the [[PoNG_Structure_Specification|structure file]] and define your own set of rows and columns and point them to [[PoNG_Structure_Specification#Resources|resources]] and [[PoNG Modules|define module]] types. Now you have to configure the resources and modules, refer "step 3".

'''Step 3:'''

The resources are "folders" in the static backend, so you have to create the folders with the resource names (specified in "step 2") and put the module config there to tell the [[PoNG Modules|module plug-ins]], how to deal with the content of the resource.

== Shared scipts and CSSs ==
To share the JS scripts for modules and CSS files you can modify the main <code>index.html</code> file. By default a relative path to subdirectories is used.

To change the loaders, please search and modify the following section in the <code>index.html</code>:
// EDIT THIS VAR TO SHARE THE INSTALL PACKAGES
var cssPath = "css/";
var jsPath = "js/";
var modulesJsPath = "js/pong-modules/";
var modulesCssPath = "css/pong-modules/";

== 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.

PoNG

2015-02-22T07:46:23Z

Mh: /* PoNG License */

[[Category:PoNG]]
'''Quick Links:'''
* [[PoNG Modules]]
* [[PoNG Structure Specification]]
* [[PoNG Module Programming]]

== Basic Idea ==

=== 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

[[Datei:Pong-struct-3a.png|300px]]

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).

[[Datei:Pong-struct-4.png|400px]]

=== 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.

[[Datei:Pong-struct-5.png|400px]]

=== ... 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.

[[Datei:Pong-struct-6.png|400px]]

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]].

== Layout Configuration ==
The layout-structure is a JSON file, requested by the layout resource. By default the <tt>/svc/layout/main/structure</tt> is loaded first.

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

=== The "structure" JSON format ===
[[Datei:PoNG Example1.png|right|350px]]
The basic object hierarchy of the objects are:
* layout
** title
** header
** rows
*** cols
**** rows
***** ...
** footer

The <code>rows</code> can contain either nested <code>cols</code> or alternatively a resource. The same for <code>cols</code>. 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: <i>"This "portal" has a header, then two rows, the second row contains two columns, and then there is a footer."</i>

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 [[PoNG Module: List View|the todo of this resource definition]].

'''[http://mh-svr.de/PoNG/ 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 <code>/svc/layout/main/structure</code>, logo and CSS files to your needs.

=== Tomcat based Installation ===
TODO
=== PHP based Installation ===
Simply load and extract the [[PoNG PHP Backend]] to any subdirectory of your PHP/MySQL-enabled web server.

IMPORTANT: The [[PoNG PHP Backend]] is work in progress.

== Browser Support ==
PoNG is tested with
* Firefox 27.0.1 (Ubuntu 13.10 64bit)
* Safari (iPad, iOS 7)
* Chrome on Android

PoNG Static HTML Distribution

2015-02-19T07:17:46Z

Mh: /* PoNG Quick Start: */

Static does not mean, the [[PoNG]] portal is not dynamic -- it just needs only a static backend!! So no need of PHP or Tomcat or JEE servers ...

Please also check the [[PoNG Release Notes]].

== [[PoNG]] Quick Start: ==
# Download the static html package [http://mh-svr.de/downloads/pong_0.3.zip here (V0.3, 620 kB)]
# Unpack the archive into your web server html directory, e.g. <code>/var/www/portal</code>
# Start the web browser and point it to the portal root, e.g. <code>http://mydomain.com/portal</code>

The portal contains two pages, one static welcome page and a second form type page.

Please read the [[PoNG|abstract]] to understand [[PoNG Description|the idea and vision]].

[[Category:PoNG]]

== What is inside the install package ==
{|
| . || index.html || an empty page, just to initialize the framework -- there is no need to edit this file
|-
| . || nav || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define the navigation bar's items
|-
| /i18n/ || || translation packages, add your translations here
|-
| /i18n/ || DE.json
|-
| /i18n/ || EN.json
|-
| /css/ || || style sheets to customize the look and feel
|-
| /css/ || custom.css || define your modifications here
|-
| /css/ || ... || other files, you won't need to customize any of them
|-
| /img/ || ... || folder for graphic decoration and pictures
|-
| /js/ || || The heart of the framework
|-
| /js/ || portal-ng-XY.js || (main framework
|-
| /js/ || portal-ng-modules.js || (modules hook list
|-
| /js/ || /pong-modules || ... folder with some ready to use plug ins ...
|-
|-
| /svc/ || || your services, should deliver [[PoNG_Structure_Specification#JSON_basics|JSON]] data, HTML and JS content
|-
| /svc/layout/ || || serve [[PoNG_Structure_Specification|JSON config]] for portal pages
|-
| /svc/layout/main/ || structure || [[PoNG_Structure_Specification#JSON_basics|JSON]] to define start page and main layout, other layouts may include the header and footer from here
|-
| /svc/layout/test/ || structure || JSON for a layout with two rows, with a form in the 1st row and two columns for output in the second row
|-
| /svc/test/ || || This is a REST service
|-
| /svc/test/ || pong-form || [[PoNG_Structure_Specification#JSON_basics|JSON]] to initialize the [[PoNG Module: Form View|web form]] and the actions)
|-
| /svc/test/info/ || (index.html) || delivers dummy output for the "info" button
|-
| /svc/test/check/ || (index.html) || delivers dummy output for the "check" button
|-
| /svc/test/help/ || (index.html) || PHP -ui- to deliver help text in different languages
|}

== Start customizing the static portal ==
'''Step 1:'''

Customize the [[PoNG Module: Navigation Bar|nav bar]] by editing the <code>nav</code> file.

If you add an item, e.g. "blah", you have to add a layout file, so <code>/svc/layout/blah/structure</code>, refer "step 2"

'''Step 2:'''

Customize the [[PoNG_Structure_Specification|layout specification]]:
* Customize the [[PoNG_Structure_Specification#Header|header]] and [[PoNG_Structure_Specification#Footer|footer]] as you like. I think you may want to replace the logo.
* Edit the [[PoNG_Structure_Specification|structure file]] and define your own set of rows and columns and point them to [[PoNG_Structure_Specification#Resources|resources]] and [[PoNG Modules|define module]] types. Now you have to configure the resources and modules, refer "step 3".

'''Step 3:'''

The resources are "folders" in the static backend, so you have to create the folders with the resource names (specified in "step 2") and put the module config there to tell the [[PoNG Modules|module plug-ins]], how to deal with the content of the resource.

== Shared scipts and CSSs ==
To share the JS scripts for modules and CSS files you can modify the main <code>index.html</code> file. By default a relative path to subdirectories is used.

To change the loaders, please search and modify the following section in the <code>index.html</code>:
// EDIT THIS VAR TO SHARE THE INSTALL PACKAGES
var cssPath = "css/";
var jsPath = "js/";
var modulesJsPath = "js/pong-modules/";
var modulesCssPath = "css/pong-modules/";

PoNG Release Notes

2015-02-19T07:15:25Z

Mh:

[[Category:PoNG]][[PoNG]] Releases:
* [[PoNG_Static_HTML_Distribution]] (please note: you don't need more than that ;-)
* [[PoNG_PHP_Backend]]
== Version 0.3 ==
* General Improvements
** [[PoNG_Static_HTML_Distribution#Shared_scipts_and_CSSs|Config for JS/CSS location]]
** [[PoNG_Module_Programming#update|Update callback mechanism for modules]]
** [[PoNG_Structure_Specification#Resources|Module configuration can be embedded in structure file as ''moduleConfig'']]
* Modules:
** [[PoNG Module: Form View|Form View]]
** [[PoNG_Module:_Table_View#Editable_Cells|Table with editable cells]]
** [[PoNG_Module:_List_View#Editable_Cells|List with editable cells]]
** Layout Editor
* Extras:
** [[PoNG_Module_Programming#Module_Template|Module template for programmers]]
** [[PoNG_PHP_Backend|PHP-BE: API to save layout and settings]]
* Fixes
** Display title also w/o decor

== Version 0.2 ==
General:
* PHP Backend Base
* Header/Footer Improvements
* Allow links in Copyright
* Basic auth mechnism

Modules:
* [[PoNG Module: MediaWiki View|MediaWiki]]
* Security Header
* [[PoNG Module: Master Details View|Master-Detail-Tables View]]
* [[PoNG Module: I18N|Internationalization]]

== Version 0.1 ==
Features:
* Rendering of basic PoNG [[PoNG Structure Specification]]
* [[PoGN_Structure_Specification#Modal_dialogs|Modal dialog for views]]
* [[PoNG_Modules|Basic module and hook concept]]
* Hooks
** [[PoNG_Modules#addHeaderHtml|Header]] and [[PoNG_Modules#addFooterHtml|Footer]] hooks
** [[PoNG_Modules#addActionBtn|Action button]] and [[PoNG_Modules#creModal|modal dialog loader]]
** [[PoNG_Modules#loadResourcesHtml|Resource HTML loader]]
* Modules:
** [[PoNG Module: Table View|Table View]]
** [[PoNG Module: List View|List View]]
** [[PoNG Module: Form View|Form View]]
** [[PoNG Module: Modal Form Dialog|Modal Form Dialog]]
** [[PoNG Module: Help Dialog|Help Dialog]]
* Includes static out of the box demo

PoNG Release Notes

2015-02-19T05:57:46Z

Mh: /* Version 0.3 (beta) */

[[Category:PoNG]][[PoNG]] Releases
== Version 0.3 ==
* General Improvements
** [[PoNG_Static_HTML_Distribution#Shared_scipts_and_CSSs|Config for JS/CSS location]]
** [[PoNG_Module_Programming#update|Update callback mechanism for modules]]
** [[PoNG_Structure_Specification#Resources|Module configuration can be embedded in structure file as ''moduleConfig'']]
* Modules:
** [[PoNG Module: Form View|Form View]]
** [[PoNG_Module:_Table_View#Editable_Cells|Table with editable cells]]
** [[PoNG_Module:_List_View#Editable_Cells|List with editable cells]]
** Layout Editor
* Extras:
** [[PoNG_Module_Programming#Module_Template|Module template for programmers]]
** [[PoNG_PHP_Backend|PHP-BE: API to save layout and settings]]
* Fixes
** Display title also w/o decor

== Version 0.2 ==
General:
* PHP Backend Base
* Header/Footer Improvements
* Allow links in Copyright
* Basic auth mechnism

Modules:
* [[PoNG Module: MediaWiki View|MediaWiki]]
* Security Header
* [[PoNG Module: Master Details View|Master-Detail-Tables View]]
* [[PoNG Module: I18N|Internationalization]]

== Version 0.1 ==
Features:
* Rendering of basic PoNG [[PoNG Structure Specification]]
* [[PoGN_Structure_Specification#Modal_dialogs|Modal dialog for views]]
* [[PoNG_Modules|Basic module and hook concept]]
* Hooks
** [[PoNG_Modules#addHeaderHtml|Header]] and [[PoNG_Modules#addFooterHtml|Footer]] hooks
** [[PoNG_Modules#addActionBtn|Action button]] and [[PoNG_Modules#creModal|modal dialog loader]]
** [[PoNG_Modules#loadResourcesHtml|Resource HTML loader]]
* Modules:
** [[PoNG Module: Table View|Table View]]
** [[PoNG Module: List View|List View]]
** [[PoNG Module: Form View|Form View]]
** [[PoNG Module: Modal Form Dialog|Modal Form Dialog]]
** [[PoNG Module: Help Dialog|Help Dialog]]
* Includes static out of the box demo

PoNG PHP Backend

2015-02-19T05:56:54Z

Mh:

Request per mail: '''ma (at) mh-svr dot de'''

Installation steps:
# Run the (MySQL) SQL script to install the required tables
# Unzip the PHP backend package into your web server
# Open the base URL in the browser