利用 WebMatrix 2 RC + VS 2012 RC 的 iphone / ipod 模擬器

在 Web Matrix 2 RC 裡面有附加了新加入的功能 iphone / ipod 模擬器。

安裝 Web Matrix 2 RC

直接從 WebPI 下載,或是到官網 http://www.microsoft.com/web/webmatrix/next/

image

WebMatrix Run > Add new

啟動 WebMatrix 之後開啟現有網站或是建立新的網站

image

安裝想要的模擬器

在 Extension Gallery 可以看到目前有三款模擬器可以選擇,iPhone / iPod / WindowsPhone7

image

安裝完之後啟動就可以看到用模擬器執行的網站,這個是用 ASP.NET MVC 4 建立的行動版網站範本。不過啟動之後基本上它就是一個獨立的瀏覽器,可以用來開啟任何網路上的網站,模擬器上右鍵選單也有一些相關的設定可以調整,不過比較可惜的是沒有看到版本的選項 iOS4.3 / Safari ,iOS5 / Safari 之類的,而且因為他是單純的瀏覽器也沒辦法模擬 iOS5 / Opera 。

image

在 VS2012 直接啟動模擬器

VS2012 原有的瀏覽器選擇器新增,程式位置位於 C:UsersYOUAppDataLocalMicrosoft WebMatrixExtensions20RC iPhoneSimulator ElectricMobileSim ElectricMobileSim.exe ,如果是 iPhone 的話引數帶入 “1” , iPod 帶入 “2”

image

參考來源

Simulating an iPhone or iPad browser for ASP.NET Mobile Web Development with WebMatrix 2 or Visual Studio 2012

SQL Server 利用交易紀錄拯救資料

今天出了一個大包,大概是從寫程式以來最大的問題了。

查詢備份檔案

要利用交易紀錄拯救資料,首先必須要有一個完整的備份 bak ,再來需要有從完整備份開始的不中斷交易紀錄,這樣就可以利用來拯救交易紀錄期間所有資料庫異動。

SELECT 
a.[database_name] as '資料庫名稱',
f.physical_device_name as '備份位置',
CASE a.[type]
WHEN 'D' THEN N'資料庫'
WHEN 'I' THEN N'差異資料庫'
WHEN 'L' THEN N'紀錄'
WHEN 'F' THEN N'檔案或檔案群組'
WHEN 'G' THEN N'差異檔案'
WHEN 'P' THEN N'部分'
WHEN 'Q' THEN N'差異部分'
ELSE N'NULL'
END as '備份類型',
a.[name] as '備份組的名稱',
a.[first_lsn] as '備份組中第一個或最舊的記錄序號',
a.[last_lsn] as '備份組之後下一個記錄的記錄序號',
a.[database_backup_lsn] as '最近的完整資料庫備份之記錄序號',
a.[differential_base_lsn] as '差異備份的基底 LSN',
a.[backup_finish_date] as '備份作業完成的日期和時間',
a.[backup_size] as '備份組的大小 (以位元組為單位)'

FROM
msdb.dbo.backupmediafamily f
INNER JOIN msdb..backupset a ON f.media_set_id = f.media_set_id
INNER JOIN master..sysdatabases b ON
a.database_name COLLATE DATABASE_DEFAULT =
b.name COLLATE DATABASE_DEFAULT
where
a.database_name = 'DatabaseName'
ORDER BY
a.database_name, a.backup_finish_date

在結果之中會顯示每一次備份的紀錄,還有記錄到的紀錄序號,紀錄序號一定要連續不中斷的,一中斷只能說事情大條了。

還原資料庫

接下來我們利用 bak 以及  trn 檔案來還原資料庫,先還原 bak 的完整備份

image

image

先別急著按下確定,這時候我們點下指令碼,把介面替你做掉的 T-SQL 撈出來看看,應該會類似下面這段。

RESTORE DATABASE [Test20120401] 
FROM DISK = N'C:2012_20120309.bak' WITH FILE = 1,
MOVE N'test2012' TO N'C:Program FilesMicrosoft SQL ServerMSSQL10_50.MSSQLSERVERMSSQLDATATest20120401.mdf',
MOVE N'test2012_log' TO N'C:Program FilesMicrosoft SQL ServerMSSQL10_50.MSSQLSERVERMSSQLDATATest20120401_1.ldf',
NORECOVERY, NOUNLOAD, STATS = 10
GO

