顯示具有 Visual Studio 標籤的文章。 顯示所有文章
顯示具有 Visual Studio 標籤的文章。 顯示所有文章

2014年5月5日 星期一

ZenCoding in Visual Studio 2013

原文出處

周季賢 精誠資訊 恆逸教育訓練中心 資深講師

當我們在設計網頁時,經常需要輸入各式各樣的Html標籤(如<div>、<ul>與<a>等),Visual Studio 2013的網頁編輯器其實有內建簡易的標籤片段產生功能,但是還是不足以應付大量或複雜Html標籤輸入時的需求,在這裡跟各位介紹一個好幫手:「ZenCoding」。

「ZenCoding」是一種語法,它能夠使用簡短的語意來快速輸入大量且複雜的Html標籤,而該語法需要安裝Web Essentials 2013,開啟Visual Studio 2013開發工具,從「Tools」-「Extensions and Updates」,開啟「Extensions and Updates」對話盒,然後選取左方「Online」項目,在右上方的文字方塊中輸入一些查詢關鍵字,找尋到Web Essentials 2013,然後點選「Download」按鈕下載並進行安裝

而安裝完成之後就必須重開,重開之後就會生效,也就是可以使用「ZenCoding」語法來開發網頁了。接著我們來介紹「ZenCoding」語法。「ZenCoding」語法基本上分為:

  • Element運算子

該運算子能夠提供Html Elememt的建立,如使用「>」運算子,就能夠產生巢狀式的Html標籤,例如撰寫以下標籤:

完成後按下鍵盤Tab鍵,「ZenCoding」就能夠為您產生以下的標籤:

  • Attribute運算子

Attribute運算子能夠在產生Element的同時,順便替該Html Element加入Attribute,例如「#」運算子,就能夠產生ID屬性,如下:

完成後按下鍵盤Tab鍵,「ZenCoding」就能夠為您產生以下的標籤:

  • 數量運算子

數量運算子能夠在產生Html Element時,順便指定該Html Element產生的數量,例如「*」運算子搭配數字,就能產生符合該數字數量的Html Element,如下:

完成後按下鍵盤Tab鍵,「ZenCoding」就能夠為您產生以下的標籤:

  • 成員運算子

成員運算子能夠在產生Html Element的同時,順便指定該Html Element產生的內容,例如「lorem」運算子,就能夠在產生Html Element時,順便為該Html Element加入一段亂數假文,而「lorem」運算子後如果加入數字,便可以決定產生的亂數假文的字數,如下:

完成後按下鍵盤Tab鍵,「ZenCoding」就能夠為您三個字數的亂數假文,並且放置在每一個<li>清單標籤內:

2014年4月15日 星期二

LightSwitch – ThemeRoller, Visual Studio 2013

ThemeRoller, change UI

Current project is using light-theme, we want to change their color by jQuery Mobile ThemeRoller

1. Open css file, light-theme-2.0.0.css

2. Select all content

3. Copy all content

image

 

Go to URL: http://themeroller.jquerymobile.com/

1. Click Import button on the top

2. Choose right version of jQuery mobile (see above Visual Studio Solution Explorer, it shows 1.3.0)

3. Paste css content copied from previous step

image

 

Just drag & drop the color to the place which you want to change its color

image

 

1. Click Download, it will show Download Theme screen

2. Input a Theme Name by yourself

3. Click Download Zip button

image

 

Back to Visual Studio, create a new Style Sheet file, custom-theme.css

SNAGHTML1682afd

 

1. Open the downloaded zip file

2. Select all and copy them

image

 

Paste into custom-theme.css file

image

 

Change the link of default.htm, from “light-theme-2.0.0.css” to “custom-theme.css”

image

 

Run it to see the result

SNAGHTML174592e

LightSwitch – Custom Code on HTMLClient, Visual Studio 2013

Custom Code on HTMLClient

There are 4 types allow us to write custom code

image

 

No worry, LightSwitch has loaded following libraries for us

image

 

Example 1: Add default value of input field, Address1

Write code on created method of field Address1

image

 

Input following code in .lsml.js file, assign default value if Address1 is empty

image

 

The result is like below

image

 

Example 2: Show image/picture on screen

1. Click button, Add Data Item

2. Choose Local Property (can leave default Type = String)

3. Name it, Logo, as example

image

 

1. Drag & drop Logo into the place that you want to display

2. Change its Type to Custom Control

image

 

Write code within Logo_render method

image

 

Append <img> tag and given correct src attribute

image

 

The result is like below

image

2014年4月14日 星期一

LightSwitch – Custom Code, Visual Studio 2013

 

Custom Code

Custom Code on ApplicationData in Server Side

 

1. Add a new field, Disable in Customers table

2. Choose Write Code to show out event trigger of Customers table

3. Choose Customers_Validate method

image

 

1. We can get original value of a field before user made change, by entity.Details.Properties.fieldName.OriginalValue

2. results.AddEntityError() to add a validation error

image

 

1. Validation Error pop up if Disable is originally equal to True and user want to change the record.

2. It won’t show if user just change Disable from False to True and then save the record.

image

2014年4月8日 星期二

LightSwitch – Access Control, Visual Studio 2013

Access Control

2 access controls for LightSwitch, Authentication type and Permissions.

image

 

Authentication Types

There are 2 authentication types, Windows & Forms.

In this example, we use Forms authentication.

image

 

Permissions

Add 4 permissions for practice, CanAddCustomer, CanEditCustomer, CanViewCustomer and CanAddPhone

Granted for debug is a flag to allow developer to run/execute while programming

image

 

We can write code on Access Control Methods of an ApplicationData, for example, Customers.

image

 

Check if current user has pre-defined permission (CanAddCustomer) on customer insert action

image

 

It will show an Error if user does not have that permission

SNAGHTML1db84b2

2014年4月7日 星期一

LightSwitch – Query, Visual Studio 2013

 

http://msdn.microsoft.com/en-us/vstudio/gg604823

http://blogs.msdn.com/b/lightswitch/archive/2013/11/07/new-navigation-features-in-lightswitch-html-client-chris-rummel-rohit-agrawal.aspx

http://msdn.microsoft.com/en-us/library/ee256728(v=vs.120).aspx

Query

http://blogs.msdn.com/b/msdntaiwan/archive/2014/04/01/vs2013-lightswitch-4.aspx

1) Add Query from Application Data

4. Change parameters to become Optional

image

Following are two query example for different Application Data

image

 

2) Browse Screen

Instead of create a new Browse Screen, we can just change the original one on its Query Source to new added query.

image

Drag & drop 2 parameters to layout and change their Control Type to Date Picker

image

The result is like below:

image

 

3) Add Query from Application Data, but search UPPER level table

1. We can add a group of filter like 4 which is query on upper level table (Customer, system enable for us by default) 2. We can also use only one parameter (FindString, in the example) to query on different fields of Cutomer and Phone tables

image

 

4) Browse Screen

Add another brwose screen base on new query added above, SearchByNameOrPhone

image

Results are like below:

SNAGHTML75bba3

Query by Phone:

SNAGHTML76b491

Query by Name:

SNAGHTML772991

 

5) Screen Navigation

1. Right click on HTMLClient of Solution Explorer –> Click Edit Screen Navigation

2. Add two browse screens in Screen Navigation menu

image

The result is like

SNAGHTML8317e5