博客园_liulun

使用jstree创建无限分级的树(ajax动态创建子节点)

2012-05-29T06:30:00Z

首先来看一下效果

页面加载之初

节点全部展开后

首先数据库的表结构如下

其中Id为主键,PId为关联到自身的外键

两个字段均为GUID形式

层级关系主要靠这两个字段维护

其次需要有一个类型

public class MenuType
{
public Guid Id { get; set; }
public Guid PId { get; set; }
public string MenuName { get; set; }
public string Url { get; set; }
public int OrderNum { get; set; }
public int SonCount { get; set; }
}

此类型比数据库表增加了一个属性

SonCount

这个属性用来记录当前节点的子节点的个数

注意：也可以把此属性放在数据库中，性能上会提升一些，但需要增加额外的代码来维护此字段

接下来看一下取数据的方式

protected void Page_Load(object sender, EventArgs e)
{
if (Request["Action"] == "AJAX")
{
var result = GetMenu(Request["pid"]);
JavaScriptSerializer serializer = new JavaScriptSerializer();
string sRet = serializer.Serialize(result);
Response.Write(sRet);
Response.End();
}
}

页面加载之初判断是否需要获取菜单数据

其中请求参数pid为客户端需要获取的节点ID

如果请求顶级节点，则此参数的值为00000000-0000-0000-0000-000000000000

GetMenu函数获取需要请求的节点数据

private List<MenuType> GetMenu(string pid)
{
var result = new List<MenuType>();
SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=SHU;User ID=sa;Password=allen;");
conn.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "select a.*,b.cout as count from Menu a left join (select COUNT(*) as cout,Menu.PId from Menu group by Menu.PId) as b on a.Id = b.PId where a.PId = '" + pid + "' order by OrderNum";
SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
while (dr.Read())
{
var obj = new MenuType();
obj.Id =Guid.Parse(dr["Id"].ToString());
obj.MenuName = dr["MenuName"].ToString();
obj.OrderNum = Convert.ToInt32(dr["OrderNum"]);
obj.PId = dr["PId"] == DBNull.Value ? Guid.Empty : Guid.Parse(dr["PId"].ToString());
obj.Url = dr["Url"].ToString();
obj.SonCount = dr["count"] == DBNull.Value ? 0 : Convert.ToInt32(dr["count"]);
result.Add(obj);
}
return result;
}

在本DEMO中使用JavaScriptSerializer来序列化菜单数组

前台的代码如下

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="Scripts/themes/default/style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.jstree.js" type="text/javascript"></script>
<script>
$(function () {
$.getJSON("/default.aspx?ACTION=AJAX&pid=00000000-0000-0000-0000-000000000000", function (result) {
$.each(result, function (i, item) {
var typeN = item.SonCount > 0 ? "jstree-closed" : "jstree-leaf";
$("#tree").append("<li id='phtml_" + item.Id + "' class='" + typeN + "'><a href='#'>" + item.MenuName + "</a></li>");
});
$("#demo2").jstree({
"plugins": ["themes", "html_data", 'types', "ui", "checkbox"],
'core': { 'animation': 0 },
"types": { "types":
{
"person": { "icon": { "image": "/Scripts/themes/default/person.png"} },
"depar2": { "icon": { "image": "/Scripts/themes/default/depar2.png"} },
"default": { "icon": { "image": "/Scripts/themes/default/depar1.png"} }
}
}
}).bind("open_node.jstree", function (e, data) {
var id = data.rslt.obj[0].id;
if ($("#" + id + " li").length > 0) { return; }
$.getJSON("/default.aspx?ACTION=AJAX&pid=" + id.replace("phtml_", ""), function (result) {
var str = "<ul>"
$.each(result, function (i, item) {
var typeN = item.SonCount > 0 ? "jstree-closed" : "jstree-leaf";
var icon = item.SonCount > 0 ? "depar2" : "person";
str += "<li rel = '" + icon + "' id='phtml_" + item.Id + "' class='" + typeN + "'><a href='#'> " + item.MenuName + "</a></li>";
});
str += "</ul>";
$("#" + id).append(str);
var tree = jQuery.jstree._reference("#" + id);
tree.refresh();
$("ins[class='jstree-checkbox jstree-icon']").removeClass("jstree-icon");
$(".jstree-checkbox").attr("style", "");
});
});
});
});

</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="demo2">
<ul id="tree">
</ul>
</div>
</asp:Content>

页面加载之初，先请求顶级节点

如果顶级节点的SonCount属性大于0

则使节点为闭合状态（样式为jstree-closed）

如果节点无子节点

则该节点的样式为jstree-leaf

当用户点击闭合状态的节点时，客户端发起请求

并把点击节点的ID传给后端，后端获取到点击节点的子节点后

通过append添加到点击节点下

至此，无限分级的树创建完成

其中不包含数据库

---------------------------------------------------------------------------

喜欢本文的，请点支持，有问题请在本文下评论，我会及时回复的

谢谢大家

本文链接

使用Raphael绘制流程图，自绘动态箭头，可拖动，有双击事件，纯前端，兼容各种浏览器

2012-05-18T03:17:00Z

