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.
Related
I need my button to changed gradient when pressed.
I've tried the following code (suggested by official documentation):
Button {
background: Rectangle {
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
However, my button turns out black.
By substituing the word 'control' with the word 'this' or 'parent', I get the same result: the button is correctly coloured in case it is not pressed, but when I press it, nothing changes.
You forgot to give your button an id:control.
this.pressed and parent.pressed will be undefined, which means they will resolve to false.
I can't find any solution for this.I have an dialog which has an TextArea and Ok and close buttons.When I opened the dialog , Then close it. Back button is not working on Android. Why ? My code is :
Dialog {
id: messagereject
Connections
{
target:process
ignoreUnknownSignals: true
onSuccessrejectwo: {
var task=stackView.get(0).currenttask;
task.color="red";
task.enabled=false;
rejectreasontxt.text="";
}
}
contentItem:ColumnLayout {
id:rejectlay
Layout.preferredHeight: rejectheadertxt.height+rejectreasontxt.height+dp(30)
Layout.preferredWidth: rejectheadertxt.width+dp(100)
spacing: dp(10)
.......
......
I just ran into the very same problem myself today. In my app, I want to use a dialog with a TextField to let the user edit the title of some items.
The issue using Dialog in QML seems to be that even after the dialog is closed, it retains keyboard focus and hence captures the back button as well.
For me, the solution was to ensure that after the dialog has been closed (i.e. its visible property is set to false), active keyboard focus is handed back to the "main window":
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.2
ApplicationWindow {
id: mainWindow
width: 200
height: 150
visible: true
FocusScope {
id: rootItem
anchors.fill: parent
Label {
id: label
text: qsTr("Hello World")
anchors.centerIn: parent
}
Button {
text: qsTr("Edit")
anchors {
right: parent.right
bottom: parent.bottom
margins: 10
}
onClicked: {
edit.text = label.text;
dialog.open();
// Let the TextField gain keyboard focus. This also
// means the main window no longer gets keyboard input
// so from here on input (including the back button)
// is handled by the dialog:
edit.forceActiveFocus();
}
}
}
Dialog {
id: dialog
standardButtons: StandardButton.Ok | StandardButton.Cancel
onAccepted: label.text = edit.text
onVisibleChanged: {
if (!visible) {
// Force some item in the main window (in our case the "root item")
// to gain active focus:
rootItem.forceActiveFocus();
}
}
TextField {
id: edit
}
}
}
`
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.
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();
});