Текстовые поля – это наиболее часто используемый контрол в 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 webOS была анонсирована вторая глава книги “Palm webOS: Developing Applications in JavaScript using the Palm Mojo™ Framework“.

Вторая глава доступна читателям в Safari Books Online (доступ к этой главе платный, а жаль).

Первую главу книги можно скачать здесь или на Palm Developer Network.

А.

А вы уже зарегистрировались на вебкаст по разработке для Palm webOS?

Еще почти двое суток осталось до начала ознакомительного вебкаста от разработчиков Palm webOS. Обещают много интересного. Митч Аллен (Mitch Allen) CTO компании Palm Software и сотрудник команды разработчиков Palm webOS проведут обзор материала первой главы книги о разработке для этой мобильной операционной системы, а также рассажут о разработке ПО с использованием Mojo SDK.

Palm webOS

Почитать обзор предстоящего вебкаста можно здесь.

Зарегистрироваться на участие в вебкасте можно здесь.