Javascript Metro Style App (1) 建立 Javascript Metro Style Project

Windows 8 在底層加入了 WinRT API 讓 Javascript 可以透過這個介面去存取本機的資源。也就是說只要利用 Html + CSS + Javascript 就可以開發 Windows 8 App。有點類似於 PhoneGap 的作用,只是現在變成官方架構。不只如此,在 Visual Studio 11 Beta 也加入了專案範本,幫助開始建立 Javascript 的 Metro Style App
win8-new-platform

基本開發環境

  • Windows 8 Consumer Preview
  • Visual Studio 11 Beta

建立 Metro 專案

File > New > Project
Templates > Other Languages > Javascript > Windows Metro Style
必須是安裝在 Windows 8 Consumer Preview 上面的 Visual Studio 11 Beta 才能找到這個選項,安裝在 Windows 7 上面的是沒有的。
image

接下來先選擇 Grid Application 作為第一個專案

image

第一次執行 Javascript Metro App

先來看看執行畫面,直接啟動 Debugging(F5)
image
這個並不是瀏覽器的畫面,而是透過 WinRT 來顯示。也可以點擊進入 Detail 頁面
image
如果選擇的是 Group Title
image

專案架構

image

  • html
    • groupedItemsPage.html – 起始頁面
    • itemDetailPage.html – Item Detail 頁面
    • groupDetailPage.html – Group Detail 頁面
  • js
    • data.js – 裡面有一些簡單的資料用來產生範本
    • default.js – default.html 的 code-behind
    • groupDetailPage.js – groupDetailPage.html 的 code-behind
    • groupedItemsPage.js- groupedItemsPage.html 的 code-behind
    • itemDetailPage.js- itemDetailPage.html 的 code-behind
    • navigator.js – 控制頁面之間的行為

利用 Resource file 建立多國語系驗證訊息

在建立多國語系網站的時候,我們可以利用 Resource file 來幫助建置。

  • ASP.NET MVC 2 以上

如果有利用到 ValidationAttritube 來幫忙做資料驗證的話,最一般的使用方法是。

[Required(ErrorMessage = "標題為必填欄位")]
public string Title { get; set; }

在一般的狀況下這樣就很夠用了,不過由於需要多國語系,驗證訊息當然也要讓外國人看得懂。這邊的錯誤沒有辦法這樣設定了。

ErrorMessageResourceName

沒想到這些需求都很貼心地已經有相關功能了,我一開始還打算繞一大圈來處理。

[Required(ErrorMessageResourceName = "TitleIsRequired")]
public string Title { get; set; }

利用 ErrorMessageResourceName 的屬性,可以將 ErrorMessage 根據當下語系對應的 Resource file 裡面找出來。

ErrorMessageResourceType

光是只有設定 ErrorMessageResourceName  是不夠的。

[Required(ErrorMessageResourceName = "TitleIsRequired")
,ErrorMessageResourceType = typeof(ErrorMessage)]
public string Title { get; set; }

還需要設定 ErrorMessageResourceType  屬性,這邊的 ErrorMessageResourceType  就是對應 Resource 的類別。

Could not find any resources appropriate for the specified culture or the neutral culture.

在執行的時候或許會遇到這個錯誤,這也就是在輸出驗證訊息的時候找尋不到 Localize 的 Resource 的錯誤。

image

如果有用到自訂的 ValidationAttritube 實作 IClientValidatable

public IEnumerable<ModelClientValidationRule> GetClientValidationRules
(ModelMetadata metadata, ControllerContext context)
{
yield return new ModelClientValidationRule
{
ValidationType = "required",
ErrorMessage = this.ErrorMessageString
};
}

ErrorMessage = this.ErrorMessageString 才是針對多國語系的輸出。


如何讓 App_GlobalResources 裡的全域資源檔變成公開類別

EntityFramework SQL 2005 not support datatype ‘datetime2’

因為在測試環境都是用 SQL 2008 的版本在做測試開發,到了正式環境要發佈的時候卻發生 not support datatype ‘datetime2’ 的錯誤。

