`
niqinwen
  • 浏览: 32295 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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

这篇短小的教程展示了如何创建一个 Mac 应用程序工程,这个 Mac 应用程序在一个窗口里显示一串文字。通过这篇教程,您将熟悉在 Xcode 下软件开发的整个流程:创建工程,设计用户界面,编码并运行。同时还能学到如何调试在代码编写过程中 Xcode 发现的错误,进而了解 Xcode 的调试工具。

Hello 是一个简单的应用程序,启动后弹出一个窗口,里面显示"Hello, World!",如图1-1所示。

图 1-1运行中的 Hello 程序

实际上,这个用户界面是由一个包含着一个视图的窗口所组成的。视图知道如何显示数据。这些对象有一个内置的方法,Cocoa可以通过它来绘制视图。在这个例子中,您需要编写代码以显示 "Hello, World!"

在这个教程中,您将用到 Objective-C 和 Cocoa 框架来创建视图并实现绘制的过程。阅读这个教程不需要您熟悉 Cocoa 和 Objective-C,但熟悉一门C类似或者面向对象的编程语言会很有帮助。您需要在 Mac 下安装 Xcode 才能按教程一步步操作,Xcode 可以在developer.apple.com下载安装.

在该教程中,您将会:

  • 创建 Hello 工程
  • 添加资源文件到工程中
  • 对 Hello 的窗口进行布局
  • 编写代码实现在该窗口中显示字符串
  • 构建并运行 Hello 程序
  • 查看构建 Hello 程序中产生的信息

创建 Cocoa 应用程序工程

Xcode 为几种不同类型的产品提供了工程模板,包括应用程序,框架,插件还有静态库。

您按照下面的步骤给 Hello 程序创建一个 Cocoa 应用程序工程:

  1. 启动 Xcode,Xcode 位于安装的 Applications 目录。

    确认没有 Xcode 窗口打开。

  2. 依次选择菜单 File > New > New Project。

  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工作区窗口中的日志查看器

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics