Silverlight+RIA Service创建企业商业应用(1)基础导航

今天,我们要先谈谈UI的专业化问题…

创建企业商业应用当然需要给客户展现专业的UI设计,不过我们中又有多少团队拥有一个专业的全职美工呢?这就是我们尽力为用户准备一些“开箱即用”UI模板的原因。Silverlight Navigation Application和Silverlight Business Application(在前一个基础上增加了登录/登出功能)默认提供了一套干净规范的应用程序架构。看上去很美,而且即使对于开发人员来说也很易维护和自定义。

文件\新建项目 – Silverlight Business Applications

image

按下 F5

image

这是一个完全基于框架的Silverlight Application。注意Home和About两个导航链接。

image

看,浏览器的前进和后退一样好用…

image

Silverlight3提供了对深度链接的支持。你可以copy这些链接然后通过博客、电子邮件或者即时通信工具发送给你的团队成员。当他们点击开这个链接的时候就可以导航到这个深度链接在应用程序中所指向的确切的位置。

image

… 在任何浏览器中都能表现得始终如一…

所谓人无完人,经验再丰富的开发人员也难免会犯一些错误。比如敲错了链接或应用程序抛出了意料外的异常这种情况。Navigation Application提供的默认模板让处理此类问题变得超方便。随意敲一个错误的URL试试:

image

接下来让我们谈谈自定义(个性化)方面的事儿

首先,我们添加一个新的Page

右击解决方案中当前Silverlight项目的Views文件夹,然后点击Add New Item,选择Silverlight Page

image

image

打开新添加的Page,搞一些简单的东东进去

<TextBlock Text="Hello World!"></TextBlock>
 

现在,我们把它和主导航页面的菜单关联起来。在MainPage.xaml中参照现有的导航按钮定义添加一个Button

 <HyperlinkButton Style="{StaticResource LinkStyle}" 
                                         NavigateUri="/MyFirstPage"                 
                                         TargetName="ContentFrame"                 
                                         Content="my page"/>

image

image

接着,我们来自定义一下默认的出错提示窗口…打开Views\ErrorWindo.xaml进行处理,这里你可以做一些具体的改动,如改变相应的输出格式、将日志记录到服务端或自定义异常提示信息等。

<TextBlock x:Name="IntroductoryText" 
          Grid.Row="0" Margin="0" 
          Text="An unknown error was encountered. Please contact Forever anytime day or night (123) 332-9801 for more information."           
          Width="398" 
          TextWrapping="Wrap" 
          HorizontalAlignment="Left"/>

 

恩,还不错。现在我们要改变一下这个站点的标识。在MainPage.xaml中,将“Application Name”改为你想要的名称,如“4 MVC Team 群号:1215279”(超级明显的广告)。

<TextBlock x:Name="ApplicationNameTextBlock" 
           Style="{StaticResource ApplicationNameStyle}" 
           Text="4 MVC Team 群号:1215279"/>

 

最后我们针对颜色进行一些改动。打开Assets文件夹中的Styles.xaml,现有的所有样式都摆在那里等着你去定义哦。我们这里做一些对开发人员来说比较普遍且熟悉的属性的更改。

image

点F5看成果…

image

image

恩…如你所见,我搞出来的颜色看上去并不咋样,呵呵。

我们还提供了一系列的“即开即用”的app.xaml供大家选用,他们在VS和Blend下表现得都很出色。

以下是一部分已经提供的样式模板:

http://timheuer.com/blog/archive/2009/07/09/free-silverlight-application-themes-silverlight-3.aspx

Aurora (用于RIA Services Template的版本):

Aurora app theme

Frosted Cinnamon Toast:

Frosted Cinnamon Toast app theme

Lime Shocker (用于RIA Services Template的版本):

Lime Shocker app theme

Pinky (用于RIA Services Template的版本):

Pinky app theme

Retro:

Retro app theme

Skyline:

Skyline app theme

Subdued:

Subdued app theme

posted @ 2009-10-29 23:18  紫色永恒  阅读(1210)  评论(0编辑  收藏  举报