关于Raphaël

Raphaël是一个在网页上绘图的js类库，非常小压缩版只有89k左右

官方宣称兼容各种主流浏览器，据笔者测试在IE6下尚有一些问题（不过这些与本文无关）

他是使用js来创建vml或svg来绘图的

缘起

项目中不能使用Silverlight或者flash来解决绘图和拖动的问题

而且为了项目效果较好，要求拖动的时候箭头能动态改变起点和重点，别且箭头要改变方向

所以只能考虑JS了

效果

演示

http://www.mrlh.net/flowchart/demo.htm

源码

引用

这两个东西是不相干的，引用先后顺序也无所谓

页面加载完成后的代码

$(function () {
//用来存储节点的顺序
var connections = [];
//拖动节点开始时的事件
var dragger = function () {
this.ox = this.attr("x");
this.oy = this.attr("y");
this.animate({ "fill-opacity": .2 }, 500);
};
//拖动事件
var move = function (dx, dy) {
var att = { x: this.ox + dx, y: this.oy + dy };
this.attr(att);
$("#test" + this.id).offset({ top: this.oy + dy + 10, left: this.ox + dx + 10 });
for (var i = connections.length; i--; ) {
r.drawArr(connections[i]);
}
};
//拖动结束后的事件
var up = function () {
this.animate({ "fill-opacity": 0 }, 500);
};
//创建绘图对象
var r = Raphael("holder", $(window).width(), $(window).height());
//绘制节点
var shapes = [
r.rect(190, 100, 60, 40, 4),
r.rect(290, 80, 60, 40, 4),
r.rect(290, 180, 60, 40, 4),
r.rect(450, 100, 60, 40, 4)
];
//定位节点上的文字
$("#test1").offset({ top: 100 + 10, left: 190 + 10 });
$("#test2").offset({ top: 80 + 10, left: 290 + 10 });
$("#test3").offset({ top: 180 + 10, left: 290 + 10 });
$("#test4").offset({ top: 100 + 10, left: 450 + 10 });
//为节点添加样式和事件，并且绘制节点之间的箭头
for (var i = 0, ii = shapes.length; i < ii; i++) {
var color = Raphael.getColor();
shapes[i].attr({ fill: color, stroke: color, "fill-opacity": 0, "stroke-width": 2, cursor: "move" });
shapes[i].id = i + 1;
shapes[i].drag(move, dragger, up);
shapes[i].dblclick(function () { alert(this.id) })
}
//存储节点间的顺序
connections.push(r.drawArr({ obj1: shapes[0], obj2: shapes[1] }));
connections.push(r.drawArr({ obj1: shapes[1], obj2: shapes[2] }));
connections.push(r.drawArr({ obj1: shapes[2], obj2: shapes[3] }));
});

这些代码注释比较详细，就不多说了

在这些代码中涉及到操作的界面元素HTML代码如下

其中关键元素的样式如下

#holder
{
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
position: absolute;
z-index: 999;
}
test
{
position: absolute;
width: 80px;
height: 30px;
top: 0px;
z-index: 0;
}

在拖动事件中，动态改变了节点文本元素的位置

并且重绘了节点和箭头

drawArr是一个自定义方法，负责修改箭头的方向，代码如下

//随着节点位置的改变动态改变箭头
Raphael.fn.drawArr = function (obj) {
var point = getStartEnd(obj.obj1, obj.obj2);
var path1 = getArr(point.start.x, point.start.y, point.end.x, point.end.y, 8);
if (obj.arrPath) {
obj.arrPath.attr({ path: path1 });
} else {
obj.arrPath = this.path(path1);
}
return obj;
};

首先需要确定箭头的起始位置，

point包含两个点，

point.start为起点,

point.end为终点，

然后需要确定箭头的绘图路径

一个箭头包含三个线段，四个点

1:起点，2:终点，3:箭头终点1，4:箭头终点2

在此函数中，判断如果箭头已经被绘制过，

只要修改属性即可

如果没有被绘制过，则需要重新绘制

下面来看一下动态确定起点和终点的代码

这段代码来自Raphael官方demo

不是我写的

也一时半会说不清楚，

大家还是自己去研究吧

确定箭头路径的代码如下

//获取组成箭头的三条线段的路径
function getArr(x1, y1, x2, y2, size) {
var angle = Raphael.angle(x1, y1, x2, y2);//得到两点之间的角度
var a45 = Raphael.rad(angle - 45);//角度转换成弧度
var a45m = Raphael.rad(angle + 45);
var x2a = x2 + Math.cos(a45) * size;
var y2a = y2 + Math.sin(a45) * size;
var x2b = x2 + Math.cos(a45m) * size;
var y2b = y2 + Math.sin(a45m) * size;
var result = ["M", x1, y1, "L", x2, y2, "L", x2a, y2a, "M", x2, y2, "L", x2b, y2b];
return result;
}

此函数把箭头路径作为数组反馈给调用函数

数组中

M表示画笔起点移动到此点

L表示从某点绘制到某点，绘制直线

以上函数反馈结果的意思是：