接下來還原 trn 的部分
image
選擇至某個時間點一樣點下指令碼,接下來讓兩段指令碼合併

RESTORE DATABASE [Test2012] 
FROM DISK = N'C:2012_20120309.bak' WITH FILE = 1,
MOVE N'test2012' TO N'C:Program FilesMicrosoft SQL ServerMSSQL10_50.MSSQLSERVERMSSQLDATATest20120401.mdf',
MOVE N'test2012_log' TO N'C:Program FilesMicrosoft SQL ServerMSSQL10_50.MSSQLSERVERMSSQLDATATest20120401_1.ldf',
NORECOVERY, NOUNLOAD, STATS = 10
GO
RESTORE LOG [Test2012]
FROM DISK = N'C:2012_20120309120405_190000_2012_TRN.trn' WITH FILE = 1,
NORECOVERY, NOUNLOAD, STATS = 10,
STOPAT = N'2012-04-03T22:40:00'
GO

藉由這種方式,我們可以更改變數還有還原時間點還原出不同時間點的資料庫

image

比較資料庫差異性

再來就是利用工具比較還原的資料庫,我們就可以找到每一段區間中間的變動,新增或是刪除的資料列。在這邊我用的工具是 Visual Studio 的 Data Compare

Data > Data Compare > New Data Comparison

image

在這邊的可以選擇來源資料庫跟比較資料庫,Only in Source 或是 Only in Target 也可以單純過濾說被刪除/被新增的資料,選擇完比較的兩邊之後就可以直接開始比較的動作。

image

可以看到我這邊指定了 Only in Source ,各有兩個 Table 少了 20 跟 42 筆資料,點到那一個 Table 的時候下方就會列出差異性的資料,或是選擇上方 Export To Editor 可以匯出將資料塞回 Table 的 T-SQL

image

總結

當然系統安安穩穩的不需要做還原最好,但是誰也不知道哪一天會出大災難,這次的事件真的是學了一次教訓。

Metro Style App (5) 針對不同瀏覽模式開發

在 Windows 8 中已經對多瀏覽模式以及多解析度相容,那在開發 Metro Style App 的時候也不能只針對一種畫面做調整,還必須考量到行動裝置或是桌上型電腦的操作使用,讓開發出來的 Metro Style App 能夠更容易操作。Metro Style App 的瀏覽模式在 Metro Style Design 已經有介紹過。

開發工具

如果要針對多瀏覽模式做開發,當然有各種裝置一定是最方便了,可以直接體會操作的感覺。不過 Metro Style App 支援的規格這麼多,怎麼可能每一台都有。在 Visual Studio 11 中也提供了非常好用的模擬器(必須要在 Windows 8 環境下的才有)。

image

在 Debug 的時候有三種模式可以選擇,Local Machine 是直接在 App 掛載在本機執行,Simulator 就是模擬器了,而 Remote Machine 則是如果有其他裝置,只要用網路線將開發環境跟測試裝置相連,就可以在測試裝置上啟動 Debug 偵錯。Running Windows Metro style apps on a remote machine 這邊有利用 Remote 裝置的完整步驟。如果用模擬器執行的話。

image

會再另外開一個模擬器的視窗來執行,這個模擬器的畫面主要是根據平板來顯示的,右側的功能鍵也有模擬手指功能、翻轉、調整解析度等等,模擬器本身就是一個完整的環境,有在機器上安裝的工具也都可以在模擬器中找到。

image

既然有好的模擬器可以使用,那就可以來針對 Metro Style App 支援的顯示模式來做支援。

  • 水平以及直立顯示

  • Snapped 模式

  • Semantic Zoom

Snapped 模式

Snapped 模式也是 Metro UI 獨有的,因為在 Metro UI 下預設一次只能開啟一個 App,想像一下 IOS 應該就了解了,如果今天想要邊聊 MSN 邊上網那在 iPad 上就是要一直切換來切換去的,手機上影響可能比較不大,因為畢竟螢幕也小,也沒辦法顯示那麼多資訊。

  1. 先進入一個 APP
  2. 指標移到左上再往下會顯示全部正在執行的 APP
  3. 選取其中一項並且拖拉到視窗邊

