PoNG Structure Specification

Defining the "structure" replaces the writing of HTML code to set up a page of different information resources.

The PoNG "structure" is a JSON result, which comes from the server, e.g. as GET response for URL .../svc/layout/main/structure. The loading and processing of the structure defines the rendering lifecyle of the page in the browser. After that the user can interact with the page.

By default, index.html will load the structure of layout/main. There is a simple "layout" control feature available. If you utilize the GET parameter "layout" the value (in this Exampe XYZ) will be used to determine the layout definition, so if you load:

• http://mysite.xyz/basedir/index.html?layout=XYZ

the structure JSON is get from

• http://mysite.xyz/basedir/svc/layout/XYZ/structure

JSON basics

Even if you are new to JSON, it is very easy to understand: It is a structured key/value text data format, so you can use any text editor to define the "structure". Some JSON hints:

• Key/value pattern: "key": <value> where values can be of type string, object or array, see below
• Strings
  • "stringName": "This is the value of stringName"
• Objects with inner fields use { } braces
  • "objectName": { "field1": "value of field one", "field2": "value2", "embeddedObject": { ... } }
• Arrays of objects are defined using [ ] braces
  • "arrayName": [ {...}, {...} ]
• Optional fields: simply delete the key (and the value) from the JSON structure.

Resource References

As far as I know, there is no standard for referencing resources within JSON data, as we have in HTML (href).

Conventions to use in PoNG:

• Resource references should have the field name resourceURL
  • references should be URLs (PoNG base URL in the examples may be http://mserver.xyz/basepath/). References can be one of these tree types:
    • relative URL without trailing "/", e.g. "resourceURL": "svc/myResource" are relative to the indec.html of PoNG, so it reference to http://mserver.xyz/basepath/svc/myResource
    • URL with trailing "/", e.g. "resourceURL": "/otherResource" reference to http://mserver.xyz/otherResource
    • Full qualified URL , e.g. "resourceURL": "http://otherserver.xyz/any-path/externalResource"
• Other references names, e.g. images or files, should end with URL,c e.g.: "logoURL"

Layout Rules

The "layout" should be a simple explanation of the portal and its views.

I.e., the "layout" should have

• no content
• no graphic design and no CSS related things
• no details of the views
  • just the main resource definition and its type
  • top level actions and
  • top level dialog definitions

Notice: Please add "description" elements to all the objects in the layout. This enables a barrier free view of PoNG in the future. Actual these fields are optional, but please be prepared, that you get a "non barrier free" label on your portal page later on, if these fields are missing.

Hierarchy

Root element is layout. The root element has the fields:

• title (String: definition of page title)
• description (text, may be tool tip, but not be displayed)
• header (Object for header definition)
• rows (Array of main content row definitions)
• footer (Object for footer definition)

Structure: layout root element (JSON format)

{
 "layout": {
   "title": "My Page",
   "header": {
       ...
   },
   "rows": {
       ...
   },
   "footer": {
       ...
   }
}

Header

Header structure:

• logoURL (optional): String
• description (text, may be tool tip, but not be displayed)
• linkList (optional): Array of objects
  • text : String
  • url : String
• modules (optional) Array of objects
  • id (String)
  • type (String)
    • defines the module and hook to be loaded
  • param (Object)
    • any JSON structure of parameters for the hook

JSON Example Header Structure

{
 "layout": {
    ...
    "header": {
      "logoURL": "logo.png",
      "description": "You can use the login button to authenticate and access restricted resource views.",
      "linkList": [
      	{ "text":"Help", "url": "help.html"},
      	{ "text":"Login", "url": "login.html"}
      ],
      "modules" : [ { "id": "myHeaderDiv", "type": "my-header", "param": { "config":"1234" } }, ... ] 
    },
    ...
}

Main

Resources

Modal dialogs

Modal dialogs are pop ups, which block any other interaction with the HTML page, until the dialog is closed.

You can define an array of modal dialogs for each resource. The name of the modal dialog will be used in the URL to load it, e.g. for the resource with the resourceULD myResource and an embedded dialog with the name dialogXy, PoNG will load the modal dialog from http://www.mysite.com/svc/myResource/dialogXy/

Footer

Footer structure:

• description (text, may be tool tip, but not be displayed)
• linkList (optional): Array of objects
  • text : String
  • url : String
• modules (optional) Array of objects
  • id (String)
  • type (String)
    • defines the module and hook to be loaded
  • param (Object)
    • any JSON structure of parameters for the hook

JSON Example Footer Structure

{
 "layout": {
    ...
    ...
    "footer": {
      "description": "The footer has links to impress and contact form.",
      "linkList": [
      	{ "text":"Impress", "url": "impress.html"},
      	{ "text":"Contact form", "url": "contact.html"}
      ],
      "modules" : [ { "id": "myFooterDiv", "type": "my-footer", "param": { "confABC":"xy" } }, ... ] 
    }
}

Full JSON "structure" Example

{
 "layout": {
   "title": "Title",
   "description": "This page demonstrates some functions of PoNG.",
   "header": {
     "logoURL": "logo.png",
     "description": "You can access links to a dummy help page and a dummy login page here.",
     "linkList": [
     	{ "text":"Help", "pageURL": "help.html"},
     	{ "text":"Login", "pageURL": "login.html"}
     ]
   },
   "rows": [
     {
       "rowId": "stat",
       "description": "Just a demo of the PoNG list.",
       "height": "100px",
       "resourceURL": "resX",
       "type": "pong-form",
       "decor" : "decor",        
       "type": "pong-form",
       "modal" : [ { "modalName": "Anything", "icon": "ui-icon-home" }	],
       "actions" : [ { "actionName": "Config", "type": "modal-form" }, { "actionName": "MyDlg", "type": "modal-form" } ]
     },
     {
       "rowId": "r1",
       "height": "400px",
       "cols": [
         {
           "columnId": "control",
           "description": "Just a demo of the PoNG table.",
           "width": "40%",
           "resourceURL": "resX",
           "type": "pong-table",
           "decor" : "decor"
         },
         {
           "columnId": "plot",
           "description": "This is a plot of some sin() functions, but you can modify the plot with the config action button.",
           "width": "60%",
           "decor" : "decor",
           "resourceURL": "gnuplot",
           "callback": "grmh()",
           "actions" : [ { "actionName": "Config", "type": "modal-form" },{ "actionName": "fullWidth" }, { "actionName": "fullScreen" } ]
         }
       ]
     }
   ],
   "footer": {
     "copyrightText": "Copyright 2013, MH.",
     "description": "The footer has links to impress and contact form.",
     "linkList": [
     	{ "text":"Impressum", "pageURL": "impress.html"},
     	{ "text":"Privacy Note", "pageURL": "privacy.html"}
     ]	
   }
 }
}