File: components/

Recommend this page to a friend!
  Classes of Till Wehowski   .Flow   components/   Download  
File: components/
Role: Documentation
Content type: text/markdown
Description: Documentation
Class: .Flow
General purpose library of objects
Author: By
Last change: Update
Date: 7 years ago
Size: 3,273 bytes


Class file image Download

Creating .Flow Components / WebApp or Widget Publishing

About Components:

Important! Please download files on production site!


Please contact me at if you like to publish your own Components-Shop to the engine! Further component directories/shops function is work in progress...

Creating a .Flow Component

The directory and file structure of a component SHOULD be as the following:

                   config.xml                           [REQUIRED, SPEC:]
                   manifest.webapp                      [OPTIONAL, SPEC: |]
                   app.js                               [REQUIRED]
                   index.html                           [OPTIONAL]
   |componentname/js/                                   [OPTIONAL]   
   |componentname/css/                                  [OPTIONAL]   
   |componentname/images/                               [OPTIONAL]    
   |componentname/templates/                            [OPTIONAL]      
   |componentname/locale/                               [OPTIONAL]          


Invoking Widget Flow (recommended way)

Use this code to invoke the widget flow specification (as described at ) by processing the config.xml in the components directory and then injecting the widgets contents into the current windows DOM (the DIV-element below).

<div data-frdl-component="widget://components/path-to-components-dir/component/"></div>


An approved component (wich is published at or related services, e.g. this repository) SHOULD provide the following HTML in its index.html file, replace "{{YOUR_VENDOR_NAME/YOUR_COMPONENT_NAME}}" by your components name:

<div data-frdl-component="flow://components/{{YOUR_VENDOR_NAME/YOUR_COMPONENT_NAME}}"></div>

At the best case it contains NOT ANY OTHER CODE! This is recommended because the code, an user should include in its project to invoke the component, should as simple and short as possible.

flow:// vs. widget://

If you use widget:// as protocoll the widget flow from the W3 spec will be invoked looking for the config.xml, but if you use flow:// the engine is searching for an app.js file directly this MAY be used to speed up the loading.

Invoking local component (flow://)

To invoke any component installed on your current origin, use (leave protocoll blank):

<div data-frdl-component="://components/path-to-components-dir/component/"></div>

If you do not specify a filename in the path, "app.js" is assumed.

Invoking local component (widget://)

To use a component from your own origin/server:

<div data-frdl-component="widget://"></div>

This is seraching for a config.xml to invoke the "widget flow".