『听风且吟』技术版

CSS文字围绕效果

Windie Chai — Fri, 10 Feb 2012 20:16:37 +0800

前两天同事问我能不能用CSS实现这样一个效果，页面上有一段文本，但文本的左下方有一个图片，他希望文本在遇到图片时，能绕开图片。如果图片位于左上方的话，其实很容易做到，我同事遇到的这种情况我之前也没有处理过，研究了一下，发现了一种方法。

先来看看最终效果，红色的方块用来模拟图片：

完整的HTML如下：

<html>
<head>
<title>Untitled Page</title>
<style>
.left div
{
float: left;
clear: left;
margin-right:5px
}
.left .placeholder
{
margin-right:0px;
width:1px
}
.text
{
line-height: 20px
}
</style>
</head>
<body>
<div>
<div class="left">
<div class="placeholder" style="height: 60px">
</div>
<div style="width: 100px; height: 40px; background-color: red">
</div>
</div>
<div class="text">
Windows Phone是微软发布的一款手机操作系统，它将微软旗下的Xbox LIVE游戏、Zune音乐与独特的视频体验整合至手机中。2010年10月11日晚上9点30分，微软公司正式发布了智能手机操作系统Windows Phone，同时将谷歌的Android和苹果的IOS列为主要竞争对手。2011年2月，诺基亚与微软达成全球战略同盟并深度合作共同研发，建立庞大的生态系统。
</div>
</div>
</body>
</html>

简单解释一下，.left中的所有div都默认将float和clear都设置为left，这样做一方面能保证其他与这些div视觉上相邻的元素都会贴着它们，同时这些div自身又能保证独处一行。所以.text中的文本就会围绕.left中的所有div来呈现。

.text设置了line-height为20px，这样做是为了给.left中的div带来计算高度上的便利。.left中的第一个div是一个占位符，它的作用是把红色方块向下推一段距离，所以它设置了height为60px，即.text行高的3倍，也就是三行文本（同理红色方块的高度是两行文本）。此外，它的width是1px，而不是0px，这是为了兼容IE7所做的让步。

如果将这段代码拓展一下，我们还可以实现两边边框都扭曲的文本段，如下图所示：

完整的HTML代码如下：

<html>
<head>
<title>Untitled Page</title>
<style>
.border
{
padding:0px;
margin:0px;
list-style:none
}
.border .left
{
float: left;
clear: left;
margin-right:5px;
height:20px;
background-color:Red
}
.border .right
{
float: right;
clear: right;
margin-left:5px;
height:20px;
background-color:Blue
}
.border .placeholder
{
margin-left:0px;
margin-right:0px;
width:1px
}
.text
{
line-height: 20px
}
</style>
</head>
<body>
<div>
<ul class="border">
<li class="left placeholder">
</li>
<li class="right" style="width: 30px">
</li>
<li class="left" style="width: 10px">
</li>
<li class="right" style="width: 20px">
</li>
<li class="left" style="width: 20px">
</li>
<li class="right" style="width: 10px">
</li>
<li class="left" style="width: 30px">
</li>
<li class="right placeholder">
</li>
<li class="left" style="width: 20px">
</li>
<li class="right" style="width: 10px">
</li>
<li class="left" style="width: 10px">
</li>
<li class="right" style="width: 20px">
</li>
<li class="left placeholder">
</li>
<li class="right" style="width: 30px">
</li>
</ul>
<div class="text">
Windows Phone是微软发布的一款手机操作系统，它将微软旗下的Xbox LIVE游戏、Zune音乐与独特的视频体验整合至手机中。2010年10月11日晚上9点30分，微软公司正式发布了智能手机操作系统Windows Phone，同时将谷歌的Android和苹果的IOS列为主要竞争对手。2011年2月，诺基亚与微软达成全球战略同盟并深度合作共同研发，建立庞大的生态系统。
</div>
</div>
</body>
</html>

以上代码均在IE7、IE8以及Chrome16中表现良好。

Windows Phone WebBrowser的技巧

