sample code

	
	<image id='myimage' src='/image/resources/del.gif' class='myclass' onclick='myfunc()' title='Delete' />
         <image id='myimage' src='/image/resources/brainwave.gif' href='http://www.brw.com' caption='Brainwave Applications' />

use case

	<window>
	  <center>
	     <box style="width:500px;">
		 <image id='myimage1' src='/resources/img/bucket.png' tooltip='Glass' />
	     </box>
	     <box style="width:500px;">
		 <image id='myimage2' href='http://www.brainwavelive.com/' src='/resources/img/search128.png' title='Search' caption="Search"/>
	     </box>
	  </center>
	</window>

output

NOTE: In this case we have used two images. The first one is a simple image whereas the second one has a caption below it and is also hyperlinked to http://www.brainwavelive.com/.

3.Ajaxform (supported in platform version 1.1)

The ajaxform template is used to create an html form with enhanced features.The ajaxform tag supports the following attributes.

Attributes

1. id : The identification which will be associated in the <form> tag
2. method : The way in which data will be passed to the server(Get or Post).
3. url : The url which will be called when the form is submitted. This url associated with the action attribute of the <form> tag.
4. update : The id of the container whose content needs to be updated
5. onsubmit : The actions which will be performed when the form is submitted

sample code

	
	<ajaxform id="exampleform" url="/test/ajaxformexample" method="post" update="aliases" position="bottom">

<textinput id="newalias" type="text" />
		<button image="add" submit="exampleform" url="/test/ajaxformexample" title="Add a new Alias"/>
	</ajaxform>



	
	
	

use case

	<box id='mybox' name='mybox' style="width:500px;" align="center"><br/>
		<ajaxform id="exampleform" url="/test/ajaxformexample" method="post" update="aliases" position="bottom">
			<textinput id="newalias" type="text" />
			<button image="add" submit="exampleform" url="/test/ajaxformexample" />
		</ajaxform>
		<box id="aliases" title='Output'> 
		</box>			
	</box>



 

output

This is an ajaxform with a textbox and a button. We also have an output area. Whenever we type in something in the textbox and click the button the value is passed to the server via ajax and that value is displayed back in the output area.

This is the output. We have typed in "This is a test" and the value is displayed in the output area after being sent to the server and fetched back from it via ajax.

4.Button (supported in platform version 1.1)

The button template is used to define custom buttons (with images) in applications.

Attributes

1. id : The identification
2. title : The tooltip or title which will be displayed on mouseover
3. image : The path of the image which will be used as the button
NOTE: There are certain default buttons which have been defined. They are: download, go, cancel, info, edit. These have default paths.
4. url : The url for a simple href handler
5. update : The id of the container whose content needs to be updated.
NOTE: If this attribute is provided then url attribute also needs to be provided for proper execution of ajax functionality.
6. position : The position in which new contents will be added to the container (which will be updated)
7. submit : This will submit the form with which it is associated
8. hover : This is used to provide hover effect for the button
9. onclick : The Javascript function which is called on clicking the button
10. caption : The text which can be added at the bottom of the button
11. captionlocation : The location of the caption to be displayed.

sample code

	
<button image="add" submit="add-alias-form" url="/edit/add_alias/" title="Add a new Alias"/>
<button image='/edit/resources/images/unlocked.gif' update="div1" url='/edit/protect/' title="Protect This"/>


	
	

use case

<box id='mybox' name='mybox' style="width:500px;"><br/>
	   <label>This is a simple button :</label>
	

	   <button image='/resources/skins/default/images/help.jpg'  title="Help"/><br/><br/>
	   <ajaxform id="exampleform" url="/test/ajaxformexample" method="post" update="aliases" position="bottom">
		<textinput id="newalias" type="text" />
		<button image="add" submit="exampleform" url="/test/ajaxformexample" title="Add a new Alias"/>
	   </ajaxform>
	   <box id="aliases" title='Output'> 
	   </box>
</box>



 

output

NOTE: The first one (with a question mark) is a simple button with an image. The second one (addition sign) is used to submit data to the server and the data fetched from the server is displayed in the output area.

5.Box

The box is a generic container to hold all other kinds of information.

Attributes

1. id : The identification
2. name : The name of the <div> tag which will be passed to the server as a name/value pair so that the server can process the information.
3. style : The css attributes
4. align : The alignment of the box
5. title : The text that will be displayed as the title of the box