画笔从（x1,y1）开始绘制直线到(x2,y2),然后从(x2,y2)绘制直线到(x2a,y2a)然后画笔移动到(x2,y2)然后从(x2,y2)绘制直线到(x2b,y2b)

在确定这几个点的过程中

用到了一些数学知识，具体原理也不多说了

喜欢的朋友请点支持！谢谢大家！

本文链接

【翻译】Windows8支持WebSocket（相关技术）

2012-03-30T02:29:00Z

原文地址：

http://www.infoq.com/news/2012/03/websocket-windows

鉴于Windows 8客户预览版已经很好的支持WebSocket协议和WebSocket API

asp.net 开发人员可以使用System.Web.Websockets类库来实现双向通信的功能

在windows 8客户预览版和Server beta版本中

IE10、所有的微软WebSocket客户端和服务端功能都支持

最新版本的 IETF WebSocket 协议

另外，IE10还实现了W3C的候选版 WebSocketAPI

微软IE团队的官方博客详细解释了这些内容

与此同时，

ASP.NET开发人员可以使用.Net Framework4.5引入的

System.Web.WebSocket名称空间来使用此项技术

这个名称空间不同于System.Net.Websockets名称空间

前者把这些技术集成到asp.net框架中

后者只是提供了.Net框架下标准WebSocket的实现

WebSocket技术提供了基于TCP Socket的双向通信信道技术

这与Comet Channels技术很接近

Comet Channels技术允许web服务器

不接受请求就直接发送数据到web客户端

尽管这项技术很早就已经出现了

（谷歌chorme浏览器早在2009年就宣布支持Comet Channels）

但是直到去年12月份，

Internet Engineering Task Force才接受它

本文链接

【翻译】Prism4：初始化Prism应用程序（上）

2012-03-28T03:43:00Z

什么是Bootstrapper（引导程序）

bootstrapper负责初始化使用Prism类库搭建的应用程序

使用bootstrapper，你可以更方便的控制Prism类库组件与你的应用程序之间的关系

Prism类库包含一个默认的抽象基类Bootstrapper

这个类型可以与任何容器一起使用

这个类型中的大多数方法都是虚方法

你可以在你的bootsrapper实现中重写这些方法

引导程序执行的基本步骤如下：

Prism类库提供了一些派生自Bootstrapper类的基类

使用这些基类可以完成绝大多数应用程序

继承实现bootsrapper，

你需要做的工作只是创建和初始化框架界面

依赖注入

使用Prism类库搭建的应用程序需要使用依赖注入容器

Prism支持Unity和MEF依赖注入容器

并且允许使用其他的依赖注入容器

引导程序的部分工作就是装配这个容器

并为容器注册类型

Prism类库包含UnityBootstrapper和MefBootstrapper类

这两个类实现了使用Unity或MEF所必须的功能

除了在前面的插图中展示的步骤

这两个类型还添加了针对各自容器的特殊步骤

创建框架

一般创建WPF应用程序，

APP.XAML中会指定一个启动画面的URI

在Silverlight应用程序中

APP.XAML的后端代码中指定了系统的RootVisual属性

使用Prism类库创建应用程序

bootstrapper负责创建框架画面

这主要是因为框架画面依赖于服务

这些服务类似与区域主管

这些服务在框架画面显示之前被注册

关键决定

当你决定使用Prism类库

还需要做出一些额外的决定：

必须决定是使用MEF、Unity还是其他的依赖注入容器

这决定你应该选择哪个bootstrapper类型

还是需要为你自己的依赖注入容器创建一个新的bootstrapper类型

你应该考虑你系统中的特殊服务单元，

这些需要注册到依赖注入容器内

判断是否系统内部集成的日志服务足够你使用了，

如果不够你要自己创建你自己的日志服务

决定系统如何发现模块

使用目录查找、配置文件、或者xaml来加载模块

（模块必须由明确的特性代码标记）

关键场景

指定有序的启动环节

对你创建Prism应用程序来说非常有用

这一小节主要描述怎样创建一个bootstrapper（引导程序）、

并定制这个引导程序以启动自己的框架画面、

配置依赖注入容器、

注册系统级别的服务、

怎样加载和初始化模块

为你的应用程序创建Bootstrapper

无论你是选择使用Unity还是MEF作为你的依赖注入容器

为你的应用程序创建一个简单的bootstrapper

都是非常容易的

你可以创建一个派生自MefBootstrapper或者UnityBootstrapper的类

然后重写CreateShell方法

有时候你还需要为了特殊的业务需求而重写InitializeShell方法

实现CreateShell方法

CreateShell方法允许开发人员指定Prism应用程序的top-level（顶层）窗口

Shell通常是指主窗口或注页面

在这个方法的具体实现中返回一个Shell的实例

在Prism应用程序中

你可以创建一个Shell的实例

也可以从依赖注入容器中取出shell的对象

选择哪种办法，就看你的需求了。

使用ServiceLocator从依赖注入容器中取出

shell对象的示例代码如下：

protected override DependencyObject CreateShell()
{
return ServiceLocator.Current.GetInstance<Shell>();
}

你会经常使用ServiceLocator（而不是特殊的依赖注入容器）来解析一些类型的实例