Windie Chai — Thu, 09 Feb 2012 21:46:59 +0800

无论是在桌面级开发中，还是在手机端开发中，WebBrowser都是一个经常会用到的控件；Windows Phone中的WebBrowser虽然远远没有桌面版那么强大，但依然足够应付常规用途。本文就来介绍几则Windows Phone中的WebBrowser控件的小技巧。

1.显示HTML片段

WebBrowser的NavigateToString方法可以用来将一段HTML片段显示在WebBrowser中。利用这个方法可以把WebBrowser当作一个增强版的RichTextBox来使用，京东商城的Windows Phone客户端在展示商品信息时就使用了这种技术。而且这种技术还有助于解决Windows Phone中TextBlock显示长文本的一个bug，具体表现为当文本过长时，TextBlock只显示文本的前半段内容，后半段内容不予显示，但却留出了位置（滚动条还能到达，非常诡异），而WebBrowser在显示长文本时就没有这种困扰。

但NavigateToString并不是完美的，假若传入的字符串中包含中文（或其他UTF-8字符）的话，就会显示为乱码。

解决这个问题的方法之一是提前对字符串进行转码，可以参考这篇文章。但这样做的代价是需要遍历所有字符，其实只要把需要显示的HTML片段简单构造成HTML文件，存储到独立存储中，然后再用WebBrowser以常规的方式打开即可解决这个问题。如下面的代码所示：

using (IsolatedStorageFile file = IsolatedStorageFile.GetUserStoreForApplication())
 {
 if (!file.DirectoryExists("temp"))
 file.CreateDirectory("temp");
 using (IsolatedStorageFileStream fs = new IsolatedStorageFileStream("temp\\review.html", FileMode.Create, file))
 {
 string html = "<!DOCTYPE html><html lang='zh-CN'><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body>";
 html += e.Review.Summary;
 html += "</body></html>";
 byte[] bytes = Encoding.UTF8.GetBytes(html);
 fs.Write(bytes, 0, bytes.Length);
 }
 }
 this.wb.Navigate(new Uri("temp\\review.html", UriKind.Relative));

2.禁止缩放

WebBrowser支持缩放，但有时我们并不需要缩放功能，譬如在用它来解决TextBlock的长文本bug时。

如果需要禁用一切手势，可以将WebBrowser的IsHitTestVisible设置为False，但这样做的后果是WebBrowser滑动显示内容的功能都会失去。但如果仅仅想要禁用缩放功能，可以在WebBrowser将要显示的HTML的Head中加入这样下面的脚本：

<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0' />

关于viewport的更多细节可以参考MSDN Blog的这篇文章。值得注意的是原文在发表时，Windows Phone中的IE还不支持initial-scale、minimum-scale和maximum-scale，而在最新的Windows Phone Mango更新中，除了initial-scale之外的其余属性都已经可以很好的支持了。

3.接管横向滑动

如果用WebBrowser来解决TextBlock的bug，那么还有一个问题需要注意，WebBrowser会接管横向滑动手势，用来移动页面位置，也就是说，假如你把WebBrowser方知道Pivot或Panorama控件中时，就没有办法切换到其他Item了（除非从Header部分横向滑动）。

不过一般在用WebBrowser代替TextBlock时，并需要它内置的横向滑动功能（通常会禁用缩放），所以我们可以想办法侦测发生在WebBrowser上的横向滑动手势，并用来修改Pivot或Panorama的SelectedIndex。所幸的是，Silverlight Toolkit For Windows Phone中有一个组件可以帮我们轻松的完成这项工作。

首先在Xaml中添加GestureService.GestureListener：

<phone:WebBrowser Name="wb" Loaded="wb_Loaded" LoadCompleted="wb_LoadCompleted">
 <toolkit:GestureService.GestureListener>
 <toolkit:GestureListener Flick="GestureListener_Flick" />
 </toolkit:GestureService.GestureListener>
 </phone:WebBrowser>

