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.
Related
When I create a searchView and set iconifiedByDefault: false, it automatically loads into the search bar (ie. prompts for text immediately instead of having to click on the magnifying glass first).
search = Ti.UI.Android.createSearchView({
hintText: "Search",
iconifiedByDefault: false
});
$.index.add(search);
$.index.open();
However, when I add the SearchView into the ActionBar with iconifiedByDefault:false, the keyboard comes out but I still see a magnifying glass. I added the SearchView into the ActionBar like this:
$.index.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
if (Ti.Platform.name == 'android' && Ti.Platform.Android.API_LEVEL > 11) {
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
});
}
}
Any ideas why this won't work if I put the SearchView into the ActionBar? Thanks.
On Titanium SDK 5.2.
I have several views that are added to a ScrollView dynamically with a for, but when the user clicks on one of the views, I want to change the Background color of the view. I have the following code for the click event:
(function() {
var id = i;
viewQuantity.addEventListener('click', function(e) {
viewQuantity.backgroundColor = '#FFFFFF';
});
})();
but with this code the view that changes the color is always the last added view. How can I use the id to change the view that was clicked by the user?
Within a click event you get an event property in the function as first parameter. This has source object which is the element the user has clicked.
var clickedView;
(function() {
var id = i;
viewQuantity.addEventListener('click', function(e) {
if (clickedView){
clickedView.backgroundColor= '#000000'; // put your own color here to restore original
}
e.source.backgroundColor = '#FFFFFF';
clickedView = e.source;
});
})();
To change the color later, you can store a reference to the object, and change the color later
Try something like this:
var scrollView = Ti.UI.createScrollView();
var lastClickedView;
for(var i = 0;i<=10;i++){
(function(){
var view = Ti.UI.createView();
var label = Ti.UI.createLabel();
view.add(label);
scrollView.add(view);
view.addEventListener('click',function(){
if(lastClickedView){
lastClickedView.backgroundColor = '#000';
lastClickedView.children[0].color = '#000';
}
view.backgroundColor = '#fff';
label.color = '#fff';
lastClickedView = view;
});
})();
}
if(Alloy.Globals.isAndroid){//if platform is android
$.tabGroup.addEventListener("open", function(e) {
var activity = $.tabGroup.getActivity();// I use tabgroup. get activity
var actionBar = activity.actionBar;
actionBar.icon =Ti.App.Android.R.drawable.logo;//this code not working
activity.onCreateOptionsMenu = function(e) {
var menuItem = e.menu.add({
title : "Refresh",
showAsAction : Ti.Android.SHOW_AS_ACTION_ALWAYS,
icon: Titanium.App.Android.R.drawable.ic_action_refresh //this code working right
});
menuItem.addEventListener("click", refreshMain);
};
activity.invalidateOptionsMenu();
});
}
I want set actionBar icon. Menu item icon is working right but actionBar icon not working. Where am I doing wrong?
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.
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();
});