DevExpress ASP.NET组件与iOS主题体验

DevExpress是一个为.NET开发者提供丰富组件的公司,他们在这个领域已经有近15年的历史,并且有着为开发者提供稳定解决方案的良好记录。在这篇文章中,将探讨DevExpressASP.NET组件的最新版本,特别是12.1版本中引入的新iOS主题。

安装内容

当安装ASP.NET控件时,一系列Visual Studio模板会被添加到“新建项目”对话框中:包括标准Web应用程序、空Web应用程序、表格Web应用程序,以及最后一种Outlook风格的Web应用程序。所有这些模板都提供了传统的ASP.NET Web Forms和ASP.NET MVC两种风格。

iOS主题

在这篇评测中,将重点关注最新版本中新增的iOS主题。在DXperience 12.1包中,将获得一组预定义的主题,这可以让Web应用程序从一开始就拥有专业且流畅的外观。除了iOS主题,还可以获得默认主题、Aqua、Black Glass、Dev Ex、Glass、Office2003Blue/Olive/Silver、Office2010 Black/Blue/Silver、Plastic Blue、Red Wine、Soft Orange以及Youthful等主题。

会注意到,所有的图形用户界面元素都比平常大得多,这是为了让视觉元素在触摸屏设备上(如iPhone/iPod/iPad以及Android和Windows Phone移动设备)更容易使用。

设备依赖主题

尽管iOS主题非常适合移动设备,但对于常规的桌面客户端来说可能会显得过于宽敞。解决这个问题的一种方法是仅对移动设备使用iOS主题,而对于其他设备则切换到更以桌面为中心的主题。这可以通过使用User Agent来检测移动设备来实现。大多数,如果不是全部的移动设备,都会提供一个包含“Mobile”这个词的User Agent字符串。例如,iPad会显示如下:

Mozilla/5.0 (iPad; U; CPU OS 4_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F191 Safari/6533.18.5

Windows Phone通常会使用:

Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)

最后,一个运行Ice Cream Sandwich的通用Android设备上运行Chrome会有这样的User Agent字符串:

Mozilla/5.0 (Linux; Android 4.0.4; SGH-I777 Build/Task650 & Ktoonsez AOKP) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19

它们共同的特点是都包含字符串“mobile”,这就是要检查的内容。

global.asax.cs文件中,简单地添加处理Application_PreRequestHandlerExecute方法的代码。

protected void Application_PreRequestHandlerExecute(object sender, EventArgs e) { if (Context.Request.UserAgent.ToLower().Contains("mobile")) { DevExpressHelper.Theme = "iOS"; } else { DevExpressHelper.Theme = "Office2010Black"; } }

使用iPad设备测试

首先,使用桌面浏览器浏览测试页面。

一个相当标准的桌面主题。

让使用iOS模拟器进行测试,看看这是否有效。

正如看到的,现在为移动用户切换到了一个更加适合触摸的主题,而桌面用户将体验到一个更传统的主题。

移动设备是一个快速增长的市场;越来越多的用户通过他们的手机和平板电脑消费内容。公开面向的Web站点提供尽可能好的用户体验是非常重要的。DevExpress的新iOS主题将帮助实现这一点,它使ASP.NETWeb应用程序能够提供更加适合触摸的体验。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485