Реклама показывается только незарегистрированным пользователям. Вход или Регистрация

Настройка внешнего вида текстовых полей в webOS

Здесь выкладываются готовые статьи и рабочие исходники, решения каких-либо задач или советы

Настройка внешнего вида текстовых полей в webOS

Сообщение Архивариус » 08 ноя 2010, 17:30

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

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



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

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

Источник: http://mobile-developer.ru/webOS/nastraivaem-vneshnij-vid-tekstovyx-polej-v-palm-webOS/
Последний раз редактировалось Архивариус 08 ноя 2010, 20:40, всего редактировалось 1 раз.
Если наш форум помог вам выбрать телевизор - напишите отзыв о покупке.
Архивариус

 
Сообщения: 3198
Зарегистрирован: 29 июл 2010, 16:22
Благодарил (а): 285 раз.
Поблагодарили: 376 раз.
Телевизор: LG 55UB950 24MT57S

Настройка внешнего вида текстовых полей в webOS

Спонсор » 08 ноя 2010, 17:30

Реклама показывается только незарегистрированным пользователям. Войти или Зарегистрироваться
Спонсор

 
Сообщения: 100
Зарегистрирован: 15 июл 2014, 14:43
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Настрройка внешего вида текстовых полей в WebOS

Сообщение Xamil » 08 ноя 2010, 19:39

так можно и одним враппером обойтись:
Код: Выделить всё
<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 же), но слишком часто приходится прибегать к костылям, это да.
Nokia E72, Nokia E63, Sharp Zaurus C1000 (Angstrom [X11, matchbox])
Xamil

 
Сообщения: 260
Зарегистрирован: 04 сен 2010, 17:37
Откуда: Кубань
Благодарил (а): 15 раз.
Поблагодарили: 24 раз.
Телефон: Nokia E72


Вернуться в Статьи, исходники и примеры



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0