Вказівкидовиконаннязавдання4

Web-браузер повинен містити наступні елементи інтерфейсу:

–головне меню;

–панель інструментів із кнопками для виконання команд Back, Forward, Stop, Refresh;

–поле для введення адреси Web-сторінки із випадаючим донизу списком пройдених адрес;

–панель кнопок Links для виклику найбільш часто використовуваних сторінок чи сайтів;

–робоче поле, де відображається вміст Web-сторінок;

–рядок статусу (інформаційну панель), у якому відображається адреса Web-сторінки, що завантажується та діаграма процесу завантаження.

На новій формі розташуйте наступні компоненти: MainMenu1 (сторінка Standard), CoolBar1 (сторінка Win32), WebWrowser1 (сторінка Internet), StatusBar1 (сторінка Win32). Ці компоненти повинні заповнити всю клієнтську область форми. У заголовок формі помістіть назву “My Web Browser” (властивість Caption).

Структуру головного меню сформуйте так, як це показано на малюнку.

Для цього виконайте команду MenuDesigner із контекстного меню для компоненти MainMenu1 (цим самим ми активізуємо конструктор меню).

У назвах пунктів головного меню окремі літери підкреслені. Це зроблено для того, щоб можна було викликати ці пункти меню комбінаціями клавіш Alt+<відповідна підкреслена клавіша>. Щоб окремі літери у назвах пунктів меню і літери у командах меню View були підкреслені , потрібно у конструкторі меню перед ними набирати символ &. У вікні ObjectTreeView системи Delphi структура сформованого меню буде відображатися таким чином:

Нумерація окремих компонент на малюнку може не співпадати із тією, що є у вашому проекті (наприклад, ToolBar9 на малюнку і ToolBar1 у вашому проекті).

Для того, щоб у пункті меню View між групами команд розташувати лінію-розділювач, потрібно в якості назви чергової команди ввести символ “-” (дефіс). На малюнку — це компонента з іменем N1.

Для властивості Checked тих компонент, які відповідають командам ToolBar і StatusBar меню View, присвоїмо значення True. На екрані ліворуч цих команд з’явиться галочка. Цими командами ми будемо пізніше вмикати та вимикати панелі CoolBar1 і StatusBar1 відповідно.

Встановіть для властивості Align компоненти WebWrowser1 значення alClient. Це дозволить панелі, на якій буде відображатися вміст Web-сторінок, зайняти всю клієнтську область форми від компоненти CoolBar1 до компоненти StatusBar1. Для властивості Align компонент CoolBar1 і StatusBar1 система Delphi встановить значення alTop і alBottom відповідно.

На компоненті CoolBar1 розташуйте наступні компоненти: ToolBar1 (сторінка Win32), ComboBox1 (сторінка Standard), ToolBar2 (сторінка Win32), Animate1 (сторінка Win32). ToolBar1 і Animate1

розмістіть поруч у одному рядку (див. малюнок).

На панелях ToolBar1 і ToolBar2 розташуйте 4 кнопки ToolButton. Вони добавляються командою New Button із контекстного меню для панелей ToolBar1 і ToolBar2 відповідно. Зробіть так, щоб розміри і розташування кнопок було приблизно таким, як це показано на малюнку. Для того, щоб призначення (назви) кнопок, які ми пізніше будемо задавати за допомогою властивості Caption, відображалися на формі, потрібно для панелей ToolBar1 і ToolBar2 властивості ShowCaptions присвоїти значення True.

Для того, щоб компонента ComboBox1 (яка у даному випадку розглядається як окрема підпанель для CoolBar1) та панель ToolBar2 мали окремі назви, що виводяться на початку панелі зліва, потрібно виконати наступне:

1)у вікні ObjectTreeView системи Delphi розкрити компоненту Bands (назви підпанелей для

CoolBar1);

2)підпанелі CoolBar1 будуть пронумеровані числами 0, 1, 2, 3. Виберіть підпанель з номером 2. За допомогою властивості проконтролюйте, чи відповідає вона компоненті ComboBox1. У вас ComboBox1 може мати інший номер, залежно від порядку розташування компонент на CoolBar1. Властивості Text присвойте значення Adress;

3)аналогічним чином панелі ToolBar2 дайте назву Links.