ServiceLocator实现了调用依赖注入容器的逻辑

这样主要是为了应对依赖注入容器代码不容易控制的特性

你也可以通过直接引用类库来使用依赖注入容器

实现InitializeShell方法

当你创建了一个框架画面(shell)

你需要执行初始化的几个步骤来确定你的框架画面可以被正常显示

开发WPF和开发Silverlight应用程序

InitializeShell方法的实现方式也会不同

对于Silverlight应用程序来说

你需要把框架画面设置成系统的visual root

代码如下：

protected override void InitializeShell()
{
Application.Current.RootVisual = Shell;
}

对于WPF应用程序

你必须先实例化shell类型

然后把这个实例设置成系统的主窗口

代码如下：

protected override void InitializeShell()
{
Application.Current.MainWindow = Shell;
Application.Current.MainWindow.Show();
}

基类的InitializeShell方法什么也没有做，是个空方法

不调用基类的InitializeShell方法也没有关系。

本文链接

【翻译】WPF应用程序模块化开发快速入门（使用Prism+MEF）【下】

2012-03-26T01:51:00Z

索引

【翻译】WPF应用程序模块化开发快速入门（使用Prism框架）【上】

【翻译】WPF应用程序模块化开发快速入门（使用Prism+MEF）【中】

系统启动

系统使用Bootstrapper类型来启动程序，并初始化主窗口

/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);

// The boostrapper will create the Shell instance, so the App.xaml does not have a StartupUri.
QuickStartBootstrapper bootstrapper = new QuickStartBootstrapper();
bootstrapper.Run();
}
}

QuickStartBootstrapper类型继承自MefBootstrapper类型

为了创建和显示主窗口，此类型重写了CreateShell和InitializeShell方法

protected override DependencyObject CreateShell()
{
return this.Container.GetExportedValue<Shell>();
} protected override void InitializeShell()
{
base.InitializeShell();

Application.Current.MainWindow = (Shell) this.Shell;
Application.Current.MainWindow.Show();
} 创建模块在此快速入门示例中创建了六个模块这些模块都实现了IModule接口添加了相关的特性选择了依赖属性 [ModuleExport(typeof(ModuleA), DependsOnModuleNames = new string[] { "ModuleD" })]
public class ModuleA : IModule当使用MEF框架的时候ModuleExport特性允许MEF发现适当的、继承自IModule接口的类型。此外：它还支持详细说明额外模块的元数据注册模块在快速入门示例中系统直接引用了一些模块通过监控目录发现了一些模块还有一些模块是通过配置文件加载的QuickStartBootstrapper类型还重写了CreateModuleCatalog和ConfigureModuleCatalog方法这样就可以通过配置文件来注册模块使用MEF时AggregateCatalog支持发现模块和类型基于此，QuickStartBootstrapper重写ConfigureAggregateCatalog模版方法并使用MEF注册程序集仍然使用ModuleCatalog加载配置文件来注册模块 protected override IModuleCatalog CreateModuleCatalog()
{
// When using MEF, the existing Prism ModuleCatalog is still the place to configure modules via configuration files.
return new ConfigurationModuleCatalog();
} protected override void ConfigureAggregateCatalog()
{
base.ConfigureAggregateCatalog();

// Add this assembly to export ModuleTracker
this.AggregateCatalog.Catalogs.Add(new AssemblyCatalog(typeof(QuickStartBootstrapper).Assembly));

// Module A is referenced in in the project and directly in code.
this.AggregateCatalog.Catalogs.Add(new AssemblyCatalog(typeof(ModuleA).Assembly));
this.AggregateCatalog.Catalogs.Add(new AssemblyCatalog(typeof(ModuleC).Assembly));

// Module B and Module D are copied to a directory as part of a post-build step.
// These modules are not referenced in the project and are discovered by inspecting a directory.
// Both projects have a post-build step to copy themselves into that directory.
DirectoryCatalog catalog = new DirectoryCatalog("DirectoryModules");
this.AggregateCatalog.Catalogs.Add(catalog);
}

加载模块

在此快速入门中即有在系统启动时加载模块的业务也有按需加载模块的业务还有显示进度、控制模块间的依赖性等业务注意：此快速入门示例还有一些额外的类以帮助追踪模块初始化的状态信息这些类主要是起了示范的目的Shell的用户界面里包含了六个ModuleControlShell的DataContext是ModuleTrackerModuleTracker类型为每个模块保存一个ModuleTrackingStateModuleTrackingState绑定到与之对应的ModuleControlModuleControl使用一个默认的样式来展现模块的加载和初始化状态当点击ModuleControl自定义控件的时候将触发如下事件： /// <summary>
/// Handles the RequestModuleLoad event of the ModuleC control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
private void ModuleC_RequestModuleLoad(object sender, EventArgs e)
{
// The ModuleManager uses the Async Events Pattern.
this.moduleManager.LoadModule(WellKnownModuleNames.ModuleC);
} 此事件被触发的时候会同时触发moduleManager的ModuleDownloadProgressChanged事件此事件是在shell页面的OnImportsSatisfied方法中被注册的 this.moduleManager.LoadModuleCompleted += this.ModuleManager_LoadModuleCompleted;
this.moduleManager.ModuleDownloadProgressChanged += this.ModuleManager_ModuleDownloadProgressChanged; /// <summary>
/// Handles the LoadModuleProgressChanged event of the ModuleManager control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="Microsoft.Practices.Composite.Modularity.ModuleDownloadProgressChangedEventArgs"/> instance containing the event data.</param>
private void ModuleManager_ModuleDownloadProgressChanged(object sender, ModuleDownloadProgressChangedEventArgs e)
{
this.moduleTracker.RecordModuleDownloading(e.ModuleInfo.ModuleName, e.BytesReceived, e.TotalBytesToReceive);
}