sample code

	
<box id='mybox' name='mybox' align="center" title="Brainwave">This is a box.</box>


	
	

use case

<window>
	  <box id='mybox' name='mybox' align='center' title='Brainwave' style="width:500px;">
		This is my box.
	 
	  </box>
</window>




 

output

6.Tabs (supported in platform version 1.1)

The tabs template is the main element of the tab control which defines the Javascript function for creating the tab based navigational structure.

Attributes

1. The identification with a prefix "div".

7.Tab (supported in platform version 1.1)

The tab template is the standard tab for navigation.

Attributes

1. target : The identification of the container associated with that particular tab. In other words it will have the id of the container which will show up when that particular tab is clicked.
2. active : The attribute to determine whether the particular tab remain active by default.

8.Tabcontent (supported in platform version 1.1)

The tabcontent is the main tab page area. It contains all the containers (with ids corresponding to those specified in the tab template) which correspond to each 'tabs" in "tab" template. It must contain the SAME number of containers as there are "tabs" in the "tab" template.

sample code

	
<tabs id="Mytab">
	<tab active="true" target="tabBox1">Tab1</tab>
	<tab target="tabBox2">Tab2</tab>
	<tabcontent>
		<div id ="tabBox1">here is the content for tab1</div>
		<div id ="tabBox2">here is the content for tab2</div>	
	</tabcontent>
</tabs>




	
	

use case

<center>
	<box id='mybox' name='mybox'  style="width:500px;">
		<tabs id="Mytab">
		    <tab active="true" target="tabBox1">Tab1</tab>
		    <tab target="tabBox2">Tab2</tab>
			<tabcontent>
				<div id ="tabBox1" style="height:200px;">
					<image id='myimage1' src='/resources/img/bucket.png' tooltip='Glass' caption="Glass"/>
				</div>
				<div id ="tabBox2" style="height:200px;">
					<image id='myimage2' src='/resources/img/search128.png' tooltip='Search' caption="Search"/>
				</div>
			</tabcontent>
		</tabs>
	</box>
</center>

 

output

Aphrodite Widget Library

The Aphrodite Widget library is a toolkit of UI components, which can be used to create a rich AJAX based web interface. Widgets are different from other Aphrodite UI controls in that they all implement the Widget API, can be submitted as part of a form and support WidgiCalc (a spreadsheet style formula engine for UI widgets).

Using widgets in your application:

9.Textbox (supported in platform version 1.1)

Creates a textbox widget. Used for entering single or multi line text or passwords.

Attributes

1. id : The unique name of the widget. (Required)
2. type : 'password' for a password style. (Optional)
3. maxlength : A numerical value for the maximum number of characters which can be entered.(Optional)
4. required : A flag (true/false) which denotes whether a value is required. Case Sensitive.
5. multiline : A flag which denotes whether the widget supports multi-line input (Rendered as a html textarea). (Optional)
6. formula : A WidgiCalc formula.(Optional)
7. onclick : A custom event handler.(Optional)
8. onkeypress : A custom event handler.(Optional)
9. onkeyup : A custom event handler.(Optional)
10. onchange : A custom event handler. (Optional)
11. onfocus : A custom event handler.(Optional)
12. onblur : A custom event handler.(Optional)

sample code

	
<textbox id='v' required='true' value=This is a textbox widget' onblur='myfunc1()' onchange='myfunc2()'/>



	
	

use case

<box id='mybox' name='mybox' style="width:500px;" align="center"><br/>
	  <label>Multi line :</label><textbox id='text1' multiline="true" required='true' value='Attribute Value' /><br/><br/>
	  <label>Single line :</label><textbox id='text2'  required='true' value='Attribute Value' />
</box>

	





 

output

10.Datebox (supported in platform version 1.1)

Creates a datebox widget. Used for entering dates. Comes with a popup calendar to assist in graphical selection of dates and a text-parser for parsing user text into dates.

Attributes

1. id : The unique name of the widget.(Required)
2. format : Date Format.(Optional)
3. required : A flag (true/false) which denotes whether a value is required. Case Sensitive.
4. value : A default value.(Optional)
5. formula : A WidgiCalc formula.(Optional)
6. onclick : A custom event handler.(Optional)
7. onkeypress : A custom event handler.(Optional)
8. onkeyup : A custom event handler.(Optional)
9. onchange : A custom event handler. (Optional)