Server Error in '/' Application.
--------------------------------------------------------------------------------

The version of SQL Server in use does not support datatype 'datetime2'.
Description: An unhandled exception occurred during the execution of the current web request.
Please review the stack trace for more information about
the error and where it originated in the code.

Exception Details: System.ArgumentException:
The version of SQL Server in use does not support datatype 'datetime2'.

  • 開發測試環境是 SQL 2008
  • 正式環境 SQL 2005
  • EntityFramework 4.3
  • Database First

問題發生原因

這邊有 datetime 跟 datetime2 的比較
在 SQL 2008 之後版本,微軟將資料庫的 datetime 欄位改為 datetime2,而當使用 EntityFramework Database First 的時候,就會根據資料庫的版本去產生 edmx。再利用 edmx 對應去產生物件做操作。所以如果使用的是 SQL 2008 產生出來的物件,在 Datetime 要存進資料庫的時候就會幫你轉成 SQL Datetime2 格式。當然這樣在 SQL 2008 下是沒有問題的,可是如果要拿同一份程式到 SQL 2005 執行就會造成這個錯誤。

解決方法

其實解決方法很簡單,只要將 edmx 用 XML Editor 開啟之後。找到資料庫對應版本的設定。

<!-- SSDL content -->
<edmx:StorageModels>
<Schema Namespace="Test.Store"
Alias="Self"
Provider="System.Data.SqlClient"
ProviderManifestToken="2008"
xmlns:store="http://schemas.microsoft.com/ado/2007/12/edm/EntityStoreSchemaGenerator"
xmlns="http://schemas.microsoft.com/ado/2009/02/edm/ssdl">
<EntityContainer Name="LiteonAward2012ModelStoreContainer">

將上面的第 6 行 2008 改為 2005 之後將檔案存檔,並且重新產生 POCO 或是 DBContext 物件編譯過後就可以了。


Using SQL Server 2008 and SQL Server 2005 and date time

EntityFramework 在比較 null 跟 int 的差異性

如果說今天有一個欄位在資料庫中被設計成可為 null 的 int ,在使用 Linq 語法上會變得比較麻煩。

  • EntityFramework 4.3.1

資料庫的設計

dbo.category

Id Name ParentId
1 Computer NULL
2 TV NULL
3 Laptop 1
4 Desktop 1

在這邊的需求是當參數 ParentId 傳進來的的時候,要能夠找到對應的資料。

利用 == 比較子

public ViewResult Index(int? parentId)
{
var categories = db.Categories
.Where(it => it.ParentId == parentId);
return View(categories);
}

在這邊比較的時候會產生一個問題,EntityFramework 在解析 Linq 語法成為 T-SQl 的時候會將 == 解析為 = ,所以當傳入的 parentId 為 null 的時候,這邊比較的語法會是

WHERE ParentId = NULL

null 的比較這樣是錯誤的,要找到 null 的資料應該是利用 is null 來當條件。

  • 傳入資料是 null > 沒有找到 ParentId = null 資料
  • 傳入資料不是 null > 可以正確找到資料

利用 Equals 比較子

public ViewResult Index(int? parentId)
{
var categories = db.Categories
.Where(it => it.ParentId.Equals(parentId));
return View(categories);
}

如果是傳入為 null 的時候也要能比較出 null 的資料,這時候用 Equals 當作運算子,則在解析成為 T-SQL 的時候成為

WHERE ParentId IS NULL

這樣就可以比較 null 的資料了,但是問題並非這麼單純,因為當傳入參數不為 null 的時候,會產生一個錯誤

Unable to create a constant value of type 'System.Object'. Only primitive 
types or enumeration types are supported in this context.

  • 傳入資料是 null > 可以正確找到資料
  • 傳入資料不是 null > 產生 Unable to create a constant value of type ‘System.Object’ Exception

整合兩邊的方法

在這個情況之下這個查詢勢必需要先判斷再送進 SQL 查詢的動作了

