Release of DotVVM 0.9: First Stable Release

Today we have released the 0.9 release of DotVVM. It's been quite a long time since the last release because we have been dealing with great amount of feedback from our internal projects running on DotVVM. We have fixed dozens of bugs and made quite a lot improvements. We hope that you'll like this release.

We'd also like to send many thanks to several companies and individuals from the Czech Republic and Poland who started using DotVVM and provided us with valuable feedback.

New Features

We have added many new features in DotVVM. Here is a short list of the most interesting ones.

• TextBox control got the new FormatString value which can be used to allow user writing numeric and date-time values. It works well with our validation framework, the only thing to do is to add [Required(ErrorMessage = ...)] attribute on the corresponding property and the validation makes sure that the user enter a value that can be converted to number or a date.

• PostBack Handlers is a mechanism which allows to defer or cancel a postback made from any control. You can use it to create your own confirmation dialogs and many other interesting things.

• GridView control supports inline editing.

• Static Commands allow to call a static method in the viewmodel with your own set of parameters. You don't have to send the whole serialized viewmodel to the server and you receive only the result of the method. You can also use this result to update some property in the viewmodel (e.g. `{staticCommand: TotalPrice = CalculatePrice(ProductId, Quantity)}).

Breaking Changes in 0.9

Of course we don't like breaking a code which worked, however there were some changes we had to made. There are many other tiny breaking changes however you should notice them only if you write your own DotVVM controls. The markup part shouldn't be affected by them.

HTML Encoding

In the previous version, the Literal control supported the HtmlEncode property which could be set to false to allow writing raw HTML content in the page. However, the control became quite complicated and because it has other properties like FormatString and some combinations of those properties really didn't make sense, we have decided to split the functionality into two controls.

So, we have created the HtmlLiteral with single Html property.

Also, the Literal control now inherits from the DotvvmControl class and can accept HTML attributes like class, style etc. It wasn't possible in the previous version.

Resource Bindings

The syntax of the resource binding which required full namespace {resource: FullNamespace.MyResourceClass.ResourceKey} wasn't very convenient, so we have introduced two page directives that can simplify the whole process.

If you use the resourceType directive, all resource bindings can be only {resource: ResourceKey} and DotVVM will look for the resource values in the resource class mentioned in the directive. You can still access resources from another classes if you put the ffull namespace and class name in the binding.

@resourceType FullNamespace.MyResourceClass, MyAssembly 
  
<!-- binding from the MyResourceClass --> 
{{resource: MyResource}} 
  
<!-- binding from the AnotherResourceClass - you have to include the full namespace and class name --> 
{{resource: FullNamespace.AnotherResourceClass.AnotherResource}} 

If you need to use multiple resource classes in one page, it would be easier to use the resourceNamespace directive. In the bindings, you can then specify only the class name and resource key.

@resourceNamespace FullNamespace 
  
<!-- binding from the MyResourceClass --> 
{{resource: MyResourceClass.MyResource}} 
  
<!-- binding from the AnotherResourceClass --> 
{{resource: AnotherResourceClass.AnotherResource}} 

DotvvmControl Changes

In the previous versions of the framework, there was an abstract class DotvvmControl which supported DotVVM properties. Then, there was the DotvvmBindableControl which added the data-binding support. On top of this class, there was a HtmlGenericControl which was a base class for most of the controls in DotVVM.

However, sometimes it would be handy to be able to use data-binding on a classes which are not controls. So we have change the hierarchy, which now looks like this:

• DotvvmBindableObject - a base class which supports DotVVM properties and data-binding
• DotvvmControl - adds the rendering functionality and other things all controls need
• HtmlGenericControl - a base class for all controls that output one HTML element

What's Next

The 0.9 release was a big step for the whole DotVVM Team. We have reorganized DotVVM UI tests and created our own Selenium-based UI testing framework to be able to run tests in parallel, reuse browser windows and test in all major browsers easily. In future this will allow to make more tests and don't wait for the results for too long.

From now until the 1.0 release we won't add new features. We'll do only bug fixes, test the framework on our projects and make some performance testing.

In the meantime, we are finishing the Bootstrap wrappers - they are really awesome and help you be much more productive.

Raw DotVVM

<form role="form" class="form form-horizontal"> 
  <div class="form-group"> 
    <label class="col-xs-2">First Name</label> 
    <div class="col-xs-10"> 
      <dot:TextBox Text="{value: FirstName}" 
                   class="form-control" /> 
    </div> 
  </div> 
  ... 
</form> 

Bootstrap for DotVVM

<!-- IntelliSense for form types --> 
<bs:Form Type="Horizontal"> 
  <bs:FormGroup LabelText="First Name"> 
    <dot:TextBox Text="{value: FirstName}" /> 
    <!-- class="form-control" is added automatically --> 
  </bs:FormGroup> 
  ... 
</bs:Form> 

The other great thing is the modal dialog:

Raw DotVVM

<div class="modal fade" tabindex="-1" role="dialog"> 
  <div class="modal-dialog"> 
    <div class="modal-content"> 
      <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
        <h4 class="modal-title">My Modal Dialog</h4> 
      </div> 
      <div class="modal-body"> 
        ... 
      </div> 
      <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
    </div> 
  </div> 
</div> 

Bootstrap for DotVVM

<bs:ModalDialog IsDisplayed="{value: IsModalVisible}" 
                HeaderText="My Modal Dialog"> 
  <ContentTemplate> 
    ... 
  </ContentTemplate> 
  <FooterTemplate> 
    <bs:Button Type="Default" Text="Close" 
               Click="{staticCommand: IsModalVisible = false}" /> 
    <bs:Button Type="Primary" Text="Save changes" /> 
  </FooterTemplate> 
</bs:ModalDialog> 

Also, we are working on the DotVVM for Visual Studio 2015 extension which brings the full IntelliSense experience in data-binding and many more features that you'll really love.

Stay tuned and watch our Twitter. And of course we wish you all the best in 2016.