Q&A from Build Stunning Apps for iOS with ASP.NET

07 August 2012

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:

DevExpress Webinar

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. Smile ]

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

DevExpress File Template Localization

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:

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.

DevExpress ASP.NET Mobile and Desktop Demo

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:

ASP.NET Tablet viewer demo

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:

ipad-image

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

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

11 comment(s)
Jaime Karolys

Thanks Mehul for the review and post my page!!!!

Best Regards for all

Roberto

6 August, 2012
Geert Depickere

Hi Mehul and Jaime/Roberto,

I checked the sample of Jaime/Roberto from my iPad. Compared to the DX sample, it has a few "parts" that contain controls that are interactive (like a grid, a splitter). I noticed that on my iPad, manipulating the grid (repositioning a column by drag and drop) or the splitter (trying to resize left and right pane) does not seem to work. The interaction is interpreted by the controls as the user trying to move the complete "part".

7 August, 2012
Jaime Karolys

hi Geert and Mehul.

Well thats right, I noticed that too but in the info that I want to show, i dont need too much interaction, like resize the Splitter or repositioning the fields.

I Don't know if there´s a way to handle that, maybe Mehul can help us with that.

Best Regards.

Roberto.

7 August, 2012
Mehul Harry (DevExpress)

Greet & Roberto,

I would not recommend using the splitter because the touch event will first go to the docking suite.

Roberto, why not just make another docking widget? Or show the info that panel using master-detail gridview: demos.devexpress.com/.../DetailTabs.aspx

Or better yet, use a popup or another page to show more detailed data.

Basically, for mobile, try not to show too much data at once. Focus on the core content.

Thanks.

7 August, 2012
Geert Depickere

Thanks for clarifying the behavior.

So the guideline is not to use stuff that requires dragging whithin the parts that are controlled by the docking suite, but to only use stuff that requires tabbing (like tabs, buttons, collapsible panes...).

Sounds reasonable, but surely is something to keep in mind when designing the UI.

would it also be possible to configure the docking suite to only allow to drag parts INTO the largest area but not out of it? If so the user would be able to fully interact  with the content of that largest area, without interference from the docking stuff (that would  be disabled for that area)?

8 August, 2012
Jaime Karolys

Mehul.

I like the Idea of the popup, I'll try to do that and see what happens. I used the splitter beacuse i want to try that component.

Geert

I'm trying tabs in the docks and works fine. Just to show different info in every tab and optimize space too.

Thanks.

Roberto.

8 August, 2012
Mehul Harry (DevExpress)

Greet,

Guideline is to not use something that will compete for touch events. Keep the UI simple so the user can use the most obvious behavior.

Yes, the docking suite can be setup so only certain targets allow docking:

demos.devexpress.com/.../ForbiddenZones.aspx

8 August, 2012
Mehul Harry (DevExpress)

Roberto,

Yes, space is an issue for mobile devices. It's best to show less information by only showing key information when possible. Then use links/popup to show details if the user chooses to view them, imho. :)

Thanks.

8 August, 2012
Les Brinkworth

Hi Mehul,

I see that in your demo you have the app in "full screen" mode on the iPad.  In reality when you run the site the Safari browser takes up the top part of the screen with the navigator and tab selector.

...am I missing something?

9 August, 2012
Mehul Harry (DevExpress)

Hi Les,

To avoid the url bar, you can create shortcut which removes the extra chrome:

browsers.about.com/.../Add-Home-Screen-Icons-Safari-Ipad.htm

Thanks.

9 August, 2012
Les Brinkworth

Hey Mehul,

Thanks.  Great demo - wasn't able to join you live but caught it on the download!

regards

Les

14 August, 2012

Please login or register to post comments.