Back to Programmer's Guide

Forms

Convenient methods for forms in WebElement

Those methods can be found in WebElement adding form elements

Input fields

• addInputFieldAspect: aSymbol for: anObject
  • Aspect symbol is a name of accessor (and mutator) method on anObject to access a instance variable to be changed with that input field
    
• addInputFieldAspect: aSymbol for: anObject size: aNumber
• addTextAreaAspect: aSymbol for: anObject
• addTextAreaAspect: aSymbol for: anObject size: aPoint
• addPasswordFieldAspect: aSymbol for: anObject
• addPasswordFieldAspect: aSymbol for: anObject size: aNumber
  

Submit buttons

• addButtonText: aString
• addButtonText: aString action: aSymbol
  • For more than one button in one form. Action method is a composed name from 'action', aView, Symbol.
    
  • Example: for view #main, action #addFolder is action method #actionMainAddFolder
    

Drop-down menus

• addMenuCollection: aCollection selected: aSelectedCollection
  • Multiple selection menu..Every element (text!) in aCollection will be shown in menu. Selection will be put in aSelectedCollection. Here also an initial selection can be set.
    
• addMenuCollection: aCollection selectedToAspect: aSymbol2 of: anObject
  • Single selection menu. Every element (text!) in aCollection will be shown in menu. Single selection will be put in an selected aspect of object. Here also initial selection can be set.
    
• addMenuAspect: aSymbol collection: aCollection selected: aSelectedCollection
  • Multiple selection menu.. Aspect of every element in aCollection will be shown in menu. Selection will be put in aSelectedCollection. Here also an initial selection can be set.
    
• addMenuAspect: aSymbol collection: aCollection selectedToAspect: aSymbol2 of: anObject
  • Single selection menu.. Aspect of every element in aColection will be shown in menu. Single selection will be put in an selected aspect of object. Here also initial selection can be set

Checkboxes

• addCheckboxAspect: aSymbol for: anObject
  • aspect method will be called and true/false will be set/clear on an object
• addCheckboxObject: anObject from: aCollection
  • if checked, this object will be put in collection. If object is initially already in collection, checkbox will be checked. Useful for easy selection among many objects

Form elements

• WebFormElement - a superclass of all form elements
• WebInputField
  
  • WebFileInputField - for uploading files
    
  • WebDelayedImputField - is used to delayed Ajax posting to server. It waits for delay after last key input, before it posts its contents. Ideal for live-search fields. More in AJAX Guide.
  • WebDateInputField - with a date picker component to easy select dates
  • WebAutocompleteField - for entering values with auto-completition from server. More in AJAX Guide.
• WebTextArea - for text areas - multi-line input fields
  
  • WebRichEditor for WYSIWYG editing of text areas with TinyMCE editor
• WebInPlaceEditableText - for in-place editing and immediate posting to server. More in AJAX Guide.
• WebButton - for submiting a form.
• WebMenu - dropdown menu of selections, but becomes a scrollable list box if you set the size!
  
• WebCheckBox
  
• WebRadioButton
  

Form

Every WebApplication has its own WebForm, created by default. Currently there is no support for more that one form on a web page, but you can achieve same with more than one submit button on a page or with Ajax on-change immediate posting.

If you add web form elements to your webApplication, they will be automatically added to default form. Form management is therefore automatic. To get a form of your App, use method #form :

aWebApp form

Common form methods

See WebForm class

• clear
  • delete all elements on the form
    
• onSubmit: aJavascriptCode
• onReset: aJavascriptCode
• registerFormElementsIn: aWebElement
  • find and register (set aspect adapters) all form elements in this and subelements.
  • Use it in standalone web components, like WebGrid
    

Common form element methods

See WebFormElement class

• focus
  • move the input focus to that form field
• select
  • select a whole input. Be sure to focus it first!
• activate
  • move focus and select the text in that form field. (focus+select)
    
• onChange: aJavascriptCode
• onFocus: aJavascriptCode
• onSelect: aJavascriptCode

Ajax

• onChangePost
  • after field change immediatelly post contents to server
• onChangePostAndUpdate: anElementOrId
  • after field change, post contents to server and AJAX update anElementOrId
    
• onChangePostAndUpdate: anElementOrId with: aParmString
  • after field change, post contents to server and AJAX update anElementOrId with a parameter
    
• onKeyPressPostAndUpdate: anElementOrId
  • after any key press in a field, post contents to server
    
• onKeyUpPostAndUpdate: anElementOrId
  • after any key release in a field, post contents to server
• More in AJAX Guide

Tabulation

Changing tabulation order

Tabulation order is set automatically and it is identical to an order you are adding form elements. But sometimes it is necessary to have control of tab order. For instance, you'd like to tab backwards, bottom-up, or zip-zap ...

To change tabulation order, send to a form field a message #tabIndex: with an index of that element in a tabulation order as an argument, for instance:

• field tabIndex: 3

Tabulation with ENTER key

To tabulate besides with TAB also with ENTER key on numeric keypad (which is handy for entering forms with a lot of numeric data), just send #onEnterTabulate to all input fields in a form:

• field onEnterTabulate
  

or to all fields at once:

• anApp form fieldSet do: [:field | field onEnterTabulate]

Sometimes it is necessary to reorder tabulation order in a form:

• anApp form reorderTabulation