Текстовые поля – это наиболее часто используемый контрол в WebOS-приложениях. Но когда речь заходит о настройке внешнего вида этого контрола, оказывается что все не так просто. Стандартный вид WebOS приложений не всегда вызывает у пользователей положительные эмоции и Wow-эффект, поэтому довольно часто требуется изменить внешний вид приложения. Как это можно сделать – рассмотрим в этот раз.
“Из коробки” внешний вид текстовых полей ужасен и уныл (см. скриншот):

Это все, чего мы можем добиться, разместив TextField прямо в коде сцены:
simple-scele.html

<div class="palm-hasheader">
  <div class="palm-header">Simple TextField</div>
</div>
<div class="palm-header-spacer"></div>
<div id="SimpleTextField" x-mojo-element="TextField"></div>

simple-assistant.js

function SimpleAssistant() {
}

SimpleAssistant.prototype.setup = function() {
	this.controller.setupWidget('SimpleTextField', {hintText: 'Simple'}, {});
};

Как-то привести TextField к более-менее вменяемому виду можно, поместив его внутрь групбокса, а в групбокс список, а в список элемент списка, а в него враппер, а во враппер лейбл 🙂 (прям как смерть кащщеева):
group-spece.html

<div class="palm-hasheader">
  <div class="palm-header">TextField in Groups</div>
</div>
<div class="palm-header-spacer"></div>
<div class="palm-group">
  <div class="palm-group-title">Single TextField</div>
  <div class="palm-list">
    <div class="palm-row single">
      <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
          <div id="GroupedSingleTextField" x-mojo-element="TextField"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="palm-group unlabeled">
  <div class="palm-list">
    <div class="palm-row first">
      <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
          <div class="label">Login</div>
          <div id="GroupedLoginTextField" x-mojo-element="TextField"></div>
        </div>
      </div>
    </div>
    <div class="palm-row last">
      <div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
          <div class="label">Password</div>
          <div id="GroupedPasswordTextField" x-mojo-element="PasswordField"></div>
        </div>
      </div>
    </div>
  </div>
</div>

group-assistant.js

function GroupAssistant() {
}

GroupAssistant.prototype.setup = function() {
	this.controller.setupWidget('GroupedSingleTextField', {hintText: 'Single'}, {});
	this.controller.setupWidget('GroupedLoginTextField', {hintText: 'Your Login...'}, {});
	this.controller.setupWidget('GroupedPasswordTextField', {}, {});
};

Получится что-то вроде этого:

Уже что-то, но опять же, это все стандартный внешний вид, да и групбокс видно, а он не всегда нужен и не всегда уместен.

Остается одно – допиливать все самостоятельно.
Основной проблемой при создании собственных стилей для текстовых полей является то, что при создании, внутрь текстового поля система кладет еще несколько вложенных элементов. Помимо самого текстового поля, внутри еще есть div с подсказкой (задается в атрибутах полем hintText) и div, содержащий копию значения текстового поля, когда это текстовое поле теряет фокус.
Принимая во внимание все выше сказанное, можно приступить к рестайлингу.
styled-scene.html

<div class="palm-hasheader">
  <div class="palm-header">Simple TextField</div>
</div>
<div class="palm-header-spacer"></div>
<div id="StyledLoginTextField" class="styled-textfield" x-mojo-element="TextField"></div>
<div id="StyledPasswordTextField" class="styled-textfield" x-mojo-element="PasswordField"></div>

styled-assistant.js

function StyledAssistant() {
}

StyledAssistant.prototype.setup = function() {
	this.controller.setupWidget('StyledLoginTextField', {hintText: 'Login'}, {});
	this.controller.setupWidget('StyledPasswordTextField', {hintText: 'Password'}, {});
};

sample.css

#mojo-scene-styled-scene-scroller
{
    background: url(../images/background.jpg) repeat;
}

.styled-textfield input[type=text], .styled-textfield input[type=password] {
  width: 274px !important;
  -webkit-border-radius:15px;
  margin:15px;
  padding: 8px 8px;
  border:1px solid #ccc;
  display:block !important;
  font-size: 0.8em;
}
.styled-textfield div:nth-child(2) {display:none;visibility:hidden;}
.styled-textfield .hint-text 
{
  margin: 9px 0 0 23px !important;color:#666;
  font-size: 0.8em;
}

И вот, у нас сцена с двумя текстовыми полями. Каждое текстовое поле имеет скругления и свой шрифт. Выглядит все это как-то так:

И никаких списков или групбоксов 🙂

Скачать исходный код примера.

Previous ArticleNext Article
Технический директор IT-Dimension, компании-разработчика кросс-платформенного программного обеспечения

Leave a Reply

Your email address will not be published. Required fields are marked *

В.

Впечатления от вебкаста по Palm webOS

Palm PreПоучаствовал в вебкасте по разработке для Palm webOS.

Как это было? Это было ммм.. довольно странно. Видео тормозило просто жутчайшим образом, а звука вобще не было. Вернее вместо этого был только шум. Как вариант предлагалось позвонить по телефону и послушать таким образом о чем там идет речь, но… как-то межлународный звонок в течении часа.. ну не каждый осилит.

Но в общем ладно. Теперь о хорошем. Как-то так постараюсь тезисно свое мнение изложить:

  1. Palm OS это прикольно. 😉
  2. Т.к. приложения пишутся на JavaScript, то для разоаботки GUI кроме текстового редактора ничего не нужно.
  3. В вебкасте чудо-человек разработчик демонстрировал все под Mac OS но т.к. JavaScript отрабатывает на клиенте, то писать можно и под Windows и под Linux
  4. JavaScript как и реньше не имеет доступа к системным ресурсам, зато для этого предусмотрен серверный функционал. Для получения, например, данных о GPS координатах из JavaScript выполняется запрос к локальному Web-сервису (URL начинается как-то так с “palm://…”, целиком не запомнил)
  5. Архитектура приложения на вид напоминает MVC. В подробности особо не вдавались, вебкаст короткий.
  6. Форматирование и GUI-контролы реализуются с помощью предустановленных CSS-стилей. На вид выглядит довольно аккуратно и юзабельно.
  7. SDK будет включать (по крайней мере по обещаниям) какое-то подобие веб-сервера, реализующего эмуляцию серверной части API для webOS (тех веб-сервисов, которые доступны в самой OS и которые можно использовать из JS).
  8. Не очень понятно пока каким образом можно реализовывать свой серверный функционал (т.е. например какой-нибудь сервис, который могут дергать все приложения, запущенные на устройстве, это пока загадка).
  9. Не очень понятно как поучаствовать в закрытом бета-тестировании SDK (оно пока не доступно для широкой общественности).
  10. Записанный вариант вебкаста обещали выложить (не знаю пока, в публичном доступе или только для участников) и прислать адрес в почту. Если пришлют, обязательно выложу информацию здесь на сайте.

Ну вот как-то так. Жаль, конечно, что из-за недостаточного качества организации мероприятия не получилось узнать больше, но тема сама по себе очень интересная.