Using Widgets as replacement for Form Elements

greetings! I am extrememly excited to be working with ActiveWidgets. I am concerned that the document is slightly less than perfect for someone who is just getting started.

I need to know how to use the Widgets as form replacements. As far as I can tell, that functionality has now been added into the codebase.

- How do I make a checkbox pass in to the form correctly?
- How do I make the text box pass in to the form correctly?

I already know how to submit the form, using the onClick event.

I would very much like to develop a "HOWTO: Replace ugly HTML form elements with ActiveWidgets" - and I think this is where I need to start.

Thanks so much for your time!

Alex:

Why has my post been ignored? I am asking intelligent questions, and need to be pointed to the correct documentation.

I am seeing references that the ActiveWidgets controls do not take part in web form logic, yet I see that you did at one time say it would be "in the next release".. That release is here - and I see no documentation how to use it. I also don't see that you added it in your changelog.

I would like to confirm that it indeed is NOT in the product yet. In which case, I will need to develop my plan B.

Thanks!

Sorry that I did not reply quickly.

The html form integration is partially implemented in AW 2.5.1. It is not complete yet, and because of that it is not yet in changelog and documentation (use at your own risk).

Currently all AW controls have setName() method which adds <input type="hidden"> form element to the control with the given name attribute. The name can be the same or different from the control id - they are not related.

The value attribute is linked to the controlData property, which is calculated from the controlValue using controlFormat.

Currently this logic works for single item controls (textbox, checkbox) but for list and grid controls you have to specify yourself, which information goes into 'form value' (i.e. controlData property).

Here is a sample code -

<form id="myForm">
    <span id="input"></span>
    <span id="checkbox"></span>
    <span id="submit"></span>
</form>

<script>

    var input = new AW.UI.Input;
    input.setId("input");
    input.setName("input");
    input.setControlText("Input");
    input.refresh();

    var checkbox = new AW.UI.Checkbox;
    checkbox.setId("checkbox");
    checkbox.setName("checkbox");
    checkbox.setControlText("checkbox");
    checkbox.refresh();

    var button = new AW.UI.Button;
    button.setId("submit");
    button.setControlText("Submit");
    button.refresh();

    button.onClick = function(){
        document.forms.myForm.submit();
    }

</script>

The source code for this feature is located in /source/lib/system/control.js, lines 538-574

I would appreciate any comments on implementation or how you are planning to use this feature. I am still hesitating how this should work for lists and grids (i.e. selected item index or item/cell text?).

Alex:
Thanks for the response! I am currently using the demo, so I don't think I have access to the specific source code that you mentioned.

I modified my form to include the "setName" method, and I am still not getting anything sent in to my controller.

This is correct, isn't it??
---
var password = new AW.UI.Password;
password.setId("ProviderPassword");
password.setName("data[Provider][password]");
password.setSize(150);
password.setTabIndex(2);
password.setControlText("");
password.refresh();
---

I have just been setting up my own hidden input form, and in my onClick submit event - polling all of the text boxes, and loading the hidden form fields with the relevant information.

I am using v2.5.1 evaluation - is there a more current [beta] build I should be trying?

Thanks!

When I add this code I am getting &data%5BProvider%5D%5Bpassword%5D=... in the request URL. Is this what you are expecting? Should the parameter name really be that complex?

yes, that is the format required by the development framework I am using (CakePHP). I wonder if it is getting confused by the "HTML special characters encoding"?

Do normal forms encode the data in that manner?

Thanks!

It appears there is difference between the GET and POST method for value pairs with repect to the data set (apart from their size). See the note in green here -

http://www.w3.org/TR/html4/interact/forms.html#h-17.13.1

but not much is said about the control name -

http://www.w3.org/TR/html4/interact/forms.html#control-name

It does refer to RFC 1738 (section 2.2). See -

http://www.ietf.org/rfc/rfc1738.txt

You might want to do a simple test with a basic CGI script to see if any browsers have a problem with the encoding.

AW does not do any encoding, it just inserts hidden input tag with the given name and value -

<input id="id" type="hidden" name="name" value="value" />