在GestureService.GestureListener的Flick事件中修改Pivot或Panorama的SelectedIndex：

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
 {
 if (e.Direction.ToString() == "Horizontal")
 {
 this.p.SelectedIndex = 1;
 }

}

除了Flick之外，GestureService还支持Tap、Double Tap、Touch and Hold、Pan、以及Pinch and Stretch多种手势。关于GestureService的更多信息请参考这篇文章。

隐藏SharePoint User Profile页面中的提示文本

Windie Chai — Wed, 01 Feb 2012 22:42:52 +0800

在SharePoint 2010的User Profile页面中存在一些提示，本文的内容就是如何去掉这些提示而又不影响其他功能，这是一件简单而又意义不大的事情，但我却不小心想复杂了，前后花了几个小时，用jQuery写了几行代码，中间还发现bug修改了一遍，终于发现走了弯路，用区区3行CSS搞定。

首先是“标签和注释”页面（thoughts.aspx）中的提示文本，位于标签云的下方，如图所示：

最下面几行提示文本的标签既没有id也没有class，还好标签云是有class的，可以用它来定位到之后的元素，并将其隐藏，只需一句Style：

.ms-TagCloud.ms-socialThoughtBoxTags ~ div {display:none;}

其中~表示“之后的所有元素”，IE6不支持这个选择器，不过没关系，SharePoint 2010 不支持IE6。

接着是“概述”页面（person.aspx）的记事板提示文本，这段提示文本是通过AJAX技术动态填充的，仅在没有Notes的情况下显示（包括将Notes全部删除之后）。

没有Notes时的样子：

有Notes时的样子：

这段提示文本的标签也没有id和class，而且多层嵌套，可以依靠有class的分页元素（“上一步”和“下一步”的功能居然是为Notes翻页，我还以为是引导提示文本的向导按钮）来定位它。值得注意的是提示文本和Notes位于同一个div中，但结构却大相径庭，还好Notes的元素具有id，所以可以先将该层的所有div隐藏，然后再将具有id的div显示出来，籍此来隐藏提示文本，而又不影响Notes本身：

.ms-socialCommentPaging + div > div {display:none}
.ms-socialCommentPaging + div > div[id] {display:block;}

其中+表示相邻的下一个元素，>表示第一级子元素，[id]表示包含id属性的元素。

最终的CSS样式如下：

<style>
.ms-socialCommentPaging + div > div {display:none}
.ms-socialCommentPaging + div > div[id] {display:block;}
.ms-TagCloud.ms-socialThoughtBoxTags ~ div {display:none;}
</style>

将这段CSS添加到MySite Host的Custom Master Page中即可（默认为MySite.master）。

SharePoint HttpModule和SharePoint Designer的冲突

Windie Chai — Fri, 23 Dec 2011 19:00:18 +0800

前段时间为SharePoint写了一个HttpModule来将对重定向对某些页面的请求,结果发现有一个副作用,会和SharePoint Designer有冲突.

具体表现为启用了这个HttpModule之后,SharePoint Designer在打开aspx页面时会报以下错误:

服务器不能完成您的请求.

soap:Server服务器无法处理请求。 —> 无法完成此操作。请重试。 —> 无法完成此操作。请重试。<nativehr>0×80004005</nativehr><nativestack></nativestack>

排除了HttpModule代码对该文件路径的影响之后,开始考虑是不是事件顺序的缘故.

之前这个HttpModule是在PostAuthorizeRequest事件中处理重定向逻辑的,经过一番尝试,最后发现只要使用的事件早于PostRequestHandlerExecute,就会引发SharePoint Designer出错.

具体原因未知.

另附上HttpApplication中的事件触发顺序：

BeginRequest
AuthenticateRequest
PostAuthenticateRequest
AuthorizeRequest
PostAuthorizeRequest
ResolveRequestCache
PostResolveRequestCache
PostMapRequestHandler
AcquireRequestState
PostAcquireRequestState
PreRequestHandlerExecute
PostRequestHandlerExecute
ReleaseRequestState
PostReleaseRequestState
UpdateRequestCache
PostUpdateRequestCache
EndReques

