Урок 22
»ASP для новачків
Тепер розглянемо використання таблиць у оформленні Web-сторінок. У попередньому розділі ми бачили, як використовується стандартна таблиця, яка створюється компонентом із вкладки HTML. Усім хороший цей компонент, крім одного — розробник не має можливості змінювати його параметри. Точніше, за допомогою деяких досить заплутаних хитрощів можна динамічно змінювати вміст осередків і керувати їх видимістю, використовуючи для цього різні елементи стильового оформлення та властивості видимості, але надто це невдячна робота. ASP.NET дав розробнику саме свободу творчості, усунувши необхідність використовувати різні хитрощі. Якщо вся робота в ASP.NET залишає відчуття стрункості, логічності та прозорості, то чому використання таблиць має створювати подібні проблеми?
Тому в даному розділі ми розглянемо застосування компонента таблиці з вкладки Web Forms (Web форми). Почнемо ми зазвичай з розгляду його структури. Звичайно, немає потреби наводити тут повний список всіх властивостей чи методів, оскільки чимала їх частина успадкована від класів-предків, і вони не такі вже й важливі для роботи з цим компонентом. Але дійсно важливі властивості та події, що входять до складу об'єкта таblе, ми згадаємо. Почнемо, як завжди, із властивостей.
На цьому перелік властивостей об'єкта Table, що розглядаються, закінчується. Тепер згадаємо про кілька подій, що входять до складу цього об'єкта.
Тепер, як і було зазначено вище, перейдемо до розгляду структури об'єкта TabieRow, який реалізує окремий рядок таблиці. Ми вже знаємо, що сама таблиця за своєю структурою є саме колекцією рядків, які є колекціями осередків. Подібна структура опису таблиці явно успадкована зі звичайного HTML, тому пристворення таблиці розробнику буде зручно використовувати звичні уявлення. Але перейдемо все-таки до структури TabieRow. Як ми вже знаємо, це просто колекція осередків, яка успадкувала багато властивостей від своїх предків. Тому ми розглянемо ті властивості, які регулюють зовнішній вигляд рядка або описують її структуру.
- BackCoior. Властивість встановлює колір фону всіх осередків рядка.
- BorderCoior. Властивість задає колір меж осередків, що входять до складу рядка.
- BorderWidth. Властивість встановлює ширину меж осередків рядка.
- cells. Властивість має тип TabieCeiicoiiection та є колекцією об'єктів TabieCeii, які реалізують окремі осередки таблиці, що входять до складу рядка. Цей тип теж слід уважно розглянути, але до нього ми перейдемо трохи згодом.
- Font. Властивість задає шрифт, яким відображатиметься вміст осередків таблиці, що входять до складу цього рядка.
- Forecoior. Властивість встановлює колір, яким відображатиметься вміст комірок. У нашому випадку це буде колір текстового вмісту осередків.
- Height. Властивість визначає висоту рядка таблиці.
- HorizontaiAiign. Властивість встановлює горизонтальне вирівнювання. для вмісту кожного осередку, що входить у цей рядок. За промовчанням використовується значення Notset.
- verticalAlign. Властивість встановлює вертикальне вирівнювання для вмісту кожної комірки, що входить у цей рядок. За промовчанням використовується значення Notset. Крім нього також використовуються значення Top, Middle та Bottom.
- width. Властивість задає ширину рядка. Однак його явне використання найчастіше буде не потрібно, тому що всі рядки успадковують загальну ширину таблиці, і немає потреби встановлювати ширину кожного рядка окремо.
Отже, мидізналися, що основним будівельним матеріалом для таблиці є осередок, що реалізується за допомогою об'єкта TabieCeii. Настала черга розглянути і його.
- BackCoior. Властивість встановлює колір тла цієї комірки. Якщо для осередку не встановлено значення цієї властивості, використовується колір фону, який був встановлений для всього рядка, до складу якого входить цей осередок.
- BorderCoior. Властивість задає колір кордонів осередку.
- BorderWidth. Властивість встановлює ширину кордонів комірки.
- coiumnSpan. Властивість має ціле значення, яке вказує, скільки стовпців об'єднано в цьому осередку. За замовчуванням, кожен осередок займає простір в одному стовпці, але ми можемо і об'єднувати кілька сусідніх стовпців в одному осередку, як і зі звичайними HTML-таблицями.
- Font. Властивість задає шрифт, яким буде відображатися текстовий вміст цієї комірки.
- ForeCoior. В якості вказується колір, яким буде відображатися вміст комірки.
- Height. Властивість задає висоту комірки.
- HorizontalAiign. Як і однойменна властивість всього рядка, ця властивість встановлює горизонтальне вирівнювання вмісту комірки.
- RowSpan. Цілочисленне значення цієї властивості вказує, скільки сусідніх рядків об'єднує осередок.
- Text. Властивість має тип string. Рядок, що міститься в цій властивості, відображається як вміст комірки.
- verticaiAiign. Властивість встановлює вертикальне вирівнювання текстового вмісту комірки.
- width. Властивість задає ширину комірки.
- wrap. Властивість логічного типу Boolean. У тому випадку, якщо вміст комірки не вміщується в ній як один рядок, слід або розбити цей вміст на кілька рядків без зміни ширини комірки, або розсунути саму комірку,збільшивши її розмір по горизонталі. Якщо властивість має значення True, що використовується за умовчанням, вміст клітинки буде розбитий на кілька рядків.
Отже, тепер, коли ми більше знаємо про структуру об'єкта Table, можна перейти до розгляду прикладу його використання. Звичайно, таблиці ідеально підходять для візуалізації баз даних, але цю їхню іпостась ми не будемо зараз розглядати, оскільки про взаємодію ASP.NET з базами даних буде розказано в наступному розділі. Однак слід зазначити, що у списку компонентів Web Forms є компонент DataGrid, який і призначений для відображення таблиць, пов'язаних з базами даних. А зараз нас цікавить звичайний компонент Table, у комірках якого ми можемо розміщувати текстову інформацію.
На основному просторі Web-сторінки розмістимо один компонент Table. За замовчуванням він має лише один осередок. Спробуємо створити два стовпці, у кожному з яких буде два осередки. Для цього нам, природно, потрібно буде скористатися властивостями таблиці.
У вікні властивостей об'єкта Properties (Властивості) слід звернути увагу на рядок з властивістю Rows (Рядки) та натиснути кнопку в цьому рядку. При цьому буде відображено діалогове вікно TableRow Collection Editor (Редактор колекції рядків таблиці),
Спочатку це вікно виглядає дещо інакше, ніж на малюнку. Так як у таблиці немає жодного рядка, то і у вікні нічого не буде відображено. Але як тільки ми натиснемо кнопку Add (Додати), у списку Members (Елементи) з'явиться елемент, що позначає один рядок у таблиці. Так як нам необхідно отримати спочатку два рядки, то і кнопку Add нам доведеться натиснути два рази.
Після того, як ми створимо два рядки, слід для кожного з них задати кількість осередків у рядкуі вміст цих осередків. Тут варто звернути увагу на список TableRow Properties (Властивості рядків таблиці), що знаходиться у правій частині діалогового вікна TableRow CollectionEditor (Редактор колекції рядків таблиці). У цьому списку відображаються всі властивості вибраного рядка таблиці зі списку Members (Елементи). Нас, природно, буде цікавити їх властивість-колекція Cells, яка розташовується на нижньому рядку. Натискання кнопки, що знаходиться в цьому рядку, активує діалогове вікно TableCell Collection Editor (Редактор табличних осередків), яке дозволяє розробнику задавати кількість осередків у рядку та всі їх основні властивості.
За допомогою цього діалогового вікна в кожному рядку ми створимо по два осередки, і внесемо до них числа від одиниці до чотирьох. Звичайно, можна було б їх залишити порожніми, але річ у тому, що комірки без вмісту не відображатимуться, і, отже, структура таблиці може від цього порушитись. Заповнення осередків відбуватиметься динамічно в момент роботи Web-додатку. Для цього нам потрібно розмістити на сторінці три поля текстового введення, у двох з яких користувач буде вказувати номер рядка і стовпця, в яких знаходиться редагована комірка, а в третє поле він вноситиме текст, який потім буде відображений у вибраному комірці. Також, звичайно, знадобиться одна кнопка. Власне весь вихідний HTML-код дає досить хороше уявлення про структуру створюваної Web-сторінки. Він наведений у лістингу 3.43.