RhoMobile и OnsenUI
Vladimir Musulainen
22 мая, 2020

Вступление

Заказчик зачастую указывает в технических требованиях к разрабатываемому мобильному приложения условие look and feel as native applications. Это условие можно выполнить при разработке мобильного гибридного приложения. Для придания мобильному приложению Rhodes нужного внешнего вида и поведения можно использовать CSS/JS фреймворки, например, OnsenUI или Framework7.

В этой статье мы покажем, как использовать OnsenUI в мобильном приложение Rhodes на примере несложного ruby-приложения, в котором можно вести список товаров.

Шаг 1. Генерация шаблона приложения.

Выполним из командной строки

> rhodes app productApp

 

Перейдем в директорию нашего проекта и запустим наше приложения в RhoSimulator:

> cd productApp
> rake run:rhosimulator

Пока оно не функционально и не отображает ничего кроме начальной страницы.

Закроем RhoSimulator.

Шаг 2. Генерация модели Product

Выполним команду для генерации модели приложения:

> rhodes model Product name,price

 

Это команда создала весь необходимый код для отображения списка Продуктов, создание и редактирования Продуктов.

Изменим начальную страницу — добавим ссылку на переход страницу товаров. Для этого изменим код страницы на следующий:

<div class="container-fluid">

 <div class="row">

   <div class="list-group">

     <a href="<%= url_for(:controller => Product, :action => :index) %>" class="list-group-item">

       Products

       <span class="glyphicon glyphicon-chevron-right pull-right" aria-hidden="true"></span>

     </a>

   </div>

 </div>

</div>

Запустим приложение в RhoSimulator

> rake run:rhosimulator

 

Посмотрим на все страницы нашего приложения и проверим их работоспособность.

 

 

Приложение выглядит вполне достойно, но заказчик хочет native look and feel.
Не закрывайте RhoSimulator.

Шаг 3. Подключаем OnsenUI

Удаляем загрузку Bootstrap и jQuery и добавляем загрузку ресурсов OnsenUI. Для этого отредактируем файл layout.erb

 

<!-- OnsenUI -->

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

 

Добавляем рекомендуемый набор иконок:

<!-- Ionicons -->
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>

 

Шаг 4. Начальная страница приложения с OnsenUI

Заменим код в файле /app/index.erb на следующий:

 

<ons-page id="homePage">

 <ons-toolbar>

   <div class="center">Products App</div>

 </ons-toolbar>

 <ons-list>

   <ons-list-item modifier="tappable chevron" onclick="window.location = '<%= url_for(:controller => Product, :action => :index) %>'">

     Product

   </ons-list-item>

 </ons-list>

</ons-page>

 

Обновим страницу в RhoSimulator, нажав на кнопку refresh внизу.

 

 

Страница стала выглядеть гораздо ближе к native look and feel. Задействуем OnsenUI на остальных страницах приложения.

 

Шаг 5. Использование OnsenUI на индексной странице Product

Замените код в файле /app/Product/index.erb на следующий:

 

<ons-page id="productPage">

 <ons-toolbar>

   <div class="left">

     <ons-back-button onclick="window.location='<%= Rho::Application.startURI %>'"></ons-back-button>

   </div>

   <div class="center">Products</div>

   <div class="right">

     <ons-toolbar-button onclick="window.location='<%= url_for :action => :new %>'">New</ons-toolbar-button>

   </div>

 </ons-toolbar>

 <ons-list>

   <% @products.each do |product| %>

     <ons-list-item modifier="tappable chevron" onclick="window.location = '<%= url_for :action => :show, :id => product.object %>'">

       <%= product.name %>

     </ons-list-item>

   <% end %>

 </ons-list>

</ons-page>

 

Обновим страницу в RhoSimulator

 

Шаг 6. Адаптируем страницу создания нового товара

Заменим код в файле /app/Product/new.erb на следующий:

 