另：据说事件过于靠前还会使SharePoint无法上传文件。

版本历史

Windie Chai — Thu, 08 Dec 2011 10:34:24 +0800

« Tagging Contacts 钛金联系人 for Windows Phone 7

v1.1.0.0 2011-12-03

+ 支持查看拥有同一标签的所有联系人
+ 支持将联系人固定到“开始屏幕”

v1.0.0.0 2011-11-24

+ 自动显示“人脉”中的所有联系人
+ 查看联系人的详细信息
+ 管理联系人的标签
+ 通过各种途径与联系人联络
+ 可以向联系人的任何电话号码发送短信
+ 查看所有标签
+ 支持各种主题

Tagging Contacts 钛金联系人 for Windows Phone

Windie Chai — Thu, 08 Dec 2011 10:28:30 +0800

钛金联系人是一个增强版的联系人应用。
您可以通过它来为您的联系人打标签，标签的内容没有任何限制，可以是他（她）最喜爱的食物、特长、昵称，也可以是你们认识的地方、你们的关系等等……
通过标签，您可以在瞬间回忆起他（她)的点点滴滴。
在未来的更新中，您还可以给拥有同一个标签的所有联系人群发短信和邮件，可以完全取代“人脉”的分组功能，而且没有联系人数量限制。

试用版功能

自动显示“人脉”中的所有联系人，并按照首字母分组。
查看联系人的详细信息。
为联系人添加和删除标签。
通过各种途径与联系人联络。
可以向联系人的任何电话号码发送短信。
查看所有标签。
浏览拥有同一个标签的所有联系人。
支持各种主题。

收费版功能

将联系人固定在开始屏幕

系统要求

Windows Phone 7.1（Mango）以及更新的系统

版本

当前版本：1.1.0.0
版本历史»

截图&预览：

下载

前往Windows Phone Marketplace下载安装

使用SharePoint 2010内置的媒体播放器

Windie Chai — Fri, 04 Nov 2011 18:38:17 +0800

SharePoint 2010 内置了一个基于Silverlight的媒体播放器，并且SharePoint 2010内置的一些WebPart会检测其输出内容中的链接，如果链接指向一个媒体文件，那么点击该链接之后就会在当前页面弹出这个播放器进行播放。那么如果我们自己开发了一些功能，要如何使用这个内置播放器呢？本文以一个同样基于Silverlight的幻灯片应用来举例说明，过程并不复杂，很容易应用到服务器端代码或JavaScript等其他开发方式中。

首先我们需要在页面中引入mediaplayer.js，在Silverlight里可以这样写：

if (!System.ComponentModel.DesignerProperties.IsInDesignTool && HtmlPage.Document.GetElementById("IDS_Script_MediaPlayer") == null)
{
    HtmlElement script = HtmlPage.Document.CreateElement("script");
    script.SetAttribute("id", "IDS_Script_MediaPlayer");
    script.SetAttribute("type", "text/javascript");
    script.SetAttribute("src", "/_layouts/mediaplayer.js");
    HtmlPage.Document.Body.AppendChild(script);
}

之后在适当的时候，提前创建一个播放器：

ScriptObject mediaPlayer = HtmlPage.Window.Eval("mediaPlayer") as ScriptObject;
if (mediaPlayer != null)
{
    mediaPlayer.Invoke("createOverlayPlayer");
}

当用户点击了链接时，先判断链接的扩展名是不是被支持的媒体文件，然后根据情况决定弹出播放器或者直接打开链接：

