webOS Forums - форум пользователей телевизоров на webOS

[Архивариус]

Текстовые поля – одни из самых часто используемых контролов в приложениях для webOS. Однако, когда обсуждение касается настройки внешнего вида этого контрола, выясняется, что все не так просто. Стандартный вид webOS приложений не всегда вызывает у пользователей положительные эмоции (не говоря про Wow-эффект), в связи с чем нередко требуется изменить внешний вид приложения. В этом материале рассмотрим, как это лучше всего сделать.

Внешний вид текстовых полей "по умолчанию" ужасен и уныл (см. скриншот):

styled-textfields-webos-1.png (12.68 КБ) Просмотров: 19353

Это все, чего мы можем добиться, разместив 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', {}, {});
};


Получится что-то наподобие этого:

styled-textfields-webos-2.png (19.44 КБ) Просмотров: 19353

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

Остается одно – допиливать все самостоятельно.

Основной проблемой при создании собственных стилей для текстовых полей является то, что при создании, внутрь текстового поля система кладет еще несколько вложенных элементов. Помимо самого текстового поля, внутри еще есть 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;
}


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

styled-textfields-webos-3.png (24.78 КБ) Просмотров: 19353

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

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

Источник: http://mobile-developer.ru/webOS/nastraivaem-vneshnij-vid-tekstovyx-polej-v-palm-webOS/

[Xamil]

так можно и одним враппером обойтись:

Код: Выделить всё

<div class="palm-row-wrapper textfield-group" x-mojo-focus-highlight="true">
        <div class="title">
                <div class="label">label of textfield</div>
                <div id="fieldid" x-mojo-element="TextField"></div>
        </div>
</div>

получится просто и красиво =) закругления же на полях ввода далеко не всегда хорошо смотрятся. что касается вообще построения интерфейса программы в вебос - возможности практически безграничны, никакого пиксельхантинга (html же), но слишком часто приходится прибегать к костылям, это да.