My first dynaWidget grid

This is a dynaWidget

A dynaWidget is made up of:

a title header
header actions (for collapse/expand, reload, close the widget)
content area ('view', optional an 'edit' page)

This is a dynaWidget grid

What you can see here are four widgets within a two column grid. You can move around the widgets, collapse or expand them, reload the content as well as close them. Just play around with it!

A dynaWidget grid is made up of:

an area (=grid) with a given dimension (width, height)
the grid is separated in different columns
each column may contain any number of widgets
widgets might be dragged within and between the grid columns

Defining this dynaWidget grid in 3 steps

Now you see how to implement this widget grid with two columns containing the four simple widgets.

1.) Before using the dynaWidget components you must declare the following xml namespace prefixes

	  		<html
	 			xmlns:dwFct="http://www.solseit.de/jsf/fct/dynaWidget"
	 			xmlns:dwComp="http://www.solseit.de/jsf/comp/dynaWidget">
	 			...
	 		</html>

2.) Define a dynaWidget grid component with four widgets: 'firstWidget', 'secondWidget', 'thirdWidget' and ... 'fourthWidget'

			<dwComp:dynaWidgetGrid id="myGrid" columns="2" 
				templateBaseUrl="widgetContent" width="500"
				initialState="
					{
					'firstWidget':
					{
						'title':'My first widget','position':'1-1','commandEdit':'false'
					},						
					'secondWidget':
					{
						'title':'My second widget','position':'1-2','commandEdit':'false'
					},						
					'thirdWidget':
					{
						'title':'My third widget','position':'2-1'
					},
					'fourthWidget':
					{
						'title':'My fourth widget','position':'1-3','commandEdit':'false'
					}					
				}" />

What´s important here:

Our grid has 2 columns and a width of 500 px
We define a "templateBaseUrl" - this is the folder containing widget content facelets
The initial state of the grid and it´s widgets is set by the json string "initialState" which has the form:
'widgetId':{'title':'the widget´s title','position':'the widgets position in the grid',...}

3.) Create the widget content facelets (place it into templateBaseUrl folder widgetContent).

A content facelet is a file with the name widgetId_view.xhtml and looks like this:

			"widgetContent/firstWidget_view.xhtml"
			
			<ui:composition  
				xmlns:ui="http://java.sun.com/jsf/facelets"	
				xmlns:h="http://java.sun.com/jsf/html">
			
				<h:outputText value="This is the content of my first widget! There´s not much behind it, just a simple facelets page with text." />
								
			</ui:composition>

What´s important here:

A content facelet is an ordinary <ui:composition> which means you can use normal jsf components in the widget content.
Each widget has at least one content facelet which is named by it´s id like: widgetId_view.xhtml.
If a widget has an edit page (property 'commandEdit':'false' not set), we also need an edit content facelet:widgetId_edit.xhtml, like thirdWidget in this example.
All widget content facelets must be placed in the configured widgetTemplateBaseUrl

For details on using the dynaWidget components see main components.

Setting1:
Setting2: