使用 Xcode 編寫 Mac OS X 下的"Hello, World!"

教程:使用 Xcode 編寫 Mac OS X 下的"Hello, World!"

這篇短小的教程展現瞭如何建立一個 Mac 應用程序工程,這個 Mac 應用程序在一個窗口裏顯示一串文字。經過這篇教程,您將熟悉在 Xcode 下軟件開發的整個流程:建立工程,設計用戶界面,編碼並運行。同時還能學到如何調試在代碼編寫過程當中 Xcode 發現的錯誤,進而瞭解 Xcode 的調試工具。html

Hello 是一個簡單的應用程序,啓動後彈出一個窗口,裏面顯示"Hello, World!",如圖1-1所示。ios

圖 1-1 運行中的 Hello 程序

實際上,這個用戶界面是由一個包含着一個視圖的窗口所組成的。視圖知道如何顯示數據。這些對象有一個內置的方法,Cocoa能夠經過它來繪製視圖。在這個例子中,您須要編寫代碼以顯示 "Hello, World!"git

在這個教程中,您將用到 Objective-C 和 Cocoa 框架來建立視圖並實現繪製的過程。閱讀這個教程不須要您熟悉 Cocoa 和 Objective-C,但熟悉一門C相似或者面向對象的編程語言會頗有幫助。您須要在 Mac 下安裝 Xcode 才能按教程一步步操做,Xcode 能夠在developer.apple.com下載安裝.macos

在該教程中,您將會:編程

  • 建立 Hello 工程
  • 添加資源文件到工程中
  • 對 Hello 的窗口進行佈局
  • 編寫代碼實如今該窗口中顯示字符串
  • 構建並運行 Hello 程序
  • 查看構建 Hello 程序中產生的信息

建立 Cocoa 應用程序工程

Xcode 爲幾種不一樣類型的產品提供了工程模板,包括應用程序,框架,插件還有靜態庫。xcode

您按照下面的步驟給 Hello 程序建立一個 Cocoa 應用程序工程:瀏覽器

  1. 啓動 Xcode,Xcode 位於安裝的 Applications 目錄。app

    確認沒有 Xcode 窗口打開。框架

  2. 依次選擇菜單 File > New > New Project。iphone

  3. 在 Mac OS X 組下面選擇 Application,再選擇 Cocoa Application 模板,並點擊下一步。image: ../art/new_project_dialog-macos_application.jpg
  4. 設置工程的一些選項,而後點擊下一步。

    • Product Name:Hello

    • Company Identifier:com.mycompany

    • App Store Category:無。

    • Create Document-Based Application:不選,這將隱藏 Document Class 和 Document 擴展的選項。

    • Use Core Data:不選。

    • Include Unit Tests:不選。

    image: ../art/new_project_dialog-options.jpg
  5. 在彈出的對話框中,給您的工程選擇一個目錄(好比,桌面),確認未勾選"Create local git repository for this project",點擊建立。image: ../art/save_dialog-new_project.jpg

Xcode 在文件系統中建立工程目錄後,而後會在工做區窗口打開它。

image: ../art/hello_project-initial_workspace_window.jpg

工程的內容顯示在窗口左邊的面板裏(也就是工程瀏覽器中)。面板裏的第一項表示工程自己,它以您建立工程時指定的工程名字來命名。Xcode 把工程 Hello 的組件分爲三組:

  • Hello:包含組成工程的全部文件。這些文件包括源代碼文件和一個用戶界面文件。這個組裏還有一個下一級叫 Supporting Files 的組,裏面的文件在一些任務裏會用到。在這個教程裏您不會去修改這些文件。

  • Frameworks:這組列出您的代碼要依賴的框架或庫名稱,例如,Cocoa 框架。

  • Products:包含您的工程會產生的產品,好比說一個應用程序。

建立 NSView 的子類

如今您將在工程裏添加一個類,Hello 經過它來顯示消息。

Cocoa 經過視圖來繪製對象。視圖必要的功能都是由NSView這個類來實現的,它定義了基礎的繪製方法,以及應用的事件處理和打印框架。一般您不會直接和NSView打交道。而是建立一個NSView的子類,重載那些您想要定製的方法。Cocoa 會自動調用這些方法。

在 Hello工程裏建立NSView的子類:

  1. 點擊菜單 File > New > New File。

    注意:若是 New 菜單裏 New File 這一項是灰的, 點擊 Hello 的工做區窗口(最前面的窗口)內部保證它有焦點。Xcode 根據當前擁有焦點的窗口來判斷哪些命令是可用的。若是當前擁有焦點的窗口不是工做區窗口,和工程有關的命令就不可用。

  2. 在 Mac OS X 組下面選擇 Cocoa,而後再選擇 Objective-C 類模板,點擊下一步。image: ../art/new_file_dialog-cocoa_objc_class.jpg
  3. 指定新文件是NSView的子類,並點擊下一步:

     image: ../art/new_file_dialog-options-nsview_subclass.jpg
  4. 在彈出的對話框中,輸入 HelloView.m 做爲文件名,在 Group 的下拉列表裏裏選擇 Hello(有黃色文件夾圖標),點擊保存。

     image: ../art/save_dialog-helloview_class.jpg

    Xcode 把類HelloView的頭文件和實現文件添加到工程裏,您能夠在工程瀏覽器中找到它們。

     image: ../art/hello_project-helloview_files.jpg

設計用戶界面

Interface Builder 是一個圖形化的用戶界面編輯器,它可以編輯 nib 文件,nib 文件定義了應用程序的用戶界面。您能夠直接排列、操做用戶界面元素(又稱組件)來搭建用戶界面。

給 Hello 應用程序窗口添加一個HelloView的實例。

  1. 在工程瀏覽器中,選中文件MainMenu.xib。Xcode 會在用戶界面編輯器 Interface Builder 裏將這個文件打開。

    編輯器可分紅兩個主要的部分,如圖 1-2所示:左邊的組件面板和右邊的畫板。組件面板顯示 nib 文件中的對象。畫板用來排列 nib 文件中的這些對象,以搭建用戶界面。

    圖 1-2Interface Builder 的組件面板和畫板
  2. 若是畫板上出現了 Hello 的菜單對象,如前面截圖所示,點擊關閉按鈕(x)將它關閉。
  3. 若是組件面板顯示的是大納視圖(圖 1-3)而不是圖標視圖(圖 1-2),點擊下面高亮的按鈕切換到圖標視圖。

     圖 1-3 Interface Builder 組件面板顯示大綱視圖
  4. 在組件面板上點擊 "Window - Hello" 使得 Hello 窗口顯示在畫板上。

     image: ../art/hello_project-mainmenu_xib-hello_window.jpg
  5. 選擇菜單 View > Navigators > Hide Navigator,減小工做區的佔用(下面幾步您都不須要瀏覽工程)。

  6. 點擊菜單 View > Utilities > Show Utilities。 

    工具區包含兩個面板:inspector 面板(頂部)和 library 面板(底部)。library 面板包含文件模板,代碼片段,對象和多媒體元素。

     圖 1-4 工做區窗口裏的工具區
  7. 點擊菜單 View > Utilities > Object Library 打開對象庫。

    經過往上拖拉分隔條讓對象庫面板顯示得更高一些(與此同時 inspector 面板就顯示得更少)。

    image: ../art/hello_project-utility_area-object_library-focus.jpg
  8. 從對象庫的彈出菜單中選擇 Cocoa > Layout Views。

     image: ../art/object_library_menu-cocoa-layout_views.jpg
  9. 從右邊拖拽一個 Custom View 對象到畫板上的 Hello 窗口。

     image: ../art/drag_from_object_library_to_hello_window.jpg

    這樣您就建立了一個類NSView的實例並把它加到窗口裏。

  10. 拖拽新加視圖的四邊使它們緊貼 Hello 窗口的邊框,這樣它就佔滿了整個 Hello 窗口。

     image: ../art/resize_custom_view_in_hello_window.jpg
  11. 點擊菜單 View > Utilities > Idenity Inspector。

    使用 Identify inspector 能夠指定用戶界面元素的不少細節設置,包括對用戶的(提示,也叫幫助標籤)以及對系統的(好比類名稱,運行時屬性,對象 ID 等)。

    image: ../art/identity_inspector.jpg
  12. 在 Identity inspector 中,從 Class 的下拉列表中選擇HelloView

     image: ../art/hello_project-mainmenu_xib-custom_view-identity_inspector-class.jpg

    注意到視圖的標籤從 "Custom View" 變成了 "HelloView"。

  13. 點擊菜單 View > Utilities > Size Inspector。

     image: ../art/ib_size_inspector-view.jpg

    Size inspector 可讓您精確地控制視圖的位置和大小。Autosizing 區域可讓您指定當窗口大小發生變化時視圖是否以及如何隨之變化。(固然您也能夠直接在 Interface Builder 的畫板上移動和改變大小。)

  14. 在 Autosizing 區域,點擊裏面正方形的橫向和縱向的點狀線。

     image: ../art/ib_size_inspector_autosizing_changed-view.jpg

    注意到點狀線都變成了實線。靠裏的正方形裏的實線表示這個方向會自動縮放大小。在本例中,當用戶改變窗口大小時,視圖在橫向和縱向都會自動縮放。Autosizing 區域右邊的實例動畫模擬了這種情形。

