Is it possible to make a textfield with buttons inside? I found the properties rightButton and leftButton, but using Android (emulator) does not work. Is there another alternative?
That is the used code:
var rightButton1 = Titanium.UI.createButton({
color:'#fff',
width:25,
height:25,
right:10,
backgroundImage:'plus.png',
backgroundSelectedImage:'plus.png',
backgroundDisabledImage: 'plus.png'
});
rightButton1.addEventListener('click',function()
{
Titanium.UI.createAlertDialog({
title:'Button clicked',
message:'Button clicked'
}).show();
});
var textField3 = Titanium.UI.createTextField({
color:'#336699',
width:"auto",
height:"auto",
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
rightButton:rightButton1
});
Thanks in advance.
According to the KitchenSink it's an iPhone only function currently.
if(Titanium.Platform.name == 'iPhone OS') {
data.push({title:'Buttons on Textfields', hasChild:true, test:'../examples/textfield_buttons.js'});
}
However I don't see why you couldn't fake this by creating a view and placing the button on top of the textField because Titanium.UI.Android supports zIndex just fine and the focus event to toggle the visibility of the button.
var view = Ti.UI.createView();
var textField = Ti.UI.createTextField({
// cordinates using top, right, left, bottom
zIndex: 1
});
var button = Ti.UI.createButton({
// cordinates using top, right, left, bottom
visible: false,
zIndex: (textField.zIndex + 1)
});
view.add(textField);
Ti.UI.currentWindow.add(button);
Ti.UI.currentWindow.add(view);
// you only need the listeners if you want to hide and show the button
textField.addEventListener('focus', function(e) {
button.show();
});
textField.addEventListener('blur', function(e) {
button.hide();
});
Related
`
constructor: function() {
this.adjustHeight = Ext.Function.createBuffered(function(textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
var iNewHeight = textAreaEl.dom.scrollHeight;
if (iNewHeight > 0) {
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}
},200,this);
this.callParent(arguments);
}
I want the textarea focused with full content visible . But text area hiding with keypad
Try to use the onBeforeFocus event with scrolling:
scrollableView.scrollTo(textfield.element.getXY()[0],textfield.element.getXY()[1]);
And now you might want to do this to all textfields and textareafields, so that the user gets the same on all items.
Make sure, that the effect is either earlier than the keypad animation or delay it with about 175ms.
Ext.defer(function() {###your code goes here###}, 175, this);
I can't figure how to use a Ti.UI.Android.createSearchView, embedded in actionbar with a ListView.
My code is:
var win = Ti.UI.createWindow({
backgroundColor: 'blue',
fullscreen: false,
title: 'Productos'
});
var search;
var searchAsChild = false;
if (Ti.Platform.name == 'android' && Ti.Platform.Android.API_LEVEL >= 11) {
// Use action bar search view
search = Ti.UI.Android.createSearchView({
hintText: "Table Search"
});
win.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
var menuItem = menu.add({
title: 'Table Search',
actionView : search,
icon: (Ti.Android.R.drawable.ic_menu_search ? Ti.Android.R.drawable.ic_menu_search : "my_search.png"),
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM | Ti.Android.SHOW_AS_ACTION_COLLAPSE_ACTION_VIEW
});
};
}
else {
// Use search bar
search = Ti.UI.createSearchBar({
hintText: "Table Search"
});
searchAsChild = true;
}
search.addEventListener('cancel', function(){
search.blur();
});
var listView = Ti.UI.createListView({searchView: search, caseInsensitiveSearch: true});
var listSection = Ti.UI.createListSection();
var fruits = ['Papaya', 'Peach', 'Pear', 'Persimmon', 'Pineapple', 'Pluot', 'Pomegranate'];
var data = [];
for (var i = 0; i < fruits.length; i++) {
data.push({
properties: {title: fruits[i], searchableText: fruits[i]}
});
}
listSection.setItems(data);
listView.sections = [listSection];
win.add(listView);
win.open();
and in logs it appears:
[ERROR] MenuProxy: (main) [6091237,6100945] View already has a parent. Can't add it as an action view
And on the device, appears a search icon on action bar, but if I click it, nothing happens. And appears another search icon on listView header, and when I click it a textbox appears to do the search.
If I implement the same list with TableView, it works ok!
thank you!!
You have added the search as the searchView to the ListView. Just delete the searchView property when creating the ListView. To search the ListView, you have to use listview.searchText. It takes a String. You could add a change-listener to the searchView to set this searchText. I didn't tested this but if you wish I can provide a code snippet.
I have a tableview with searchbar
var tv = Titanium.UI.createTableView ({
data: official_list,
filterAttribute: 'title',
backgroundColor : '#fff',
search: search,
searchHidden:false,
top: '50dp'
});
I want the searchbar to be hidden initially and only shown when searchbutton is pressed. I am using the following code for that
searchButton.addEventListener('click', function(_e) {
search.visible = !search.visible;
if(search.visible) {
search.focus();
self.softKeyboardOnFocus = 0;
}
else {
Ti.UI.Android.hideSoftKeyboard();
}
});
The problem i am having is, even though the search gets hidden, a blank space remains in the place of searchbar.
I tried animating the coordinates of the tableview but that overrides the navigation bar and the blank space still remains. Is there anyway i can toggle the searchbar (by removing the white space also ? ).
Please help!
I solved the problem by creating 2 searchBar and making the searchBar in tableview coordinates out of scope. The searchbar attached to the tableview is made 1dp.
var search = Titanium.UI.createSearchBar({
barColor:'#000',
showCancel:false,
top: -50,
height:'45dp',
hidden: true,
visible: false,
softKeyboardOnFocus : Titanium.UI.Android.SOFT_KEYBOARD_DEFAULT_ON_FOCUS
});
var search_table = Titanium.UI.createSearchBar({
barColor:'#000',
showCancel:false,
height:'1dp',
hidden: true,
visible: false,
});
Now i can animate searchBar (search).
search.visible = !search.visible;
if(search.visible) {
search.focus();
self.softKeyboardOnFocus = 0;
search.animate({
top: '50dp',
duration : 500,
delay : 0,
curve: Titanium.UI.ANIMATION_CURVE_EASE_IN
});
tv.animate({
top: '90dp',
duration : 500,
delay : 0,
curve: Titanium.UI.ANIMATION_CURVE_EASE_IN
});
}
else {
Ti.UI.Android.hideSoftKeyboard();
tv.animate({
top: '50dp',
duration : 500,
delay : 0,
curve: Titanium.UI.ANIMATION_CURVE_EASE_OUT
});
}
});
and pass the values from searchBar to search_table ( better way was to write query for each search but i have more than 7 and instead choose passing the value to tableview.search )
search.addEventListener('change', function(e) {
search_table.value = e.value;
});
I think your solution do not work because the tableview is the immediate children of the window.
It should work if you enclose the tableview with another view, and then animate the tableview within the enclosing view to hide the search bar.
I'm developing an app in Titanium. I've divided it in four different views to make a scrollView. I want to put another view always visible only from the second view and beyond. How can I do that?
Ther is my app.js code:
(function(e){
var principal = Ti.UI.createWindow({
backgroundColor: '#fbfbfb',
exitOnClose:true,
navBarHidden: true
}),
pantallaBienvenida = require('ui/pantallaBienvenida'),
pantallaTitular = require('ui/pantallaTitular'),
pantallaDependiente = require('ui/pantallaDependiente'),
pantallaAsistenciaMedica = require('ui/pantallaAsistenciaMedica'),
primeraPantalla = new pantallaBienvenida,
segundaPantalla = new pantallaTitular,
terceraPantalla = new pantallaDependiente,
cuartaPantalla = new pantallaAsistenciaMedica,
scrollView = Ti.UI.createScrollableView({
views:[primeraPantalla,segundaPantalla,terceraPantalla,cuartaPantalla]
});
principal.add(scrollView);
principal.open();
})();
You are using ScrollableView not ScrollView, they are very different.
If you want to show some additional info when user goes to second element of your ScrollableView you have to add new element to Window, set it's property visible = false.
Then create event listener and when dragend is fired make that view visible.
Some example code:
floatingView = require('ui/floatingview')
floatingView.visible = false;
principal.add(floatingView);
scrollView.addEventListener('dragend', function(event){
if (this.currentPage !== 0) {
floatingView.visible = true;
} else {
floatingView.visible = false;
}
});
when the user click on the tableviewrow, alert box 'row' will occur. And inside the tableviewrow, it contains another view that contains a image view. An alert box 'label' will popout when user click on the image. Now the problem is when user click on the image, not only the alert box 'label' will popup, but the alert box 'row' too. How can I avoid the alert box 'row' from popping out when user click on the image? The alert box 'row' appear when user click on the tableviewrow other than the image. Thanks..
var row = Titanium.UI.createTableViewRow({
className:'rowclass',
});
var u_image = Titanium.UI.createImageView({
image: 'image.jpg',
top:10,
left:4,
height:36,
width:36,
});
row.add(u_image);
RegData.push(row);
u_image.addEventListener('click', function(e){
alert('label');
});
row.addEventListener('click', function(e){
alert('row');
});
Ti 1.6, Android 2.2
create your image view with an id
var u_image = Titanium.UI.createImageView({
image: 'image.jpg',
id: "image_view",
top:10,
left:4,
height:36,
width:36,
});
put your listener on the whole table and not just specific elements
myTable.addEventListener('click', function(e){
if(e.source.id == "image_view") {
alert('image_view');
} else {
alert('row');
}
});
Check to make sure you aren't clicking on the image inside of the row first before alerting.
row.addEventListener('click', function(e){
if(e.source != "[object TiUIImageView]") {
alert('row');
}
});