Serene Framework Official document translation (1-2 start, install and interface)

1. Start

The best and quickest way to serenity a hand is to use serene, which is a sample application template.

You have 2 options to install the serene template to your visual Studio:

• Installing serene from Visual Studio Gallery

• Install serene directly from Visual Studio

You don't have to use this template to match the Serenity Framework, and you can add serenity libraries to any of them through NuGet. NET project.

You can also add serenity as a git submodule to your project to keep it constantly updated to the latest source code. We will cover these in other chapters.

1.1 Installing serene from Visual Studio Gallery

Open the URL http://visualstudiogallery.msdn.microsoft.com/in your browser.

Enter serene into the search box in Visual Studio Gallery and hit enter.

You will see serene (Serenity application Template) and click on it to open it.

Click Download to transfer the VSIX file to your computer.

When you're done downloading, install the VSIX file into your vs extension.

Note: The extension requires VS2012 and above versions.

Start Visual Studio (or restart VS). Click on the file and the new item. You will see Serenity template in the template under the Visual C # node.

Give your project a name such as MyCompany, myproduct, HelloWorld or or Serene1.

Don't name the project Serenity. He might have a conflict with the Serenity assembly.

Click OK to wait vs Create project file.

1.2 Installing serene directly from Visual Studio

Start Visual Studio and click new = Project .

The program template requires Vs2012 and above, make sure you update to the latest Visual Studio

The New Project dialog box displays the most recent installation and online sections.
Click on the online template. Wait for the result to load.

Enter serene into the search box to search for online templates .

You will see serene (Serenity application Template):

Give your project a name such as MyCompany, myproduct, HelloWorld or or Serene1.

Don't name the project Serenity. He might have a conflict with the Serenity assembly.

Click OK to wait vs Create project file.

After you've created your first project, the serene template is already installed in VS, so you create another Serenity program with the installed template.

1.3 Start Serene

After you've created your project with serene template, you'll see a solution like this:

It contains two items, serene1.script and serene1.web (which are always common in serenity programs).

Serene1.web contains the service-side code for the program, and Serene1.script contains the script code.

This script project is a bit like a normal. NET project, but it is actually using Saltarelle Compiler (Https://github.com/erik-kallen/SaltarelleCompiler) Automatically generated Javascript code.

The WEB project is an ASP. NET MVC program.

All two projects refer to the Serenity NuGet package, so you can restore them with nuget.

Serene automatically created the SQL local DB database The first time you run it, so you can run the program by pressing F5.

You can log in with the user and password when the program starts admin serenity . You can then change the password or create more users on the administration/user Management page.

The sample application includes the Northwind data plus service and user interface for editing, which is generated primarily by the Serenity Code generator.

Add Project Dependencies

The output of the Serene1.script project (Serene1.Script.Site.js) is copied down Serene1.web/scripts/site generated.

By default, Visual Studio generates only Serene1.web projects, and you can press F5 to run them.

This is set by the Visual Studio Project > Options control and Solution Site, build and run-only build startup projects and dependencies run. It is not recommended to change it.

To make the script project also build the WEB project at run time, right-click the Serene1.web project, under the Dependencies tab, under Build dependencies, project dependencies, and check serene1.script.

Unfortunately, there is no way we can set this dependency in the serene template.

Troubleshoot database connections

The first time you start serene if you get a connection error like the following:

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or is not accessible. Verify 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. )

This error may mean that you do not have SQL Server Local DB 2012 installed. This service is installed with Visual Studio and 2013.

In the Serene.web/web.config file there is a Default and Northwind connection entry:

<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.0The default corresponds to the SQL Server LocalDB instance.

If you do not have SQL LocalDB 2012, you can install from the following connection:

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