当模块加载完成后

shell页面也会被通知到

/// <summary>
/// Handles the LoadModuleCompleted event of the ModuleManager control.
/// </summary>
/// <param name="sender">The source of the event.</param>
/// <param name="e">The <see cref="Microsoft.Practices.Composite.Modularity.LoadModuleCompletedEventArgs"/> instance containing the event data.</param>
private void ModuleManager_LoadModuleCompleted(object sender, LoadModuleCompletedEventArgs e)
{
this.moduleTracker.RecordModuleLoaded(e.ModuleInfo.ModuleName);
} 关键类（略）这个系列含金量不高啊

本文链接

【翻译】WPF应用程序模块化开发快速入门（使用Prism+MEF）【中】

2012-03-19T05:14:00Z

索引

【翻译】WPF应用程序模块化开发快速入门（使用Prism框架）【上】

编译并运行快速入门

需要在VisualStudio 2010上运行此快速入门示例

代码下载：ModularityWithMef.zip

先重新生成解决方案

再按F5运行此示例

说明：

在此快速入门示例解决方案的

ModularityWithMef.Desktop程序集中

加入了生成成功时的“后期生成事件命令行”

IF NOT EXIST "$(TargetDir)\DirectoryModules"

mkdir "$(TargetDir)\DirectoryModules"

此命令含义为：
如果在此程序集的bin目录中没有DirectoryModules目录
则创建此目录
预先生成事件/后期生成事件命令行的宏请看MSDN的注释：
http://msdn.microsoft.com/zh-cn/library/aa833259(v=vs.80).aspx

可以在程序集->属性->生成事件中查看修改这些命令行

ModuleB程序集的成功生成时的“后期生成事件命令行”

xcopy "$(TargetDir)ModularityWithMef.Desktop.ModuleB.dll"

"$(SolutionDir)ModularityWithMef.Desktop\bin\$(ConfigurationName)\DirectoryModules\" /Y

含义为
把自身生成的dll复制到DirectoryModules目录下

ModuleD的程序集也有类似的命令行

另外

ModuleE和ModuleF生成的DLL会被拷贝到

ModularityWithMef.Desktop程序集的debug目录下

演练

运行程序

主窗口包含六个模块

每个模块都展示了各自的初始化状态。

应用程序加载的时候

程序就发现并初始化了模块A和模块D

程序启动的时候，通过监视目录，

发现了ModuleD，就把它初始化了。

当模块A可用的时候才可被加载

模块A依赖于模块D

当模块D加载之后，模块A才被初始化

窗口下部的跟踪区域显示了模块初始化的信息

注意：
如果没有依赖关系的话，模块的加载是无顺序的。

鼠标移动到模块A控件上，显示了一个描述性提示，如下图：

提示信息为：

当前控件的状态，是否被发现，

是否被初始化，下载时间和依赖性等信息

点击模块B和模块C

两个模块的初始化信息都会随之改变

点击这两个模块会触发这两个模块的加载事件

系统通过监视文件夹发现模块B

模块C是被直接引用到系统中的

这两个模块都是在需要的时候才被加载的

当点击模块F的时候，

模块E和模块F被加载。如下图

虽然模块F先被点击

但是由于依赖关系的原因

系统先初始化模块E，再初始化模块F

本文链接

【翻译】WPF应用程序模块化开发快速入门（使用Prism框架）【上】

2012-03-16T00:15:00Z

这篇快速入门文章包括如何使用Prism进行编码、探索和创建模块的示例

创建模块：

模块是实现了IModule接口的类，

可以通过声明特性来给模块命名、控制其初始化、定义依赖等

注册模块：

模块可以通过以下方式注册：

直接使用代码：

可以直接使用代码把模块注册到模块目录

这样你就可以咱找业务逻辑来决定哪些模块需要注册到系统中来

在代码中注册的模块需要引用到系统中来，不能在运行时动态加载

使用配置文件：

Prism支持通过加载一个配置文件来注册模块

这与在Silverlight中使用XAML方法注册模块的场景非常类似

在配置文件中声明模块可以让系统决定什么时候加载和初始化模块

通过监视目录

可以指定一个目录，

如果有程序集被添加到此目录中，

系统将自动发现程序集内的模块。

注册模块依赖：

模块可以依赖于其他模块，

Prism支持管理依赖。

包括控制循环引用和重复模块检测等功能。

初始化化模块：

