2014年5月6日 星期二
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
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
Just drag & drop the color to the place which you want to change its color
1. Click Download, it will show Download Theme screen
2. Input a Theme Name by yourself
3. Click Download Zip button
Back to Visual Studio, create a new Style Sheet file, custom-theme.css
1. Open the downloaded zip file
2. Select all and copy them
Paste into custom-theme.css file
Change the link of default.htm, from “light-theme-2.0.0.css” to “custom-theme.css”
Run it to see the result
LightSwitch – Custom Code on HTMLClient, Visual Studio 2013
Custom Code on HTMLClient
There are 4 types allow us to write custom code
No worry, LightSwitch has loaded following libraries for us
Example 1: Add default value of input field, Address1
Write code on created method of field Address1
Input following code in .lsml.js file, assign default value if Address1 is empty
The result is like below
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
1. Drag & drop Logo into the place that you want to display
2. Change its Type to Custom Control
Write code within Logo_render method
Append <img> tag and given correct src attribute
The result is like below
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
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
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.
2014年4月8日 星期二
LightSwitch – Access Control, Visual Studio 2013
Access Control
2 access controls for LightSwitch, Authentication type and Permissions.
Authentication Types
There are 2 authentication types, Windows & Forms.
In this example, we use Forms authentication.
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
We can write code on Access Control Methods of an ApplicationData, for example, Customers.
Check if current user has pre-defined permission (CanAddCustomer) on customer insert action
It will show an Error if user does not have that permission
2014年4月7日 星期一
LightSwitch – Query, Visual Studio 2013
http://msdn.microsoft.com/en-us/vstudio/gg604823
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
Following are two query example for different Application Data
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.
Drag & drop 2 parameters to layout and change their Control Type to Date Picker
The result is like below:
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
4) Browse Screen
Add another brwose screen base on new query added above, SearchByNameOrPhone
Results are like below:
Query by Phone:
Query by Name:
5) Screen Navigation
1. Right click on HTMLClient of Solution Explorer –> Click Edit Screen Navigation
2. Add two browse screens in Screen Navigation menu
The result is like