Оскільки список ComboBox1 у нашому проекті буде містити список адрес тих Web-сторінок, які виводилися у вікно браузера, то для зручності звертання до компоненти ComboBox1 присвоїмо їй ім’я Urls (властивість Name).

Кнопки панелі ToolBar2 будуть призначені для швидкого переходу на найбільш часто використовувані сайти.

Для відображення малюнків на кнопках панелей ToolBar1 і ToolBar2 нам будуть потрібні списки малюнків ImageList (сторінка Win32). Розташуйте на формі 4 таких компоненти (по 2 для панелей ToolBar1 і ToolBar2 відповідно; один список для зображень, які відповідатимуть пасивному стану кнопок, а другий — активному, тобто, коли малюнки не сірі, а зафарбовані у інший колір). Цим спискам малюнків присвойте імена NavigatorList, NavigatorHotList, LinksImages, LinksHotImages

відповідно (властивість Name). Заносити малюнки у ці компоненти потрібно за допомогою редактора списку малюнків, який викликається командою ImageListEditor із контекстного меню відповідної компоненти. Кожний новий малюнок добавляється командою Add.

Малюнки, які будемо зносити у списки NavigatorList, NavigatorHotList, LinksImages, LinksHotImages розташовані за адресою ftp://srv/pub/yava/buttons. Їх спочатку варто скопіювати у певну папку на локальний чи мережевий диск.

Для списку NavigatorList задайте розміри малюнків 30х20 (властивість Width=30, властивість

Height=20) і занесіть малюнки із файлів ArrowL1.bmp, ArrowR1.bmp, Stop1.bmp, Refresh1.bmp, Stop2.bmp. Нумерація малюнків у списках розпочинається із 0. Номер (індекс) малюнка фіксується як значення властивості ImageIndex у тих компонентах, які їх будуть використовувати, зокрема, у компонентах ToolButton. Після того як потрібні малюнки з’являться у вікні ImageListEditor, потрібно клацнути кнопками Aply i Ok.

Аналогічно у список NavigatorHotList занесіть малюнки із файлів ArrowL2.bmp, ArrowR2.bmp,

Stop2.bmp, Refresh2.bmp, Stop2.bmp.

Малюнки для кнопок панелі ToolBar2 можуть бути однаковими. Для списку LinksImages задайте розміри малюнків 16х16 (властивість Width=16, властивість Height=16) і занесіть 4 однакових малюнки із файлу DelphiIcon1.bmp. Так само для списку LinksHotImages задайте розміри малюнків 16х16 (властивість Width=16, властивість Height=16) і занесіть 4 однакових малюнки із файлу

DelphiIcon2.bmp.

У системі Delphi набори стандартних малюнків для кнопок знаходяться за адресою c:\Program Files\Common Files\Borland Shared\Images\Buttons. Розгляньте їх самостійно.

Для властивостей цієї панелі ToolBar1 задамо наступні значення:

Присвоєння значень для перших двох властивостей дозволить задати малюнки для кнопок панелі ToolBar2, коли вони знаходяться у пасивному і активному станах відповідно. Значення True для властивості List встановлює режим, коли зображення на кнопках будуть відображатися зліва від надписів на них.

Задамо адреси сайтів, які будуть викликатися кнопками панелі ToolBar2. Для цього для

Для кнопки ToolButton8 виберіть адресу самостійно. При потребі кнопки на панелі ToolBar2 можна буде добавити або змінити їх призначення.

Подію OnClick для всіх кнопок панелі ToolBar2 будемо опрацьовувати одним і тим самим методом LinksClick. Спочатку опишемо цей метод у вікні модуля Unit1.pas. Для цього у опис класу Tform1

потрібно вставити заголовок методу

procedure LinksClick(Sender: TObject);

(перед розділом private), а у розділ implementation вставити опис методу

procedure TForm1.LinksClick(Sender: TObject); begin

if (Sender as TToolButton).Hint = '' then Exit;

URLs.Text := (Sender as TToolButton).Hint; end;FindAddress;

У цьому методі перевіряється, чи заповненою є властивість Hint (підказка) кнопки, на яку ми натиснули. Якщо це так, то у властивість URLs.Text заноситься адреса із властивості Hint відповідної кнопки і викликається метод FindAddress, який буде здійснювати пошук вказаної у URLs.Text Webсторінки. (Добавимо метод FindAddress у модуль Unit1.pas пізніше).

