Appcelerator Titanium UI textfield avec l'image

Question

Je suis un débutant dans le développement du titane. J'ai besoin d'aide pour concevoir une application avec un champ de texte contenant une icône d'image comme ci-dessous l'image. Je n'utilise pas de concepteur d'applications. S'il vous plaît aidez-moi enter image description here

Merci à l'avance

Answer 1

créer un contrôleur d'entrée commune

commune/input.xml

<View id="container"> 
    <ImageView id="icon"/> 
    <TextField id="input"> 
</View> 

commune/input.tss

"#container":{ 
    height: 50, 
    top: 10, 
    left: 15, 
    right: 15, 
    borderColor: 'blue' 
} 

"#icon":{ 
    height: 30, 
    width: 30, 
    left: 10 
} 

"#input":{ 
    left: 50, 
    right: 10 
    //Add your default TextField input here 
} 

commun/input.js

//set controller Style 
if ($.args.icon) { 
    $.icon.image = $.args.icon; 
} else { 
    $.icon.visible = false; 
    $.input.left = 10; 
} 

//custom textField style send in inputStyle 
if ($.args.inputStyle) { 
    _.extend($.input, $.args.inputStyle); 
} 

$.getValue = function() { 
    return $.input.value; 
}; 
$.setValue = function(value) { 
    $.input.value = value; 
}; 

Maintenant, vous pouvez utiliser ce style d'entrée directement où vous voulez, pour sur votre écran exemple de connexion

login.xml

<Window> 
    .. 
    <Require id="email" src="common/input" type="view" /> 
    <Require id="password" src="common/input" type="view" /> 
    .. 
</Window> 

login.tss

"#email":{ 
    icon: '/images/email.png', 
    inputStyle: { 
     hintText: 'Email Adress' 
    } 
} 
"#password":{ 
    icon: '/images/password.png', 
    inputStyle: { 
     hintText: 'Password', 
     passwordMask: true 
    } 
} 

et enfin vous pouvez obtenir la valeur comme ceci

login.js

var emailValue = $.email.getValue(); 
var passwordValue = $.password.getValue();