Interface Builder 有不少比您如今看到的更多的功能。當您開發一個更復雜的應用,您會用到 inspector 來創建您的代碼和用戶界面對象交互的鏈接。

編寫代碼

您能夠經過在工程瀏覽器裏選擇一個文件從而在工做區窗口裏查看和編輯源代碼,如圖 1-5所示。

圖 1-5 源代碼編輯器

Gutter 顯示文件的行號(若是在文字編輯設置裏"行號"被選中的話;更多信息請查看文字編輯設置幫助),斷點,錯誤和警告信息。

焦點標記(focus ribbon)能讓您更好地專一代碼:

  • 標記出一塊代碼的區域

  • 容許您隱藏代碼塊

跳轉條(Jump bar)能幫助您:

  • 查看相關的文件

  • 向前或向後瀏覽您看過的工程裏的文件

  • 跳轉到當前文件的另外一個位置或者打開工程的另外一個文件

要打開 Hello 的源代碼,執行下面步驟:

  1. 點擊菜單 View > Navigators > Project。

  2. 點擊菜單 View > Utilities > Hide Utilities。
  3. 在工程瀏覽器裏選擇HelloView.m以後源代碼編輯器就會打開它。列表1-1HelloView的初始代碼。

    列表 1-1HelloView的初始代碼

    #import "HelloView.h"
    @implementation HelloView
    - (id)initWithFrame:(NSRect)frame {
    if ((self = [super initWithFrame:frame])) {
    // Initialization code here.
    }
    return self;
    }
    - (void)dealloc {
    // Clean-up code here.
    [super dealloc];
    }
    - (void)drawRect:(NSRect)dirtyRect {
    // Drawing code here.
    }
    @end
  4. drawRect:的方法體裏插入下面這行代碼:

    NSString *hello = "Hello, World!";

    注意到 gutter 出現了一個警告圖標。這表示 Xcode 在您剛輸入的代碼中發現了一個問題。點擊這個警告圖標,能夠看到這個問題的更多信息。Xcode 描述了這個問題並提供解決的辦法。

     image: ../art/source_editor-inline_issue_detection.jpg

    雙擊 "Insert "@"" (或按下回車鍵),把 C 的字符串類型轉化爲 Objective-C 的字符串對象。您這樣用到的特性是Live Issues(代碼查錯和診斷)和Fix-it(自動代碼糾正)。

    糾正後的代碼應該是這樣的:

    NSString *hello = @"Hello, World!";

    這行代碼定義了 Hello 應用程序要顯示在視圖上的字符串。

    Fix-it 還發現了另一個問題:變量hello在方法drawRect:裏未被使用。這是爲何左邊欄仍然顯示一個警告圖標。您很快就會解決這個問題。

  5. 在上一步您增長的代碼下方敲入下面的代碼:

    NSPoint point = NSMake

    在您輸入標識符的過程當中,Xcode 會根據您的輸入提供自動補齊的建議。

     image: ../art/source_editor-code_completion.jpg

    這就是代碼補齊。您能夠在文字編輯設置裏設置是否要提供補齊的功能。

    Xcode 發現您要把一個函數的返回值賦值給一個類型爲NSPoint的變量,所以 Xcode 在補齊的列表裏選擇了NSMakePoint。按下回車鍵完成補齊。

    Xcode 選中補齊後函數的第一個參數。

  6. 輸入15,按 Tab 鍵,再輸入75。在行尾加一個分號。完成後的代碼以下所示:
    NSPoint point = NSMakePoint(15, 75);

    這行代碼定義了特定座標的一個點。咱們將以這個點爲原點繪製字符串。

  7. 把光標放到函數NSMakePoint的名字,再點擊菜單 Help > Quick Help。

     image: ../art/source_editor-quick_reference.jpg

    Quick Help 對選中標識符的 API 提供一個簡要的幫助。從 Quick Help 的窗口您能夠訪問開發庫的其餘部分獲得更多的幫助。

    提示:您也能夠按下 Option 鍵再在代碼中移動光標。當光標通過標識符,Xcode 會顯示下劃線。繼續按着 Option 鍵,這時點擊標識符也能夠打開 Quick Help 窗口。

  8. 按照列表 1-2 完成方法drawRect:的實現。

    列表 1-2drawRect:方法的實現代碼

    - (void)drawRect:(NSRect)dirtyRect {
    NSString *hello = @"Hello, World!";
    NSPoint point = NSMakePoint(15, 75);
    NSMutableDictionary *font_attributes = [[NSMutableDictionary alloc] init];
    NSFont *font = [NSFont fontWithName:@"Futura-MediumItalic" size:42];
    [font_attributes setObject:font forKey:NSFontAttributeName];
    [hello drawAtPoint:point withAttributes:font_attributes];
    [font_attributes release];
    }

    敲完代碼之後,利用 Fix-it 糾正輸入錯誤。(上面提供的代碼是正確的。)

  9. drawRect:方法裏增長一個斷點。

    在對 font 變量賦值的代碼左邊點擊增長一個斷點。儘管drawRect:方法是沒有錯誤的,但經過運行中查看斷點能夠幫助您更好地熟悉 Xcode。

    image: ../art/drawrect_method_of_helloview_class_with_breakpoint.jpg

    注意到增長斷點會自動激活工程的斷點功能—工具欄按鈕 Breakpoints 顯示按下狀態。

