Уроки iPhone SDK: Создаем собственный WEB-браузер!

Май 21

iPhone SDK - Уроки | Автор Artem Add comments

В этом уроке мы рассмотрим создание веб-обозревателя (по-быстрому, с жестко запрограмированным URL или HTML наполнением). Позже мы еще вернемся к этой теме и поговорим о добавлении на верхнюю панель инструментов функций поиска, создания ссылок и пр.

1. Настройка проекта

Я не буду вдаваться в детали по настройке XCode и подобным моментам. При необходимости вы всегда можете вернуться к [предыдущим урокам]. Из верхнего меню выберите команду “File -> New Project“, в окне iPhone OS — выбираем “Window-Based Application“.

picture-131

Присвоив проекту имя “WebBrowserTutorial“, сохраните его кнопкой “Save“.

2. Добавление в окно метода “UIWebView”

В левой панели дважды щелкните на файле “MainWindow.xib” под папкой “Resources“, запустив редактор IB. Результат должен выглядеть примерно так, как показано ниже. Если отсутствует окно инспектора (третье на фото), вызовите его командой верхнего меню “Tools -> Inspector“.

Нажмите для увеличения

Теперь достаточно перетащить компонент “Web View” из библиотеки вправо (второе окно), и он автоматически изменит размеры в соответствии с экраном.

Настало время настроить некоторые связи. Для начала, удерживая нажатой клавишу <Control>, щелкните и перетащите связующую линию от объекта “File’s Owner” в первом окне к “Web View“. На экране появится следующий элемент:

picture-16

Щелкните на “delegate” для объекта “Outlet” — и все готово!

Сохранившись, закройте редактор IB.

3. Большой код (для маленького такого приложения).

Для начала настроим заголовочный файл для “UIWebView Outlet“.

В папке “Classes” на левой панели найдите и откройте файл “WebBrowserTutorialAppDelegate.h” , который выглядит так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

//

//  WebBrowserTutorialAppDelegate.h

//  WebBrowserTutorial

//

//  Created by Dean on 16/09/08.

//  Copyright __MyCompanyName__ 2008. All rights reserved.

//

#import &lt;UIKit/UIKit.h&gt;

@interface WebBrowserTutorialAppDelegate : NSObject  {

UIWindow *window;

}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@end

Добавим переменную Outlet для объекта “UIWebView” — прямо под строкой “UIWindow *window“. Код будет следующим:

1	IBOutlet UIWebView *webView;

Он настраивает переменную Outlet для объекта “UIWebView” и присваивает ей имя “webView“, которое мы будет использовать в основном контроллере.

Сохранив файл, откройте файл “WebBrowserTutorialAppDelegate.m” из той же папки классов.

Изначально его содержимое выглядит примерно так:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//

//  WebBrowserTutorialAppDelegate.m

//  WebBrowserTutorial

//

//  Created by Dean on 16/09/08.

//  Copyright __MyCompanyName__ 2008. All rights reserved.

//

#import "WebBrowserTutorialAppDelegate.h"

@implementation WebBrowserTutorialAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {

// Замещение точки настройки после запуска приложения

[window makeKeyAndVisible];

}

- (void)dealloc {

[window release];

[super dealloc];

}

@end

Мы добавим код к методу “applicationDidFinishLaunching“, который, как понимаете, будет выполняться по окончании запуска приложения. Все-таки, имена функций у Apple просто отличные!

Под строкой “applicationDidFinishLaunching” вносим приведенный ниже код:

1
2
3
4
5
6
7
8
9

// Пример 1, загрузка наполнения из URLNSURL

NSURL *url = [NSURL URLWithString:@"http://dblog.com.au"];

NSURLRequest *request = [NSURLRequest requestWithURL:url];

[webView loadRequest:request];

// Пример 2, загрузка наполнения из строки

//NSString *HTMLData = @"<h1>Hello this is a test</h1>";

//[webView loadHTMLString:HTMLData baseURL:nil];

Основная часть кода ничего сложного собой не представляет. Я включил в него две опции, с которыми при желании можно экспериментировать. Первая загружает наполнение из url (в данном случае, из http://dblog.com.au). Вторая — из строки, которую можно получить откуда угодно, сгенерировать динамически, взять из XML (как в одном из наших прошлых проектов RSS Feed ) и пр.

Чтобы второй пример заработал, закомментируйте три первые строки и уберите комментарии с двух последующих.

Теперь вы готовы сохранять код и запускать приложение.

4. Ничего не вижу! Что за…

Не волнуйтесь, я сделал это специально — чтобы подчеркнуть важность привязки Outlet к реальному компоненту. Если с самого начала этого не делать, вскоре наступит полная неразбериха, и процесс программирования начнет сводить с ума!

Снова откройте файл “MainWindow.xib” из папки “Resources” и, удерживая нажатой клавишу <Control>, перетащите линию от объекта “Web Browser Tutorial App Delegate” (см. рис. внизу) к компоненту “Webview“. Как только “webView” Outlet будет выбран, должно появиться второе окно.

picture-17 picture-18

Сохранившись, снова закройте редактор IB и попытайтесь запустить приложение. Если был выбран пример 1, экран будет выглядеть примерно так:

picture-19

5. Заключение

Вот, собственно, и все по этому уроку. Можете поэкспериментировать с интерфейсом и различными опциями загрузки “UIWebView“.

6. Дополнения

Получив вопросы читателей, я добавил еще несколько советов по уроку.
Первый касается загрузки файла из application bundle.
Откройте файл “WebBrowserTutorialAppDelegate.m” и отредактируйте функцию “applicationDidFinishLaunching” так, как показано внизу.

1
2
3
4
5
6
7

- (void)applicationDidFinishLaunching:(UIApplication *)application {

NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"html"];

NSData *htmlData = [NSData dataWithContentsOfFile:htmlFile];

[webView loadData:htmlData MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:[NSURL URLWithString:@""]];

[window makeKeyAndVisible];

}

Приведенный здесь код загружает наполнение “UIWebView” из локального файла (в данном случае “sample.html“).

Создайте новый пустой файл с названием “sample.html” и добавьте в него следующее содержимое:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<html>

<head>

<title>Sample</title>

</head>

<body>

<!-- Load Image from base64 string -->

Image Loaded from base64 string:<br/>

<img src="data:image/jpeg;base64,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" alt="2954488.jpg" /><br/>

<!-- Load Image from URL -->

Image Loaded from URL:<br/>

<img src="http://www.google.com.au/intl/en_au/images/logo.gif"/><br/>

This is the <strong>body</stron> of the text.<br/>

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

</body>

</html>

Это простейший html-файл, в который внедряются и изображения — через их значения base64 (подробнее о конвертации в base64 на англ. языке можно прочесть[здесь]). Таким образом, с помощью кодировки base64 можно создавать полностью автономные файлы со всеми изображениями.