Serenity框架官方文檔翻譯(1-2開始、安裝和界面)

時間 2019-12-02

標籤 serenity 框架官方文檔翻譯開始安裝界面简体版

原文原文鏈接

1.開始

最好的和最快速地上手Serenity的方法是使用SERENE，它是一個示例應用程序模板。css

您有2個選項來安裝SERENE 模板到您的Visual Studio：html

您不必定要使用這個模版來配合Serenity框架，你能夠經過NuGet添加Serenity 庫到任何 .NET項目中 .github

您也能夠添加Serenity做爲git子模塊到您的項目中來保持它老是能更新到最新的源代碼。咱們將在其餘章節中涵蓋這些。web

1.1從 Visual Studio Gallery 安裝 Serene

在你的瀏覽器中打開網址 http://visualstudiogallery.msdn.microsoft.com/.sql

輸入 Serene 到 Visual Studio Gallery 的搜索框中，敲回車鍵。數據庫

你將看到Serene (Serenity Application Template)，點擊打開它。json

點擊下載傳輸的 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包含了腳本代碼。

這個腳本項目有點像普通的.NET 項目，可是它其實是用Saltarelle Compiler (https://github.com/erik-kallen/SaltarelleCompiler)自動生成的 Javascript 代碼。

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.Web/web.config文件有 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, 你能夠從下面的鏈接中安裝:

http://www.microsoft.com/en-us/download/details.aspx?id=29062

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後, 你將會看到歡迎頁面.

這個頁面是用的免費的模版主題：AdminLTE (https://almsaeedstudio.com/themes/AdminLTE/index.html)。(也開源在github上)

網頁的內容，除了一些從 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
site.yellow-light.less
site.yellow.less

咱們用 LESS 來對 css生成，因此你應該試着編輯Less文件而不是 CSS. 下次你構建項目的時候, LESS 文件將被編譯成 CSS (用Less.js 編譯器 for Node).

這個操做配置了構建 Serene.Web.csproj步驟 :

...
<Target Name="CompileSiteLess" AfterTargets="AfterBuild"><Exec Command="&quot;$(ProjectDir)tools\node\lessc.cmd&quot;
        &quot;$(ProjectDir)Content\site\site.less&quot; &gt;
        &quot;$(ProjectDir)Content\site\site.css&quot;"></Exec></Target>
...

site.less 在同一個目錄下被編譯爲相應的文件.

2.2本地化

Serene 容許您從右上角設置菜單更改活動語言。

試一下改變活動語言爲西班牙語。

我不會說西班牙語因此使用了機器翻譯,很抱歉...

當改變語言的時候頁面會重載, 不像改變主題的時候頁面不重載.

Serene, 也會添加一個 cookie, "LanguagePreference" 和內容 "es" 到你的瀏覽器因此下次你打開網站的時候, 他會記住你的最後選擇加載語言爲西班牙語。

Serene首次啓動時,您可能會看到英文網站,若是你有一個操做系統或瀏覽器的語言，可是也有可能以西班牙,土耳其和俄羅斯(這些是目前可用的樣本語言)語啓動。

這能夠在web.config 設置:

<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 會建立一個user.texts.es.json文件在文件夾App_Data/texts下內容以下:

{
    "Navigation.Dashboard": "Welcome Page"
}

在 ~/scripts/site/texts 文件夾下, 也有Serene接口翻譯的默認的其餘JSON文件:

site.texts.es.json
site.texts.invariant.json
site.texts.tr.json

在發佈以前，建議從user.texts.xx轉移你的翻譯到site.texts.xx 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.

https://github.com/mleibman/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

https://github.com/select2/select2

選擇 Seafood 做爲Category 它會顯示類別是的products。

全部排序、分頁和過濾是在服務器端用動態生成的SQL查詢完成的。

也能夠點擊右下角的編輯過濾器連接網格，過濾任何列。

在這裏你能夠添加任何標準列，點擊添加標準和選擇列名稱,從下拉選擇比較運算符,設置一個值。

一些值編輯簡單的文本框,而另外一些人可能有下拉和其餘自定義編輯器根據列類型。

也能夠改變,或者經過點擊它。

你也能夠經過點擊括號來給條件分組。組會有比普通線更大的空間。

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-StringEditor" /></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 的編輯對話框有類似的界面,不過你能夠自定義按鈕,字段,添加標籤,和其餘界面元素。