[Component] CForm v1.0

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 –

  1. you are building business applications with many data entry/view screens
  2. you are working with a lot of developers. each handling separate screens/modules
  3. you wish all your screens to have the standard look & feel across the application
  4. 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!!

**Update: Compiled SWC now available for download.

[ SWC | 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.

Advertisements

76 Responses to [Component] CForm v1.0

  1. Larry Maccherone says:

    Nice! Coming from a live DOM, HTML form background, I’ve been frustrated by the fact that mxml forms are pre-compiled. I know that I can dynamically add elements with ActionScript but doing things declaratively (even if they are also dynamic) is cleaner, IMHO. I’d thought about building something like this but now you’ve done it, great!

    How is this packaged? Do you load the standard Flex library and then your library?

    How is it licensed?

  2. udayms says:

    @Larry: Hey…. Thanks for the comment. As I didn’t see any comments from the community I was beginnning to think that nobody wanted it. Anyway 🙂 , I guess I’ll just have to wait and see….. Anyway, as for your Qs:

    Q: How is it licensed?
    A: It’s open source. I learnt a lot from the community and this is how I can give back to the community. I’ll probably be releasing the code soon. Right now, its dirty and uncommented. thats why am holding back. In the mean while, you can checkout the entire code from the SVN repo of the google project link I have included in the post.

    Q: How is this packaged? Do you load the standard Flex library and then your library?
    Right now, It’s just a few folders with classes that you can add to your project and get working. I really want to compile it into a single SWC component or something, but have no clue how to do that! 😦

  3. Naum says:

    This is really nice. I was also working on a project like this. I was trying to generate the UI in flex 2 dynamicly from XML. Maybe this is what i want to do. I have problem importing this project in flex. It says 1 “Type was not found or was not a compile-time constant: CForm.” Why? Is there any explanation of what Cform can do? Thanks.

  4. Pingback: Vinny Carpenter’s blog » Daily del.icio.us for January 7th

  5. udayms says:

    @Naum: It is not enough to download the source from the demo. You have to actually check out the code from the google code project. I will be posting the source code in a few days time in this blog till then the google project is where you can get the stuff. 🙂

  6. Arturo says:

    Great job!… I’ve been checking the code and it’s really open to new extensions. You can add new “widgets” just by implementing the “CFormItemRenderer” class. Have you guys thought about including a new node name to cform to support “view states”? I think that could be a step beyond…

  7. Cato Paus says:

    FileReference – A petition for Astro WE NEED YOUR VOTE !

    Hi All! If We Want New Features in Flahs Player we will all need to VOTE!

    I have submited it as a Feature Request. Follow the link and create a accont and vote for it!
    http://bugs.adobe.com/jira/browse/SDK-14245

    By the way we all need to get familiar with this “Adobe Bug System” 🙂

    Please forward this message.
    Cheers 🙂

  8. Sergio says:

    Nice Job,

    I’ve a few questions ?

    1. is it possible for a group to span over several colums ?
    2. is it possibel to place more fielditems in on a row in the same group ?
    3. is there a reason why the button is missing as widget ?

  9. udayms says:

    @Sergio: Your Qs and my As –

    Q. is it possible for a group to span over several colums ?
    A: Not yet. But, thats in the roadmap.

    Q: is it possibel to place more fielditems in on a row in the same group ?
    A: Yes. Just add more than one formitem in a group.

    Q: is there a reason why the button is missing as widget ?
    A: Ok. This is something I spent sometime thinking about. The developer might want to position it differently for each view depending on the space availability. All the same, I have in the roadmap to allow developers to be able to add control points on top or bottom. I am looking at it more from a perspective of control points or action points. The developer may choose to have it as buttons, checkboxes, link buttons, image buttons or anything else.

  10. qwerty says:

    i am having this message when i am trying to run the application can u help please
    1046: Type was not found or was not a compile-time constant:
    and where do we add the css files?

  11. udayms says:

    I guess you got this message when you downloaded the zip from the source of the demo and tried to run it. The reason is that the demo doesn’t have the source code of the CForm component. It has the source of only the demo. To get the source of the CForm component, you will have to check it out from the SVN repository of the google project which can be found at http://code.google.com/p/flexedtoolkit/source

  12. qwerty says:

    ok 10x man but how can i download the source code should i copy and paste all mxml and as files into my flex ? i tried to do this i had these errors :
    A file found in a source-path must have the same package structure ”, as the definition’s package, ‘flexed.widgets.form’. examples/src CFormItemCombobox.as

    Can not resolve a multiname reference unambiguously. CFormItemRenderer (from C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\examples\src\CFormItemRenderer.as) and flexed.widgets.form:CFormItemRenderer (from C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\examples\src\CFormItemRenderer.as) are available. examples/src CFormItemDualText.as
    can u give me some help please 10x again

  13. max says:

    Hi Udayms, my preferred FlexMan 🙂

    Great new job (after CGrid….) with very nice skin.
    One good little modified (were is possible) for example is:

    # CFormItemText.as – Function:setAttributes(…)
    …….
    …..
    ….
    ..
    if(maxChars) textInput.maxChars=int(maxChars);

    # relative XML:

    thanks, max

  14. axel says:

    Hi Udayms,

    thx for the great component, works like a charm.

    It took me a second to figure out that rows to the table widget can only be added through ActionScript
    [e.g. mycform.getWidget(“grdFriends”).setValue(myFriendsCollection); ], since the (great) examples and the documentation didn’t cover that scenario.
    Any plans on doing this from within the cform XML directly?

    Anyway, really cool thing. I had to do the same in MFC C++ once, and you saved me the trouble of doing the same thing all over again in ActionScript. Let me know if you have ever need of my MFC library 🙂

    cheers, Axel

  15. udayms says:

    Yes. You are right! We cannot add rows in the xml directly. we have to do it the way we you have written.

    The way I see it… Rows in a table is ‘data’ or model. The xml file is for the view only not the model. Also, allowing the user to add rows to the table widget would make the xml really messy. Today, the only data that can be added to the xml are the values for comboxes etc. Even these are mostly enum values so can be considered part of the view.

    Now, if we did do this in xml, then i feel we might be re-inventing the wheel. Validating and Parsing row information and creating a dataProvider might be really heavy and performance affecting.

    These are the reasons, I kept rows out of the xml. Then again…these are just my views.. 🙂

  16. udayms says:

    @ALL: Thanks for trying out and using CForm…. I guess its high time, I released the code in this blog. I am planning to get over my laziness and pack it up and put it on the blog sometime next week. Till then you will have to use the google project if you need the source code. 🙂

  17. Gianfranco says:

    hi

    great job

    i try to build ( Flex 2.01 and Flex 3.0 ) but receive this error message :

    [exec] C:\sviluppo\flex\flexedtoolkit\flexed-toolkit\src\flexed\widgets\grid\PrintGridContent.mxml(77): Error: Tipo non trovato o non Þ una costante della fase di compilazione: PrintGridHeader.
    [exec]
    [exec]
    [exec]
    [exec] C:\sviluppo\flex\flexedtoolkit\flexed-toolkit\src\flexed\widgets\grid\PrintGridContent.mxml(79): Error: Tipo non trovato o non Þ una costante della fase di compilazione: PrintGridFooter.
    [exec]
    [exec]
    [exec]
    [exec] C:\sviluppo\flex\flexedtoolkit\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(179): Error: Accesso alla proprietÓ non definita Preferences.
    [exec]
    [exec] var colPreferences:Array = Preferences.getInstance.getGridPreference(this.id.toLowerCase());
    [exec]
    [exec] C:\sviluppo\flex\flexedtoolkit\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(549): Error: Accesso alla proprietÓ non definita Preferences.
    [exec]
    [exec] Preferences.getInstance.setGridPreference(new String(this.id.toLowerCase()), dCols);
    [exec]

  18. udayms says:

    @Gianfranco: You shouldn’t be getting this message. I dont really understand the language of the console output. But, I assume its kinds of a class not found error. I actually tried creating a new project and checked out file from the SVN. it came through without any issues. Can you recheck?

  19. graham says:

    I’m very impressed with the form and have a question with regards to the radioButton Group. I’d like to bet able to vertically align each of the radio buttons instead of horizontally aligned. Can you give me any suggestions??

  20. udayms says:

    @graham: Actually i have deliberately kept out this feature. The radio button is laid out on the screen using Tile container. The tile container has a *direction* property. But as of today, we are not picking that value from the xml. Hence its not configurable from the xml. In short, if you want this done, you have to go to the CFormItemRadioButtonGroup class and in the constructor, you can see the line – container.direction = “horizontal”;

    Change it to verical and you should be able to get what you want. 🙂 Cheers.

  21. graham says:

    Thanks for that Udayms. I’ll have a look at that. I’ve also had another thought and was wondering if there was a way to filter the xml file?

    What I’m thinking is, creating either a viewstack or using states to show only one form group at a time. It could also be used to reuse parts of an xml file for different situations.

    This might be taking it one step too far but I thought it might be worth mentioning.

  22. Pingback: CForm - Programmatically generated forms for FLEX. at building blocks

  23. Asif says:

    Great work! Loved the demo. I was looking for such a solution myself, so that we don’t have to define a view each time. Looking forward to your source code release. Thanks!

  24. danielneri says:

    Fantastic app!

    Extremely useful. Demo was really nice too. Just the thing I needed for a client!

    Thanks!

  25. John Farrar says:

    OK… this is also something I am working on but you at this point are ahead of me. 🙂

    1. Have you considered posting this on RiaForge.org?

    2. In one of your demos (Advanced) the data changed in the right hand contacts grid didn’t post to the changed items if they were changed.

    3. I am looking at generating both CF and Flex/AIR forms. My bigger question is does this generate the forms on the fly in Flex. (And if so, how do you tie it into an AS class to submit back to the server.)

    Thanks for sharing.

    John Farrar

  26. udayms says:

    @John Farrar:

    1. Actually I tried to post this at RIAForge. But, for some wierd reason I am unable to login into the site.

    2. Thats a bug. 🙂 Gotto fix it.

    3. Yes. It creates forms on the fly. The way it works is, it creates the form based on an xml. You can pass this XML as an XML OBJECT or leave it in an xml file. When the form is being created, the component keeps track of what fields are being placed in the form. And then, we ask fo data back it goes through that returns the data – either all fields or only changed fields. If you check out the code from google project, you should be able understand how it works. Its quite simple. If you still run into doubts, leave me a mail. I shall send you a sample project with the cform on the front end and php in the back end. ok?

  27. Afik says:

    Hello
    1st..congrats for this amazing project…

    2nd. the XML documentation link isnt working

    3rd. Is it possible to incorporate images (small gifs) to the forms? my forms are simply a list of images with a checkbox attached to each image. and the user should mark the images that fit him.

    Thanks in advance

    Afik

  28. udayms says:

    @Afik:
    Oops…. Lemme check and fix that link…!! 🙂

    As for your images requirement…. The way cform has been done is that only the most common form elements have been included by default. But, the component allows you to actually add new widgets very easily….

    Btw, your specific requirement looks like a one-time need.. so, Why dont you just create a simple component with an image and a checkbox and then use a tile container to render the screen?

  29. Afik says:

    Hello

    I am trying to update a cform with xml created by php script.
    I’ve used HTTPService named userRequest1 and tied handleUR1 as its result event handler.
    however I am getting this error:

    1009: Cannot access a property or method of a null object reference.
    at flexed.widgets.form::CForm/layoutCForm()[C:\workspace\builder3\cform\src\flexed\widgets\form\CForm.as:281]
    at flexed.widgets.form::CForm/createCFormFromXML()[C:\workspace\builder3\cform\src\flexed\widgets\form\CForm.as:248]
    at BigMedi/handleUR1()[E:\FlexWS\BigMedi\src\BigMedi.mxml:43]
    at BigMedi/__userRequest1_result()[E:\FlexWS\BigMedi\src\BigMedi.mxml:71]

    This is the code, what am i doing wrong? Is there is another way of doing this, maybe w/o the CreateCFormFromXML?
    (the xml returned from the php is ok)

    private function goProc():void{
    var obj:Object = new Object();
    obj = cfrm.getData(false);
    var strData:String = ObjectUtil.toString(obj);
    txtCfrm.text=strData;
    cfrm1.init();
    userRequest1.send();
    }
    private function handleUR1(event:ResultEvent):void
    { var x:XML;
    x = event.result as XML;
    cfrm1.clearContainer();
    cfrm1.createCFormFromXML(x);
    cfrm1.visible=true;
    btnContinue.visible=true;
    }

  30. udayms says:

    Can you post the xml here as well? or mail it to me?

  31. Giri says:

    Nice work!

    I wondered how did you make left alignment for form item labels? Actually Flex won’t accept textAlign=”left” for form item labels. Could you please explain?

    Thankyou

    May God ‘flex’ you

  32. udayms says:

    @Giri: Am not using the form+formitem fr layout…. The CForm uses the grid layout. If you really look at it, you don’t get any specific advantage by using the form+formitem.

  33. Dave says:

    Hey guys, great component… the link to the XML Doc seems to be down, any other links we are get to this on?
    Cheers

  34. Brant says:

    Uday, this looks great. I’m going to start a prototype project with it. It looks like your link to your “..detailed documentation on the XML part of this component” is missing it’s link.

    Regards

  35. Johnnny says:

    Thankyou for posting this, Uday. I have this working with Flex on rails and it’s great. Is there any list of widgets? I want to use a slider for the age. Thanks!

  36. saurabh narula says:

    Hi Uday,
    great work!!!
    just wanted to know what all widgets can we use,can we use a chart as well as you have already used datagrid.
    or as johnny mentioned do you have list of widgets,clearly its form builder thats y it doesnt have the chart n other components – but would be great if we can extend it, if possible try to send out the source code to my mail as i am not able to use SVN and get it from googlecode – would be of great help!!

    thanks a ton again

  37. tatil says:

    It creates forms on the fly. The way it works is, it creates the form based on an xml. You can pass this XML as an XML OBJECT or leave it in an xml file. When the form is being created, the component Extremely useful. Demo was really nice too. Just the thing I needed for a client!

  38. Thanks, very interesting nice post.

  39. Greg says:

    I too was interested in seeing a list of widgets available. It’s not clear what’s available.

  40. Carstein says:

    First let me join the applauding masses, nice work Uday!

    Would you consider support for the TabNavigator control as an outer grouping facility through XML, that contains one cform per tab? I realize that this can be done through AS/mxml. E.g.

    :

    :

    would result in a TabNavigator with two tabs containing the underlying forms.

  41. Carstein says:

    Sorry, seems like my meta-code got zapped 🙂

    cform label=”Setup”

    cform label=”Properties”

    where multiple cforms would automagically create cforms in a tab navigator.

    • Odile says:

      이막수는 악랄한 무림 고수 였던가? ㅎ ctags는 c, c++의 symbol을 태깅해 둬서 쉽게 찾아가려는 목적으로 쓰이지.. Visual Studio 에서 F12 로 찾아가는 것처럼

  42. Nilesh says:

    Hi udayms,

    I need your help!

    Currently i am working on cforms with adding some product details, Could you plz tell me how to show the cform detail information on to the pages:-)

  43. Arief says:

    Hi Udayms,

    I have checked-out the project and put it in a new Flex-builder project. When i ran ant-build on it, the eclipse gave me this error:

    Buildfile: E:\Flex_Component\src\Flexed\flexed-toolkit\build.xml
    clean:
    [delete] Deleting directory E:\Flex_Component\src\Flexed\flexed-toolkit\docs
    [mkdir] Created dir: E:\Flex_Component\src\Flexed\flexed-toolkit\docs
    compile:
    [exec] Loading configuration file E:\Apps\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0\frameworks\flex-config.xml
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(179): Error: Access of undefined property Preferences.
    [exec] var colPreferences:Array = Preferences.getInstance.getGridPreference(this.id.toLowerCase());
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(204): Error: Access of undefined property HeaderFilter.
    [exec] column.headerRenderer = new ClassFactory(HeaderFilter);
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(457): Error: Access of undefined property HeaderFilter.
    [exec] var activeFilter:String = (event.target as HeaderFilter).selectedLabel;
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(461): Error: Access of undefined property HeaderFilter.
    [exec] (event.target as HeaderFilter).prompt = activeFilter;
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\CGrid.mxml(565): Error: Access of undefined property Preferences.
    [exec] Preferences.getInstance.setGridPreference(new String(this.id.toLowerCase()), dCols);
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\PrintGridContent.mxml(77): Error: Type was not found or was not a compile-time constant: PrintGridHeader.
    [exec]
    [exec] E:\Flex_Component\src\Flexed\flexed-toolkit\src\flexed\widgets\grid\PrintGridContent.mxml(79): Error: Type was not found or was not a compile-time constant: PrintGridFooter.
    [exec]
    [exec] Result: 7
    main:
    BUILD SUCCESSFUL
    Total time: 6 seconds

    Am I do it wrongly?
    Thanks

    p/s: Great component by the way

  44. udayms says:

    @Arief: Are you trying to get it running? In that case, don’t use the build file. Thats for generating asdocs. And its’ pretty much half baked. To run the component example, just execute the mxml files. To use the component in ur project, try downloading the swc.

  45. udayms says:

    @ Nilesh: I really didn’t get what you are trying to do here. Can you post more details?

  46. udayms says:

    @ Carstein: Actually… Flex itself does a pretty good job of laying out components. CForms is meant to be a wrapper on it. I have tried to keep CForm as simple as possible.

    All the same, I agree with you. We can have tabs too in CForms. All we need to do is make some changes to the CForm.mxml…..

    If you manage to get it working…. We can surely integrate it into CForm. Maybe you would be interested in checking out the source of CForm from the google project and adding this functionality? It would be really great if you could do that….!

  47. udayms says:

    @ Greg, Johnny, Dave, Brant and all of you : Actually I had a document uploaded on my server. The server vendor folks screwed it up and my doc was lost. Unfortunately I didnt have a backup. I shall try to create another one asap. Till then maybe the examples can help you figure out the usage patterns. Really sorry for the inconvenience. Just that am a bit too busy getting settled in my new job and location.

  48. udayms says:

    @ Giri: I have not used the form tagset. I am using the Grid layout to layout the container. In the grid layer, you can allign ur text whichever way you want.

  49. SunWuKung says:

    Hi udayms,
    this is great stuff.

    In post 27 you write that you have a sample project.
    Could you mail that to me?

    Thx.
    SWK

  50. Jochen Bedersdorfer says:

    What is the status of this project?
    Would you use in a production environment?
    I’m still unable to find more info about the supported XML tags.

    Also, would you consider this as a XUL variant?

    Thanks and keep up the good work!
    Jochen

  51. udayms says:

    @Jochen
    I have used this in a production environment. That is not to say that its completely bug-free. If you use it, ensure that you have an air-tight testing done before release.

    As for the XML tags info… I have been a bit too busy with work and all. So, didnt really find time to sit down and compile that documentation. Your best bet would the source of examples I have in this post. I believe I have covered almost all the use cases in those examples. If you check the XMLs therein you would get an idea on the xml tags for the cform.

    Nope. There is not XUL variant for this 🙂 …..

  52. Great Job…

    I was wondering if do you think that it is possible to build some kind of “wordpress alike” theaming for Flex Apps…

    My Idea:

    Flex App itself with be “just” a big API that we would be able to handle from the outside via xml and template tags…

    My goal… have one SWF and at the same way be able to have as many UI you want over that SWF…

  53. seo says:

    Thankyou for posting this, Uday. I have this working with Flex on rails and it’s great Flex App itself with be “just” a big API that we would be able to handle from the outside via xml and template tagsThanks and keep up the good work!
    kemal günay

  54. hikaye says:

    I was wondering if do you think that it is possible to build What is the status of this project Could you mail that to me Unfortunately I didnt have a backup just execute the mxml files

    tjansk your kemal

  55. Oluwaseun says:

    Hi, I’ve each time I click on the XML Documentation link, I’m taken to a page not found. Maybe there is some faulty rerouting somewhere. I’d appreciate if you can help find a way around that. Nice work bro. Keep it up. Also I realise the source example requires Flex 2 SDK. With Flex 3 sdk out?

  56. David W. says:

    Very nice work!

    How would you suggest building into the form the ability to package up the get/post and add the appropriate objects to the request? Is this something that will be added?

    Thanks again!

  57. simsys says:

    Wow, great information buddy, thanks a lot for sharing… It helped me in nick of time… 🙂

  58. Tam says:

    Good Work !
    As i see, this is a nice component !

  59. Sitija says:

    Hi

    I want to make the cforms percentage based, so that form elements like text areas can have a bigger size in higher resolution. Is there any way to achieve the same?

  60. Maneesh says:

    The XML format is not published here or on googlecode. With your personal site down, how can I learn how to use CForm?

    Is the source for CForm available?

  61. darko says:

    this looks promising
    but demo is not working?
    404 Not Found..

  62. maoanz says:

    Demo is not working, somewhere else can we find sample code and source code?

  63. udayms says:

    Yes.. I have been having problems with my domain server recently… You can get the code and demo from http://code.google.com/p/flexedtoolkit/

  64. maoanz says:

    Hi, I have a question, what is the code in CForm for making the red frame around when the form is not valid. I modified the cform for our project. And now the red frame doesn’t appear, when the form is not valid.

    I checked there is function “public function validateCForm():Boolean”, but this form only check if it’s valid or not, it doesn’t change the style.

    Do you have an idea about this?

    Thanks.

  65. udayms says:

    @maoanz:

    Try the private function validateForm(id:String, value:Object, values:Object):ValidationResult function in the samples – http://code.google.com/p/flexedtoolkit/source/browse/trunk/flexed-toolkit/src/examples/cform/CFormTestDrive.mxml.

    private function validateForm(id:String, value:Object, values:Object):ValidationResult{
    var result:ValidationResult = new ValidationResult(false);
    if(id == “fname” || id == “txtFName”){
    var rxpNumber:RegExp = /\d/g
    var match:Array = null;
    match = (value as String).match(rxpNumber);

    if(match.length != 0)
    result = new ValidationResult(true,null,””,”No numbers allowed in this field!!!”);
    }else if(id == “txtCoName”){
    if(value == “” || value == null)
    result = new ValidationResult(true,null,””,”You HAVE to enter a company name!”);
    }
    return result;
    }

    and in your CForm tag, use cFormValidation=”validateForm”.

  66. maoanz says:

    Hi, your original cForm works fine with the validator. But the version modified by our group for our project doesn’t work for the style change. (Red box, when not valid). I can’t find out why.

    Actually, I just modified some lines in your “function validateCForm():Boolean”, and it solves the problem.

    The code is something like that:
    if(result.isError ) {
    //validate form only when it’s a required form.
    if ( (!onlyRequiredField) || widgets[key].field.@required==”true” ){
    widgets[key].renderer.getUIComponent().errorString = result.errorMessage;
    uIComp = (widgets[key].renderer.getUIComponent() as FormItem).getChildAt(0) as UIComponent;
    uIComp.styleName = “inValidTextInput”;
    valid=false;
    }
    } else {
    widgets[key].renderer.getUIComponent().errorString=””;
    uIComp = (widgets[key].renderer.getUIComponent() as FormItem).getChildAt(0) as UIComponent;
    uIComp.styleName = “validTextInput”;
    }

  67. Max says:

    Hello!
    Could you email me demo with CForm ?
    Or show the XML file that should be used with your component ?

  68. buraya birseyler karaliyorum sen bunlari gorme.

  69. Emmett says:

    I need cform to accept UTF-8 input for foreign languages.

    What is your suggestion?

  70. Olutayo Oyawale says:

    Hi,

    I tried to use the component in my application, but I get error message (The prefix “flexed” for element “flexed:ClientIdleTimeOut” is not bound).

    Do I have to import a specific object or class?

    Thank you in advance.

  71. Good Work !
    As i see, this is a nice component !

  72. Merdan says:

    Demo is not working, somewhere else can we find sample code and source code?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: