Check out the "Take a tour of DXv2: Touch" webinar video:

Touch For All 4 .NET Platforms

DXv2 provides you touch enabled features for all 4 .NET platforms!

ASP.NET Touch

ASP.NET applications powered by DevExpress Controls are now touch enabled for both iOS and Android - from scrolling and resizing to the dragging of web controls.

WinForms & WPF Touch

Applications powered by DevExpress WinForms or WPF Controls are now touch enabled - from the dragging of UI elements to horizontal and vertical scrolling. Single and multi-touch features. Watch the webinar video to learn more and see it in action.

Silverlight Touch

As unbelievable as it might sound, DevExpress has taken key steps to enable touch support on the Silverlight platform. Yes, that means your end-users can use touch to interact with our Silverlight Tile Control and Silverlight Grid. Though only the first step, the touch is on its way for Silverlight and browser hosted apps.

WinForms Tile

New XtraTiles Suite - The new WinForms Tile Control allows you to re-imagine the way in which an application interacts with end-users and build dashboards that are ultra-efficient and fully customizable.

Tile Control for WPF and Silverlight

New Tile Layout in DXLayoutControl - The DevExpress Layout Control has been extended with a new TileLayout option, allowing you to replicate the look, feel and behavior of Windows® 8 and thus target next generation devices with ease. Whether using WPF or Silverlight, the Tile Layout Control allows you to re-imagine the way in which an application interacts with end-users and build dashboards that are ultra-efficient and fully customizable.

Watch the webinar video, then drop me a line below with your thoughts.

Check out this slick little application I built using the new DevExpress WinForms Tile controls for my touch webinar:

Quick & fun

This app took me about 15 minutes to create. And I wrote it for 2 main reasons:

1. It's a fun way to learn the new DevExpress WinForms Tile suite
2. And it's a great way to show touch features

Creating a slick and useful app quickly like my TileControlPowerPoint is what DevExpress productivity is all about.

How it's made…

This visually stunning application is simple and it follows most of the steps outlined in the following videos:

• WinForms Tile Control - Getting Started
• Watch this video - Take a tour of DXv2: Touch

Here's the general steps:

1. I started by creating a new (blank) WinForms app.
2. Added the DevExpress XtraTile control, then 1 group and 1 tile. Watch this video to learn how.
3. Added a green metro-style background image and customized the tile to make it larger.
4. Added the code below to look for a 'Slides' folder and then dynamically create tiles based on the slides. This saves the trouble of manually creating each tile.
5. Finally, I set the base form is also set to maximum and without a title bar.

Note: I use the background image property of the tiles to show the slides. These images were originally developed in PowerPoint and it's very easy to save your slides as images.

Download

Download the full source code of the TileControlPowerPoint WinForms touch application here:

TileControlPowerPoint.zip

DemoWare

Warning: This was a small fun app I wrote in 15 minutes. As such, I don't recommend hard coding strings (the way I did). In fact, feel free to Refactor the small amount of code below. It dynamically creates tiles and uses the images for background so you don' t need to do it at design-time:

string path = AppDomain.CurrentDomain.BaseDirectory + @"slides";
private void LoadItems()
{
    if (Directory.Exists(path))
    {
        tileControl1.BeginUpdate();
        int filesCount = Directory.GetFiles(path).Length;
        for (int i = 1; i < filesCount; i++)
        {
            string fileName = path + "\\Slide" + i + ".png";
            TileItem item = new TileItem() { IsLarge = true, BackgroundImage = Image.FromFile(fileName) };
            tileGroup2.Items.Add(item);
        }
        tileControl1.EndUpdate();
    }
    else
    {
        MessageBox.Show("Slides not found");
        if (System.Windows.Forms.Application.MessageLoop)
        {
            Application.Exit();
        }
        else
        {
            System.Environment.Exit(1);
        }
    }
}

Check out the recent touch webinar and download the app I used to present the slides. Then drop me a line below with your thoughts. Thanks!

Check out these 4 new demo websites that we released with DevExpress DXv2.

Featured Demos

Here's the individual links to each demo:

You can also find them here on our updated ASP.NET demos page: http://demos.devexpress.com/ASP/

Learn & Extend

These demo websites show you:

- What's possible with different DevExpress ASP.NET products in one website

- How to create a similar website for your projects

   - Full source code for the demo websites is available with our installation

   - Feel free to extend and use any of the source code, images or styles

Full source code for C# & VB.NET

Full source code is available in the DevExpress DemoCenter application. Launch the DemoCenter from your 'Start' menu and click the red 'ASP' button. On this page you'll see these four icons. Solutions for both C# and VB.NET are available:

Beautiful & Touch-Enabled

Each of these demo websites show a different scenario. And not only does each demo incorporate our controls and leverage the latest technologies like jQuery, they also show a unique look and feel for each site:

Webmail Client - shows how to use several of the DevExpress ASP.NET major products like the ASPxGridView, ASPxScheduler and many more! And you can also test any of the DevExpress themes against this website by using the dropdown at the top right!

Event Registration - shows how to create an internet style website for events! This demo shows off a mobile-friendly interface with larger fonts, tabs and even a new look for ASPxScheduler:

Hotel Booking - shows how to create a stunning website using several of the DevExpress ASP.NET Editor controls:

Video Portal - Shows how to create your own YouTube-style video portal using DevExpress ASP.NET products like the ASPxDataView, ASPxTabControl, XtraCharts and more. In fact, check out the transitions when click on a video:

Download & Explore

Download DevExpress DXv2 today and explore the above ASP.NET demos. Then drop me a line below with your thoughts, thanks!

Keyboard shortcuts are great. Especially when you're writing in an online HTML editor, because they don't require you to take you hands off the keyboard!

The DevExpress ASPxHtmlEditor editor provides many popular keyboard shortcuts as defaults.

And in the latest release of DXperience v2011.2, we added the ability for you to customize these keyboard shortcuts for your end-users (S38048). We at DevExpress are not only trying to make you more productive when you use our controls from DXv2, but we're also looking out for your end-users.

Default Shortcuts

Here's the list of the default ASPxHtmlEditor keyboard shortcuts.

Notice that the ASPxHtmlEditor provides a way for you to create links using the common 'Control + K' keyboard shortcut found in many popular office products. Personally, I love that shortcut!

Try it now online: http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx

Customization

There are two ways to customize the keyboard shortcuts, at design-time and runtime.

Design-time

In fact, you can redefine default shortcuts and create custom shortcuts at design time in two ways: using a shortcut editor or directly in a markup. To display the shortcut editor, click the Shortcuts property's ellipsis button in the Properties window while designing.

The code sample below demonstrates how you can specify shortcuts in markup. The first shortcut invokes a MyDialog custom dialog. The second shortcut redefines a default Ctrl+B shortcut. The third shortcut assigns the default command bold to custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