prism支持两种初始化模块的方式：

在可用的时候初始化：

模块可以在其可用的时候即马上被初始化，

模块在应用程序启动的时候被下载，

当模块在后台线程中下载完毕后马上就被初始化了。

在需要的时候初始化：

模块可以在系统代码调用它的时候再进行初始化，

当系统代码调用模块的时候，后台线程开始下载模块

当模块下载成功后马上初始化

在后台下载模块

尽管对于silverlight应用程序来说在后台下载模块是非常有用

桌面应用程序现在也可以利用这个改进来发现和加载程序集

显示进度：

应用程序可以订阅一个“进度改变”事件

以展示下载的byte数量和下载进度百分比，

下载完成行为：

程序可以订阅一个加载“模块完成”事件，

以处理模块加载和初始化完成后的额外事件

使用不同的依赖注入容器

一般在“快速入门”的示例中都是使用Unity依赖注入容器

虽然核心类库的代码仍然“容器-未知”（container-agnostic）

但却使用了.Net4的MEF依赖注入容器插件。

这里有两个使用不同依赖注入容器的快速入门示例

MEF模块化：

此模块化快速入门示例使用MEF倚赖注入容器

Prism推荐使用MEF的声明式特性

使ModuleCatalog和MEF的ComposablePartsCatalog成为一体

Unity模块化：

此模块化快速入门示例使用Unity倚赖注入容器

场景

这一小节描述两个快速入门示例的相同场景，

每个快速入门示例都由六个模块组成

ModuleA、ModuleB、ModuleC、ModuleD、ModuleE、ModuleF

这些模块示例展示了模块是怎么被发现、下载和初始化的

模块	注册方式	初始化方式	下载方式	依赖
A	代码	直接	随程序集	D
B	目录	按需	后台
C	代码	按需	随程序集
D	目录	直接	后台
E	配置	按需	后台
F	配置	按需	后台	E

每个示例中所有的模块都是一个控件

这些控件展示了以下信息：

是否已经被初始化、下载进度、按需加载的控件可以在点击事件中初始化

这些控件还提供了一个tooltip

以显示它现在的初始化状态和被发现的信息

在快速入门示例的最下面

有一个TextBox控件

在这里展示从程序创建开始到模块加载过程中的日志记录

下图为使用模块化MEF快速入门示例的主页

模块化快速入门示例的用户界面（桌面版本）

----------------------------------------------------------------

原文是个PDF中的一部分

在这里下载的

http://mef.codeplex.com/

您的推荐是我把这个系列写完的动力~

本文链接

【翻译】VisualStudio11中的CSS编辑器改进（asp.net 4.5系列）-ScottGu

2012-02-26T06:37:00Z

这是我所发的关于ASP .NET 4.5系列博文的第七篇文章。

下一个版本的.NET和Visual Studio包括大量的新特性和新功能

在开发ASP.NET 4.5 WebForms和Mvc的时候

你会看到很多功能上的改进

（不管是基于核心ASP.NET还是一些其他的扩展）

在本篇文章中将会涵盖

下一个版本的VisualStudio关于支持在ASP.NET中使用CSS3的一些改进

CSS Color Picker

在VisualStudio的早起版本中，

CSS编辑器的智能提示引擎包括了一个颜色名称的下拉列表（硬编码）

新版本的VisualStudio

使用了一个功能齐全的颜色选择器

可以很容易的创建新的颜色样式

也可以很容易的从样式表内选择其他地方使用过的颜色

当你使用CSS编辑器编辑一个CSS样式的颜色属性时

一个颜色拾色器将会自动出现

默认情况下

他显示了之前您使用过的颜色

以及一些推荐使用的颜色

你可以使用鼠标或者键盘在这个列表中选择一个颜色

你可以选择”+”图标以展开一个更精细颜色选择列表

移动opacity（透明度）滑块，

可以控制alpha通道自动把任何颜色转化成CSS3 RGBA值

还有一个“颜色选择”功能

可以让你使用“吸管”工具从浏览器或其他应用程序中拾取颜色

（译者：造就该有这个功能了！）

在这个60秒的视频中，演示了颜色拾取器的使用方法

跨浏览器和CSS3片段

写样式表时，有时会有一些重复的工作，

经常会为不同版本的浏览器写兼容样式

在某些情况下需要写五个相同的值

为了支持所有的浏览器

必须做这些乏味的工作

在新版本的VisualStudio中

支持CSS片段，自动生成所有浏览器厂商的特定属性

这意味着没有更多繁琐的搜索和打字工作以使你的CSS兼容所有浏览器

css片段就像我们在VS中使用其他代码片段一样

（译者注：关于CodeSnippet的内容，请参看这里）

例如：调用CSS3的transition属性

只要简单的输入“transition”或者从智能提示中选择此样式即可

然后按tab键，VisualStudio会执行CSS的transition的代码片段

并生成相应的代码，以支持所有的浏览器！

并且可以只改一次样式值，就可以把所有选中值都改掉

（译者：真好啊！）

点此观看关于CSS代码片段的六十秒视频

CSS层级缩进

现实中,开发网站的样式表代码时，