運行應用

  1. 點擊菜單 Product > Run 來運行 Hello。

    Activitity viewer(工做區窗口工具條上像LCD形狀的)顯示 Xcode 正在執行中的任務的信息,也就是編譯 Hello 應用並在一個可交互的 debug 會話中運行它。

    圖 1-6顯示了一次調試會話,左邊是調試瀏覽器,右邊是源代碼編輯器,在源代碼編輯器的下方是調試區,代碼運行的信息顯示在調試區。

    圖 1-6Hello 應用在斷點處停下

    注意到源代碼編輯器能夠顯示正在執行的代碼塊裏變量的值。當您把光標放在變量hello上時,源代碼編輯器會彈出 datatip 顯示變量的詳細信息。調試區包含變量面板和控制檯面板。變量面板顯示方法drawRect:裏的變量信息。控制檯面板顯示應用的控制檯輸出。您還能夠直接在控制檯面板裏向調試器發送命令。

  2. 點擊菜單 Product > Debug > Continue 來繼續執行 Hello。

    "Hello, World!"顯示在 Hello 窗口的左下部分。

    image: ../art/hello_app-running.jpg
  3. 點擊 Hello > Quit Hello 或者點擊工做區窗口的 Stop 工具欄按鈕終止 Hello 應用。

查看任務和會話日誌

日誌查看器(Xcode 會話和任務的日誌工具)能讓您檢查 Xcode 執行過的任務的細節,好比編譯和執行程序。若是事情進行得不像預計中的那麼順利,您就能夠利用這個工具來找到問題的根源。即便沒有問題,您也能夠在點擊Run執行程序之後查看活動的日誌。

查看活動的詳情:

  1. 點擊菜單 View > Navigators > Log。

  2. 在日誌瀏覽器中選擇 Build Hello 這個任務。而後在右邊的查看器裏選上 All 和 All Messages。

    日誌查看器會把編譯 Hello 產生 Hello 應用程序過程當中的全部操做都顯示出來。

    選中查看器中某一項操做(圖 1-7),右邊會顯示詳情按鈕。點擊詳情按鈕就會顯示出更詳細的日誌。

    圖 1-7工做區窗口中的日誌查看器
相關文章
相關標籤/搜索