<dx:ASPxHtmlEditor ID="MyHtmlEditor" runat="server">
     <CustomDialogs>
          <dx:HtmlEditorCustomDialog Caption="My Custom Dialog" 
          FormPath="~/CustomDialogs/MyCustomDialog1.ascx" Name="MyDialog" />
     </CustomDialogs>
     <Shortcuts>
          <dx:HtmlEditorShortcut ActionName="MyDialog" ActionType="ShowCustomDialog" Shortcut="Ctrl+D" />
          <dx:HtmlEditorShortcut ActionName="backcolor" Shortcut="Ctrl+B" />
          <dx:HtmlEditorShortcut ActionName="bold" Shortcut="Alt+B" />
     </Shortcuts>
</dx:ASPxHtmlEditor>

Runtime

The ASPxHtmlEditor allows you to modify any shortcuts at run time. Simply use the methods provided in the HtmlEditorShortcutCollection collection.

The code sample below demonstrates how you can modify a shortcut collection at run time:

• The first shortcut invokes a MyDialog custom dialog.
• The second shortcut redefines a default Ctrl+B shortcut.
• The third shortcut assigns the default command bold to a custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

using DevExpress.Web.ASPxHtmlEditor;

...

protected void Page_Load(object sender, EventArgs e) {
     if (!IsPostBack) {
          MyHtmlEditor.Shortcuts.Add("Ctrl+D", "MyDialog", ActionType.ShowCustomDialog);
          MyHtmlEditor.Shortcuts.Add("Ctrl+B", "backcolor");
          MyHtmlEditor.Shortcuts.Add("Alt+B", "bold");
     }
}

ASP.NET MVC Supported too!

These shortcuts can also customized for the DevExpress ASP.NET MVC HTML Editor extension too!

What custom shortcuts have you added to the ASPxHtmlEditor? Drop me a line below with your thoughts, thanks!

Check out this video interview with Mike Palgon who has created a very slick web portal using the visually-stunning DevExpress ASP.NET products.

Mike Palgon is a lead developer at HIMformatics, a Healthcare Information Technology consulting firm. And Mike has created a very interesting web portal to help manage various aspects of HIMformatics including: employees, subcontractors, clients, projects, employee forecasting, and expense reports.

Watch the video case study with Mike Palgon here:

In the video, Mike and I discuss his website design and which DevExpress ASP.NET controls he's using.

Learn more about HIMformatics and this website here:

http://www.devexpress.com/Home/Case-Studies/HIMformatics/

Thanks Mike for showing off the slick HIMformatics web portal. I love the minimalist design of his website.

Check out this video for the "Pivot and Analyze Data in your ASP.NET MVC Razor Websites" webinar:

In the webinar, I cover how to build an ASP.NET MVC web site and show you how to use the new DevExpress MVC Pivot Grid extension. The Pivot Grid extension helps your end-users to analyze and present data, easily.

I also provide an overview of the Razor Web syntax and demonstrate using it together with MVC extensions to create stunning yet powerful ASP.NET MVC web experiences.

Watch the "Pivot and Analyze Data in your ASP.NET MVC Razor Websites" webinar. Then drop me a line below with your thoughts, thanks!

Check out this solution to provide an 'endless pagination' feature to your DevExpress ASP.NET enabled websites:

A DevExpress ASP.NET Approach

You can achieve the above sample using these DevExpress ASP.NET controls:

• ASPxCallback
• ASPxLoadingPanel
• ASPxPanel
• JavaScript methods from our ASPxClientUtils object

Take a look at this code central sample here:

ASPxCallback - How to load the content while scrolling - Auto page growth on scrolling down (online demo)

I'll talk about the magic of the JavaScript code below but first, let's look at the general problem and why using an 'endless pagination' solution can help.

Large Datasets

Large datasets on the web are not uncommon anymore. So how do you deal with these large amounts of data without overwhelming the user with a ton of information at once? You paginate the data into smaller chunks:

Endless pagination or infinite scrolling

Endless pagination (or infinite scrolling) is used by many companies like Facebook.com, Bing.com, twitter.com, etc.

This behavior is useful when there is a lot of data to be presented on a page. But it is not necessary to load and display all the data at once since most of it may not be needed. However, load a small set of data and then if the user scrolls down the then then automatically load more data. (See the animated gif above for a sample).

Why use endless pagination?

I recommend this approach for 2 reasons:

1. Performance - Your websites are faster when you don't have to display thousands of rows and hundreds of columns at once.
2. Flow - The end-user is presented with information they can scan/read and then seamlessly load more information using AJAX to continue their experience.

Jeff Atwood (aka CodingHorror.com) has a fantastic blog post titled "The End of Pagination". Here are some key quotes from the post:

In a perfect world, every search would result in a page with a single item: exactly the thing you were looking for.

Pagination is also friction.

I'm not necessarily proposing that all traditional pagination be replaced with endless pagination. But we, as software developers, should avoid mindlessly generating a list of thousands upon thousands of possible items and paginating it as a lazy one-size-fits-all solution. This puts all the burden on the user to make sense of the items. Remember, we invented computers to make the user's life easier, not more difficult.

The end-user does usually prefer to see all the data as this Google research confirms:

User testing has taught us that searchers much prefer the view-all, single-page version of content over a component page containing only a portion of the same information with arbitrary page breaks.

Interestingly, the cases when users didn’t prefer the view-all page were correlated with high latency (e.g., when the view-all page took a while to load, say, because it contained many images). This makes sense because we know users are less satisfied with slow results. So while a view-all page is commonly desired, as a webmaster it’s important to balance this preference with the page’s load time and overall user experience.

And endless-scrolling does come with its own drawbacks like scrollbar issues, deep linking, back button position, and other issues mentioned in Jeff's excellent article:

The End of Pagination

Experiment, iterate, experiment…

Iterating and testing various usability scenarios is key to good UI. I recommend that you try the endless-pagination using the DevExpress ASPxCallBack, ASPxLoadingPanel, etc. In fact, this feature is built into the ASPxGridView: Demo ASPxGridView Virtual scrolling/paging

Above all else, you should strive to make pagination irrelevant because the user never has to look at more than a few items to find what they need. -Jeff Atwood

Perhaps the best approach for you might be to simply provide your end-users with one search box that loads the results of a search keyword (yes, like Google.com or Bing.com). Take a look at the ASPxGridLookup's Incremental filtering in Server Mode feature.

Sample code flow

The code central sample has the following flow of actions:

1. After rendering, the user scrolls down the page and we handle the 'scroll' event of the browser window.
2. When scrolling reaches the page's bottom, we generate a callback (using ASPxCallback) to obtain a new data portion from the server.
3. Then, we add the received items to the end of the dataContainerElement DIV element.

Take a look at the JavaScript code in the default.aspx to learn more.

Please leave me a comment below as I'd love to hear your thoughts on how you help your users with larges amounts of data presentation. Thanks!

Check out this slick Code Central example on how to create a Wizard interface in ASP.NET using DevExpress ASP.NET controls. First, here's a glimpse of what it looks like:

Pretty cool, huh? And it works for both ASP.NET MVC and WebForms! Check out the Code Central solutions here:

• ASP.NET WebForms - How to organize Wizard interface within ASPxPageControl
• ASP.NET MVC - How to organize Wizard interface within PageControl Extension
• Learn how use Code Central by watching this tips video

How's it work?