你会发现保持良好的缩进和层级关系已经成为一个趋势

一个树状的CSS样式

可以更好的体现样式之间的层级关系

和在样式属于哪些网页中的元素

在VisualStudio的早期版本中

手动保持这些层级缩进是比较繁琐的工作

如果你格式化CSS代码（译者注：这里应该是指按快捷键ctl+e,d），

会清空所有的层级和缩进

这就要求你必须谨慎的使用代码格式化功能

在VisualStudio的下一个版本中，

加入了创建CSS的层级结构的功能

并且可以只格式化选中的内容

这使得审查复杂的样式关系和样式间的层级关系变得非常容易

VisualStudio中全新的CSS编辑器也支持常见的CSS hack

这方面的内容也会体现在CSS的层级结构中

关于CSS层级结构和60秒视频

小节

在asp.net和VisualStudio的新版本中将更容易的使用CSS

这篇文章包括一些我们在VS上支持CSS编辑器的改进

本文链接

【翻译】WCF4.5:更少的配置和ASP.NET更好的支持

2012-02-12T06:40:00Z

原文地址：

http://www.infoq.com/news/2012/02/WCF-4.5

Ido Flatow发表了一些列的博客，来讲述.NET4.5中关于WCF的更新

链接地址：

http://blogs.microsoft.co.il/blogs/idof/archive/2011/10/05/what-s-new-in-wcf-4-5-automatic-https-endpoint-for-iis.aspx

（有时间的话我会陆续翻译）

出于削减复杂性的目的，WCF自动生成的配置文件将会变得非常、非常的小。自从第一个版本的WCF以来，开发人员发现他们需要维护一个大概有30个配置节的app.config文件，而这些配置节都可以用默认值来代替。谁都知道删除这些多余的设置比较好,但不幸的是，谁都没有学会这一招！在WCF 4.5中配置文件只需要设置绑定的类型和名称即可！

当然这导致了另一个问题：“我怎么知道这些设置是什么呢？”为了回答这个问题，我们必须知道配置文件后端的代码（与配置信息相关的代码），并且配置文件的提示并不在是基于schema的智能提示。如果你正在编辑一个endpoint，你需要知道一个behavior的名字，这个时候开发工具会把可用的behavior的名字都给你列出来。在编译时一些配置文件的错误，如契约类型(contract type)行为名称(behavior name)的错误都会被提示出来。

对于那些直接使用WSDL的开发人员来说，也有好消息。WCF 4.5将会在一个单独的请求中返回一个完整的WSDL。在此之前，只会包含一部分WSDL，这将需要一系列的XSD文件来匹配这个WSDL。使用?singleWsdl查询字符串取代?singleWsdl可以使用这个改进

把WCF服务寄宿到系统服务内是完全可行的。但大多数开发人员继续在IIS下完成大量的工作。为什么呢？因为IIS提供了很多内置的支持功能，比如身份验证，状态管理和进程回收等。但在IIS下开发WCF服务仍然有一些限制，微软也正在解决这些问题。比如：必须通过配置才能解决在两个地方的身份认证服务，如果他们由于异常而没有同步，那么这个WCF服务就会停止运行。WCF4.5通过允许服务按IIS的方式来进行身份认证（设置身份认证的方式为“继承自宿主InheritedFromHost”）除掉了此类型的BUG

不幸的的是这只是一个局部修复，如果IIS激活了多个身份验证类型，那么客户端只会知道第一个。当然客户端开发人员会找到另一种方法解决这个问题：他们可以使用另一种类型重写这个身份验证类型。

在为基于HTTPS的服务构造URIs对象时，在WSDL信息中显示了一个BUG，在.net 4中WCF有自动选择端口的特性（针对各种类型的绑定，TCP,HTTP等）不幸的是，HTTPS在那是还没有被包括进来。在.NET4.5中这些疏忽将被纠正。Ido Flatow认为HTTPS 版本是在为主机名做广告而不是访问WSDL的宿主名（host name），这些可能将成为使用web form时的问题。

另一个bug是关于WCF传输流数据的，Ido Flatow:

当你把WCF服务寄宿在IIS上时，即使你没有使用asp.net兼容模式，你也一样会得到asp.net处理管线的一部分。可以在MSDN文档：WCF服务和ASP.NET（查找PostAuthenticateRequest Event部分）找到相关内容。在.Net 4中，ASP.NET里有一个设计缺陷，对WCF的请求会在ASP.NET中缓冲，这些缓冲行为会引起一些副作用

这不仅仅造成处理请求的延时，更严重的是，相当大的一部分内容溢出到硬盘上了。

在WCF 4.5中解决了这个问题。

本文链接

【翻译】在没有安装ASP.NET MVC3的服务器上运行ASP.NET MVC3的程序-scottgu

2012-02-05T04:16:00Z

原文地址：
http://weblogs.asp.net/scottgu/archive/2011/01/18/running-an-asp-net-mvc-3-app-on-a-web-server-that-doesn-t-have-asp-net-mvc-3-installed.aspx
为了更符合中文阅读习惯，我对原文做了小幅度修改

