Serenity框架官⽅⽂档翻译（1-2开始、安装和界⾯）
1.开始
最好的和最快速地上⼿Serenity的⽅法是使⽤SERENE，它是⼀个⽰例应⽤程序模板。
您有2个选项来安装SERENE模板到您的Visual Studio：
您不⼀定要使⽤这个模版来配合Serenity框架，你可以通过NuGet添加Serenity 库到任何 .NET项⽬中 .
您也可以添加Serenity作为git⼦模块到您的项⽬中来保持它总是能更新到最新的源代码。我们将在其他章节中涵盖这些。
1.1从 Visual Studio Gallery 安装 Serene
输⼊ Serene到Visual Studio Gallery的搜索框中，敲回车键。
你将看到Serene (Serenity Application Template)，点击打开它。
点击下载传输的 VSIX⽂件到你的电脑中。
下载完后，安装 VSIX ⽂件到你的VS扩展中。
注意：扩展要求VS2012及以上版本。
启动 Visual Studio (或者重启VS).点击⽂件 => 新项⽬.你将会看到 Serenity template在模版在Visual C# 节点下⾯.
给你的项⽬取名字⽐如MyCompany, MyProduct, HelloWorld or 或者Serene1.
别给项⽬取名为Serenity.他可能会对 Serenity 程序集产⽣冲突.
点击确定等待VS创建项⽬⽂件。
1.2直接从Visual Studio安装 Serene
启动 Visual Studio并且单击新建=> ⼯程.
程序模版要求Vs2012以及以上版本，请确保您更新到最新的visual studio
在新建项⽬对话框会显⽰最近安装和联机部分。
点击在线模版。等待加载结果。
输⼊SERENE到搜索框搜索在线模版。
你将会看到Serene (Serenity Application Template):
给你的项⽬取名字⽐如MyCompany, MyProduct, HelloWorld or 或者Serene1.
别给项⽬取名为Serenity.他可能会对 Serenity 程序集产⽣冲突.
点击确定等待VS创建项⽬⽂件。
等创建好你的第⼀个项⽬之后, Serene 模版已经安装进VS了, 所以您⽤安装好的模版创建其他 Serenity 程序.
1.3开始Serene
在⽤Serene 模版创建了项⽬之后，你会看到这样⼀个解决⽅案：
它包含两个项⽬, Serene1.Script和Serene1.Web (这在Serenity 程序总很常见).
Serene1.Web包含了程序的服务端代码, Serene1.Script包含了脚本代码。
Web 项⽬是⼀个ASP.NET MVC 程序.
两个项⽬都引⽤了Serenity NuGet 包，所以你能⽤Nuget还原它们。
Serene 在第⼀次运⾏时⾃动创建了SQL local db数据库, 所以你按 F5 就能运⾏程序了。
当程序启动的时候你可以⽤admin⽤户和serenity密码登录. 之后你可以在Administration / User Management页⾯修改密码或者创建更多的⽤户。
⽰例应⽤程序包括 Northwind 数据加上服务和⽤户界⾯进⾏编辑，它主要由Serenity 代码⽣成器⽣成。
添加项⽬依赖
Serene1.Script 项⽬ (Serene1.Script.Site.js) 的输出被复制下 Serene1.Web/scripts/site 上⽣成。
默认情况下，Visual Studio 仅⽣成 Serene1.Web 项⽬，你可以按 f5 键运⾏。
这由Visual Studio项⽬ > 的选项设置来控制和解决⽅案⽹站-> 建⽴和运⾏->"仅在⽣成启动项⽬和依赖项运⾏"。它不被推荐去改变它。
要使脚本项⽬在运⾏时也⽣成 Web 项⽬，右击 Serene1.Web 项⽬，在依存关系选项卡下单击⽣成依赖项-> 项⽬依赖项和检查 Serene1.Script。
不幸的是，我们没有办法可以在Serene的模板中设置该依赖项。
数据库连接疑难解答
第⼀次启动Serene时如果你得到⼀个像下⾯的连接错误:
A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the
instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 50 - Local Database Runtime error occurred. The specified LocalDB instance does not exist. )
这个错误可能意味着你没有安装SQL Server Local DB 2012。这个服务是随着Visual Studio 2012 and 2013安装的。
在Serene.fig⽂件有Default and Northwind连接条⽬:
<connectionStrings><add name="Default" connectionString="Data Source=(LocalDb)\v11.0;
Initial Catalog=Serene_Default_v1; Integrated Security=True"providerName="System.Data.SqlClient" /></connectionStrings>
(localdb)\v11.0默认对应着SQL Server 2012 LocalDB 实例。
如果你没有SQL LocalDB 2012, 你可以从下⾯的连接中安装:
Visual Studio 2015 ⾃带SQL Server 2014 LocalDB. VS2015的默认命名实例为MsSqlLocalDB，如果你安装的是VS2015 把连接字符串从(localdb)\v11.0 改为(localdb)\MsSqlLocalDB。<connectionStrings><add name="Default" connectionString="Data Source=(LocalDb)\MsSqlLocalDB;
Initial Catalog=Serene_Default_v1; Integrated Security=True"providerName="System.Data.SqlClient" /></connectionStrings>
如果您仍然有错误，请打开Windows命令提⽰符并键⼊
> sqllocaldb info
它会列出localdb实例，像下⾯这样:
MSSqlLocalDB
test
如果你没有列出的 MsSqlLocalDB，您可以创建它︰
> sqllocaldb create MsSqlLocalDB
如果你有其他的 SQL server实例⽐如 SQL Express，把data source改为.\SqlExpress:
<connectionStrings><add name="Default" connectionString="Data Source=.\SqlExpress;
Initial Catalog=Serene_Default_v1; Integrated Security=True"providerName="System.Data.SqlClient" /></connectionStrings>
You can also use another SQL server. Just change the connection string.
你也可以⽤其他的SQL server. 这仅仅需要改变连接字符串的名称.
Default 和Northwind 数据库都要执⾏这两步.因为 Serene 1.6.4.3+创建了两个数据库.
2.Serene功能预览
在登录Serene后, 你将会看到欢迎页⾯.
⽹页的内容，除了⼀些从 Northwind 表计算出的数字，还包含随机数据。
⼿风琴导航菜单上左有搜索功能。在后⾯⼏节我们会谈论如何⾃定义它。
在顶部导航，还有⽹站名称在左边，和⼀个下拉列表，包含当前⽤户名称的权限，和设置按钮，通过它我们更改更改主题或活动的语⾔。
2.1主题
Serene初始主题是 dark/blue，在右上⾓⽤户名旁边，单击设置按钮并更改到另⼀个主题。
这个功能来实现代替body的CSS类。
如果你看源代码，你可能会发现⼀个skin class在<body>标签⾥⾯:
<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition
skin-blue has-layout-event">
当你选择 light yellow skin，它会实际的改变为这样:
<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition
skin-yellow-light has-layout-event">
它仅仅是在内存中操作，所以页⾯不会要求重新加载。
还有cookie, "ThemePreference"" 和内容"yellow-light"已经加⼊到你的浏览器了. 所以下次你重新启动 Serene, 它会记住你的喜好并且以 a light yellow 主题启动.
这些⽪肤⽂件定位在Serene Web project"Content/adminlte/skins/" 下⾯.. 假如你查看这个位置你能看到这些⽂件名字:
_all-skins.less
skin.black-light.less
site.blue.less
我们⽤ LESS 来对 css⽣成，所以你应该试着编辑Less⽂件⽽不是 CSS. 下次你构建项⽬的时候, LESS ⽂件将被编译成 CSS (⽤Less.js编译器 for Node).
这个操作配置了构建 Serene.Web.csproj步骤 :
...
<Target Name="CompileSiteLess" AfterTargets="AfterBuild"><Exec Command=""$(ProjectDir)tools\d"
"$(ProjectDir)Content\site\site.less" >
"$(ProjectDir)Content\site\site.css""></Exec></Target>
...
site.less在同⼀个⽬录下被编译为相应的⽂件.
2.2本地化
Serene 允许您从右上⾓设置菜单更改活动语⾔。
试⼀下改变活动语⾔为西班⽛语。
我不会说西班⽛语所以使⽤了机器翻译，很抱歉...
当改变语⾔的时候页⾯会重载, 不像改变主题的时候页⾯不重载.
Serene, 也会添加⼀个 cookie, "LanguagePreference"和内容"es"到你的浏览器所以下次你打开⽹站的时候, 他会记住你的最后选择加载语⾔为西班⽛语。
Serene⾸次启动时，您可能会看到英⽂⽹站，如果你有⼀个操作系统或浏览器的语⾔，但是也有可能以西班⽛,⼟⽿其和俄罗斯(这些是⽬前可⽤的样本语⾔)语启动。
这可以在fig 设置:
<globalization culture="en-US" uiCulture="auto:en-US" />
当反馈回来en-US (如果系统不能确定您的浏览器的语⾔)，在这⾥我们设置 UI culture 为⾃动。
它也能返回另外⼀个语⾔设置:
<globalization culture="en-US" uiCulture="auto:tr-TR" />
或者，不管访问⽤户的语⾔是什么他设置⼀个默认的语⾔:
<globalization culture="en-US" uiCulture="es" />
加⼊你不想让你的⽤户在UI上选择语⾔你应该移除你的语⾔选择下拉框。
你也可以在Administration菜单的页⾯下⾯添加更多的语⾔到语⾔选择下拉框。
本地化⽤户界⾯⽂本
Serene包括在线翻译⽂本资源的界⾯。
点击Administration然后Translations链接到导航.
键⼊navigation到左上⾓搜索框中看到相关的⽂本导航菜单列表。选择英语作为源语⾔和西班⽛语作为⽬标语⾔。
键⼊Welcome Page到Navigation.Dashboard到本地⽂本key.
点击确定保存。
当你切换到西班⽛语指⽰板菜单的Welcome Page就会被Salpicadero代替.
当你保存更改,Serene 会创建⼀个s.es.json⽂件在⽂件夹App_Data/texts下内容如下:
{
"Navigation.Dashboard": "Welcome Page"
}
在~/scripts/site/texts⽂件夹下, 也有Serene接⼝翻译的默认的其他JSON⽂件:
在发布之前，建议从转移你的翻译到 json⽂件。如果App_Data⽂件夹将被忽略，你也可以把它们置于版本控制之下。
2.3⽤户和⾓⾊管理
Serene有内置的⽤户、⾓⾊和权限管理。
这个功能不是嵌⼊在Serenity本⾝。这只是⼀个样本，你总是可以实现和使⽤⽤户管理的选择。我们将在以下章节看到。
打开 Administration / Roles菜单的页⾯创建两个⾓⾊Administrators和Translators。
点击新建⾓⾊输⼊Administrators，然后单击保存。
重复输⼊Translators
然后单击⾓⾊Administrators打开编辑表单，单击Edit Permissons按钮来修改其权限。勾选给每个permisson授权到这个⾓⾊，然后单击OK。
在Translations中重复相同的步骤，这次只授予Administration:Languages和Translations权限。
导航到Administration / User Management页⾯添加更多⽤户。
点击admin⽤户的编辑详情。
在这⾥您改变 admin 详情，⽐如 username, display name, email.
你也可以输⼊密码和确认(默认serenity)来改变密码。
你也可以删除它，但这将使你的⽹站⽆法使⽤，你⽆法登录。
在 Serene，admin是⼀个特殊的⽤户, 即使你不显⽰的授予，它也有所有的权限。.
让我们踹建⼀个⽤户并且授予给⾓⾊和权限。
关闭这个对话框，点击新⽤户和输⼊translator作为⽤户名。填写其他你想填写的字段，然后单击更新。
您可能已经注意到有⼀个没有标题的⿊⾊磁盘图标申请更改按钮在保存按钮旁边，不像保存按钮，当你使⽤它时，表单保持打开，所以你可以看到你的记录看起来像正在保存，你也可以在关闭关闭表单之前编辑⾓⾊和权限。
现在点击Translator⾓⾊去打开它的编辑表单并且单击编辑⾓⾊. 授予它Translators⾓⾊点击OK。
当你授予⼀个⾓⾊给⽤户的时候它会⾃动地授予这个⾓⾊的所有权限给⽤户。你也可以通过点击编辑权限明确授予额外的权限。你也可以从⽤户明确撤销⼀个⾓⾊权限。
Now close all dialogs and logout by clicking admin on top right of site and clicking Logout.
现在关闭所有对话框通过点击右上⽅的⽹站上管理并且点击“注销“。
尝试通过translator⽤户和设置的密码登录
Translator⽤户只能访问仪表盘、主题样本，语⾔和翻译页⾯。
2.3列表页⾯
Serene 有⽤于Northwind 数据库的列表编辑和查看界⾯，让我们看看Northwind 模块下的产品页⾯.
这在⾥我们能看到以产品名称排序的产品列表页⾯(初始排序顺序).
Grid 控件是带⽤户⾃定义主题的SlickGrid.
你可以单击表头排序，如果要倒序，再点击⼀次同⼀个表头。
要多表头排序你可以⽤Shift+Click.
下⾯这个看起来是先按照 Category 再 Supplier 列排序的结果:
当你改变排序顺序的时候，他会给服务端重新发送AJAX请求。
当你第⼀次打开页⾯初始化记录的时候也会调⽤⼀次 AJAX.
默认的每⼀页表格记录是100. 只从服务器加载当前的记录。在下⾯的样例图像中，我改变页⾯⼤⼩为20(⽹格的左下)显⽰分页效果。
在表格的左上⾓，你能输⼊⼀些东西来进⾏简单的搜索。
⽐如输⼊coffee，查看产品是否有包含此名称的记录。
It searched in product name field. It is also possible to use another, or multiple fields for quick search. We'll see how in later chapters.
搜索产品名称字段。还可以使⽤另⼀个或多个字段的快速搜索。我们将在以后的章节看到如何使⽤。
在右上⾓，有⼀些其他的筛选下拉框Supplier and Category字段。
下拉组件⽤的是 Select2
选择Seafood作为Category它会显⽰类别是的products。
所有排序、分页和过滤是在服务器端⽤动态⽣成的SQL查询完成的。
也可以点击右下⾓的编辑过滤器链接⽹格，过滤任何列。
在这⾥你可以添加任何标准列，点击添加标准和选择列名称，从下拉选择⽐较运算符，设置⼀个值。
⼀些值编辑简单的⽂本框,⽽另⼀些⼈可能有下拉和其他⾃定义编辑器根据列类型。
也可以改变，或者通过点击它。
server error翻译你也可以通过点击括号来给条件分组。组会有⽐普通线更⼤的空间。
2.5编辑对话框
当你在产品页⾯点击产品名称时，这⼀⾏会弹出⼀个编辑框。
这个对话框显⽰在客户端，没有 post-back发⽣。点击的数据实体使⽤AJAX请求从服务器端(只有数据,⽽不是标记)加载。对话框本⾝就是⼀个定制版本的jQuery UI对话框。
在这个对话框我们有三个类别字段: General, Pricing and Status. 通过点击类别链接上⾯蓝⾊bar你可以导航到这⼀类的开始。
每个表单字段占⽤⼀⾏标签和编辑器。如果需要，您可以选择显⽰连续多个字段(⽤CSS)。
字段带有"*" 是必须的(不能为空)
每个字段都有⼀个根据其数据类型如字符串、图⽚上传、复选框、选择特定类型的编辑器。
假如我们看源代码，我们会看到这样⼀个HTML代码(简写):
<div class="field ProductName"><label>Product Name</label><input type="text" class="editor s-String
Editor" /></div><div class="field ProductImage"><label class="caption"> Product Image</label><div class="editor s-ImageUploadEditor">        ...
</div></div>
...
每个字段都有⾃⼰的⼀个独⽴的" div "与class“field”。在这个div中，有⼀个“标签”元素，另⼀个元素(输⼊、选择div)，改变了以往为该字段编辑器类型。
我们可以看看这些元素的类名来识别它们的编辑器类型(例如s-StringEditor、s-ImageUploadEditor)
⼯具栏上有⼀个按钮来保存当前的实体和关闭对话框(更新)，旁边⼀个⼩对话框打开后保存，另⼀个⼀个删除当前实体(很明显)。
⼤多数Serenity 的编辑对话框有相似的界⾯，不过你可以⾃定义按钮，字段，添加标签，和其他界⾯元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。