[Component] CForm v1.0 January 2, 2008
Posted by udayms in Adobe, Demo, Flex, Flex Components, GUI, Scriptlet.Tags: actionccript, Adobe, as, cform, component, Demo, example, Flex, forms, mxml, script, source
trackback
CForm is all about creating data entry screens. This component allows developers to create standardized forms/CRUD screens in their applications. The CForm component is a Data Entry component that can be very useful if -
- you are building business applications with many data entry/view screens
- you are working with a lot of developers. each handling separate screens/modules
- you wish all your screens to have the standard look & feel across the application
- you wish to avoid different developers/designers designing their own UI/UX paradigms for their specific screens
Let me try to explain this in a very simplified manner. CForm reads XML file to create user entry forms. To implement CForm, the following steps are involved.
- Developer creates XML file for each screen. The XML will contain the list of fields, controls to be used etc.
- CForm is called in an MXML.
- Now, the developer can use many of CForm’s exposed methods to access/manipulate data in the CForm.
The Demo walks you through a few use cases of how CForm can be used in real world. There are clear instructions on each example in the demo. For a detailed documentation on the XML part of this component, check out here and for the AS and MXML angle check out below. The source code will also be made available shortly in a 2 or 3 weeks. As of now, if you need the source code you will have to check it out from the SVN repository at http://flexedtoolkit.googlecode.com/. If you like this component and would be willing to extend a helping hand, send me a mail .
If you have any questions/suggestions after viewing the demo, leave a comment on this page!!
[ Demo | XML Documentation | Source of Example ]
CForm Properties
Property | Access | Description |
widgetsFile | Read-Write | The path of the xml file which contains the details of the controls |
CForm Methods
Method | Description |
clearContainer() | Clears the container of CForm. i.e. Removes the CForm from the container. |
setData(obj:Object) | Sets the values of obj to the CForm fields. |
getWidget(widgetId:String) | Returns the renderer of the widget in field. |
createCFormFromXML(xml:XML) | creates CForm on the fly using the XML passed |
Events
Event | Description |
CFormLoadComplete | Fired when CForm completes loading all the fields |
Internals
CForm internally uses extended versions of the standard flex widgets. The extended widgets implements a common single interface - CFormItemRenderer.The extended widgets have some preset properties like height, width, stylename etc. These constant values are picked from DefaultConfig class.
Using CForm
MXML code
<flexed:CForm id=”cfrm”widgetsFile=”controls.xml” cFormValidation=”validateForm”verticalCenter=”0″ verticalScrollPolicy=”auto”
horizontalCenter=”0″ horizontalScrollPolicy=”off”
width=”100%” height=”100%”/>
AS Code
To set xml path and load CForm
str = “examples/cform/xmls/controls.xml”;
cfrm.widgetsFile = str;cfrm.init();
To get data from CForm
obj = cfrm.getData(); // to get only modified values
obj = cfrm.getData(false); // to get all values
To reset CForm
cfrm.resetCForm();
To set data to CForm
var oDataToSet:Object = new Object();
oDataToSet.fname = “udayms”;
oDataToSet.age = 27;
oDataToSet.gender = “male”;
cfrm.setData(oDataToSet);
To access one field in the CForm and access properties of the widget
cfrm.getWidget(“fname”).getUIComponent().addEventListener();
To create CForm on the fly using dynamic XML
cfrm.createCFormFromXML(new XML());
To Validate CForm using custom validation
// custom validation function
private function validateForm(id:String,
value:Object, values:Object):ValidationResult{
var result:ValidationResult = new ValidationResult(false);
if(id == “txtCoName”){
if(value == “” || value == null) result = new ValidationResult(true,null,“”,
“You HAVE to enter a company name!”);
}
return result; }
// do this to actually validate the
// CForm. Internally it
// will use validateForm() method.
cfrm.validateCForm();
I guess this covers most of the usecases. Anyway check out the demo. That should give pretty much a clear idea of what is possible with this component.
Comments»
No comments yet — be the first.