Nov
08

Настраиваем внешний вид текстовых полей в Palm WebOS

Текстовые поля – это наиболее часто используемый контрол в 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;
}

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

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

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

Еще интересные посты о программировании для мобильных устройств:

No Comments

Make A Comment

No comments yet.

Comments RSS Feed   TrackBack URL

Leave a comment

Please leave these two fields as-is:

top