<ons-page id="newProductPage">

 <ons-toolbar>

   <div class="left">

     <ons-toolbar-button onclick="window.location='<%= url_for :action => :index %>'">Cancel</ons-toolbar-button>

   </div>

   <div class="center">New Product</div>

 </ons-toolbar>

 <section style="width: 90%; margin-top: 1em;margin: auto;">

   <form method="POST" action="<%= url_for :action => :create %>">

     <input type="hidden" name="id" value="<%= @product.object %>"/>

     <div>

       <label for="product[title]">Name</label><br/>

       <ons-input type="text" modifier="underbar" id="product[name]" name="product[name]" placeholder="product name"></ons-input>

     </div>

     <br/><br/>

     <div>

       <label for="product[price]">Price</label><br/>

       <ons-input type="text" modifier="underbar" id="product[price]" name="product[price]" placeholder="product price"></ons-input>

     </div>

     <br/><br/>

     <ons-button type="submit" modifier="large" onclick="document.getElementsByTagName('form')[0].submit()">Submit

       <ons-button>

   </form>

 </section>

</ons-page>

 

Обновим страницу в RhoSimulator

Заполним поля и нажмем Submit

Новый товар корректно отображается в списке товаров.

 

Шаг 7. Адаптация show.erb

Заменим код в файле /app/Product/show.erb на следующий:

<ons-page id="showProductPage">

  <ons-toolbar>

    <div class="left">

      <ons-back-button onclick="window.location='<%= url_for :action => :index %>'"></ons-back-button>

    </div>

    <div class="center"><%= @product.title %></div>

    <div class="right">

      <ons-toolbar-button onclick="window.location='<%= url_for :action => :edit, :id => @product.object %>'">Edit</ons-toolbar-button>

    </div>

  </ons-toolbar>

  <ons-list>

    <ons-list-item>

      <div class="center">Name</div>

      <div class="right"><%= @product.name %></div>

    </ons-list-item>

    <ons-list-item>

      <div class="center">Price</div>

      <div class="right"><%= @product.price %></div>

    </ons-list-item>

  </ons-list>

</ons-page>

 

Обновим страницу в RhoSimulator

Шаг 8. Адаптация edit.erb

Заменим код в файле /app/Product/edit.erb на следующий:

<ons-page id="editProductPage">

 <ons-toolbar>

   <div class="left">

     <ons-back-button onclick="window.location='<%= url_for :action => :show, :id => @product.object %>'"></ons-back-button>

   </div>

   <div class="center">Edit <%= @product.title %></div>

   <div class="right">

     <ons-toolbar-button onclick="window.location='<%= url_for :action => :delete, :id => @product.object %>'">Delete</ons-toolbar-button>

   </div>

 </ons-toolbar>

 <section style="width: 90%; margin-top: 1em;margin: auto;">

   <form method="POST" action="<%= url_for :action => :update %>">

     <input type="hidden" name="id" value="<%= @product.object %>"/>

     <div>

       <label for="foo[title]">Title</label><br/>

       <ons-input type="text" modifier="underbar" id="product[name]" name="product[name]" placeholder="name" value="<%= @product.name %>" ></ons-input>

     </div>

     <br/><br/>

     <div>

       <label for="foo[price]"> Price</label><br/>

       <ons-input type="text" modifier="underbar" id="product[price]" name="product[price]" placeholder="price" value="<%= @product.price %>" ></ons-input>

     </div>

     <br/><br/>

     <ons-button type="submit" modifier="large" onclick="document.getElementsByTagName('form')[0].submit()">Update

       <ons-button>

   </form>

 </section>

</ons-page>

 

Обновим страницу в RhoSimulator

Заключение

Мы закончили адаптацию Rhodes приложения к native look and feel используя CSS/JS фреймворк OnsenUI. Чтобы не делать пример слишком сложным, мы не стали использовать многих возможностей как Rhodes, так и OnsenUI, но быстрая разработка многоплатформенных сложных Rhodes-приложений enterprise-уровня с native look and feel апробирована и может применяться в широкой практике.

Читать также

RhoMobile и OnsenUI
Vladimir Musulainen
22 мая, 2020
Migrating Legacy Enterprise Mobile Applications
Konstantin Rybas
20 сентября, 2017
Свяжитесь с нами