Regex regex = new Regex("\\.wmv|\\.wma|\\.mp3|\\.mp4");
if (this.regex.IsMatch(url))
{
    ScriptObject mediaPlayer = HtmlPage.Window.Eval("mediaPlayer") as ScriptObject;
    if(mediaPlayer!=null)
    {
        ScriptObject overlayPlayer;
        try
        {
            overlayPlayer = mediaPlayer.Invoke("getOverlayPlayer") as ScriptObject;
            if(overlayPlayer==null)
                throw new Exception();
        }
        catch
        {
            mediaPlayer.Invoke("createOverlayPlayer");
            overlayPlayer = mediaPlayer.Invoke("getOverlayPlayer") as ScriptObject;
        }
        try
        {
            overlayPlayer.SetProperty("MediaSource", news.Url.ToString());
            overlayPlayer.SetProperty("MediaTitle", news.Title);
            overlayPlayer.SetProperty("DisplayMode", "Overlay");
            overlayPlayer.Invoke("Play");
        }
        catch
        {
            HtmlPage.Window.Navigate(news.Url, "_blank");
        }
    }
}
else
    HtmlPage.Window.Navigate(news.Url, "_blank");

用Silverlight调用SharePoint User Profile Web Service

Windie Chai — Mon, 17 Oct 2011 19:58:29 +0800

调用SharePoint Web Service本来就不是一件令人愉悦的事情，如果期间在遇到一些诡异的问题的话……譬如我今天遇到的这件 ……

按照惯例，添加好引用，编写代码调用GetUserProfileByNameAsync方法，稍等一下，一个异常抛出了（liao），大概反序列化某个属性时发生了错误。

而这个错误竟然是因为Visual Studio生成的Reference.cs文件和SharePoint提供的WSDL文件映射错误引起的，解决方法就是手工更改Reference.cs文件，该文件的路径是：项目文件夹\Service References\引用名称\Reference.cs。

打开后定位到PropertyData类，我们需要给以下5个属性重新排序，顺序如下：

IsPrivacyChanged
IsValueChanged
Values
Name
Privacy

重新排序的方法就是找到这几个属性，修改它们各自的System.Runtime.Serialization.DataMemberAttribute，修改或增加参数Order，如：

[System.Runtime.Serialization.DataMemberAttribute(IsRequired = true, Order = 1)]
 public bool IsPrivacyChanged { ... }

这一步完成之后，调用GetUserProfileByNameAsync方法不会再抛出异常了，但是拿到的结果中，所有的PropertyData.Values都为null，但其实SharePoint Server已经返回了结果，但这些结果并没有被正确的反序列化出来，好在我们还有办法直接去解析原始的XML结果。

我们首先需要实现一个IEndpointBehavior和IClientMessageInspector：

public class UserProfilesBehavior : IEndpointBehavior
    {
        public UserProfilesInspector Inspector { get; private set; }

        public UserProfilesBehavior()
        {
            this.Inspector = new UserProfilesInspector();
        }

        public void AddBindingParameters(ServiceEndpoint endpoint, BindingParameterCollection bindingParameters)
        { }

        public void ApplyClientBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.ClientRuntime clientRuntime)
        {
            clientRuntime.MessageInspectors.Add(Inspector);
        }

        public void ApplyDispatchBehavior(ServiceEndpoint endpoint, System.ServiceModel.Dispatcher.EndpointDispatcher endpointDispatcher)
        { }

        public void Validate(ServiceEndpoint endpoint)
        { }

    }
    public class UserProfilesInspector : IClientMessageInspector
    {
        public string Account { get; private set; }

        XNamespace xmlns = "http://microsoft.com/webservices/SharePointPortalServer/UserProfileService";

        public void AfterReceiveReply(ref System.ServiceModel.Channels.Message reply, object correlationState)
        {
//像这样取出需要的内容
XDocument document = XDocument.Load(new System.IO.StringReader(reply.ToString()));
            this.Account = this.GetValue(document, "AccountName").ToString();
        }

        private object GetValue(XDocument document, string propertyName)
        {
            var node = document.Descendants().FirstOrDefault((element) => { return element.Name == xmlns + "PropertyData" && element.Element(xmlns + "Name").Value == propertyName; });
            if (node != null)
            {
                var valueNode = node.Descendants(xmlns + "Value").FirstOrDefault();
                if (valueNode != null)
                {
                    return valueNode.Value.Replace("_MThumb","_LThumb");
                }
            }
            return string.Empty;
        }

        public object BeforeSendRequest(ref System.ServiceModel.Channels.Message request, IClientChannel channel)
        {
            return null;
        }

    }