public ViewResult Index(int? parentId)
{
if (parentId.HasValue)
{
var categories = db.Categories
.Where(it => it.ParentId == parentId)
.ToList();
}
else
{
var categories = db.Categories
.Where(it => it.ParentId.Equals(parentId))
.ToList();
}
return View(categories);
}

先判斷傳入參數是否為 null 再根據不同情況做查詢

另一種選擇的解決方法

或著是不想要寫兩段 Linq 的也可以考慮

public ViewResult Index(int? parentId = 0)
{
var categories = db.Categories
.Where(it => (it.ParentId.HasValue ? it.ParentId : 0) == parentId)
.ToList();

return View(categories);
}

在這邊的三元替換轉換成 T-SQL 會是

WHERE (CASE WHEN (ParentId IS NOT NULL) THEN ParentId ELSE 0 END) = @p__linq__0


differences between int32.Equals int? == int? for linq

利用 Chrome 觀察網頁動畫效果的流暢度

在 Web 上開發一些動畫或是效果的時候,有的時候會因為效果太複雜,或是語法沒有優化過而造成畫面有些遲鈍的現象。而在調整的時候往往也就是憑感覺來調整。不過其實在 Chrome 就有內建 FPS (Frames Per Second)計數器。

在網址列輸入 chrome://flags/ 

image

找到FPS計數器

image

啟用之後記得要重新啟動 Chrome

image

接下來在瀏覽器左上角就可以看到計數器

image

必須網頁本身有用到動畫效果才會顯示,如果是動畫動作中的的時候掉到20以下就會感覺有些許的不順暢了,如果是10以下都是非常頓。


Chrome FPS Counter | thechromesource

IIS 6 下發佈 ASP.NET MVC 造成 Directory Listing Denied

image

今天在將專案發佈到正式環境時發生了 Directory Listing Denied 的錯誤。

  • ASP.NET MVC 3
  • IIS6
  • .Net Framework 4

造成的原因

這個錯誤一開始看到會覺得是權限設定的問題,看到 Denied 就覺得是權限。但是仔細觀察一番之後才發現不是這樣,Directory Listing  指的是列出目錄清單,可是一般網頁應該只要開放瀏覽權限就可以了阿。難怪會權限不足。所以真正的問題點應該是在為什麼在執行瀏覽的時候會去要求列出清單。

其實是在 IIS6 預設情況下,都是用要求檔案副檔名來決定用什麼程序處理。相關設定在(網站>內容>主目錄>設定)。而在 ASP.NET MVC 則是利用 Route 來做對應,Request 對應的並不是檔案,而是直接由處理程序來處理。所以當 IIS6 在預設內容找不到檔案的時候,就會要求列出整個網站目錄,但是這個時候就因為權限不足而被阻止了。

解決方法

既然是因為這個原因,所以解決的方法就是將 aspnet_isapi.dll 可以在 Request 不是一個檔案的時候加入進行處理。

網站>內容>主目錄>設定

上方就是副檔名與執行檔的對應,而要做的部分是在萬用字元程式對應的地方加入 c:windowsmicrosoft.netframeworkv4.0.30319aspnet_isapi.dll。

image

image

image


ASP.NET 4.0 安裝在 IIS6 最常遇到的四個問題

asp.net – MVC 3 Deployment to IIS6 – Stack Overflow

ASP.NET MVC on IIS 6 Walkthrough

Android 2.x 使用 jQuery Mobile 設定 Position:fixed , Select 會無法正常顯示

在 jQuery Mobile 中可以設定 Header 跟 Footer 為 Fixed(這邊有官方文件),不過為了要能夠支援多種裝置效果,這邊的 Fixed 是用 javascript 去控制高度,而不是用 CSS 的 Position:fixed 。下面是有支援 Position:fixed 的裝置對應表。
image
(資料來源)
在 Android 2.x 的版本下,Position:fixed 必須配合 ViewPort  的設定 user-scalable = 0 的情況下才能作用。但是當 Andriod 2.x 的 Position:fixed 作用時,jQuery Mobile 的下拉選單會沒有辦法在 Android 裝置上展開。

