Розробка додатків для iPhone із застосуванням Ruby on Rails і Eclipse: Частина 1. Обслуговування контенту для iPhone

1. Серія контенту:
2. Цей контент є частиною серії: Розробка додатків для iPhone із застосуванням Ruby on Rails і Eclipse
3. Установка середовища програмування
4. Малюнок 1. Модуль iPhone
5. Обслуговування контенту iPhone
6. Малюнок 2. Як відобразити екран ПК на iPhone
7. Визначення користувачів Mobile Safari
8. Лістинг 1. Приклад методу контролера, керуючого iPhone
9. Лістинг 2. Додавання формату iPhone як фільтра before (лістинг 2)
10. Перегляд контенту iPhone при розробці
11. Модуль iPhone Eclipse для Aptana
12. Малюнок 3. Властивості проекту iPhone
13. Імітатор SDK iPhone
14. iPhone або iPod touch
15. Спроба переглянути свій сайт
16. Створення макета iPhone
17. Лістінг 3. Тема файлу з тегом вікна перегляду Mobile Safari
18. Лістинг 4. Файл CSS для Mobile Safari
19. Малюнок 4. Тема Soups OnLine
20. Вхід в режим мобільного браузера і вихід з нього
21. Лістинг 5. Макет з посиланням для виходу з мобільного режиму
22. Лістинг 6. Код CSS для посилання виходу з мобільного режиму
23. Малюнок 5. Посилання для переходу в режим настільного браузера
24. Лістинг 7. Код BrowsersController для переходу з режиму в режим
25. Лістинг 8. Завдання формату iPhone для виходу з режиму мобільного браузера
26. Лістинг 9. Умовне розміщення тега, якщо це iPhone
27. Лістинг 10. Лістинг CSS для посилання входу в режим iPhone
28. Малюнок 6. Посилання для повернення в мобільний режим
29. Висновок і плани на майбутнє
30. Ресурси для скачування

Розробка додатків для iPhone із застосуванням Ruby on Rails і Eclipse

Визначення Mobile Safari в додатку Ruby on Rails

Серія контенту:

Цей контент є частиною # з серії # статей: Розробка додатків для iPhone із застосуванням Ruby on Rails і Eclipse

https://www.ibm.com/developerworks/ru/views/global/libraryview.jsp?series_title_by=Разработка+приложений+для+iphone+с+применением+ruby+on+rails+и+eclipse

Слідкуйте за виходом нових статей цієї серії.

Цей контент є частиною серії: Розробка додатків для iPhone із застосуванням Ruby on Rails і Eclipse

Слідкуйте за виходом нових статей цієї серії.

За місяці, що минули з моменту випуску Apple iPhone і iPod touch, Mobile Safari став найпопулярнішим мобільним Web-браузером в США, і його частка ринку продовжує зростати. Зважаючи на особливості форм-фактора і моделі призначеного для користувача інтерфейсу (UI) iPhone він значно відрізняється від інших мобільних браузерів, і багато розробників вирішили оптимізувати свої Web-сайти з метою підтримки моделі UI Mobile Safari.

Рішення про створення спеціального контенту для iPhone є компромісним між двома більш радикальними варіантами вибору. З одного боку, можна не робити нічого. Інтерфейс «постукай - і збільшиш» Mobile Safari дозволяє легко відвідувати Web-сайти, навіть якщо вони не призначені спеціально для мобільних пристроїв. Apple вибрала цей шлях, вважаючи, що користувачі iPhone повинні мати доступ до всесвітньої павутини у всій її повноті. Інша крайність - можна скористатися випущеним нещодавно комплектом розробника ПЗ (SDK) для iPhone і зробити свій додаток стандартним iPhone-додатком. Це забезпечить безмежну гнучкість користувальницького інтерфейсу і доступ до функцій iPhone - таким як датчик прискорень або відеокамера, - які неможливо використовувати в Web-додатку. Однак створити спеціальний додаток за допомогою SDK важче, ніж Web-додаток, а якщо Web-додаток вже є, то найпростіший спосіб надати користувачеві звичний інтерфейс iPhone - створити його спеціалізовану версію для iPhone.

