Выделив текущий выбранный TextField - лучший подход

Question

Я пытаюсь добиться эффекта, как это на мобильный телефон (ИОС + Android): http://i.imgur.com/6zaTdRd.png

Если выбранный TextField имеет синий тонированный значок + подчеркивающий

So в моей инфраструктуре отсутствует поддержка серого масштабирования растрового изображения любого типа, поэтому мне нужно поменять местами между двумя изображениями для достижения этого эффекта.

Моя текущая реализация выглядит следующим образом:

Пожалуйста, обратите внимание на рамки титанового сплава MVC, но я предполагаю, что основная логика должна быть похожа.

Слушаю для размытия/событий фокуса для переключения текущего изображения

$.firstNameField.addEventListener('focus', function(e){ 
    swapImages($.firstNameField.getParent()); 
}); 

$.lastNameField.addEventListener('focus', function(e){ 
swapImages($.lastNameField.getParent()); 
}); 

, а затем я поменять изображения так:

/** 
* Swaps between the images (..._0 and ..._1) of an ImageView nested in a 
TableRow 
* ..._0 Greyscale image 
* ..._0 Colour image 
* @param e current TableViewRow 
*/ 
function swapImages(e){ 
    var imagePathSplit = (e.children[0].image).split('_'); 
    var newImagePath = null; 

    if(imagePathSplit[1] == "0.png") 
     newImagePath = imagePathSplit[0] + "_1.png"; 
    else 
     newImagePath = imagePathSplit[0] + "_0.png"; 

    e.children[0].image = newImagePath; 
    return; 
} 

Это не выглядит большой, особенно так как мне нужно много больше полей с этой функциональностью, я также хочу реализовать tabbing (используя Return key = NEXT) между полями, которые будут дополнительно активировать воздушный шар, чтобы увеличить еще 1 прослушиватель событий в поле.

Как бы это было сделано в идеале? Я могу думать о том, как просто создавать поля в коде в форме массива, что должно помочь упростить дело (не более заглядывая слишком далеко для родителя/детей, но это все равно закончится тем, что довольно много слушателей для правильного переключения?

EDIT: Забыл добавить, как у меня есть настройки TextFields:.

<TableView id="paypalTable"> 
<TableViewSection> 
    <TableViewRow id="firstNameView" class="tableRow"> 
     <ImageView id="firstNameIcon" class="textFieldIcon"/> 
     <TextField id="firstNameField" class="textField"/> 
    </TableViewRow> 

Answer 1

Я пытался что-то подобное в одном из моих проектов, хотя у меня был проект Alloy я должен был использовать классический подход, чтобы получить мое желаемое поведение .

В моем контроллере:

var textFields   = []; 
var yourTextFieldsArray = []; 

for (var i = 0; i < yourTextFieldsArray; i++) { 
    //Set the selected state to false initially. Maybe you need another command for it. 
    textFieldIsSelected[i] = false; 
    //create your new view 
    textFields[i] = Ti.UI.createView({ 
     top : topValues[i], 
     width : Titanium.UI.FILL, 
     height : height, 
     id : i + 1, 
     touchEnabled : true 
    }); 
    textFields[i].addEventListener('click', function(e) { 
     //Check the source id 
     if (e.source.id - 1 > -1) { 
      //use your function swapImages(e.source.id). Notice the slightly different parameter since you do not need the complete event. 
      swapImages(e.source.id); 
     } 
} 

function swapImages(id){ 
    //Check the the path variable as you did 
    var imagePathSplit = (textFields[i-1].image).split('_'); 
    var newImagePath = null; 

    if(imagePathSplit[1] == "0.png") 
     newImagePath = imagePathSplit[0] + "_1.png"; 
    else 
     newImagePath = imagePathSplit[0] + "_0.png"; 

    textFields[i-1].image = newImagePath; 
} 

Этот подход позволяет использовать один и тот же прослушиватель событий для каждого свойства.

Пожалуйста, обратите внимание, что мои идентификаторы начинаются с 1 и не в 0. Это происходит потому, что я должен был реализовать такое поведение для изображений и ImageViews не принимаю id=0. Я предполагаю, что TextViews тоже не делают этого, поэтому вы должны придерживаться его. Обратите внимание, что вам необходимо уменьшить идентификатор, чтобы получить соответствующий объект в массиве textFields. В противном случае вы получите ошибку за пределами границ.

Вы должны создать еще один прослушиватель событий для вашего события NEXT. Реализуйте его так же, как первый eventListener. Возможно, код не идеален, потому что я написал его из своей памяти. Если есть какие-либо вопросы, не стесняйтесь спрашивать в комментариях.