image

image

image

基本上 Grid Application 已經有預設 Snapped Mode 的顯示方式了,而這邊的做法正是使用到 HTML5 裡面的 media query 來做到在 Snapped Mode 跟一般模式下面的區別。在相對應的 css 徵可以找到以下的區段。

@media screen and (-ms-view-state: snapped) {
...
}

這中間的區段也就是當進入 Snapped 的時候要額外套用的部分。

Semantic Zoom

Semantic Zoom 是當希望可以不用改變層級的狀況下去修改資訊的顯示方式,有可能是單一頁面資訊太多的時候,可以使用 zoom-in 的方式顯示全部資料方便找尋。

image

這是 Metro UI 開始畫面的 zoom-in 結果,會顯示出全部的 APP,也可以直接點選分群之後移到點選的群組位置。

image

修改 groupedItemsPage.html

找到最下面的 section aria-label=”Main content”  區間修改為

<section aria-label="Main content" role="main">
<div id="zoom" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ initiallyZoomedOut: false }"
style="height: 100%">
<div id="zoomedInListView" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView"
data-win-options="{ selectionMode: 'none' }"></div>
<div id="zoomedOutListView" class="groupeditemslist" aria-label="List of groups"
data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }">
</div>
</div>
</section>

原本只有一個 ListView  改為兩個 ListView 分別對 zoom-in ,zoom-out 做支援。

修改 groupedItemsPage.js

在 groupDataSelector 增加會在 zoom-in 需要的回傳

groupDataSelector: function (item) {
return {
title: item.group.title,
shortTitle: item.group.shortTitle,
backgroundImage: item.group.backgroundImage,
click: function () {
nav.navigate("/html/groupDetailPage.html", { group: item.group });
}
}
},

修改 itemInvoked function

itemInvoked: function (eventObject) {
// Determine whether the SemanticZoom control is zoomed out
var zoomedOut = document.querySelector("#zoom").winControl.zoomedOut;

if (appView.value === appViewState.snapped) {
// If the page is snapped, the user invoked a group.
var group = data.groups.getAt(eventObject.detail.itemIndex);
nav.navigate("/html/groupDetailPage.html", { group: group });
} else {
// If the page is not snapped, the user invoked an item.
var item = data.items.getAt(eventObject.detail.itemIndex);
nav.navigate("/html/itemDetailPage.html", { item: item });
}
},

修改 ready function

ready: function (element, options) {
var listViews = element.querySelectorAll(".groupeditemslist");

for (var i = 0; i < listViews.length; i++) {
var listView = listViews[i].winControl;

ui.setOptions(listView, {
groupHeaderTemplate: element.querySelector(".headerTemplate"),
itemTemplate: element.querySelector(".itemtemplate"),
oniteminvoked: this.itemInvoked
});
}

this.updateLayout(element, appView.value);
},

還要修改 updateLayout function

// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState) {
var list = data.items.createGrouped(this.groupKeySelector, this.groupDataSelector);

if (viewState === appViewState.snapped) {
// If the page is snapped, display a list of groups.
var listViews = element.querySelectorAll(".groupeditemslist");

for (var i = 0; i < listViews.length; i++) {
var listView = listViews[i].winControl;

ui.setOptions(listView, {
itemDataSource: list.groups.dataSource,
groupDataSource: null,
layout: new ui.ListLayout()
});
}
} else {
// If the page is not snapped, display a grid of grouped items.
// For the zoomed-in ListView, show groups and items
var zoomedInListView = element.querySelector("#zoomedInListView").winControl;

ui.setOptions(zoomedInListView, {
itemDataSource: list.dataSource,
groupDataSource: list.groups.dataSource,
layout: new ui.GridLayout({ groupHeaderPosition: "top" })
});

// For the zoomed-out ListView, show groups only
var zoomedOutListView = element.querySelector("#zoomedOutListView").winControl;

ui.setOptions(zoomedOutListView, {
itemDataSource: list.groups.dataSource,
groupDataSource: null,
layout: new ui.GridLayout({ groupHeaderPosition: "top" })
});
}
}

增加 groupedItemsPage.css

加入 zoom-in 的 css

#zoomedOutListView {
margin-left: 70px;
}

在 Simulater 中測試 Semantic Zoom

在右上角可以找到兩隻手指的模擬按鈕

image

在畫面上點下滑鼠並且滾輪往後收合到事件被觸發為止,滑鼠必須一直維持點擊狀態。

image

原本的 Grouped-detail 畫面

image

zoom-in 之後的 Grouped-detail 畫面

image

這邊畫面可能看起來很像,不過在 zoom-out 的時候一張圖代表一個 item ,zoom-in 之後代表是一個 group。直接反向操作 zoom-in 的動作就是 zoom-out 了

Summary

其實這邊並沒有硬性規定開發者要怎麼去做,微軟是希望 Metro UI Design 的想法來開發 APP,但是並沒有那麼硬性。畫面操作方面微軟也號稱完整支援 HTML5,所以其實這邊還有很多發揮的空間,有很多不一樣的版面特效需求都是可以被實現的。

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

MVC4 多了什麼新東西 – Web API

image
Microsoft 在前幾天發表了 ASP.NET MVC4 Beta,長久以來 .net 在 Layout 方面都顯得較為弱勢,畢竟系統邏輯才是 Microsoft 的強項,從 ASP.NET WebPage > ASP.NET MVC > ASP.NET Web API 都一直在做著輕量化的工程,讓整個 Framework 不要去包裝太多。
Web API 這個 Framework 結合了 ASP.NET MVC 還有 WCF 的概念而成,讓 Web API 的 Service 變得更 RESTful 。也是 Microsoft 放手讓 .net developer 可以更加便利選擇 Client 端的技術,Web 的 jQuery , Extjs , Flash, iOS 的 Cocoa , Android Java , WindowsPhone Sliverlight …..

建立 Web API 專案

在安裝完 ASP.NET MVC4 Beta 之後,建立新的 ASP.NET MVC 4 Web Application
image
在選單中可以發現多了一個新的 Template – Web API
image
建立之後的檔案結構目錄依然是保持 ASP.NET MVC 的樣子,但是可以發現多了一個 ValueController ,這個就是 Web API 的重點了。
image
ValueController 裡面的程式碼,改由繼承 ApiController ,Method 名稱就直接對應 HttpMethod

public class ValuesController : ApiController{
// GET /api/values
public IEnumerable Get()
{
return new string[] { "value1", "value2" };
}

// GET /api/values/5
public string Get(int id)
{
return "value";
}

// POST /api/values
public void Post(string value)
{
}

// PUT /api/values/5
public void Put(int id, string value)
{
}

// DELETE /api/values/5
public void Delete(int id)
{
}
}

另外在 Global.asax Route 也可以看到多註冊了一組

routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);

利用 Chrome REST Console 測試

image

image

回傳的結果

image

也支援 Xml

image


Tutorial: Your First Web API

Video: Your First Web API

Building HTTP services with ASP.NET Web API in MVC 4 Beta

Chrome 擴充功能 – REST Console

設定 Visual Studio 偵錯 Microsoft .NET 元件

之前想要對 ASP.NET MVC Framework 元件做偵錯的時候我都是下載原始碼專案,然後把參考的部分改掉,還要額外設定 Config 的部分(我都是參考這篇)。後來才發現,如果只是想要看到逐步偵錯的程式碼,其實可以不必要這麼麻煩,微軟的部分元件有開放 .pdb 可以看看程式碼到底了些什麼事,到底是元件的 bug 還是根本就是使用的方式錯了。

Visual Studio 2010 > Debug > Options and Settings > Debugging > General

  1. 取消 Enable Just My Code
  2. 勾選 Enable Source Server Support

image

Visual Studio 2010 > Debug > Options and Settings > Debugging > Symbols

image

在這邊我只想要設定 System.Web.Mvc.DLL 的話,就選擇 Only specifieds modules > Specify Modules

image

按下確定之後就會從 Server 上面下載可用的 .pdf 。也會出現要你同意 License 的部分