У вікні Object Inspector для кожної із кнопок панелі ToolBar2 для опрацювання події OnClick виберемо метод LinksClick. Таким чином, ми одним методом зможемо опрацьовувати подію OnClick для всіх кнопок панелі ToolBar2.

У розділ private класу Tform1 вставимо описи

HistoryIndex: Integer;

HistoryList: TStringList; UpdateCombo: Boolean; procedure FindAddress;

Список HistoryList буде зберігати адреси, на які робилися послідовно переходи, HistoryIndex — це індекс активного рядка (адреси) цього списку. Це дозволить правильно виконувати команди Back та Forward кнопками на панелі інструментів ToolBar1 чи за допомогою відповідних команд меню. Поле UpdateCombo відповідатиме за те, чи вносилися зміни (доповнення) у список ComboBox1.

У розділ implementation модуля Unit1.pas вставимо опис методу FindAddress

procedure TForm1.FindAddress; var

Flags: OLEVariant; begin

Flags := 0; UpdateCombo := True;

end;WebBrowser1.Navigate(WideString(Urls.Text), Flags, Flags, Flags, Flags);

На панель StatusBar1 добавимо хоча би одну інформаційну панель, де буде відображатися адреса Web-сторінки, що завантажується. Для цього із контекстного меню для StatusBar1 виконаємо команду Panels Editor і у вікні редактора добавимо панель StatusPanel1 (команда Add New у вікні редактора або клавіша Insert).

Команди Back, Forward, Stop, Refresh у нашому проекті будуть виконуватися за допомогою однойменних кнопок на панелі ToolBar1 і за допомогою таких же команд в пунктах меню. Щоб не програмувати методи опрацювання події OnClick для кнопок і команд меню, які виконуватимуть однакові дії, розташуємо на формі компоненту ActionList1 (механізм дій). Ця компонента може містити список дій, які можуть реалізовувати різні об’єкти форми. Потім ці дії потрібно відзначити у властивості Action тих компонент, які призначені для їх активізації.

Помітимо на формі компоненту ActionList1. Для формування списку дій виконаємо команду Action List Editor із контекстного меню для ActionList1. У вікні редактора нову дію можна добавити кнопкою New Action або клавішею Insert. Кожна нова дія розглядається як окрема компонента форми (підкомпонента ActionList1) і як поле класу Tform1. Для першої дії Action1 задамо наступні значення властивостей:

За виконання відповідних дій відповідає метод Execute.

Запрограмуємо метод Execute для дії BackAction. Для цього у вікні Object Inspector на закладці Events двічі клацнемо навпроти події OnExecute. У модуль Unit1.pas автоматично вставиться метод

BackActionExecute. У тілі методу BackActionExecute передбачимо виконання наступних дій.

procedure TForm1.BackActionExecute(Sender: TObject); begin

URLs.Text := HistoryList[HistoryIndex - 1];

FindAddress; end;

Аналогічно опишемо метод Execute для дії ForwardAction:

procedure TForm1.ForwardActionExecute(Sender: TObject); begin

URLs.Text := HistoryList[HistoryIndex + 1];

FindAddress; end;

Для дії StopAction:

procedure TForm1.StopActionExecute(Sender: TObject); begin

WebBrowser1.Stop; end;

І для дії RefreshAction:

procedure TForm1.RefreshActionExecute(Sender: TObject); begin

FindAddress; end;

Залишилося закріпити ці дії за компонентами, які їх будуть виконувати. Для цього досить зафіксувати потрібну дію як значення властивості Action відповідної компоненти. Тобто для властивості Action кнопки ToolButton1 (яка має виконувати команду Back) та для властивості Action компоненти, що відповідає команді Back пункту меню Go, потрібно присвоїти значення BackAction. Аналогічно для властивості Action кнопки ToolButton2 (яка має виконувати команду Forward) та для властивості Action компоненти, що відповідає команді Forwardпункту меню Go, потрібно присвоїти значення ForwardAction. Для властивості Action кнопки ToolButton3 (яка має виконувати команду Stop) та для властивості Action компоненти, що відповідає команді Stop пункту меню View, потрібно присвоїти значення StopAction. Для властивості Action кнопки ToolButton4 (яка має виконувати команду Refresh) та для властивості Action компоненти, що відповідає команді Refresh пункту меню View, потрібно присвоїти значення RefreshAction.

У програмі потрібно контролювати можливість подальшого виконання команд Back і Forward (перевіряти, чи індекс поточної адреси у списку історії адрес HistoryList не виходить за межі індексів існуючих у списку адрес). Для цього будемо використовувати методи BackActionUpdate та

ForwardActionUpdate:

procedure TForm1.BackActionUpdate(Sender: TObject); begin

if HistoryList.Count > 0 then elseBackAction.Enabled := HistoryIndex > 0

BackAction.Enabled := False;

end;

procedure TForm1.ForwardActionUpdate(Sender: TObject); begin

if HistoryList.Count > 0 then

elseForwardAction.Enabled := HistoryIndex < HistoryList.Count - 1

ForwardAction.Enabled := False;

end;

Запрограмуємо події OnClick для виконання інших команд меню.

Команда Exit пункту File:

procedure TForm1.Exit1Click(Sender: TObject); begin

end;Close;

Команда ToolBar пункту View:

procedure TForm1.ToolBar9Click(Sender: TObject); begin

with Sender as TMenuItem do begin

Checked := not Checked; end;end;Coolbar1.Visible := Checked;

Команда StatusBar пункту View:

procedure TForm1.StatusBar2Click(Sender: TObject); begin

with Sender as TMenuItem do begin

Checked := not Checked; end;end;StatusBar1.Visible := Checked;

Якщо у полі редагування списку пройдених адрес URLs натиснути клавішу Enter, то має здійснюватися повторний виклик Web-сторінки, адреса якої на даний момент відображається

(властивість URLs.Text). Для цього передбачимо виконання події OnKeyDown для URLs:

procedure TForm1.UrlsKeyDown(Sender: TObject; var Key: Word;

begin

Shift: TShiftState);

if Key = VK_Return then begin

end;end;FindAddress;

Повторний виклик Web-сторінки має здійснюватися і при клацанні лівою клавішею миші у полі

адреси. Для цього передбачимо виконання події OnClick для URLs:

procedure TForm1.UrlsClick(Sender: TObject); begin

end;FindAddress;

На етапі створення форми потрібно вказати адресу avi-файла, який буде відображати компонента

Animate1 під час завантаження Web-сторінки, та утворити список історії адрес HistoryList:

procedure TForm1.FormCreate(Sender: TObject); begin

HistoryIndex := -1;

HistoryList := TStringList.Create;

end;Animate1.FileName:='c:\Program Files\Borland\Delphi7\Demos\CoolStuf\cool.avi';

На етапі завершення роботи програми потрібно звільнити пам’ять, яка була виділена для списку

HistoryList:

procedure TForm1.FormDestroy(Sender: TObject); begin

end;HistoryList.Free;

До початку завантаження Web-сторінки потрібно виконувати певні дії, пов’язані із модифікацією списку історії адрес HistoryList, списку пройдених адрес URLs (метод BeforeNavigate для компоненти

WebBrowser1):

procedure TForm1.WebBrowser1BeforeNavigate2(Sender: TObject; const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData, Headers: OleVariant;

var Cancel: WordBool); var NewIndex: Integer;

begin

NewIndex := HistoryList.IndexOf(URL); if NewIndex = -1 then

begin

{ Remove entries in HistoryList between last address and current address } if (HistoryIndex >= 0) and (HistoryIndex < HistoryList.Count - 1) then

while HistoryList.Count > HistoryIndex do

HistoryList.Delete(HistoryIndex); end HistoryIndex := HistoryList.Add(URL);

else

HistoryIndex := NewIndex;

if UpdateCombo then begin

UpdateCombo := False;

NewIndex := URLs.Items.IndexOf(URL); if NewIndex = -1 then

elseURLs.Items.Insert(0, URL)

URLs.Items.Move(NewIndex, 0);

end;

end;URLs.Text := URL;

На початку завантаження Web-сторінки виконаємо наступні дії:

procedure TForm1.WebBrowser1DownloadBegin(Sender: TObject); begin

Statusbar1.Panels[0].Text := URLs.Text;