最近我们发布了一些新的Web产品 - 包括ASP.NET MVC 3。至今为止，我们已经获得了大量的反馈。

有几个朋友在问我一个问题：“我的网站托管服务提供商目前还不支持ASP.NET MVC 3 - 你知道他们将来什么时候会安装吗？”

好消息是，您不必等他们在Web服务器上安装ASP.NET MVC3。

只要您的网站托管服务提供商支持.NET 4，那么您现在就可以构建和部署ASP.NET MVC3应用程序了

- 不用托管供应商做任何事。

下面的文章介绍如何启用此功能。

一些背景：
我们支持两种方式使您可以使用一台机器上的ASP.NET MVC3组件：
1，在一台机器上，将ASP.NET MVC 3组件安装在一个集中的地方，WEB项目在那里引用这些组件

2，把ASP.NET MVC 3的组件复制到您的Web项目的\bin文件夹下，WEB项目在那里引用这些组件

第一种方法是我们使用Visual Studio中使用的默认方法，

这使得我们可以更容易为ASP.NET MVC 3提供升级服务（当发现BUG的时候）。

第二种方法也是得到了完全支持，没有在服务器上安装ASP.NET MVC3，也可以使用它。

你只要把ASP.NET MVC的组件放在你的WEB程序的bin目录中，然后把整个Web程序拷贝到FTP（WEB服务器）上，它就可以工作了。

如果您的网站托管服务提供商还没有在他们的服务器上安装ASP.NET MVC 3，那么您应该使用第二种方法。

方法1：基于GAC引用ASP.NET MVC组件
当您在计算机上安装ASP.NET MVC 3的时候，

一些组件会自动注册到GAC中（全局程序集缓存）。

GAC提供一个集中的地方供安装和升级（通过Windows更新）.NET程序集。

因此ASP.NET MVC3项目默认在这里引用程序集。

如果你复制一个普通的ASP.NET MVC 3项目（使用默认的方法引用ASP.NET MVC3的程序集）

到一台没有安装ASP.NET MVC3的机器上，

当你运行应用程序时，

会看到一个类似的错误信息：

上述错误表示，

至少有一个运行ASP.NET MVC 3所需的程序集在GAC中找不到。

在机器上安装ASP.NET MVC 3就能解决这个问题，

让您的应用程序正常运行。

方法2：基于\ Bin目录中引用ASP.NET MVC组件
您的项目可以使用另一种方法

在您的Web应用程序的\bin目录中分发和引用的ASP.NET MVC3的程序集。

这种方法的好处是，你并不需要在一台机器上安装ASP.NET MVC3，以运行基于ASP.NET MVC3 Web应用程序。

相反，你只要复制你的web应用程序（在bin目录中包含MVC3的组件）到 .NET4服务器上，它就会运行。

这种方法是“完全信任”，“中等信任”的情景（译注：我也不知道是什么意思）

这意味着它甚至可以和低成本共享主机供应商共事。

无需托管服务提供商另外注册/安装/操作需要。

使您的Web项目包含ASP.NET MVC3程序集“bin部署”是非常简单的，

只需2分钟左右。下面是需要遵循的步骤：

Steps to Deploy an ASP.NET MVC 3 Application to a Web Hosting Provider with \Bin deployment

译注：这个链接好像打不开，笔者提供一个方法：
选中ASP.NET MVC引用的程序集，然后查看属性，把“复制到本地”修改为true
asp.net mvc3需要的程序集有
System.Web.Mvc
Microsoft.Web.Infrastructure
System.Web.Razor
System.Web.WebPages
System.Web.WebPages.Razor

一旦配置\BIN部署后，

您使用ASP.NET MVC 3构建的应用程序将在任何安装.NET4的Web服务器上工作。

只需复制到Web服务器，它就会运行。

即使是低成本共享托管账户，你也无需托管服务供应商做任何事。

找一个ASP.NET MVC 3网站托管服务提供商

您可以浏览Windows Web Hosting Gallery（Windows网站托管库）找到所有支持托管服务提供商：

Windows网站托管库允许您通过不同国家和服务水平来筛选/浏览托管服务。

它还能让您轻松过滤“共享主机”，“虚拟主机”和“专用主机”供应商。

“共享主机”是指在你没有管理员权限的远程服务器上，提供单一的Web服务器。
“虚拟主机”供应商在一个远程服务器上提供给你虚拟机 - 通常通过操作系统管理权限和管理的远程终端服务器来访问。

“专用主机”供应商提供您一个完整的物理服务器，通常也提供操作系统的管理员权限和远程终端支持。

基于Windows的网络托管的价格现在是非常符合成本效益的，

共享主机低至$2.75/月，虚拟主机提供的报价$23/月。

上述主机都能通过使用\ bin部署方法来运行ASP.NET MVC 3。

摘要
ASP.NET MVC 3的应用程序可以部署到任何拥有.NET4的Web服务器，

而不必等待托管服务提供商来安装ASP.NET MVC 3组件。

通过\ bin部署ASP.NET MVC3程序集，

只需使用上面的步骤就可转换您的项目，

那么你就可以复制你的应用程序到任何ASP.NET4服务器上。

本文链接