image

之後一樣設定中斷點在想進入的地方,如果要看 Htm.TextBoxFor 到底幫你做了些什麼

image

一樣 F11 就可以進入逐步偵錯了

image

不過比起加入原始碼參考還是有些不足的地方,尋找至定義在這裡就沒辦法使用囉,如果要看更詳細的資料還是下載原始碼吧,或是另外開起來當作手動參考,就可以不用修改 Web.Config 那些設定,也可以直接 Release 發佈。

image


Stepping into ASP.NET MVC source code with Visual Studio debugger
Setting up Visual Studio 2010 to step into Microsoft .NET Source

NuGet Package Manager ★★★★★ – The AppStore in Visual Studio

這個工具真的是非常的推薦,是現在用 Visual Studio 2010 開發以來,個人認為幫助最大的工具了。每次找到了什麼好用的 library 總是要找尋一些相關的文章,怎麼設定需要那些參考。現在有了 NuGet ,專案裡面好幾個 Library 我都還不知道他組件的名稱,就已經拿來用了。(看來太方便也是一個缺點)

NuGet 的力量主要還是建立在社群上面,他除了最基本的工具之外,平台才是真正的重點。很多人都會開發一些好用的小工具,或著是眾人合作的 open source 專案,原本的模式可能是透過社群去發布推薦,但是使用者在使用上也必須先了解相關設定,再手動把參考 reference 進來。而且如果一般工程師使用者沒有 follow 到這個訊息,也可能一直也不知道原來有這麼多資源可以幫助解決他手上的問題。

所以這個工具一次整合了兩個部分,就是社群以及降低使用門檻,讓開發者來幫你設定,而且使用者也可以看到下載數的排名。而開發者當然是希望自己做的東西愈多人用愈好,所以也會希望大家可以更方便的來用,造就了一個良性循環的結果。

image

▲首先在擴充管理員搜尋找到這個外掛功能安裝

image

▲接著在專案的功能列表之中我們就可以發現 NuGet 這個管理工具

image

▲包括 Library 的排名,介紹,安裝,使用者投票

image

▲安裝中

安裝結束之後就可以看到參考已經被加入了,如果 config 需要有額外的設定,一般來說也都會幫你預設完成。

image

▲在 NuGet 設定中,還可以設定私人伺服器

Reference

NuGet

http://nuget.codeplex.com/

架設私房NuGet Server

http://blog.darkthread.net/post-2011-05-27-nuget-server.aspx

還在揮汗徒手安裝程式庫? 試試NuGet吧

http://blog.darkthread.net/post-2011-03-12-nuget.aspx

介紹好用 Visual Studio 2010 擴充套件:NuGet 套件管理員

http://blog.miniasp.com/post/2011/05/17/Useful-Visual-Studio-2010-tool-NuGet-Package-Manager.aspx

Visual Studio 2010 常用小技巧筆記

專案管理

分割視窗

字體縮放 Ctrl+滾輪

零寬度選取 一次編輯多行程式碼

工具箱程式碼片段

全螢幕模式 Alt + Shift + Enter

F6 建置

F9 切換中斷點

F10 單步執行(不進入函式)

F11 單步執行(進入函式)

F12 移至定義

Ctrl + E 移到搜尋框

Ctrl + J 叫出 intellisence 選單

Alt + 右鍵 自動完成

Ctrl + . 智慧標籤

Ctrl + – 移到上一個位置

Ctrl + , 搜尋相關 class method 檔案名稱 (巡覽至)

Shift + F12 尋找所有參考

Shift + Enter 下方新增空白行

Ctrl + Enter 上方新增空白行

不選取範圍 整行編輯

F2 重新命名 重構

程式碼片段(code snippets) 管理 使用 Tab * 2

if for foreach prop propfull  switch + enum

DataTips 釘住變數 匯入匯出

中斷點 匯入匯出

DataSet  DataTable 視覺化檢視

IISExpress 原本開發伺服器為 IIS6 IISExpress 為 IIS7 環境

Reference

0804 台灣微軟 無痛開發日 你不知道的 Visual Studio2010

http://www.youtube.com/watch?v=6-HOMN4fVGs