重現這個問題

首先到 jQuery Mobile 官網複製官方建議的基本架構

<!DOCTYPE html> 
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->

<div data-role="content">
<p>Hello world</p>
</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

加入測試的 Select 下拉選單

<div data-role="content">
<p>Hello world</p>
<select>
<option>Google</option>
<option>Yahoo</option>
<option>Bing</option>
</select>
</div>

加入 Position: Fixed

<div data-role="header" style="position: fixed; width: 100%;">
<h1>My Title</h1>
</div>

加入為了在 Andriod 2.x 能夠啟用 Position: Fixed 效果必須的 user-scalable=0

<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1">

使用模擬器顯示畫面

image

接下來點下下拉選單。

image

沒有看錯,除了在邊邊出現藍色邊框證明有點過之外其他什麼事情都沒有發生。

正常情況下應該是會出現下方這張圖片的樣子。

image

要回復正常彈出下拉選單,只要將 position: fixed; 或是 user-scalable=0 移除就可以了。這是因為只要將 user-scalable=0 移除,position: fixed; 就沒有作用了(測試版本是 Android 2.3.1 Flayer)。 順便一提,這兩個版本在 IOS4 ,IOS5 ,Windows Phone7 下都是沒有問題的,IOS4, Windows Phone7 完全不支援 position: fixed;,而 IOS5 則是完全支援。

Demo

下拉選單不正常彈出

image

下拉選單正常彈出

image


Native select Menu no event on Adroid 2.2 or above

Visual Studio 11 Beta 嘗鮮安裝

微軟在昨天開放了 Visual Studio 2011 Beta 版本,馬上迫不及待來安裝一下。
Visual Studio 11 Beta | Microsoft Visual Studio

  • 安裝步驟
  • 第一次執行 Visual Studio 11 Beta
  • Visual Studio 11 Beta 多了什麼新東西
    • 配色主題
    • 檔案快速預覽
    • 對 Javascript & CSS 更完整的區塊支援
    • Html Tags 自動修改對應

安裝步驟

一開始的 Loading 畫面
image
授權聲明
image
開始執行安裝動作,整個流程變得很簡短,原本之前需要設定安裝的部分都直接略過了,有可能是 Beta 版本直接跳過,還是說為了讓使用者更容易上手,把之前可以設定的部分都隱藏起來了。
image
必須重新啟動
image
整個安裝過程會在重開機兩次之後完成

第一次執行 Visual Studio 11 Beta

第一次啟動照舊會選擇預設設定
image
Start Page, 看到這個配色,讓我又回想起 VS2003-VS2008
image
專案圖示都被改成黑白的,雖然說是蠻有設計感的,但是還真是看不習慣。
image
都是黑白的,難道是為了保護眼睛嗎,還是讓 Extension 的開發人員不要再為了 Icon 苦惱。
image
在 Visual Studio 2010 安裝的 Nuget 也會帶過來,不過並不是每一個 Extension 都可以支援,有些還是要另外安裝。
image

Visual Studio 11 Beta 多了什麼新東西

配色主題

Tools > Option > General 新增配色主題可以選擇。
image
Dark 主題配色
image

檔案快速預覽

在 Solution Explore 可以直接看到 Function 名稱,點一下的時候就會直接展開在 Code View 中。也可以直接修改,不過在切換之後並不會保留在 Tab 上面,如果要能保留就一樣像之前點兩下開啟檔案。
image

內建的 Brower Switcher

修改預設開啟的瀏覽器,之前的 Visual Studio 是以預設瀏覽器當作 Debug 時候啟動的瀏覽器,在 Visual Studio 2010 的時候有其他人開發可以選擇開啟瀏覽器的 Browser Switcher ,在 Visual Studio 11 加入為內建功能。
image

對 Javascript & CSS 更完整的區塊支援

image

Html Tags 自動修改對應

在修改 Html 的時候會一併修改對應的開始/結束 Tag。
image
image


Visual Studio 11 Beta | Microsoft Visual Studio