Serene架構官方文檔翻譯(1-2開始、安裝和介面)

標籤：

1.開始

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

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

• 從Visual Studio Gallery 安裝SERENE

• 直接從 Visual Studio安裝 SERENE

您不一定要使用這個模版來配合Serenity架構，你可以通過NuGet添加Serenity 庫到任何 .NET項目中 .

您也可以添加Serenity作為git子模組到您的項目中來保持它總是能更新到最新的原始碼。我們將在其他章節中涵蓋這些。

1.1從 Visual Studio Gallery 安裝 Serene

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

輸入 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包含了指令碼代碼。

這個指令碼項目有點像普通的.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執行個體，像下面這樣:

MSSqlLocalDBtest

如果你沒有列出的 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.lessskin.black-light.lesssite.blue.lesssite.yellow-light.lesssite.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 的編輯對話方塊有相似的介面,不過你可以自訂按鈕,欄位,添加標籤,和其他介面元素。

Serene架構官方文檔翻譯(1-2開始、安裝和介面)