2014年5月9日 星期五

使用Visual Studio 2012 建立一個 MVC 網站 - Part 1

使用 Visual Studio 2012 建立一個 MVC 網站 - Part 1


MVC

MVC (Model-View-Controller) 是一種概念,它把資料(Model),程式邏輯(Controller),展示頁面(View) 完全分開來,在這裡的資料我們可以把它想成一個類別(Class)。

The Model


Model 我們可以直接把它認為是ㄧ個類別(Class),這個 Model 包含了屬性與方法,例如 People 這個類別可以包含姓名、年齡、地址等屬性,也有跑步()、走路()、睡覺() 等方法讓我們呼叫。

The View


View 負責將所有的 Model 轉換成HTML給使用者看,當然也可以是PDF或XML的格式。總結來說 View 只需要著重在顯示資料(Displaying data),是它為一的工作。

The Controller


Controller 就像是ㄧ個指揮官,指揮著 ViewModel,當它收到使用者的請求時,Controller 會先將相關的 Model 處理好後,在將結果傳送給 View 去展示。

建立第一個MVC專案




在Visual Studio 2012裡,我們先新增一個MVC專案,選擇ASP.NET MVC 4 Web Application。
MVC Project Creation


接下來,可以看到有很多預設的Templates可以選,每一個的預設功能不一樣,旁邊都有說明,這裡就不贅述了! 中間有一個View Engine可以選擇Razor或ASPX,兩者差異即是標籤語言(Script language)寫法的不同而已,這裡只是做ㄧ個選擇,之後隨時皆可以變換。
MVC Project Creation


按下完成後,我們可以看到VS已經幫我們創建了ㄧ些必要的檔案與資料夾。
MVC Project Creation

除了看到View, Controller, Model 等資料夾以外,要特別介紹在 App_Start 資料夾底下的 RouteConfig.cs 這個檔案。

public class RouteConfig
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );
}

ASP.NET MVC routes 是負責決定要執行哪些 controllers 的重要角色,在routes.MapRoute裡面預設帶了三個屬性,分別為

name : 這個名字必須是唯一的,因為它是用來參考這條唯一的 route

url : 這是ㄧ個 url 模式(Pattern),這個模式決定我們如何獲取頁面

default: 預設url,我們可以看到裡面帶了另外三個參數,若使用者請求網頁的時候沒有提供參數,我們就會使用預設値,{controller}即會帶入Home,{action}會帶入Index,{id}會隨機產生。

舉例來說,我們的網址是 http://www.abc.com,若使用者只打了這個網址,網站其實會將它帶入http://www.abc.com/Home/Index 這個頁面。下面提供ㄧ些映射表,說明routes如何解析這些輸入的網址。

URL Controller Action ID
/auctions/auction/1234 AuctionsController Auction 123
/auctions/recent AuctionsController Recent
/auctions AuctionsController Index
/ HomeController Index

在下ㄧ章,我們會說明如何開始建立MVC網頁。

2014年5月7日 星期三

三個步驟,用Eclipse開發視窗程式

使用Eclipse開發視窗程式


第一步

進入Eclipse WindowBuilder 頁面,找到你所使用之Eclipse的版本後在 link 上點選右鍵複製鏈結

Eclipse WindowBuilder Page

第二步

打開Eclipse,在選單欄上按Help > Install New Software…


enter image description here


將剛剛第一步所複製的網誌貼上紅色框框處,並按下Select All,按下Finish


enter image description here

第三步

完成後,我們即可開始使用視窗來編輯程式的版型,在專案資料夾上按右鍵 > New > Other..,找到 WindowBuilder > Swing Designer > Application Window


enter image description here


接下來我們即可在下面 Source/Design 之間互換。
換到 Design 的第一件事情就是要先把 Layout 改成 absolute,就可以直接把元件拖上去了!