UI Atoms 2011

Advanced Data Form with New Form Layout for Silverlight and WPF with

Advanced Validation and RIA Services

NeuroSpeech Inc.

• StackPanel can not support multiple columns.

• Items can be added without any attributes.

• Nested StackPanel can have variable columns.

StackPanel/Grid Challenges

• Grid can support multiple columns.

• Each item needs attributes.

• Grid can not support variable columns per row.

Typical Form Designs

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Label:

Single Column Multi Column

Though this is most simple design but its never practical to have everything in one column.

Though this is most simple design but its never practical to have everything in one column.

Standard Form Design

• Multi Column• Variable

Columns per Row

• Required Red Asterisk (*)

• Description at the Bottom

Label:

Label:

Label:

Label:

Label:

Field Description for above Editor Control ……

Field Description Field Description

*

*

Standard Multi Column Form

Three Unique Form Controls

AtomFormContainerPlain Vanilla Form Layout Control

Can host, AtomFormRow, AtomFormGroup and AtomFormTab

AtomFormUI Based Validation

AtomDataFormRIA Services Validation

IEditableObject Support

3 in 1 Layout System

• Introducing 3 Layout Items– Row (AtomFormRow)– Tab (AtomFormTab)– Group (AtomFormGroup)

• Any Layout Item can contain either Tabs or Combination of Row or Group

• Row will host equally spaced items in one row• Group will host items vertically or specified by RowLayout• E.g. 3,2,1 = 3 cells in first row, 2 cells in 2nd row and 1 cell in

3rd row with automatic spanning• Tab will act as Group

FormRow Hosts Equally Spaced Elements in One Row

FormRow

FormRow

FormRow

Typical Customer Request

Name: First

Address:

City:

Country:

Last

Phone: Home Cell

Middle

Work

Complete Postal Address

*

*

Standard Multi Column Form

Believe me its very simple and small

State:

Zip:

Typical Changes Requested

Name: First

Address:

City:

Country:

Last

Phone: Home Cell

Middle

Work

Complete Postal Address

*

*

Standard Multi Column Form

State:

Zip:

Move Here Move HereMove Here

Remove

AddApartment:

Street:

Change Management

• Design is simple and small• Changes are not simple and small• Changing form items is extremely simple with

AtomForm• With simple change of attributes, preview is

available and without any tedious drag and drop

Links and Resources

• Demo – http://uiatoms.neurospeech.com/silverlight

• Download – http://uiatoms.neurospeech.com/download

• Twitter –http://twitter.com/uiatoms

• Support – http://uiatoms.neurospeech.com/support• About NeuroSpeech Inc. –

http://www.neurospeech.com