Creating µ.Flow Components / WebApp or Widget Publishing

About Components: https://github.com/frdl/-Flow/blob/master/components/README.md

Important!

https://github.com/frdl/-Flow/blob/master/application/webfan/node_modules/webfan/my-webfan.js Please download files on production site!

Publishing

Please contact me at software@frdl.de 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:

|componentname/
                   config.xml                           [REQUIRED, SPEC:http://www.w3.org/ns/widgets]
                   manifest.webapp                      [OPTIONAL, SPEC:https://developer.mozilla.org/en-US/Apps/Build/Manifest | http://www.w3.org/ns/widgets/]
                   app.js                               [REQUIRED]
                   index.html                           [OPTIONAL]
                   README.md                            [OPTIONAL]
                   LICENSE.md                           [OPTIONAL]
   |componentname/js/                                   [OPTIONAL]   
   |componentname/css/                                  [OPTIONAL]   
   |componentname/images/                               [OPTIONAL]    
   |componentname/templates/                            [OPTIONAL]      
   |componentname/locale/                               [OPTIONAL]          
     

Using

Invoking Widget Flow (recommended way)

Use this code to invoke the widget flow specification (as described at http://www.w3.org/TR/widgets/ ) 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>

index.html

An approved component (wich is published at webfan.de 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://example.com/path-to-components-dir/component/"></div>

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