This wizard interface is a great example because it uses several of the controls from the DXperience ASP.NET subscription:

• ASPxPageControl, ASPxPopupControl, ASPxMenu (part of ASPxperience)
• ASPxCheckBox, ASPxLabel, ASPxTextBox, ASPxDateEdit, ASPxComboBox, ASPxButton, ASPxValidationSummary (part of ASPxEditors)

At the heart of the sample, the ASPxPageControl controls the views before the end-user can move forward to the next view. And the DevExpress ASP.NET editors will ensure validation before the end-user can move forward.

AJAX Callbacks FTW!

DevExpress ASP.NET controls have AJAX callbacks built-in so there is no whole-page refresh. And the client-side API makes it seamless to do things like show the popup control. For example, here's the code for the final "Finish" button that displays the popup with the information entered on the previous views/screens:

function OnFinishClick(s, e) {
    if (ASPxClientEdit.ValidateGroup('groupTabContact')) {
        var str = '<b>Personal Info:</b><br />' + txtFirstName.GetValue() + '<br />' + txtLastName.GetValue() + '<hr />';
        str += '<b>Date Info:</b><br />' + getShortDate(deAnyDate.GetValue().toString()) + '<br />' + cbStates.GetValue() + '<hr />';
        str += '<b>Contact Info:</b><br />' + txtEmail.GetValue() + '<br />' + txtZipcode.GetValue() + '<hr />';
        popupControl.SetContentHtml(str);
        popupControl.ShowAtElement(pageControl.GetMainElement());
    }
}

Try out the wizard samples for ASP.NET MVC and WebForms today and then incorporate them into your ASP.NET websites. Thanks!

Last week I posted about a slick ASP.NET wizard sample in our Code Central collection. There's an even better DevExpress ASP.NET wizard sample, check out this short 1 minute video about the DevExpress ASP.NET Event Registration sample website:

Download

This sample and 4 others are available with full source-code as Visual Studio web solutions when you install the latest DevExpress DXv2 version, available here:

http://www.devexpress.com/Home/Try.xml

Once you download and install DevExpress, you can find the Event Registration sample in your local 'Public Documents' folder. For example on my Windows 7 machine, it's located here:

C:\Users\Public\Documents\DevExpress 2011.2 Demos\Components\ASP.NET\Common\CS\EventRegistration

Try it online

Play with the sample online now:

http://demos.devexpress.com/RWA/EventRegistration/Default.aspx

http://demos.devexpress.com/RWA/EventRegistration/Registration.aspx

How's it work?

Similar to the Code Central sample, this Event Registration wizard uses the DevExpress ASPxPageControl with multiple tabs to control the flow of different views.

Download DevExpress today and then play with the full sample of the DevExpress ASP.NET Event Registration wizard. Enjoy and thanks!

Check out this short 9 minute SharePoint 2010 video case study with Mark Hazleton. Mark is a SharePoint developer who shows you how he has leveraged several of the DevExpress ASP.NET products for a stunning website he created for his client.

DevExpress SharePoint Case Study: Using DXv2 ASP.NET in SharePoint with Mark Hazleton

In the video, Mark shows off some of the very slick elements of the SharePoint portal he had built for his client. Mark really leverages many of the DevExpress ASP.NET controls and he has great chart visuals too!

He also shares his story about the website and the DevExpress experience:

We originally started using the Pivot Grid to provide a dynamic way to display data. As we evolved the POC, we started using more and more controls. The idea that we could implement a basic theme was great for the POC phase of the project as we did not have a designer, and my design skills are lacking. Many times we would use the DevExpress.com Demo site to get ideas on how to best use the controls. Eventually, we standardized on using only DevExpress controls, or custom controls derived from the base DevExpress controls. Having full source code was a big plus as we could extend controls when necessary. -Mark Hazelton

Thanks Mark for the video case study!

Watch the full DevExpress SharePoint Case Study: Using DXv2 ASP.NET in SharePoint with Mark Hazleton. Then check out the DevExpress SharePoint controls:

• - http://SharePoint.devexpress.com
• - How to integrate a DevExpress web control into a SharePoint page
• - Applying an AutoFormat to a DevExpress web control integrated into a SharePoint page
• - Adding the ASPxNavBar onto the SharePoint 2010 master page
• - Replacing a SharePoint master page's default Quick Launch menu with the ASPxNavBar
• - SharePoint Support
• - And more…

Check out the new "DevExpress Tablet Web Application" file project template and wizard that help you create stunning iPad friendly web projects in just a few clicks:

Leverage Your .NET Skills & Tools

I've heard from several enterprises that they want to have a mobile tablet experience without:

1. Losing their existing investment in ASP.NET.

2. Trying to find new talented resources to create native app experiences.

3. Or retraining their developers for a specific app platform (iOS, Android, etc.)

With the new DevExpress file template, you can have a functional iPad website in minutes. In fact, we've added fake data in the file template to help you get started by showing you how to data bind the controls.

iOS Guidelines & CSS Styles

Apple has specific guidelines for building and styling apps for their platform. When creating this template, we adhere to follow the Apple iOS guidelines so that you can get started fast. And because this is an ASP.NET project, you can simply upload and deploy it to your IIS web server and then view it from an iPad device.

We've even added specific styles for Portrait and Landscape modes so you'll have the ability to show different views based on device orientation.

New iOS Theme

This new tablet file project template uses the new DevExpress iOS theme. 

In our continuing effort to address your business needs, we have introduced a new iOS-like application-wide theme. Although this theme does not fully emulate iOS element appearance, it is designed and optimized for touch interfaces. We have modified the size of tap-able UI elements to fit the average size of a fingertip, thus making them fingertip-size control elements.

Learn more

Register and attend the upcoming "Take A Tour 12.1: Stunning- Right Platform. Right Design. Right Decision." webinar to learn more.

Click here to register: http://www.devexpress.com/Support/Webinars/details.xml?id=TAT12_1Stunning

Download 12.1

If you haven't done so yet, download the latest DXperience v2012.1 (part of the DXv2 series). And then try out the new tablet file project template.

Leave me a comment below with the URL of your ASP.NET web project that uses this new DevExpress file project template. Thanks!

Check out this webinar video of the new DevExpress ASP.NET mobile and desktop demos:

New Demos

In the latest v12.1 release, our ASP.NET team worked hard to produce two great new demos that leverage the new iOS theme. The new demos show you what's possible for mobile iPad devices when using DevExpress ASP.NET.

Money Monkey

The ASP.NET team and I had some fun with the Money Monkey demo because we only had 2 weeks before the release to create it!

The goal was to create one Visual Studio solution that targets both desktop-web browsers (Chrome, IE, Firefox, etc.) and mobile iPad's Safari browser. So if you're on a native iPad device, then it will automatically show you the mobile version of the site.

And I'm happy to say that this demo does that exceptionally well. Look for the full source code of this demo in a next minor release of DXperience v12.1.

Touch Board

This slick little demo shows you can make a nice dashboard style web app using many of the DevExpress ASP.NET products like grids, charts, and more!

This demo is best viewed on an iPad:

Learn more by watch the webinar video:

Take A Tour 12.1: Stunning- Right Platform. Right Design. Right Decision.

Download the DevExpress Money Monkey web demo that shows you how it's possible to create one Visual Studio solution that supports both the iPad Safari and desktop-web browsers!

Try the live demo

To see the different versions of the Money Monkey website, click the 2 images below. Note, if you're on an iPad, it will automatically switch to the tablet version of the website:

Money Monkey This personal financial management application shows you how to build for the Web and also target the same application on an iPad. Great user experiences require focus on design principles – discover some DevExpress best practices for building cross platform.

Download latest 2012.1 version

To see the full source code, download the latest DXperience v12.1.5 or higher version.

Existing Customers: visit your account and get the latest v2012.1.x update (or higher)

New Customers:  Download the free 30-day trial

Watch the webinar

View this recent mobile webinar about the v2012.1 mobile demos to learn more about what Money Monkey offers you:

What's in the demo?

One Visual Studio solution that includes the master page and other files that automatically serve 2 different web experiences. One for the desktop web browser and one for the mobile safari browser:

Free Download

The Money Monkey demo is free for all DevExpress customers that have ASP.NET as part of their package.

Don't have the excellent DevExpress ASP.NET products? Then upgrade to DXperience Enterprise or Universal and you'll get all the ASP.NET products!

Thanks.

Wow, yesterday's webinar had a lot of developers interested in supporting mobile web apps using ASP.NET. Thank you for attending and/or watching. If you missed it, you can watch it on YouTube:

Questions & Answers

The webinar was amazing because of all the smart attendees that asked a ton of great questions. Due to time limitations, I couldn't address all the questions during the webinar. So here are all the questions from the webinar. Grab some popcorn and enjoy reading:

>>Q: Please work on adding Arabic languages, our clients would love it!

