We are happy to announce new release of UI Atoms 1.7.5 with following new features.
- New AtomDataForm Control
- Tabs in AtomForm and AtomDataForm
- Lambda Binding Extensions
Introducing new Control AtomDataForm
AtomForm did support UI Validations, however Microsoft RIA Services Client has some inbuilt validation and support for IEditableObject. So we created a new AtomDataForm that supports RIA Services validation and IEditableObject support.
- AtomDataForm supports object with IEditableObject interface and fires event for BeginEdit, CancelEdit and EndEdit
- AtomDataForm displays items in read only mode unless Edit button is clicked
- After edit button is clicked, Save and Cancel button appear for you to persist changes or cancel changes
- AtomDataForm contains UI Element (TextBox, ComboBox etc) as children, so you can easily define child ui element in your xaml as shown in sample below
- AtomDataForm supports Tabbed layout, for that you can insert your items within AtomDataFormTab as shown in example below
- Following sample illustrates Tabs, but you can also create simple user interface without tab as well
- You can also use AtomDataFormGroup to group items in to a headered group
- Every child element of AtomDataForm can be accessed in code behind file easily because they appear as a variables when you define x:Name property
- AtomDataForm supports CanChangeDataContext property, which is false when the form is in edit mode
- You can easily reuse any third party control within AtomDataForm, AtomDataFormGroup and AtomDataFormTab
In above sample you can notice following things,
- Header property of AtomDataFormTab is displayed in the title section on the top
- AtomDataFormTab contains children and each child can have properties as below
- ns:AtomDataForm.Label displays label on left side
- ns:AtomDataForm.Description displays description on bottom
- ns:AtomDataForm.Title displays title on the top of control
- ns:AtomDataForm.CommandBox displays a UI Element on the right corner, usually a search button or expand button
- AtomDataFormTab supports IsEnabled binding, you can bind this property to show/hide the tab as shown in the example above
- Every child elemen of either AtomDataForm , AtomDataFormTab or AtomDataFormGroup supports Visibility and IsEnabled binding
- If Visibility is bound and it results in Collapsed then entire form item is not displayed
- IsEnabled binding can enable/disable the editable control
Following is screenshot of Tabbed AtomDataForm in edit mode
Introducing Lambda Binder Extensions
Writing binding expressions with conditions and converters can be very complex especially rewriting many and same logic at different classes. Now UI Atoms support, Lambda Binding Extensions which lets you do binding within the code without creating any complex IValueConverter implementation.
Bind Method Extension
This will bind theForm’s Header property to an expression that will combine properties of two different elements. And this will also automatically update when any of bound source or its property will change.
Assuming, we may not have property information at design time, but we know that DataContext will be set to an object containing properties, then we can write Property extension method as shown above.
BindVisibility Method Extension
Visibility converters are very frequent so we created a BindVisibility extension method that will let you specify a boolean expression that will be converted to Visibility on the fly.
These extensions can be used anywhere in any third party controls as well.
Click here to download your free demo copy of NeuroSpeech UI Atoms 1.7.5
We are happy to announce new release of UI Atoms 1.5.8 with following new features.
UI Atoms for WPF 4.0
In this release of UI Atoms, we have a new library of dlls specially designed for WPF 4.0, which now includes support for Visual State Managers and renders everything in WPF 4.0 presentation. You can find Bin.Net4 folder inside WPF, that contains libraries only for WPF 4.0 version.
AtomForm Label Alignment for Silverlight and WPF
AtomForm now provides following two properties,
- LabelHorizontalAlignment property that can align the label horizontally in the form item.
- LabelVerticalAlignment property that can align the label vertically in the form item.
Label Can now contain string or UI Element object
Advanced Quick Form Designer
Typing Tags with all Bindings could be quite time consuming, where it involves moving items up and down, deleting and adding new Form Items. Advanced Quick Form Designer resolves all this problems by giving you state of art designer, which provides one quick grid to enter all necessary information. However the form designer works well even for existing forms, and you can generate entire new form by selecting some Type as well.
As you see, type of control can be changed that will represent the form item and corresponding binding property can be changed as well. Just with simple one click, you can move items up and down or delete them. You can add a new control that is defaulted to AtomTextBox at the top, you can change default control to add multiple one after another very easily. Also you can click “Generate From Type” to select any Business Object Type and generate a brand new form.
Selecting type will automatically generate form with its bindings.
UI Atoms version 1.2.22 resolves Cascaded ComboBoxes issue in MVVM pattern. Advanced AtomForm is now capable of handling cascaded ComboBoxes with MVVM and it also integrates well with third party controls.
Recently we identified few issues with MVVM implementation in Silverlight regarding ComboBoxes. ComboBox looses its “SelectedValue” binding once the ItemsSource of ComboBox changes. This needed some workaround as well as Modifying DataForm is very painful as you may need very complex form designs in regular business applications.
1. Create Models
Lets assume we need to edit a Customer’s Country and City, as we change the Country the list of cities should change it. Problem with existing ComboBox and DataForm is, as soon as list of cities changes, ComboBox’s SelectedValue binding vanishes. So lets create Customer Model first.
Each of properties in CustomerViewModel raises PropertyChanged event for corresponding properties when modified.
When selected customer changes, SelectedCountry also changes and which changes Cities property, so in drop down we can display the list of cities of selected country.
Your SelectedCountry property, where you need Change of Selection event must not raise PropertyChanged event in “set” method as shown below…, however you may turn it off or on based on your UI behavior. WPF has no problem but Silverlight has issues and it works better if PropertyChanged event is not raised.
2. Create Master View
Master View control declares grid with two columns, left side displaying list of customers and on right side displaying details of the selected customer.
Lets analyze Bindings,
- ListBox’s ItemsSource is bound to ViewModel.Customers which returns list of available customers.
- ListBox’s SelectedItem is bound (two way) to ViewModel.SelectedCustomer.
Lets analyze the bindings,
- AtomForm’s DataContext is bound to SelectedCustomer of ViewModel, which comes from SelectedItem of Parent Control
- AtomTextBox’s Text is bound to Name (of AtomForm’s DataContext’s binding) with Mode=TwoWay
- ItemsSource is bound to ViewModel.Countries which returns list of countries.
- SelectedValue is bound to CountryID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
- SelectedItem is bound to ViewModel.SelectedCountry, which triggers change of SelectedCountry property on ViewModel which changes list of cities.
- AtomComboBox (this is the one that’s tricky, normal ComboBox does not work here)
- ItemsSource is bound to ViewModel.Cities which returns list of cities of SelectedCountry.
- SelectedValue is bound to CityID (of AtomForm’s DataContext’s binding) with Mode=TwoWay
3. Cascaded ComboBox
You can see that the cascaded ComboBox work well with AtomForm and AtomComboBox and its easy to design AtomForm with MVVM with so much less code then that of DataForm and ComboBoxes.
Please download the latest version of UI Atoms 2010 suite to try MVVM + AtomForm + Cascaded ComboBoxes.
Building line of business applications for over years, we realized that the Silverlight DataForm offers very small subset of features that are needed in the long run. We figured out the problem with form based applications, that frustrates developers. That is “Change Management”.
Although WPF/Silverlight does offer very customizable UI designing platform but when we go on the field to develop ling of business applications, we realize that initial development hardly takes any time but maintenance is very difficult.
Lets review the designing problems of panels such as Grid, StackPanel, Canvas etc.
Standard Form Design
Lets review standard form design that is expected, this is the layout that can not be made except canvas panel because there is no way we can support variable columns per row. If you notice, first two rows have 3 columns equally placed and last 2 rows have two columns equally placed. Every field has description at the bottom and red required asterisk (*).
Initial Form Design
The first draft of UI in any application is very simple and we probably do it in minutes.
But the bigger problem always comes later on when changes are requested.
Atom Flexible Grid
This is the reason we created “AtomFlexibleGrid” which supports variable columns per row as displayed in the picture above. You can see that form and the flexible grid have a property called “RowLayout” which accepts comma separated cell values to be displayed per row. As displayed in the example below.
This is very helpful in quick design, but this also way to easy to manage when changes are requested.
- Intelligent Flow Layout with ability share multiple items in single row.
- No attributes required on any child items.
- Comma Separated “RowLayout” instantly renders variable column grid.
- E.g. 3,2,1 = 3 cells in first row, 2 cells in 2nd row and 1 cell in 3rd row with automatic spanning.
Benefits of Atom Flexible Grid over Canvas, Grid and Stack Panel
- Atom Form children are similar to Wrap Panel children, but Wrapping is completely customized via simple attributes.
- Its easy to move items around without changing lots of attributes, Grid is very powerful but changing grid children can be huge pain.
- Canvas is very easy to operate, but needs a powerful designer, once again changing layout can be very tedious job.
Form Field Layout
This is how individual components of Form Field are positioned within the Form Field. Collapsible panels are only visible if the content is provided. However in future more of such components will be available in Form Field to standardize the fields.
In next slide, you will see how the fields are positioned in the Form.
Changing layout is extremely simple, as you can simply move your items up and down and change “RowLayout” text field to quickly review how it will look. No tedious drag and drop and no typing.
Live Form Demos
Click here to see live UI Atoms form demos for Silverlight.
Click here to download UI Atoms form demos for WPF.
There is lot of buzz about LOB Business Form Layout for new platforms WPF & Silverlight, both capable of displaying rich content and extend functionalities of existing components so better then ever before.
XAML is better then earlier Rapid Form designers where you need to drag and drop within an IDE and the layout management becomes so complicated because no IDE is perfect. I remember upgrading from Visual Studio 2005 to 2008 and now 2010, most of our ASP.NET and WinForm projects would require lot of effort to work seamlessly in newer versions. The worst of all is, modifying layout without IDE becomes way to difficult.
In this presentation, I collected all important aspects of Business Form that we encounter in our day to day life and the complexity of forms make life terrible when clients request changes that takes hours on any IDE that sure breaks lot of code graphs and makes existing working system as completely useless code junk.
In UI Atoms, we at NeuroSpeech tried make set of components that are very easy to operate while going through tough change management.