{Turn the stop button dark red } ToolButton3.ImageIndex := 4;

{Play the avi from the first frame indefinitely } end;Animate1.Active := True;

Тут ми адресу сторінки, що завантажується виводимо на інформаційну панель, кнопку Stop зафарбовуємо у червоний колір (вірніше на кнопку Stop поміщаємо інше зображення) і розпочинаємо прокручувати avi-файл на компоненті Animate1.

Після завершення завантаження Web-сторінки виконаємо наступні дії:

procedure TForm1.WebBrowser1DownloadComplete(Sender: TObject); begin

{Turn the stop button grey } ToolButton3.ImageIndex := 2;

{Stop the avi and show the first frame } end;Animate1.Active := False;

Тут ми кнопку Stop зафарбовуємо у зелений колір і припиняємо показ avi-файла.

При натискуванні комбінацій клавіш Alt+<стрілка вліво> та Alt+<стрілка вправо> передбачимо

виконання команд Back та Forward відповідно.

procedure TForm1.FormKeyDown(Sender: TObject; var Key: Word; Shift: TShiftState); begin

if Shift = [ssAlt] then

if (Key = VK_RIGHT) and ToolButton2.Enabled then

ToolButton2.Click

else if (Key = VK_LEFT) and ToolButton1.Enabled then

ToolButton1.Click;

end;

Виконайте прогонку проекту. Протестуйте його роботу у різних режимах.

Вправи для самостійного виконання:

1.Добавте до проекту вікно AboutBox1 (див. лаб. роботу №5), виклик цього вікна повинен здійснюватися при виконанні команди About із пункту Help головного меню. Вміст вікна AboutBox1 спроектуйте самостійно.

2.На панель StatusBar1 під час завантаження Web-сторінки виведіть індикатор процесу завантаження у вигляді синього прямокутника, ширина якого збільшується пропорційно до обсягу завантаженої частини сторінки.

Скористайтесь методом опрацювання події OnProgressChange для компоненти WebBrowser1.

Заголовок цього методу має вигляд:

procedure TForm1.WebBrowser1ProgressChange(Sender: TObject;

Progress, ProgressMax: Integer);

Параметр Progress показує на шкалі 0 ..ProgressMax яку частину файла завантажено. Якщо Progress має значення –1, то процес завантаження завершено.

Панель StatusBar1 володіє властивістю Canvas, що дозволяє на ній будувати графічні зображення стандартними засобами.

Вказівкидовиконаннязавдання5

Для створення Web-сервера скористаємося компонентою TIdHTTPServer (HTTP-сервер) із сторінки Indy Servers палітри компонент.

Створіть нову форму і розмістіть на ній компоненту TIdHTTPServer. У властивості Bindings потрібно вказати ІP-адресу комп'ютера в мережі і порт, через який будуть опрацьовуватися HTTPзапити (як правило, це вісімдесятий порт — 80). Для цього відкрийте діалогове вікно Binding Editor для формування значення властивості Bindings.

У полі IP Address виберіть IP-адресу вашого комп’ютера, а у полі Port — номер порта. IP-адреси комп’ютерів у цифровій формі складаються із 4-х однобайтових чисел, розділених

крапкою. У лабораторіях фізмату сформовані IP-адреси комп’ютерів за таким принципом: перші два значення — це 172.25, а потім йде умовний однобайтовий номер аудиторії (ауд. 414 — 14, ауд. 417 — 17, ауд. 406а — 61), після нього — номер комп’ютера у аудиторії. IP-адресу комп’ютера на вашому робочому місці можна уточнити у адміністратора аудиторії.