У цій статті показано, як побудувати додаток Ruby on Rails, яке динамічно розпізнає браузери для iPhone або iPod touch (в решті частини статті я говорю про iPhone - пам'ятаючи, що все це може бути застосовано і до iPod touch), надаючи користувачам Mobile Safari можливість при бажанні бачити весь Web-контент. У статті розглядаються також структури з боку сервера, необхідні для підтримки окремого контенту для користувачів iPhone, і розповідається про те, як приступити до обслуговування контенту iPhone. У другій частині серії «Розробка додатків для iPhone із застосуванням Ruby on Rails і Eclipse» розповідається про те, як надати цій контенту форму і зміст, характерні для iPhone.

Установка середовища програмування

У цій статті використовується Eclipse з модулями Aptana для підтримки Ruby on Rails і iPhone. Модуль для Ruby on Rails підтримує специфічні для Ruby і для Rails можливості виділення синтаксису, спеціальні клавіші, середовище виконання і т.п. Модуль для iPhone забезпечує середу попереднього перегляду для відображення створюваних Web-додатків в форматі iPhone.

Можливі два варіанти створення комбінації Eclipse / Aptana: ввести модулі Aptana в існуючу середу Eclipse або завантажити Aptana Studio, похідну від Eclipse, і додати модулі в стартовому вікні Aptana. Якщо середовище Eclipse вже встановлена, виконайте звичайний пошук модулів Eclipse. Виберіть Help> Software Updates> Find and Install і додайте URL модулів, зазначені в розділі Схожі теми . Нам знадобляться два модуля Eclipse. Якщо ви застосовуєте Eclipse для розробки Rails, модуль RadRails у вас, ймовірно, вже є. Знадобиться також модуль розробки для iPhone, який створює макет екрану iPhone для попереднього перегляду результатів розробки в форматі iPhone. Хоча цей модуль призначений для перегляду статичних сторінок HTML, його можна пристосувати і для додатка Rails. На малюнку 1 цей модуль показаний у дії.

Малюнок 1. Модуль iPhone

Перше, що кидається в очі, - дисплей модуля більше, ніж реальний iPhone. Це зроблено для того, щоб зберегти попіксельно сумісність - дисплей модуля має ті ж розміри в пікселях, що і дисплей iPhone, тільки у iPhone вони розташовані набагато щільніше. При роботі на Macintosh є ще дві можливості імітувати iPhone: iPhoney або офіційний імітатор iPhone в складі SDK iPhone.

iPhoney - це спеціалізований додаток, яке подібно до модулю Aptana створює макет дисплея iPhone. Різниця в тому, що показує кожен з цих пунктів меню, коли розміри сайту більше розмірів iPhone. Модуль Aptana, як видно на малюнку, відображає контент в повну величину і пропонує лінійки прокрутки. У iPhoney Web-сторінка стискається до розміру вікна перегляду (як ніби на сторінці розміщений реальний дисплей iPhone). Жодна з програм не підтримує функції збільшення чи зменшення подвійним постукуванням, так що це все-таки не повноцінна заміна тестування на реальному пристрої.

Той, хто підписався і завантажив SDK iPhone, може також використовувати офіційний імітатор iPhone, що входить до складу пакету. Він містить коректний агент користувача і імітує вся поведінка Mobile Safari, включаючи збільшення подвійним постукуванням. До дрібних недоліків можна віднести тільки те, що потрібно працювати під Mac OS X V10.5, і так як імітується вся операційна система iPhone, при запуску системи потрібно запускати і Mobile Safari. Ще можна отримати лістинг вихідного коду HTML, як при роботі з настільним браузером. Але це найточніший з усіх існуючих імітаторів Mobile Safari.

Обслуговування контенту iPhone

Припустимо, ви - щасливий власник онлайнового джерела рецептів всіляких супів Soups OnLine. Ваш сайт відмінно виглядає на екрані настільного ПК, але вам хочеться задовольнити зростаючу кількість користувачів iPhone, яким в дорозі може знадобитися інформація про перших стравах. Зараз вони бачать те, що показано на малюнку 2.

Малюнок 2. Як відобразити екран ПК на iPhone

Нічого страшного в цьому немає, і завдяки прекрасному графічному інтерфейсу зі збільшенням Mobile Safari користувач зможе орієнтуватися на сайті. Але все ж хотілося б зробити екран більш раціональним і краще пристосованим для мобільного користувача.

Тут варто згадати, що Soups OnLine - сайт, описаний в моїй книзі Professional Ruby On Rails. Тут я використовую його головним чином тому, що він вже існує і з ним можна експериментувати, не побоюючись порушити чиїсь авторські права. В розділі Схожі теми наведено код версії Soups OnLine, який використовується для цієї статті, і шаблон, на якому базується первинна версія.

Щоб обслуговувати мобільних користувачів, додаток Rails має вміти наступне:

• визначати, коли користувач звертається до сайту через iPhone або iPod touch;
• дозволяти йому вільно переходити з мобільної версії сайту на звичайну, і навпаки;
• використовувати окремий макет для користувачів Mobile Safari, включаючи окремі файли Cascading Style Sheets (CSS) і, можливо, бібліотеки JavaScript;
• надавати мобільним користувачам окремий контент.

Код, який використовується для вирішення всіх цих завдань у цій статті, можна застосовувати, як є. Він також зібраний в модуль Rails rails_iui, який можна додати в свій проект, щоб отримати ту ж функціональність в одному пакеті.

Визначення користувачів Mobile Safari

Для обслуговування спеціального контенту iPhone додаток Rails повинно мати можливість розпізнавати iPhone. З боку сервера головним засобом ідентифікації є рядок user-agent, передана браузером на сервер. Рядок user-agent iPhone виглядає приблизно так (номери версій з часом змінюються):

Mozilla / 5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit / 420 + (KHTML, like Gecko) Version / 3.0 Mobile / 1A543 Safari / 419.3

Рядок iPod touch відрізняється тим, що вираз в дужках починається з iPod, а не з iPhone. Apple, що не ручаючись за достовірність, рекомендує використовувати номер збірки WebKit (в даному прикладі це AppleWebKit / 420 +) для визначення наявності нових тегів параметрів CSS. (При тестуванні клієнтської, а не серверної частини Apple рекомендує взагалі не використовувати рядок user-agent, а перевіряти наявність специфічних функцій.)

Усередині Rails потрібно мати можливість задати агент користувача iPhone в ApplicationController для подальшого використання в фільтрі before. Не можна просто шукати в рядку "iPhone" - можна пропустити iPod touch. Схоже, що на даний момент самим надійним способом визначення користувачів iPhone є пошук слів "Mobile" і "Safari":

def is_iphone_request? request.user_agent = ~ /(Mobile\/.+Safari)/ end

Тепер потрібно ввести iPhone в середу Rails V2.0 respond_to, так щоб iPhone автоматично визначався як тип pseudo-MIME і можна було доповнити свої контролери, як показано в лістингу 1.

Лістинг 1. Приклад методу контролера, керуючого iPhone

def index @recipes = Recipe.find_for_index (params [: format]) respond_to do | format | format.html # index.html.erb format.xml {render: xml => @recipes} format.iphone # index.iphone.erb end end

Для цього буде потрібно пара кроків. По-перше, додайте в файл config / initializers / mime_types.rb наступний рядок:

Mime :: Type.register_alias "text / html",: iphone

В останніх версіях Rails цей рядок вже міститься в файлі у вигляді коментаря, так що досить просто розкоментувати її. У старих версіях Rails, де немає каталогу config / initializers, цей рядок можна помістити в config / environment.rb. Це призводить до створення спеціального типу MIME iphone для використання в вашому додатку. Зовні тип iphone сприймається як text / html, але внутрішньо на ці два типи можна реагувати по-різному.

Додайте в ApplicationController ще один приватний метод у вигляді фільтра before (лістинг 2).

Лістинг 2. Додавання формату iPhone як фільтра before (лістинг 2)

before_filter: set_iphone_format def set_iphone_format if is_iphone_request? request.format =: iphone end end

Тепер всі запити від iPhone або iPod touch будуть позначатися форматом запиту: iphone. Зауважимо, що поки в цьому коді немає нічого специфічного для використовуваного нами прикладу сайту, так що цю частину коду можна вільно додавати до будь-якого сайту, з яким ви працюєте.

При використанні модуля rails_iui в ApplicationController або будь-який контролер, який повинен відповідати на запити iPhone, досить вставити наступний рядок:

acts_as_iphone_controller

Як уже зазначалося, модуль Aptana не посилає наведену вище рядок user-agent. Однак угода про імена Rails дозволяє легко обійти це. Додавання розширення iphone до будь-якого URL (наприклад, http: // localhost: 3000 / recipies.iphone) автоматично встановлює формат запиту: iphone і викликає обслуговування контенту iPhone. Це дозволяє тестувати код iPhone на імітаторі Aptana. При використанні модуля rails_iui заміна наведеної вище команди на acts_as_iphone_controller (true) переводить додаток у режим тестування, коли всі запити розглядаються як запити iPhone, що спрощує тестування на імітаторі або в іншому браузері.

Перегляд контенту iPhone при розробці

Я вже згадував про чотирьох способах перегляду Web-сайту, оптимізованого для iPhone, в процесі розробки:

• модуль iPhone Eclipse для Aptana;
• iPhoney;
• імітатор iPhone SKD;
• iPhone або iPod touch.

Модуль iPhone Eclipse для Aptana

Модуль для Aptana має ряд переваг. Це багатоплатформовий інструмент, який працює скрізь, де працює Eclipse. Він дозволяє одночасно переглядати мобільну і класичну версії сайту і добре інтегрується з іншими інструментами розробки Eclipse. Цей модуль дозволяє переглядати додаток в декількох браузерах одночасно, що корисно, якщо ви орієнтуєтеся як на мобільних, так і на традиційних користувачів. Крім того, при використанні на iPhone JavaScript з боку клієнта Aptana пропонує потужну консоль, яка дозволяє реєструвати події підключеного iPhone і навіть посилати в телефон команди JavaScript зі своїх додатків. Однак стаття присвячена головним чином розробці з боку сервера, і я не буду тут заглиблюватися в опис цих можливостей.

До недоліків модуля Aptana можна віднести те, що він важкуватий, якщо ви не використовуєте Eclipse в якості альтернативного середовища розробки; його незручно налаштовувати на запуск з певних сторінок, і він не точно імітує поведінку iPhone на сайтах, які ширше дисплея iPhone. Ще один недолік полягає в тому, що модуль Aptana не ідентифікують за допомогою рядка user-agent, що виходить від iPhone або iPod touch. Як сказано вище, це означає необхідність додаткових хитрувань для перегляду контенту iPhone на Aptana.

Встановивши модуль Aptana, почніть новий проект типу iPhone і надайте йому ім'я. Модуль Aptana за замовчуванням тестує статичну сторінку проекту index.html. В даному випадку якраз це і потрібно. Нехай він перейде на сторінку index вашої програми. У вікні Properties для проекту iPhone:

• перейдіть на вкладку HTML Preview і натисніть Override workspace settings;
• на панелі Preview Type натисніть Use absolute URL;
• введіть URL свого локального сервера Rails. (Проект Rails не повинен працювати всередині Eclipse. Він повинен працювати просто по тому URL, який вказаний в модулі.)

Коли все готово, екран повинен виглядати, як на малюнку 3.

Малюнок 3. Властивості проекту iPhone

iPhoney

Застосування iPhoney - ще одна можливість перегляду контенту для iPhone. Це легка програма, яка дозволяє вводити в поле адреси довільні URL і точно стискає широкі сторінки. Недолік iPhoney в тому, що це додаток тільки для Macintosh. При роботі з iPhoney обов'язково задайте в меню iPhoney параметри для використання рядка user-agent iPhone, так як за замовчуванням це не включено.

Імітатор SDK iPhone

Імітатор SDK iPhone працює аналогічно. Запустіть програму і натисніть кнопку Safari, щоб увійти в браузер. Web-сайти можна вводити прямо в поле адреси з клавіатури, хоча якщо потрібно, з'явиться екранна клавіатура iPhone. Перевага цього імітатора полягає в тому, що він підтримує як закладки Mobile Safari, так і функціональність "помістити на домашній екран". З іншого боку, так як це не справжній імітатор Safari, він не надає простого способу показати обробляється вихідний код HTML, що легко роблять інші імітатори.

iPhone або iPod touch

Нарешті, можна використовувати реальний iPhone або iPod touch. Тут головною перешкодою стають проблеми мережевих з'єднань. Якщо ви, як це зазвичай буває, займаєтеся розробкою на сервері, який знаходиться за маршрутизатором і має IP-адресу в одному з приватних інтервалів (10. *. *. *, 172.16-31. *. * Або 192.168. *. *) , iPhone буде бачити ваш сервер розробки, тільки якщо він з'єднаний з Інтернетом по локальній мережі Wi-Fi, в якій знаходиться цей сервер. (Ви також спростите собі життя, якщо будете користуватися прямим IP-адресою.) Якщо таку ситуацію створити не вдається (наприклад, при відсутності мережі Wi-Fi, в якій дозволено працювати вашого сервера), доведеться встановити тестоване додаток на загальнодоступний допоміжний сервер.

Спроба переглянути свій сайт

Вибравши спосіб перегляду контенту для iPhone, спробуйте увійти на свою сторінку. В даному прикладі це сторінка http: // localhost: 3000 / recipes. (У браузері Aptana це recipes.iphone, а при використанні модуля rails_iui - тестовий режим.) Якщо ви внесли в код описані вище зміни, то побачите порожній екран. Так і має бути. (В цьому можна переконатися, переглянувши сайт на настільному браузері.) Фільтр before визначив Mobile Safari, змінив формат відгуку, а тепер намагається реагувати відповідно до угод Rails. В даному випадку угода Rails полягає в тому, щоб знайти в блоці respond_to слово iphone. Якщо воно там є, Rails бере макет з файлу layout.iphone.erb і заповнює сторінку вмістом app / views / recipes / index.iphone. Так як нічого цього ще немає, Rails видає порожню сторінку. Зокрема, він видає порожню сторінку, тому що йому ще не сказали, що метод index контролера рецептів повинен реагувати на запити в форматі iphone.

Створення макета iPhone

Знаючи, що користувачі заходять на ваш сайт через пристрої iPhone, можна зробити ряд точних припущень з приводу їхнього середовища. На сьогоднішній день в екосистемі Mobile Safari всього два пристрої з однаковими розмірами екрану і браузерами. Видима область зображення у верхній частині сторінки iPhone становить 320 пікселів у ширину і 356 пікселів у висоту. Поле URL над сторінкою додає ще 60 пікселів, які з'являються, коли користувач прокручує екран вниз. Сторінки Mobile Safari доходять точно до країв екрану з обох сторін, не залишаючи полів.

За замовчуванням Mobile Safari передбачає, що Web-сайт має 980 пікселів в ширину, і стискає його приблизно на одну третину, щоб вмістити в область перегляду iPhone. Для багатьох сайтів це працює чудово, але не тоді, коли сайт незвично вузький або коли ви намагаєтеся підігнати його під розміри iPhone. На щастя, в Mobile Safari є механізм, що дозволяє точно задати ширину, яку потрібно використовувати для відображення сайту.

Для опису властивостей вікна перегляду Mobile Safari можна використовувати спеціальний метатег. У лістингу 3 показано, як виглядає цей тег, поміщений в новий файл макета app / views / layouts / recipes.iphone.erb.

Лістінг 3. Тема файлу з тегом вікна перегляду Mobile Safari

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http: / /www.w3.org/1999/xhtml "xml: lang =" en "lang =" en "> <meta http-equiv =" content-type "content =" text / html; charset = UTF-8 "/> <title> Recipes: <% = controller.action_name%> </ title> <meta name = "viewport" content = "width = device-width, user-scalable = no"> <% = stylesheet_link_tag 'iphone'%> < / head> <body> <h1 id = "header"> <% = "Soups OnLine"%> </ h1> <% = yield%> </ body> </ html>

Цей метатег встановлює два Властивості вікна перегляду. Перше, width = device-width, сообщает Mobile Safari, что нужно, щоб сайт оброблявся з Використання поточної ширини пристрою. Можна такоже Задати будь-постійне значення между 200 и 10000. Друге властівість, user-scalable = no, дозволяє візначаті, чи Збільшення Mobile Safari, так як сайт в точності збігається з розміром екрани iPhone. На додаток до ціх властівостей можна Встановити ще и висота Сторінки. Якщо ви хочете точніше керувати можливостями масштабування для користувача, можна задати параметри initial-scale (початковий масштаб), minimum-scale (мінімальний масштаб) і maximum-scale (максимальний масштаб). Всі три використовують за замовчуванням значення 1,0 і можуть змінюватися в інтервалі від 0,0 до 10,0.

Інша специфічна для iPhone рядок цього файлу макета - тег таблиці стилів CSS, який визначає новий файл CSS для iPhone. Деякі джерела рекомендують використовувати для контенту iPhone умовні CSS. Однак мені цей синтаксис здається непрозорим. Так як з боку сервера відомо, з яким браузером ви працюєте, в цьому немає ніякої необхідності - можна вказати точну файл, який потрібен цьому браузеру.

Лістинг 4 являє собою файл CSS, який я створив для управління основним заголовком iPhone-версії сайту Soups OnLine.

Лістинг 4. Файл CSS для Mobile Safari

h1, h2, h3 {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: # 000000; } H1 {font-weight: bold; font-size: 175%; margin: 0; } Body {margin: 0; padding: 0; } #Header {width: 320px; height: 40px; margin: 0 auto; background: url (/images/img02_iphone.gif) no-repeat; }

Між цим файлом і відповідними місцями оригінального файлу CSS є всього кілька відмінностей. Значення елемента розміру шрифту h1 менше (насправді я намацав потрібний розмір методом проб і помилок). Тег h1 тепер має значення bold, а поля явно встановлені нульовими. Bold робить текст дещо виділяється, а нульові поля точно суміщають його початок з верхнім лівим кутом екрану. Розміри ідентифікатора класу #header тепер збігаються з розмірами екрану iPhone, і я вручну змінив фонову картинку, щоб вона займала весь цей простір.

Потрібно також створити файл app / views / recipes / index.iphone.erb, але поки його можна залишити порожнім. Після всіх цих змін версія сайту для iPhone починає оформлятися. Тема виглядає, як на малюнку 4.

Малюнок 4. Тема Soups OnLine

На більшості імітацій помітно, що поворот екрану призводить до зміни масштабів зображення відповідно до нової шириною пристрою в 480 пікселів. Адже ми встановили, що в якості розміру масштабування повинна використовуватися ширина пристрою.

Вхід в режим мобільного браузера і вихід з нього

Останнє, що треба додати, це механізм, за допомогою якого користувачі Mobile Safari виходять з режиму перегляду на мобільному пристрої і повертаються назад. Це дозволяє їм при бажанні бачити інтерфейс цілком, що розширює можливості (хоча і може ускладнити навігацію), а потім повернутися назад. Користувачам настільних ПК аналогічну посилання для входу в режим інтерфейсу iPhone надавати не потрібно, тому що, як буде показано в другій частині, зі спеціальними CSS і кодом JavaScript для Mobile Safari сайт працювати не буде.

Механізм простий: внизу вікна iPhone додаються посилання, які встановлюють cookie, що визначають параметри для конкретного браузера користувача. Потім ви дозволяєте замінювати цими параметрами рядок user-agent при визначенні формату вихідних даних. Спочатку додамо посилання. Замініть тег body у файлі app / views / layouts / recipes.iphone.erb (лістинг 5).

Лістинг 5. Макет з посиланням для виходу з мобільного режиму

<Body> <h1 id = "header"> <% = "Soups OnLine"%> </ h1> <% = yield%> <br/> <% = link_to "Switch To Desktop View", {: controller => "browsers",: action =>: desktop},: class => "mobile_link"%> </ body>

Для цього посилання застосовується новий клас CSS, визначений у файлі CSS для iPhone (лістинг 6).

Лістинг 6. Код CSS для посилання виходу з мобільного режиму

.mobile_link {font-size: 14px; font-weight: bold; font-family: Helvetica; color: # 00f; text-decoration: none; text-align: center; display: block; width: 320px; }

Для посилань в системі iPhone обраний шрифт Helvetica. Його розмір трохи менше рекомендованого для основного тексту, але це і не повинен бути основний текст. Інші елементи розташовують посилання по центру екрана. Результат виглядає, як на малюнку 5.

Малюнок 5. Посилання для переходу в режим настільного браузера

На наступному кроці встановлюється cookie. Як видно з визначення посилання в лістингу 5, щоб управляти цим кодом, я створив новий клас контролера BrowsersController. У лістингу 7 наведено код установки cookie.

Лістинг 7. Код BrowsersController для переходу з режиму в режим

class BrowsersController <ApplicationController def desktop cookies [ "browser"] = "desktop" redirect_to recipes_path end def mobile cookies [ "browser"] = "mobile" redirect_to recipes_path end end

Елементарно, чи не так? Він просто встановлює cookie і робить переадресацію назад на сторінку, яка використовується в якості сторінці index. Потім потрібно змінити метод set_iphone_format, щоб врахувати параметри браузера (лістинг 8).

Лістинг 8. Завдання формату iPhone для виходу з режиму мобільного браузера

def set_iphone_format if is_iphone_request? or request.format.to_sym ==: iphone request.format = if cookies [ "browser"] == "desktop" then: html else: iphone end end end

По суті, тут внесено дві зміни. У початковий оператор if додано вираз request.format.to_sym ==: iphone. Це дозволяє тим URL, які представляють собою запити iPhone через розширення .iphone, теж змінювати формат відповідно до cookie. Це зроблено головним чином для того, щоб цей код можна було тестувати на імітаторі Aptana. Потім вибирається request.format в залежності від наявності в cookie користувача значення desktop, встановленого методом BrowserController.

Залишилося тільки додати посилання для виходу з режиму настільного уявлення. Її повинні бачити тільки члени iPhone, тому почнемо з додавання в ApplicationController наступного рядка:

helper_method: is_iphone_request?

Цей рядок робить метод is_iphone_request? допоміжним методом, який можна викликати з будь-якого уявлення. Зокрема, його можна використовувати для додавання вмісту лістингу 9 в кінець початкового макета екрану в файлі app / views / layouts / recipes.html.erb.

Лістинг 9. Умовне розміщення тега, якщо це iPhone

<% If is_iphone_request? %> <% = Link_to "Switch To Mobile Safari View", {: controller => "browsers",: action =>: mobile},: class => "big_link"%> <% end%>

Це доповнення включає аналогічну посилання в настільний браузер, а також додає клас CSS в файл настільної CSS (в даному випадку public / scaffold.css), як показано в лістингу 10.

Лістинг 10. Лістинг CSS для посилання входу в режим iPhone

.big_link {font-size: 40px; font-weight: bold; font-family: Helvetica; color: # 00f; text-decoration: none; text-align: center; display: block; width: 980px; }

Клас CSS додає велику, яскраву посилання внизу екрану настільного браузера. Вона повинна бути великою, тому що Mobile Safari стисне її, а користувачі все одно повинні її побачити і натиснути, не збільшуючи зображення. Цю посилання можна зробити великої і яскравої, так як користувачі настільного браузера її все одно не бачать. На дисплеї iPhone вона буде виглядати, як на малюнку 6.

Малюнок 6. Посилання для повернення в мобільний режим

Це посилання привласнює cookie користувача значення mobile і повертає на сторінку index, де вона знову інтерпретується як посилання на мобільний браузер.

Висновок і плани на майбутнє

У цій статті розповідається про структуру, необхідної для підтримки окремого контенту для користувачів iPhone і iPod. Тут показано, як управляти вікном перегляду для відображення контенту Mobile Safari з правильним розміром і масштабом, і починається розповідь про те, що повинно бути в макеті мобільного сайту.

У другій частині показано, як відображати контент в браузері Mobile Safari, і наведені рекомендації по UI для управління контентом iPhone. Там же розглядається питання про те, як використовувати ці рекомендації при розробці свого власного додатка Rails.

Ресурси для скачування

Схожі тими

• Developing iPhone applications using Ruby on Rails and Eclipse, Part 1: Serving content for iPhones : Оригінал статті (EN).
• Книга автора цієї статті Professional Ruby on Rails про те, як зробити красивим ваш перший Web-сайт. (EN)
• Plugging Aptana into an existing Eclipse configuration : Інструкції по інтеграції Aptana Studio в Eclipse. (EN)
• " iPhone on Rails - Creating an iPhone optimised version of your Rails site using iUI and Rails 2 ": Блог, присвячений використанню iPhone і Rails. (EN)
• Apple Developer Connection : Ще ресурси з розробки Web-додатків для iPhone (потрібна реєстрація). (EN)
• " Develop iPhone Web applications with Eclipse ": Введення в модуль розробки для iPhone Aptana.
• сторінка Aptana , Де можна завантажити Aptana Studio, а також модулі для RadRails і iPhone. (EN)
• Сайт Aptana Update, де можна отримати модулі для Aptana RadRails и iPhone . (EN)
• iPhoney (EN).
• версія коду Soups Online для цієї статті. (EN)
• Дизайн і CSS оригінального сайту Soups OnLine, створена на основі шаблону FreeWebTemplates.com . (EN)
• модуль rails_iui . (EN)
• Візьміть участь в інтерв'ю та дискусіях розробників за допомогою подкастів developerWorks . (EN)
• Зона open source developerWorks з великої корисною інформацією, інструментами та проектами, які допомагають в розробці технологій open source і їх застосуванні з продуктами IBM.
• Пробна версія програмного забезпечення IBM , Доступне для завантаження і на DVD. (EN)
• Пробні версії продуктів IBM і інструменти розробки додатків, а також сполучна ПО для DB2®, Lotus®, Rational®, Tivoli®, і WebSphere®. (EN)

Підпішіть мене на ПОВІДОМЛЕННЯ до коментарів