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

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

  
Simple TextField

simple-assistant.js

function SimpleAssistant() {
}

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

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

  
TextField in Groups



  
Single TextField
  

    

      

        

          

        
      
    
  



  

    

      

        

          
Login
          

        
      
    
    

      

        

          
Password
          

        
      
    
  

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

  
Simple TextField

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;
}

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

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

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

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

• Использование HTML5 Depot для хранения данных в Palm WebOS
• Определяем подключение к сети в Palm WebOS
• Как сделать телефонный звонок из приложения в Palm WebOS
• Обработка параметров запуска приложения в Palm WebOS
• Полноэкранный режим работы приложений в Palm WebOS