У властивості SessionTimeOut компоненти TIdHTTPServer вказується час очікування сервера в процесі передачі інформації клієнтському додаткові, якщо він з якихось причин не здатний прийняти відповідні дані (наприклад, обірвався зв'язок). При бажанні у властивості ServerSoftware можна ввести рядок, який буде характеризувати назву Web-сервера: наприклад, MyWebServer.

Як не дивно, але уся функціональність простішого Web-сервера може поміститися в одному рядку: в опрацювальнику події OnCommandGet, що виникає, коли до сервера надходить запит від

клієнтського додатка, наприклад звичайного браузера чи уже створеного вами браузера:

procedure TForm1.IdHTTPServer1CommandGet(AThread: TIdPeerThread; RequestInfo: TIdHTTPRequestInfo;

ResponseInfo: TIdHTTPResponseInfo);

begin

IdHTTPServer1.ServeFile(AThread, ResponseInfo,

'z:\MyWebServer'+RequestInfo.Document);

end;

Параметр AThread характеризує з'єднання з клієнтською програмою і обмін даними з нею у вигляді потоків. Параметр Requestlnfo визначає характеристики запиту, а параметр Responselnfo — характеристики відповіді сервера.

Усе, що потрібно від створюваного нами Web-сервера, — це відправити запитаний HTTP-файл клієнтові, що і виконується за допомогою методу ServeFile. Перший параметр у ньому — це об'єкт, що описує дане з'єднання (AThread). Другий параметр — інформація про відповідь сервера (вона передається в оригінальному вигляді без змін), а третій параметр — повний шлях до файлу, вказаного в запиті. Цей шлях, мабуть, проходить через каталоги комп'ютера, локального для HTTP-сервера. Такі каталоги користувачеві браузера (або будь-якої іншої програми, клієнтської стосовно HTTP-сервера) не видні і не доступні.

Зверніть увагу на запис шляху до документа під час виклику методу ServeFile. Шлях не завершується похилою рискою, тому що властивість Document користувацького запиту являє собою рядок, виділений з повного звертання до сервера. Шлях — це IP-адреса або символьне ім'я сервера, що потім перетворюється в ІP-адресу системою доменних імен (наприклад: http://www.MyWebServer.ua/index.html або http://225.1.2.3/index.html). Перша частина звертання являє собою назву протоколу запиту (HTTP://), друга — символьне ім'я сервера (воно може бути

представлено й у цифровому вигляді). Слідом за ним йде шлях до документа, включаючи символ похилої риси — /index.html. Тому вказувати похилу риску слідом за локальним шляхом (z:\MyWebServer) не треба, вона в запиті вже є.

Вважається, що каталог z:\MyWebServer є кореневою папкою, в якій зберігається стартова Webсторінка сервера (це дуже часто файл index.htm або index.html) та інші файли і папки, на які є гіперпосилання із стартової сторінки.

Перевести HTTP-сервер в активний стан можна під час створення форми таким чином:

procedure TForm1.FormCreate(Sender: TObject); begin

IdHTTPServer1.Active:=True; end;

Відкомпілюйте програму. Якщо немає помилок, то Web-сервер готовий до роботи.

Перед тим, як до створеного серверу ми будемо звертатися із іншим комп’ютерів, потрібно у каталог z:\MyWebServer помістити файл index.htm. Для прикладу створимо у z:\MyWebServer файл

index.htm з таким змістом:

<HTML>

<HEAD>

<TITLE>Стартова сторінка</TITLE> </HEAD>

<BODY bgColor=yellow> <CENTER>

Ви бачите стартову стрінку мого Web-серверу

</CENTER> </BODY> </HTML>

Файл index.htm можна формувати довільним текстовим редактором, який дозволяє зберігати текст у форматі “Текст MS DOS”, “Текстовий файл *.txt” чи аналогічному з використанням ASCIIкодування. Для таких потреб підходить текстовий редактор “Блокнот” (який є стандартною програмою Windows), вбудований редактор будь-якого файлового менеджера.

Тепер ми готові до організації сеансу клієнт-серверного зв’язку. На комп’ютері, за яким ви працюєте, завантажте створену вами програму Web-сервер (із середовища Delphi або із exe-файлу). На будь-якому іншому комп’ютері завантажте спочатку Internet Explorer і в полі адрес вкажіть

http://172.25.14.1/index.htm

IP-адреса має відповідати вашому комп’ютеру, де працює Web-сервер. У вікні Internet Explorer побачите стартову сторінку вашого сервера. Врахуйте затримку, яка йде на передачу даних між вашим комп’ютером та сервером фізмату, адже Web-сервер буде завантажений на вашому робочому місці, а його вміст зберігатиметься на логічному дискові Z:, тобто на сервері фізмату.

Попробуйте відкрити стартову сторінку розробленого вами Web-сервера за допомогою Webбраузера, який ви створили у завданні 4.

Критерії оцінювання комп’ютерної практики.