Bind widget properties to the state

Each widget can bind any properties (key/value pairs) to the state of the dynaWidget grid. This can be done by setting them in the initialState of the widget (grid). Those properties can also be dynamically modified from within the widget which is for example useful in situations where you want to configure on your widget edit content, what to show on the widget view content.

The following RSS-Widget shows an example for binding widget properties to the grid state.

The widget loads articles from an RSS by using a special RSS component and renders them in it´s view content facelet. The RSS component is not explained here.
Now, what´s interesting here:

• The RSS component is loading data by using widget properties which are defined in the (initial)State of this dynaWidget grid
• Those properties (feed url, limit, etc.) can be modified by using the edit content of the widget.
• Because the dynaWidgetGrid stores it´s state to a cookie, all modifications made to the state will be maintained, until you delete your cookies. You can test these by reloading the current page after.

Just try it out!

JSF Feed

And now the code samples

This is the code of the widget´s initial state configured on the grid component:

			<dwComp:dynaWidgetGrid id="myRssGrid" 
				...
				initialState="{
					'feedWidget':
					{
						'title':'JSF Feed',
						'position':'1-1',
						'url':'http://linkToMyRss.com',
						'limit':'5'
					}
				}" />
		

You can see, that there´re some individual properties like url, limit set with initial values.

Now, these properties are bound to the RSS component on the view content facelet of the widget using a helper function of dynaWidgets:

			feedWidget_view.xhtml:
			
			<xxx:rssFeedViewer 
				url="#{dwFct:ctxWidgetPropertyValue('url')}"
				limit="#{dwFct:ctxWidgetPropertyValue('limit')}" />
		

The helper function has access to the context widget(Grid) that is the widget or grid component currently being processed in the application or render phase of the jsf request lifecycle.

Of course, you can also access widget properties in a managed bean using the WidgetStateManager :

			public class RssManagedBean
			{
				public void loadRssData()
				{
				...
				// solution 1 (access properties of any widget of any grid)
				WidgetStateManager stateManager = WidgetTools.getWidgetStateManager();
				String feedUrl  = stateManager.getGridProperties("myRssGrid").get(WidgetTools.propertyFor("feedWidget","url"));
				
				// solution 2 (access properties of any widget of the context grid)
				WidgetStateManager stateManager = WidgetTools.getWidgetStateManager();
				String feedUrl  = stateManager.getContextWidgetGridProperties().get(WidgetTools.propertyFor("feedWidget","url"));
				
				// solution 3 (access properties of the context widget)
				String feedUrl  = ContextWidgetFunctions.getContextWidgetPropertyValue("url");
				...				
				}
			}
		

Now, here is the code of the widget´s edit content facelet that show´s how widget properties (bound to the state) can be edited:

			feedWidget_edit.xhtml:

			<h:panelGrid columns="3">
			
				<dwComp:widgetTitleEdit labelValue="title:" />
				<h:panelGroup />
				
				<dwComp:widgetAutoReloadCheckbox labelValue="auto-reload:" />
						
				<dwComp:widgetAutoReloadInterval labelValue="reload inverval:"/>
				<h:panelGroup />
				
				<dwComp:widgetInputText labelValue="feed-url:" propertyName="url"/>
				<h:panelGroup />
				
				<dwComp:widgetInputText labelValue="limit:" propertyName="limit"/>
				<h:panelGroup />
				
			</h:panelGrid>
			
			<h:messages layout="table" errorStyle="color: red"/>
		
			<dwComp:widgetAjaxButton value="save" reRenderWidget="true"/>
		
      	

What´s important here:

• the widgetInputText must be used to bind a widget property to an input component
• there are other components such as  widgetTitleEdit, widgetAutoReloadCheckbox, etc...  that can be used for as default components for editing widget properties
• the widgetAjaxButton component writes modified properties to the grid state with an ajax call

For details on using the ajax action components see content components.