Visual Studio 2015 comes with SQL Server LocalDB. The default named instance of VS2015 is Mssqllocaldb, if you are installing VS2015 connect the string from (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>

If you still have errors, open the Windows command prompt and type

> sqllocaldb info

It lists LocalDB instances, like this:

MSSqlLocalDBtest

If you do not have the mssqllocaldb listed, you can create it:

> sqllocaldb create MsSqlLocalDB

If you have another instance of SQL Server such as SQL Express, change the data source to .\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.

You can also use a different SQL Server. This just needs to change the name of the connection string.

Both the Default and the Northwind database perform these two steps. Because serene 1.6.4.3+ created two databases.

2.Serene feature Preview

After you sign in to serene, you'll see the Welcome page.

This page is for free template theme: Adminlte (https://almsaeedstudio.com/themes/AdminLTE/index.html). (also open source on GitHub)

The contents of the Web page contain random data, in addition to some numbers calculated from the Northwind table.

The accordion navigation menu has a search function on the left. In the following sections we will talk about customizing it.

At the top of the navigation, there is also the site name on the left, and a drop-down list that contains the current user name permission, and the Set button, through which we change the language of the theme or activity.

2.1 Topics

Serene the initial theme is Dark/blue, next to the user name in the upper-right corner, click the Settings button and change to another topic.

This function is implemented to replace the body of the CSS class.

If you look at the source code, you may find a skin class <body> inside the tag:

<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition     skin-blue has-layout-event">

When you choose light yellow skin, it will actually change to this:

<body id="s-DashboardPage" class="fixed sidebar-mini hold-transition     skin-yellow-light has-layout-event">

It simply operates in memory, so the page does not require a reload.

There are also cookies, "Themepreference"and Content "Yellow-light" that have been added to your browser. So the next time you restart serene, it will remember your preferences and start with a light yellow theme.

These skin files are located under Serene Web project "content/adminlte/skins/": If you look at this location you can see these file names:

_all-skins.lessskin.black-light.lesssite.blue.lesssite.yellow-light.lesssite.yellow.less

We use less to generate the CSS, so you should try to edit the not file instead of the CSS. The next time you build the project, the less file will be compiled into CSS (with the less.js compiler for Node).

This operation configures the build Serene.Web.csproj step:

...<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 is compiled into the corresponding file in the same directory.

2.2 Localization

Serene allows you to change the active language from the Settings menu in the upper right corner.

Try changing the active language to Spanish.

I don't speak Spanish so I use machine translation, I'm sorry ...

When changing the language, the page will reload, unlike changing the theme when the page does not reload.

Serene will also add a cookie, "LanguagePreference" and content "es" to your browser so the next time you open the site, he will remember your last choice to load the language as Spanish.

Serene the first time you start, you may see English websites if you have an operating system or browser language, but it is also possible to start with Spanish, Turkish and Russian (these are currently available sample languages).

This can be set in the Web. config:

When feedback comes back to en-US (if the system cannot determine the language of your browser), here we set the UI culture to automatic.

It can also return a different language setting:

<globalization culture="en-US" uiCulture="auto:tr-TR" />

Or, regardless of the language that the user is accessing, he sets a default language:

<globalization culture="en-US" uiCulture="es" />

Join you do not want your users to choose the language on the UI you should remove your language selection drop-down box.

You can also add more languages to the language selection drop-down box below the page in the Administration menu.

Localizing User Interface Text

Serene includes an interface for online translation of text resources.

Click Administration and then translations link to navigation.

Type navigation to the upper-left corner of the search box to see a list of relevant text navigation menus. Select English as the source language and Spanish as the target language.

Type Welcome Page to navigation.dashboard to local text key.

Click OK to save.

When you switch to the Spanish dashboard menu, the Welcome Page will be replaced by Salpicadero .

When you save the changes, serene creates a User.texts.es.json file in the folder app_data/texts under the following contents:

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

~/scripts/site/textsunder Folders, there are also default other JSON files that are translated by the Serene interface:

• Site.texts.es.json
• Site.texts.invariant.json
• Site.texts.tr.json

Before publishing, it is recommended to transfer your translations from user.texts.xx to the site.texts.xx JSON file. If the App_Data folder is ignored, you can also place them under version control.

2.3 User and role management

Serene has built-in user, role, and rights management.

This feature is not embedded in the serenity itself. This is just a sample, you can always implement and use user-managed choices. We will see it in the following chapters.

Open the Administration/roles menu page to create two characters Administrators and translators.

Click New Role Input Administrators, and then click Save.

Repeat input translators

Then click Role Administrators to open the Edit form and click the Edit permissons button to modify its permissions. Tick give each permisson authorization to this role, then click OK.

Repeat the same steps in translations , this time granting only administration:Languages and translations permissions.

Navigate to the administration/user Management page to add more users.

Click Edit details for admin user.

Here you change the admin details, such as username, display name, email.

You can also enter a password and confirm (default Serenity) to change the password.

You can also delete it, but this will make your site unusable and you won't be able to log in.

In serene,admin is a special user, even if you do not show the grant, it also has all the permissions:

Let's kick-build a user and grant it to roles and permissions.

Close this dialog box, click New User and enter translator as username. Fill in the other fields that you want to fill out, and then click Update.

You may have noticed that there is a black disk icon with no title to request the Change button next to the Save button, unlike the Save button, when you use it, the form remains open, so you can see that your record looks like it is being saved, and you can edit the roles and permissions before closing the form.

Now click on the Translator character to open its edit form and click Edit Role. Grant it the translators role Click OK.

When you grant a role to a user, it automatically grants all permissions to the user for that role. You can also explicitly grant additional permissions by clicking Edit Permissions. You can also explicitly revoke a role permission from the user.

Now close all dialogs and logout by clicking Admin on top right of site and clicking logout.

Now close all dialogs by clicking Manage on the top right of the website and clicking "Logout".

Try to log in with translator user and set password

Translator users can only access dashboards, subject samples, language and translation pages.

2.3 List Page

Serene has a list editing and viewing interface for the Northwind database, let's look at the product page under the Northwind module.

This is where we can see the Product List page sorted by product name (initial sort order).

The Grid control is a slickgrid with user-defined themes.

Https://github.com/mleibman/SlickGrid

You can click the header to sort, and if you want to reverse it, click the same header again.

To sort multiple headers you can use Shift+click.

The following looks like the result of sorting by Category again Supplier column:

When you change the sort order, he will resend the AJAX request to the server.

AJAX is also called once when you first open the page initialization record.

The default table record for each page is 100. Only the current record is loaded from the server. In the sample image below, I changed the page size to 20 (lower left of the grid) to show the paging effect.

In the upper-left corner of the table, you can enter something to make a simple search.

For example, enter coffee to see if the product has a record with this name.

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.

Search for the Product Name field. You can also use a quick search for another or more fields. We'll see how to use it in a later chapter.

In the upper-right corner, there are some other filter drop-down boxes Supplier and Category fields.

The drop-down component uses the Select2

Https://github.com/select2/select2

Select Seafood as category it will show categories Yes products.

All sorting, paging, and filtering are done on the server side with dynamically generated SQL queries.

You can also filter any column by clicking the Edit Filter link grid in the lower right corner.

Here you can add any standard column, click Add Standard and select the column name, select the comparison operator from the drop-down, and set a value.

Some values edit simple text boxes, while others may have drop-down and other custom editors depending on the column type.

can also be changed, or by clicking on it.

You can also group conditions by clicking Parentheses. The group will have more space than the normal line.

2.5 Edit dialog box

When you click on the product name on the product page, this line will pop up an edit box.

This dialog box is displayed on the client, no post-back occurs. The data entities that are clicked are loaded using AJAX requests from the server side (only data, not tokens). The dialog box itself is a custom version of the JQuery UI dialog box.

In this dialog we have three category fields: General, Pricing and Status. By clicking on the category link above the blue bar you can navigate to the beginning of this category.

Each form field occupies a row of labels and editors. If you want, you can choose to display multiple fields in a row (with CSS).

Fields with "*" are required (cannot be empty)

Each field has an editor that selects a specific type based on its data type, such as String, picture upload, check box, and so on.

If we look at the source code, we will see such an HTML code (shorthand):

<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>...

Each field has its own "div" with the class "field". In this div, there is a "tag" element, another element (input, select Div), which changes the previous field editor type.

We can look at the class names of these elements to identify their editor types (for example, S-stringeditor, S-imageuploadeditor)

The toolbar has a button to save the current entity and close the dialog box (update), next to a small dialog box opened after saving, and the other one deletes the current entity (obviously).

Most serenity edit dialogs have similar interfaces, but you can customize buttons, fields, tagging, and other interface elements.

Serene Framework Official document translation (1-2 start, install and interface)