然后更改一下调用Web Service的代码，把刚才写的UserProfilesBehavior以Behavior和UserState的形式进去：

UserProfilesBehavior behavior = new UserProfilesBehavior();
SPUserProfile.UserProfileServiceSoapClient userSoap = new SPUserProfile.UserProfileServiceSoapClient(binding, endpoint);
userSoap.Endpoint.Behaviors.Add(behavior);//添加为Behavior
userSoap.GetUserProfileByNameCompleted += new EventHandler<SPUserProfile.GetUserProfileByNameCompletedEventArgs>(userSoap_GetUserProfileByNameCompleted);
userSoap.GetUserProfileByNameAsync(people.Account, behavior);//添加为UserState

那么在GetUserProfileByNameAsync完成时的事件处理程序中，就可以通过UserState——也就是刚才编写的UserProfilesBehavior来拿到需要的数据了：

void userSoap_GetUserProfileByNameCompleted(object sender, SPUserProfile.GetUserProfileByNameCompletedEventArgs e)
{
            if (e.Error == null)
            {
                UserProfilesBehavior behavior = (UserProfilesBehavior)e.UserState;
string account = behavior.Inspector.Account;
            }
}

参考资源：http://social.msdn.microsoft.com/Forums/en-US/sharepointdevelopment/thread/d1c6a143-dc1b-4788-8431-e16f0269f8b4/

版本历史

Windie Chai — Wed, 31 Aug 2011 15:58:30 +0800

« Human Calendar for Windows Phone 7

v1.2.0.0 2011-09-26

+ 支持中文显示（仅指界面，非日历）
+ 支持在后台只更新Tile图片，以节省流量
+ 延长后台任务的默认过期时间（14天），请在每两周内打开一次应用来延长后台任务的过期时间。

v1.1.0.0 2011-09-01

+ 当www.humancalendar.com没有提供日历时，显示默认日历
* 改善用户界面
* 减小程序体积

v1.0.0.0 2011-08-25

+ 支持显示当月日历
+ 支持固定到开始屏幕并显示当天日历
+ 支持后台更新

Human Calendar for Windows Phone

Windie Chai — Wed, 31 Aug 2011 15:52:06 +0800

Human Calendar是一款Windows Phone 7上的日历应用，和寻常的日历有所不同，Human Calendar中的日期都是一个个现实生活中的人物，表情丰富、俏皮可爱，在查看日期的同时也能给您带来一份好心情。

感谢the human calendar ®提供API。

功能介绍

Human Calendar包含一个完整的当月日历和一个当天日历，当您把Human Calendar固定到开始屏幕后，您就可以看到当天日历了，当天日历是一个四格日历，提供年月日以及星期信息。

Human Calendar支持后台每日自动更新日历以及启动应用时自动更新日历，您可以根据喜好来选择。

系统要求

Windows Phone 7.1（Mango）以及更新的系统

版本

当前版本：1.2.0.0
版本历史»

截图&预览：

下载

使用Zune客户端下载到手机

『 听 风 且 吟 』技术版

CSS文字围绕效果

Windows Phone WebBrowser的技巧

1.显示HTML片段

2.禁止缩放

3.接管横向滑动

隐藏SharePoint User Profile页面中的提示文本

SharePoint HttpModule和SharePoint Designer的冲突

版本历史

« Tagging Contacts 钛金联系人 for Windows Phone 7

Tagging Contacts 钛金联系人 for Windows Phone

试用版功能

收费版功能

系统要求

版本

截图&预览：

下载

使用SharePoint 2010内置的媒体播放器

用Silverlight调用SharePoint User Profile Web Service

版本历史

« Human Calendar for Windows Phone 7

Human Calendar for Windows Phone

功能介绍

系统要求

版本

截图&预览：

下载

『听风且吟』技术版