sample code

	
<datebox id='v' required='true' format='dd/mm/yyyy' />



	
	

use case

<box id='mybox' name='mybox' style="width:500px;" align="center"><br/>
	<table>
	    <tr>
			<td><label  style="font: 14px verdana ;color:#676767;font-weight:bold;">Date: </label></td>
            <td><datebox id='v' format='mm/dd/yyyy' /></td>
		</tr>			
	</table>	
</box>

 

output

11.Imagelistbox (supported in platform version 1.1)

The ImageBox Widget is a matrix layout of ImageCell Widgets. Each ImageCell widget has an image, a name and an optional description. The ImageBox widget lays them all out in a matrix and provides graphical selection and navigation possible.

Attributes

1. id : The unique name of the widget.(Required)
2. required : A flag (true/false) which denotes whether a value is required. Case Sensitive.
3. value : A default value.(Optional)
4. selectable : A flag (true/false) which will determine whether the images in the list will be selectable or not. (Optional)
5. width : The width of the entire image list. (Optional)
6. height : The height of the entire image list. (Optional)
7. cellwidth : The width of the individual cells containing the images. (Optional)
8. cellheight : The height of the individual cells containing the images. (Optional)
9. showlabel : The label which will be associated with individual images. (Optional)
10. showdescription : The description which will be associated with individual images. (Optional)
11. draggable : A flag (true/false) which will determine whether the images in the list can be dragged with mouse.
12. droppable : A flag (true/false) which will determine whether the images in the list can be dragged and dropped with mouse. (Optional)
13. droppableoptions : A dictionary containing the droppable options. (Optional)
14. formula : A WidgiCalc formula.(Optional)
15. onclick : A custom event handler.(Optional)
16. onkeypress : A custom event handler.(Optional)
17. onkeyup : A custom event handler.(Optional)
18. onchange : A custom event handler.(Optional)

sample code

	
<imagelistbox id="myimagelist" draggable="true" selectable="false"/>

WidgiCalc

WidgiCalc is a simple, rich yet extremely powerful framework for doing spreadsheet style formula calculations for widgets. We all know that a cell in a spreadsheet can have a formula, which causes its value to depend on other cells and change automatically as other cells are modified.

Similarly the WidgiCalc framework empowers widgets to have formulas, which cause their value to change automatically as other widgets on the page are manipulated.

First, a naming scheme is required. Since Widgets are not laid out in a two dimensional table, the spreadsheet style naming (A1, B4 etc.) will not do. Hence, all widgets have ids or names, which must be unique on the page. These names are used to access widgets and their values.

The syntax to access a widget object is as follows:

$W('mywidget') This returns a reference to the widget named "mywidget".

The syntax to access a widget value is as follows:

$w('mywidget') This returns the value of the "mywidget" widget.

This syntax must be used in formulas instead of the typical B1, $B4, $B$5 style syntax.

For example, the sample formula to add the values of two widgets (mywidget1 and mywidget2) is: =$w('mywidget1) + $w('mywidget2')

For example, the sample formula to add the values of two widgets (mywidget1 and mywidget2) is:

The supported formulae are documented below:

1. sum : Add the values of different widgets.
2. average : Find the average of the values of different widgets.
3. counta : Gives the total count of all the values from different widgets.
4. count : Gives the total count of all the numeric values from different widgets.
5. countblank : Gives the total count of all the blank values from different widgets.
6. len : Gives the length of a widget value.
7. concatenate : Concatenates values from different widgets.
8. lower : Converts a widget value to lower case.
9. upper : Converts a widget value to upper case.
10. today : Returns today's full date.
11. day : Returns the number of the day in the week(Javascript format:0 to 6, where 0 is Sunday and 6 is Saturday).
12. now : Same as today.
13. weekday : Returns the number of the day in the week(Non-javascript format:1 to 7, where 1 is Sunday and 7 is Saturday)
14. month : Returns the number of the month in the year (Javascript format:0 to 11, where 0 is January and 11 is December).
15. year : Returns the current year.
16. date : Returns a date object based on values passed as year, month and day.(Month is in non-javascript format)
17. datediff : Returns the difference between two dates.
18. if : Returns a value based on a condition.
19. and : Executes logical "and" operation on two values.
20. or : Executes logical "or" operation on two values.