This question came after I showed the new DevExpress File Template that helps you get started to create ASP.NET projects for mobile or desktop. [They're great, watch the video. ]

One of the options in the DevExpress File Templates is Localization and a choice of different languages:

Why did we choose those languages to be put in first? Mostly because a large part of our customer base usually requests those. DevExpress is always looking to improve with each release.

As for Arabic support, DevExpress ASP.NET products support Right-to-Left:

Related Blog Posts:
ASP.NET RTL Support (coming in v2010 vol 2)
ASP.NET HTML Editor, Spell Checker & File Manager - Right-To-Left Support (available now in v2011.1)

Related Help Topic:
Right to Left Support

Q: Any offline capabilities?

ASP.NET is a server based technology that requires IIS to host it on a web server. So, it not possible to do a 100% offline application because you'll still need to hit the server for updates.

However, we have created a mobile demo called TouchBoard that is an ASP.NET web app that uses HTML 5 offline caching feature to mimic a very offline type of app. Download the latest DXperience install and experience the demo on your local machine.

Q: My customer is aware that he can buy 3 android tablets for his technicians for the price of an iPad.  Do you have plans to support android in the same manner?

Yes, the DevExpress ASP.NET products have Touch support for the Android platform (and iOS).

Q: So this "Platform.IsTouchUI" logic will apply to Android and Windows Phone as well, right?

First, let me clear up the question. There is a DevExpress method that we use called "Platform.IsTouchUI" that checks the browser type and detects if the browser supports Touch capabilities:

public partial class _Default : System.Web.UI.Page {
    protected void Page_Init(object sender, EventArgs e) {
        if(RenderUtils.Browser.Platform.IsTouchUI)
            Response.Redirect("~/mobile/default.aspx");
    }

The webinar attendee was asking if this same method, "Platform.IsTouchUI" will work if the website is ran from Android and Windows phone.

Android v3.0 and above == Yes!

Windows Phone == Sorry but we don't have support for Windows Phone at the moment.

Btw, the RenderUtils is an internal DevExpress class that we use for various detection capabilities. You can download the DevExpress installation, load the demo in to Visual Studio and use the "Go To Definition" feature to see its methods. However, we do not recommend using internal classes or any API that is not part of http://documentation.devexpress.com.

Q: How do you compare this with libraries such as jQuery Mobile?

The DevExpress ASP.NET mobile solution will be easier for you if you are already an ASP.NET developer and not a client-side developer.

jQuery Mobile is a client-side only technology so it doesn't directly compare to our ASP.NET mobile support. The DevExpress ASP.NET mobile support is also directed at supporting tablet devices and not phone devices because generally most ASP.NET UI controls will be too large for small mobile device screens.

Q: Does it support multi-gesture similar to iOS devices?

At the moment, there is no Gesture support from the DevExpress ASP.NET products on mobile devices. This is certainly an interesting area of research and I have been looking in to it.

Q: Will all this work with other platforms?

The DevExpress ASP.NET products help you target iOS and Android tablet devices only, for the time being. As new mobile platforms emerge, we will certainly be keeping watch and investigating support for them.

Q: Are the templates also available in VB, or just C#?

Yes! The DevExpress File Templates are available for both Visual Basic .NET and C# languages.

Q: Are there any possibilities of integration with internal components such as camera, GPS, file system etc.?

Due to browser sandbox security, this is not possible for most web apps today. Meaning that mobile browsers are not afforded access to local resources like your camera.

This answer from StackOverflow indicates that it may be possible in the future if the browser's support this W3C draft API:

I don't think you can - there is a W3C draft API to get audio or video, but there is no implementation yet on any of the major mobile OSs. - StackOverflow

And it seems that Google Chrome has just added this feature to beta release. Unfortunately, it is still not available on all browsers.

The good news is that DevExpress supports the HTML 5 doctype so you can use any of the HTML 5 tags with our products. You can write custom code to support GPS, motion sensors, more touch events, in the browser. This website shows HTML 5 compatibility on mobile and tablet browsers: http://mobilehtml5.org/.

Q: How's the jQuery support for the DevExpress controls?  Do they play well together?

Yes, jQuery is a great library and DevExpress works well with it. In fact, we jQuery in our products where it makes sense. For example, the DevExpress MVC extensions use the jQuery callbacks. There are couple of webinars that may interest you about this topic: 1, 2.

There's also some good posts on my blog about jQuery that may interest you:

• Web Design Tip: How-To Add jQuery Yellow Fade Effect to ASP.NET GridView
• ASP.NET TextBox - How to attach the jQuery AutoComplete Plugin (Webinar Video)
• Case Study: A Fast, slick website built with DevExpress components   

Q: Is your chart control supported in this "tablet"  ASP.NET project?

Yes, take a look at the MoneyMonkey demo and you'll see the DevExpress ASP.NET Charts used at the top right of the web apps.

Money Monkey This personal financial management application shows you how to build for the Web and also target the same application on an iPad. Great user experiences require focus on design principles – discover some DevExpress best practices for building cross platform.

Q: I just saw you move the widgets and rearrange them. Will this be saved so that if the user launches the application again the same arrangement is maintained?

Yes, it is possible to save the locations. This demo does not save them but it is possible to using the save layout methods.

For context, this question is in regards to the TouchBoard demo which uses the DevExpress ASP.NET Docking Suite to create tiles that can moved around with your finger:

Q: How do we deploy these web apps and your controls?

Deployment with DevExpress ASP.NET products is simple. Because the mobile solutions presented here uses ASP.NET, you can deploy it on your web servers using any deployment method that you feel comfortable with. I personally think the approach to embed our runtime dlls in the BIN folder is the easiest (aka BIN deploy). Learn more here: DevExpress ASP.NET Deployment Help Topic

Q: Can your Charts also used in native Office and allow to edit using native Office?

Not that I know of. Unless there is a way to host .NET apps inside of Microsoft Office.

Q: Does the iOS template also work on Android tablets?

DevExpress ASP.NET supports touch for Android devices v3.0 and above.

However, the iOS file template was designed and optimized around the Apple iOS guidelines. While some parts of it may work, I don't believe it would be great to use the iPad file template or iOS theme on Android devices.

You can create your own themes using the DevExpress Theme Builder Tool.

Q: What do I need to do if I want the same web site/app work on android i.e. having android look and feel?

You can pick a standard look and feel for your ASP.NET web app that you feel is acceptable on both platforms. If you want it to look native on both platforms, then unfortunately we don't have a theme for Android currently.

The good news is that you can style and customize the DevExpress ASP.NET products extensively.

For this DXperience v12.1 release, we only targeted iOS tablets because the Apple iPad happens to currently own the largest share of that market. As I mentioned, we are keeping a keen eye on all the different platforms.

Q: I did my first app based on the DevExpress  TouchBoard demo. It works good =) thanks!

Thanks Roberto, your web app based on our demo looks very slick:

Q: For those who are not DevExpress customers could you please summarize the licensing options?

Our licensing model is per developer and royalty free. So for every developer you’ll need a license. And since there are no royalty-fees, you can distribute the run-time dlls with your applications without any extra costs. Take a look at our Licensing FAQ and EULA:
http://www.devexpress.com/Support/LicensingFAQ.xml
http://www.devexpress.com/Support/EULA.xml

I recommend considering the DXperience Enterprise or Universal Subscription as it is a better value overall:
http://www.devexpress.com/Products/NET/DXperience/editions.xml

Q: Is it possible to build app where the same page renders different based on client device instead of redirecting device to lets say mobile page?

Yes, it's possible. However, I'm not sure it's the best approach. Consider that for each device, you may want to have a different look and feel. If you've created the appropriate theme then you can dynamically switch that theme based on the device. However, challenges arise when dealing with devices of different form factor and screen size. Ultimately, it maybe easier for you, the developer, to keep separate web pages so that you can more easily customize the look, if necessary.

Q: Do you support MVC? Are any of the solutions MVC based?

Yes! The DevExpress MVC extensions support touch and the iOS theme too! Learn more here: http://devexpress.com/MVC and http://MVC.devexpress.com

Q: Basically, you just provide a set of controls for web AND mobiles, and a simple logic to switch from one to another?

We understand that you have many options to create mobile apps. The reasons why we created the approach above is to help you leverage your existing skills by using ASP.NET and DevExpress products. Read this blog post and watch the video to learn more.

Q: Do you support view templates for iPhones as well? Are these separate templates? I noticed the MoneyMonkey site didn't work as well on my iPhone.

No. At the moment, we are only support tablets because most of our ASP.NET controls would be too large to render properly on a small phone device.

Q: How about the virtual keyboard when touch on data entry field? Any support of this?

Yes, you can render certain the DevExpress ASP.NET controls (like some of our editors) as the Native HTML elements. The benefit here is that you'll get the virtual keyboard of the native device. However, you will also lose theming features as well as other DevExpress added features.

Q: Can the MVC Scheduler save data to an Exchange Server?

The DevExpress ASP.NET controls work on the User Interface level. So we don't have direct integration with products like Exchange. However, the DevExpress Scheduler extension supports the iCalendar format. So it is possible for you to import/export (manually or via custom code) the data between DevExpress Scheduler and Exchange server. Unfortunately, it is not a feature that we support nor is it something that we can help with either.

Q: Do you support file upload on the iPad?

Q: Does your file upload control work on the iPad? I thought Apple blocks access to the file system?

Apple does not allow access to the iOS file system and therefore, file uploads aren't supported on iOS. So, currently, this is not possible with or without DevExpress.

Q: Rendering controls as native iOS controls is cool.. but would it work on Android also?

Android, I believe, does support certain features like the native onscreen keyboard when rendering as native HTML elements. Ultimately, this feature is up to the platform OS and not something that DevExpress can control.

Q: Does DevExpress works with VS 2008 as well as VS 2010?

Yes! DevExpress, as v2012.1 support Visual Studio 2008, 2010 and even the current 2012 RC.

Q: What's difference between DevExpress control vs. DevExpress native IOS control?

The DevExpress controls are ASP.NET controls and not native iOS controls. The difference is as vast as ASP.NET vs iOS.

Q: Do you have to have Visual Studio 2012 to make this work?

No. In the video above, you'll see that I used VS 2012 RC because it has some improvements that I liked. Rest assured that we do support VS 2008 and 2010 too.

Q: Are you going to have a wizard at some point that would help you target web apps for smart phones? Then you could have one solution for pc browser, tablet browser, and smart phone browser.

Most of the DevExpress ASP.NET controls were designed for larger screens like your desktop web browser. Tablets are big enough for these controls, however, phones are too small to take full advantage or render correctly.

DevExpress is in the business of providing solutions that help make our customers successful. We continue to be a Microsoft gold partner with deep roots in Microsoft. In addition, we must provide the tools that our customers ask for. Later this year, you'll hear more about our continued plans to support mobile.

If you're using ASP.NET MVC 4, then you may want to look at it's mobile features.

Q: Do the templates work well if used with PhoneGap?

Q: And finally any comparisons with PhoneGap?

We have not targeted PhoneGap because most of the ASP.NET UI controls would be rendered too large to use on a phone screen. Generally for small screens, you want to use simple items like buttons and lists which you can use from our ASP.NET library.

We are excited about Phone devices and are actively looking into this market.

Q: I believe the question was do you have separate controls for phones as opposed to tablets not about native code. Or should we be using the same controls for phones and tablets.

No, we don't have separate controls for phones at the moment.

Q: …He just demo'd a wizard that targets a browser running on a tablet. Wondering if we could have a wizard that would help build a view for an even smaller screen such as a smart phone...

Yes, and frankly this is something that I've thought about extensively. Because you can only use a small set of our excellent ASP.NET controls on phone devices, I did not feel that this was a good enough case to create a phone-only DevExpress file template. If we did, it would still be ASP.NET and therefore, you would be free to add any ASP.NET control there. So if someone placed our Scheduler control on the viewport for an iPhone screen, it would not render correctly without enough screen real estate.

The good news is that we are looking into many different solutions to help you target multiple channels.

Summary

Thank you to everyone who asked such interesting questions. I had a great time presenting the webinar to such a smart group! This Q&A shows how important mobile support now is for almost every web developer. And rest assured that DevExpress will continue to listen to its customers and provide quality solutions to help you.

If you have other thoughts then please drop me a line below.

Related Posts

Money Monkey - Download The Free Web App for iPad and Desktop-Web

Create iPad-style Web Apps using DevExpress ASP.NET with DXperience v12.1

Let's take a look at how you can add the powerful DevExpress ASP.NET MVC extensions (or ASP.NET controls) to an ASP.NET WebForms, ASP.NET MVC or ASP.NET Web API web project.

DevExpress Project Wizard

If you have an existing ASP.NET MVC project, then you can run the DevExpress wizard to update your project.

You'll find this option under the DevExpress -> ASP.NET Controls v12.1 -> Run Wizard to Update Project

Here's an image from Visual Studio 2012:

Once launched, you'll see the following DevExpress ASP.NET MVC Project Wizard:

After choosing the options and clicking on the "Update Project", you're project will now contain the

And that's it. You can now use any of the DevExpress ASP.NET products in your ASP.NET project!

ASP.NET Web API

To see how easy it to add DevExpress, take a look at this simple 2 step process to enable an ASP.NET Web API project with DevExpress:

1. Create a new ASP.NET MVC 4 project and select the Web API template:

2. Now follow the steps at the top of this blog post and run the DevExpress Project Wizard.

And that's it, you're done!

Download the new DXTREME Courier App from the Apple App Store to easily deploy and text your mobile apps for the iPhone or iPad.

DXTREME

DXTREME is our new set of tools to help you build multi-channel apps. Or a set of client-side libraries that provide widgets, framework and more to build hybrid mobile apps and desktop web apps using one HTML 5, JavaScript, Knockout, and jQuery. Learn more here: DXTREME announcement page.

Problem: Testing mobile web apps

It can be difficult to test mobile web apps because of deployment. Typically in Visual Studio, a developer can just hit F5 and have Visual Studio launch an instance of their app locally. This provides the benefits of debugging and seeing a near perfect preview of the final deployed app.

For mobile web apps, testing is a challenge because mobile browsers do not behave the same on desktop browsers. Some desktop emulators are good but the best way to test a mobile web app would be on the actual mobile device.

Solution: DXTREME Courier delivers

Our new Apple approved DXTREME Courier app allows you to test your hybrid mobile web app using your iOS device (iPhone, iPad, etc.). It's called Courier because it helps you deliver web apps.

The Courier app hosts your DXTREME web app and gives you the ability to experience how your mobile web app will behave on the mobile device, once you deploy it.

And we make it easy to add your web apps to Courier by just scanning a QR Code, which we provide. To get started:

1. Download the app here.

2. Launch the app. After loading, you'll see one entry for an app that is already added to the Courier list.

That entry is for the sample app, DXTravel, which was coded using DXTREME.

Learn more by visiting the DXTravel demo page.

3. Click 'Add' on the App Toolbar to add a new web app to test. This will bring up the camera which allows you to scan a QR Code. It looks like this:

Once you scan this code, it will add and load your web app. Btw, the QR Code above links to the Wikipedia article about QR Codes so I don't actually recommend scanning that particular code, even though the Courier App will load it.

Where does this QR Code come from?

DevExpress provides the QR Code and ability test from your local machine for you! And this is one of my favorite features of DXTREME.

When you create an app using DXTREME inside of Visual Studio 2012, we provide this functionality automatically.

So a typical scenario would like:

1. Create DXTREME web app inside of Visual Studio 2012.

2. Add some views. Hit F5 to run the solution and you'll be presented with the following screen on your desktop web browser:

3. From the Courier app, scan the QR Code on the bottom left side of your browser and it will load the web app that is running on your local machine on your phone! Yes, you'll be able to see a live preview and debug on your mobile device, while the app is running on your local machine.

Amazing, right!?! We've created a special cloud service using Windows Azure to give you this special ability.

Download the free Courier app from the Apple App Store and easily test your mobile web app.

DXTREME Multi-Channel Experiences

DXTREME is a new DevExpress product that allows you to create multi-channel solutions. You can use DXTREME to create mobile hybrid web apps that look-and-feel native for multiple channels. In other words, you can write a web app using our new HTML 5 framework and create a mobile experience that will work across multiple channels like the iPhone, iPad, Android, Windows 8 devices, and desktop web browsers too.

And we're excited by it's possibilities. Watch this slick DXTREME Announcement video from our marketing team that talks about DXTREME, shows a sample, and the special offer for DevExpress customers.

Once released, DXTREME will include a complete set of tools for you. In this post, I'll focus on DXTREME HTML and address some common technical questions and great features.

What is DXTREME HTML?

DXTREME tools delivers innovative solutions for developers who want to create stunning, multi-screen apps across platforms and devices, from Windows 8 to the iPad and iPhone.

DXTREME HTML is an HTML 5-based framework that contains a set of JavaScript widgets that provide powerful features like data-binding, animations, mobile touch support, and more! Easily create a single page applications (SPA), desktop web applications, or mobile hybrid web apps with DXTREME.

Delight your users by creating apps that feel as though they were designed expressly for the device. With DXTREME, multi-channel means building applications that span devices and optimize the best parts of each platform. And with HTML5/JS visualization built in your dynamic charts and graphs will be both powerful and beautiful.

Code your application logic once in HTML 5 and JavaScript, then run on multiple platforms (iOS, Android, Desktop Web Browser, etc.).

For example, let's say you need to create a simple mobile app that shows a list of items. With the DXTREME HTML, you would simply need to use our List widget and, once deployed, this solution would adapt to using a native look for iPad, iPhone, Android device or Windows 8 device.

And you can still customize the look-and-feel further to your needs and requirements.

Preview now; Release on December 3rd

On September 17th we released a private DXTREME Preview for our existing DevExpress customers. On September 27th we will release the Preview to the public.  December 3rd, 2012 is the official launch date. Mark your calendars.

For now, we'd love to hear about your experience and thoughts on DXTREME.  To learn more about DXTREME watch our Announcement Video or check out the online Reviewer’s Guide.

Download on Sep. 27, 2012

A general public download release will be available on September 27th, 2012 at devexpress.com.

What's included?

DXTREME HTML includes a set of user interface (UI) Widgets and a framework. The UI widgets help you build your mobile web app screens.

UI Widgets:

- Button
- Checkbox
- Datebox
- Gridlist
- List
- Navbar
- Numberbox
- Overlay
- Slider
- Switch
- Tabs
- Textbox
- Toolbar

To learn more about them, visit this great help site: DXTREME Learning Center

There's also a great set of data visualization widgets that are written completely in HTML 5 and use SVG:

There are three main widgets that generate the many different charts and gauges like bars, line & point, Area, Spline, Pie, etc.:

- Chart
- CircularGauge
- RangeSelector

Check out the online demos for these charts here: DXTREME Visualization Gallery

Framework

The framework portion of DXTREME HTML contains:

- Knockout extensions
- data providers
- URL routing engine
- View management

Because this is just the preview release, we're also working hard to add more features, demos, documentation, and other items you'll see in December.

Touch support & Animations built-in

Each of the UI widgets provide touch support for the various mobile platforms and unique animations.

Build native mobile apps!

DXTREME supports Apache Cordova (PhoneGap). Compile your DXTREME mobile web app and turn it into a native app that has access to local resources like the device's camera, GPS, etc.

Adobe PhoneGap is a free open source framework that supports multiple mobile platforms. And DXTREME provides you the ability to work seamlessly with PhoneGap for iOS, Android, and Windows 8 mobile devices!

Developing with Adobe® PhoneGap™ gives you the freedom to create mobile applications for iOS, Android, and Windows 8 using the web code you know and love: HTML, CSS and JavaScript.

From Visual Studio, you'll be able to build native packages. You'll have the option of specifying what native application permissions to allow (e.g. Accelerometer, Compass, Camera, etc.). And because your app will need to be 'signed' with your own certificate for the app stores, we also added the capability for you to attach your own certificates through Visual Studio.

True jQuery and Knockout support

Our DXTREME team of developers decided early in design phase to use and play nice with open-source libraries like jQuery and Knockout rather than reinvent the wheel. These libraries have a huge following and by adopting them, it makes development easier for you to use our set of DXTREME tools with them.

We adopted the excellent Knockout library for client-side data-binding, jQuery for its general awesomeness, and jQuery globalize for globalization and localization of strings, dates, and numbers.

These libraries are popular with a rich developer community who use and improve them.

Therefore, DXTREME widgets can be used very easily with other frameworks and vice versa. This approach has some great benefits for you:

1. You don't have to relearn a new approach.

2. You can feel confident that our client-side tools know and do not inherently try to conflict with popular libraries.

3. And, you have a choice of how to declare the widgets using Knockout binding or as a jQuery plugin. For example, this code below shows how to declare and use a DXTREME HTML Check box widget. Personally, I'm a fan of the Knockout approach for it's simplicity but the choice is yours:

Getting Started

A special 'Learning Center' has been created to help you get started quickly. Go to:

DXTREME Learning Center

There you'll find a short series of lessons designed to get you up to speed with the framework in no time. You will build a part of the DXTravel smartphone demo. By the end of this tutorial you will have a working application you can see and play with right now in the emulator section to the right. The tutorial is the recommended place to get started with the framework.

Additionally, you can watch the demo portion of the DXTREME launch video where you'll see a walk through of how to create a multi-channel web app.

Visual Studio Support

Because we understand that a majority of our customers are Microsoft developers who use Visual Studio, we've made the experience of developing JavaScript mobile web apps, easier.

First, we've included a File->New template that helps you get started with creating a new mobile DXTREME web app:

While this next two features are not in the preview release, here's a sneak peek to an upcoming wizard that will help guide you from the File-New template:

Also, the Visual Studio design experience will show you a visual preview (this feature is not in the preview release):

In the preview release, we only support Visual Studio 2012 but we will also be supporting Visual Studio 2010 soon.

Note: The core widgets and framework of DXTREME HTML do not have any server dependencies. Therefore, you choose your favorite editor like Notepad, Sublime Text 2, etc. However, only the Visual Studio IDE has the integrations mentioned above.

Unique Mobile Debugging

A custom application called DXProxy is installed to help you test and deploy your mobile DXTREME apps. Here's how it works:

1. When you run (F5) a project from Visual Studio, DXProxy goes through the cloud and sets up a direct connection to your machine.
2. It then provides an unique QR Code on the browser window that is displaying your solution. Take a look at the QR Code at the bottom left of this image:

3. Now you can use any QR reader on your mobile device to scan this code and it will launch a version of the web app (yes the one that is running locally on your machine), on your mobile device!

Directly test how the web app will look and feel for each mobile device that you'll support by loading the version that you're developing on your laptop or desktop.

This gives you several benefits:

- Save time by not having to deploy your web app to a web server just to test it
- Create better quality mobile web apps because you can test directly on your mobile device
- When running on your mobile device (via Courier), you'll have access to local resources like the camera
- You don't need to worry about deploying through an app store to see

And because you might have several DXTREME mobile web projects, we've made a special native app to help you test it.

A free iOS app too

To help you test and deploy the mobile web apps you create with DXTREME, we've made a slick iOS app for iPhones and iPads. It has a great debugging feature too. Read more about in in the following blog post:

DXTREME Courier App - Free iOS App helps you deploy and test mobile apps

There will also be an Android version of this app in the future.

JavaScript? And what else do I need to learn to use DXTREME?

To use DXTREME will require some basic understanding of JavaScript and jQuery. I recommend getting familiar with:

- JavaScript
- jQuery
- Knockout

There are a ton of good free resources on the internet to learn these technologies. In fact, our CTO Julian Bucknall, has been blogging about JavaScript and you find these blog posts helpful:
- JavaScript blog posts on DevExpress
- "JavaScript for C# developers" blog posts

Supported Web Browsers

Because DXTREME HTML is an HTML 5-based framework, we have targeted only the modern web browsers that fully support HTML 5. Webkit browsers like the newer versions of Chrome and Safari are supported. And the latest versions of Firefox, as well as, Internet Explorer versions 9 and 10!

DXTREME

Why is DXTREME spelled in all caps? Because we're EXCITED about it.

What about jQuery Mobile? Competitor X,Y,Z?

We have taken a look at the strengths and weakness of the solutions out there today. And we feel that DXTREME is on par with the best of them in terms of features and performance.

A key benefits for you is that it was developed by DevExpress who has been in the developer tools business for over a decade. And we work hard to make it easier for you to create stunning applications. Plus, our excellent support team will be there to help you when you have a DXTREME question.

If you have specific questions or concerns about features versus any existing company or product then please feel free to ask us by posting your question on our support center: http://www.devexpress.com/Support/Center/Question/Create.

In the coming weeks, we will be talking more about DXTREME. Drop me a line below with your comment or question. Thanks.

Join me this Thursday, October 4th, at 10am PST for the '' webinar. You'll learn about how we built the new "Clinical Trial" demo app using ASP.NET MVC and DevExpress MVC extensions:

Register Now:

Register for this GotoMeeting webinar here: https://www3.gotomeeting.com/register/591947726

Level: Beginner (100)

Platform: ASP.NET Controls

Description

The new DevExpress "Clinical Trial" demo app is simply loaded with functionality. In this webinar, DevExpress ASP.NET Product Manager, Mehul Harry will show you how it was built using the ASP.NET MVC framework and DevExpress MVC extensions. You will learn about the specific DevExpress MVC extensions used to build the user interface and how they fit into the MVC framework. We’ll also dive deep into test-driven development and web architecture.

Don't miss this opportunity to learn how a powerful and rich ASP.NET MVC website can be created by using DevExpress MVC.  MVC beginners are encouraged to attend!

Clinical Trial Demo

Test drive the demo online now to see a powerful application that leverages many of the DevExpress MVC extensions.

DevExpress MVC Clinical Trial Demo

Register and then join the webinar. Hope to see you there, thanks!

The new DevExpress "Clinical Trial" demo app is simply loaded with functionality. And it's beautiful too, take a look at this screenshot:

What is it?

The new DevExpress Clinical Study Demo is a role-based web application that is designed to manage clinical trials. It demonstrates how the DevExpress ASP.NET MVC extensions can be used efficiently to build easy-to-use solutions.

Why I love this demo

The DevExpress Clinical Study Demo provides some great features and benefits and here's a few reasons why I love it:

- Great user interface (UI)
- Simple design
- Beautiful custom theme
- Powerful architecture
- Well thought out in its functionality
- Incorporates business logic into design

Watch the Video

I recommend watching the "How to Create a Powerful ASP.NET MVC Web Application" webinar video:

The video covers the demo's architecture, MVC extensions, theme, and much more.

Try online demo

Test drive the online demo here and then come back to read more about how this website was built:

http://demos.devexpress.com/RWA/ClinicalStudy/

Understanding Clinical Trials

We chose to do a demo on Clinical Trials because a couple of our developers had worked on a massive clinical trial website before and felt that it would be good example to show how to create a powerful and complex website with DevExpress MVC extensions. And they were right!

But what is a 'Clinical Trial'? Wikipedia has a great article on the history and definition of 'Clinical trials' and I recommend reading it.

Clinical trials are sets of tests in medical research and drug development that generate safety and efficacy data (or more specifically, information about adverse drug reactions and adverse effects of other treatments) for health interventions (e.g., drugs, diagnostics, devices, therapy protocols). - Wikipedia

Most 'Clinical trials' usually take a long time to conduct, with many variables and inputs determining the overall outcome. So, in our demo we decided to include a small set of functionality of a typical 'Clinical Trial' program. The basis of our demo revolves around two main roles:

1. Doctors (who collect and input the data for a clinical trial)
2. Supervisors (who view data to manage the clinical trial)

And you'll see these roles on the very first screen because you'll choose to login as one or the other. These roles also allowed us to design the website so that the doctors, would do all the data editing and the supervisors would do the analysis. This is a great way to show the different capabilities of the DevExpress MVC extensions.

Custom Theme

A new custom theme was developed just for this demo. We call it "Clinical Study Theme" and it has a beautiful style to it. The colors are soft and the overall look is professional, clean, and light.

We created the “Clinical Study Theme” to show that DevExpress MVC extensions can be successfully tuned to fit any custom design. We also used DevExpress Theme Builder tool to customize it.

However, this theme was designed only for the Clinical Study demo and therefore, it is not a full DevExpress theme that supports all DevExpress ASP.NET products.

In a separate blog post, I'll outline what controls this theme supports and how to use it with other web projects that use DevExpress ASP.NET.

Architecture

Here's how we built this demo.

MVC Areas:

Because this demo is divided by two major roles, we use the ASP.NET MVC features called 'Areas' to make it easier to organize the project. Therefore, you'll find that there are two main Areas that functionally divide and separate the two major roles of this demo. This helps keep the application design clean and easier to manage as it grows in complexity.

Learn more about ASP.NET MVC Areas here.

Dependencies:

- ASP.NET MVC 3 - When this demo was created, ASP.NET MVC 4 was not released but it is possible to upgrade and use ASP.NET MVC 4
- SQL Express - SQL Server Express is a free edition of SQL Server ideal for developing and powering desktop, web and small server applications
- Entity Framework - Microsoft's object-relational mapper (O/RM)
- Castle Windsor (Castle Project) - An Inversion of Control container for .NET
- Moq - A simple mocking library for .NET
- NUnit - An unit testing framework that is open source written in C#
- Modernizr - an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites

Don't worry if you haven't downloaded many of those libraries because Nuget in Visual Studio 2012 can download them for you. You'll still need to install ASP.NET MVC and SQL Express yourself though.

Project Structure:

The Visual Studio solution for the Clinical Study demo consists several projects that represent the different layers of a typical and well architected complex web project:

Here what each project is meant for:

DevExpress Help Documentation: Clinical Study Specifics

Data Access: Entity Framework

The developers decided to use the Repository pattern because of it's simplicity. And they also chose Entity Framework from Microsoft because of it's features and popularity. They decided to use a Code First approach with Entity Framework to show that you can take nearly any approach with DevExpress MVC extensions.

Dependency Injection / Inversion of Control (IoC)

We decided to use a Inversion of control container and a mocking framework because it provides:

1. Good Unit Testing coverage - We wanted the ability to test without touching the database
2. Better design - Because of the separation of concerns, we're able to keep most of the classes smaller. And it also follow the SOLID principles
3. Two sets of repositories - Because this demo runs locally and online, we needed two different repositories. The online version does not allow persistent editing so we created an "In Memory" version that allows changes only during the ASP.NET session. Then each new user gets to experience the demo with the default data.
The local version of the demo uses SQL Express because it can allow for persistent editing.

Why did we choose to use Castle Windsor? Simply to show you that you can use just about any 3rd party IoC Container with DevExpress MVC extensions.

NUnit

One of the most popular unit testing frameworks, NUnit was an easy choice because our developers had some experience with it. However, you can use just about any testing framework with DevExpress MVC extensions.

Overview

With the DevExpress Clinical Study Demo, our goal was to show that DevExpress MVC Extensions fit well with the MVC approach and that real world applications can be made easily with DevExpress MVC extensions.

The demo shows that DevExpress MVC extensions can be used with Test-Driven Development (TDD) approach and are not a roadblock in any way.

The roles in the demo show you:

- Supervisor Role: Analytics dashboard (with Pivots, Reports, Charts)
- Doctor Role: Data entry (GridView, Editors, HTML Editor, etc.)

The custom theme shows the DevExpress MVC extensions themes and styling capabilities.

The architecture shows you that DevExpress MVC extensions are compatible with any of the major patterns and frameworks available today. And they also show you how use them in your own projects.

The data access shows you how to work with Entity Framework using Code First and the repository pattern.

Overall, this demo packs a lot. It's powerful, well architected, created using TDD approaches, beautiful, and provides a great user experience too.

DevExpress ASP.NET MVC Extensions have supported ASP.NET MVC 4 since we released the DXperience version 12.1 in June 2012. We still had unofficial support for MVC 4 before this release but the current release provides true support.

New MVC 4 Projects

To make it easier for you to use DevExpress MVC extensions with ASP.NET MVC 4, you can use the following two methods:

1. Create a new MVC 4 project using Microsoft file templates then add and enable DevExpress MVC extensions to this project.

2. Or you can use the DevExpress File Templates (for mobile tablets too):

When you select the "DXperience ASP.NET MVC Web Application" template, it will bring up this wizard which allows to choose your MVC version:

Read the "MVC Web Application Template" help topic which describes the MVC file template, wizard, and project structure.

Converting MVC 3 to MVC 4

If you have an existing ASP.NET MVC 3 project that uses DevExpress MVC extensions and would like to upgrade it to use ASP.NET MVC 4 then please take a look at the following links:

- Microsoft Whitepaper: http://www.asp.net/whitepapers/mvc4-release-notes#_Toc303253806
- DevExpress knowledgebase article: http://www.devexpress.com/Support/Center/Question/Details/KA18612

If you face any issues in upgrading, then please contact the excellent DevExpress support team and they can help you. Thanks!