window opens twice or more on single click in dynamic tableview - appcelerator - iphone

So i have a dynamic tableview.
when i click on one of the rows i got a new screen. It works, but on the top left the back button shows the title of the current window, so i have to click min 2 times on, to get back to the tableviews tab. Any idea why?
var win = Titanium.UI.currentWindow;
Titanium.include('strip_tags.js');
var tab = Titanium.UI.currentTab;
var tableView = Titanium.UI.createTableView({top:43,
separatorStyle: 'none',
backgroundColor:'transparent'});
win.add(tableView);
Ti.UI.currentWindow.addEventListener('focus', function() {
loadTweets();
});
function loadTweets()
{
var rowData = [];
var loader = Titanium.Network.createHTTPClient();
loader.open("GET","url", true);
loader.onload = function()
{
var tweets =JSON.parse(this.responseText);
for (var i = 0; i < tweets.length; i++)
{
var id = tweets[i].id;
var title = tweets[i].name; // The tweet message
var special=tweets[i].special;
if(special>0) {
var price=tweets[i].special;
var color2='#4C6B22';
} else {
var color2='#fff';
var price=tweets[i].price;
}
var thumb = tweets[i].thumb; // The profile image
title=title.replace('®', '');
title=title.replace('™', '');
var row = Titanium.UI.createTableViewRow({height:'auto',top:20 , backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/row_bg.png', borderWidth:0, separatorStyle: 'none'});
var post_view = Titanium.UI.createView({
height:'auto',
layout:'vertical',
top:0,
right:5,
bottom:0,
left:5,
borderWidth:0,
height:49
});
var av_thumb = Titanium.UI.createImageView({
url:thumb, // the image for the image view
top:0,
left:0,
height:48,
width:48
});
post_view.add(av_thumb);
var av_title = Titanium.UI.createLabel({
text:title,
left:54,
width:210,
top:-30,
bottom:2,
height:16,
textAlign:'left',
color:'#fff',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
post_view.add(av_title);
var av_desc = Titanium.UI.createLabel({
text:special,
left:270,
top:-20,
color:'#fff',
bottom:2,
height:'auto',
width:236,
textAlign:'left',
font:{fontSize:14}
});
post_view.add(av_desc);
row.add(post_view);
row.className = "item"+i;
row.thisTitle = title;
row.thisId = id;
rowData[i] = row;
}
var winCount = Titanium.UI.createLabel({
text:tweets.length+' blalba',
height:43,
top:0,
left:0,
width:320,
height:50,
textAlign:'center',
color:'#fff',
backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/row_bg.png',
font:{fontFamily:'Trebuchet MS',fontSize:14,fontWeight:'bold'}
});
win.add(winCount);
tableView.setData(rowData);
tableView.addEventListener('click', function(e){
var w2 = Titanium.UI.createWindow({
title:e.rowData.thisTitle,
url:'cikk.js',
barColor:'#000',
backgroundImage:Ti.Filesystem.resourcesDirectory + '/images/winbg.png'
});
w2.stringProp1 = strip_tags(e.rowData.thisId);
tab.open(w2, {
animated:true
});
}
)};
loader.send();
}

my hunch is the that the eventListener focus is getting called twice and that is causing the tweets to get loaded twice which then cause the tableView eventListener to get loaded twice.
if you are going to use focus to add the eventListener, then I would suggest using blur to remove the eventListener.

Related

How to generate leaflet control from database

I wish to generate a custom dropdown filter, based on categories from a database.
How is this achieved?
In my example, this is (poorly) implemented with some hard coding and duplication.
var serviceOverlays = [
{name:"Cardiology", value:"cardiology"},
{name:"Opthamology", value:"opthamology"}
];
var oSelect = L.control({position : 'topright'});
oSelect.onAdd = function (map) {
var overlayParent = document.getElementById('new-parent'); // overlays div
var node = L.DomUtil.create('select', 'leaflet-control');
node.innerHTML = '<option value="cardiologist">Cardioligist</option><option value="opthamology">Opthamology</option>';
overlayParent.appendChild(node);
L.DomEvent.disableClickPropagation(node);
L.DomEvent.on(node,'change',function(e){
var select = e.target;
for(var name in serviceOverlays){
serviceOverlays[name].removeFrom(map);
}
serviceOverlays[select.value].addTo(map);
});
Fiddle
I created a Control for you:
L.Control.Select = L.Control.extend({
options: {
position : 'topright'
},
initialize(layers,options) {
L.setOptions(this,options);
this.layers = layers;
},
onAdd(map) {
this.overlayParent = L.DomUtil.create('div', 'leaflet-control select-control');
this.node = L.DomUtil.create('select', 'leaflet-control',this.overlayParent);
L.DomEvent.disableClickPropagation(this.node);
this.updateSelectOptions();
L.DomEvent.on(this.node,'change',(e)=>{
var select = e.target;
for(var value in this.layers){
this.layers[value].layer.removeFrom(map);
}
this.layers[select.value].layer.addTo(map);
});
return this.overlayParent;
},
updateSelectOptions(){
var options = "";
if(this.layers){
for(var value in this.layers){
var layer = this.layers[value];
options += '<option value="'+value+'">'+layer.name+'</option>';
}
}
this.node.innerHTML = options;
},
changeLayerData(layers){
this.layers = layers;
this.updateSelectOptions();
}
});
var oSelect = new L.Control.Select(serviceOverlays,{position : 'topright'}).addTo(map);
The data structure have to be:
var serviceOverlays = {
"cardiology": {name:"Cardiology", layer: cities},
"opthamology": {name:"Opthamology", layer: badCities}
};
Demo: https://jsfiddle.net/falkedesign/1rLntbo5/
You can also change the data dynamicl< with oSelect.changeLayerData(serviceOverlays2)

How to overwrite or change OpenUI5 Panel section id?

I am doing adding/delete of the panel section container in openui5. While deleting the selected panel container I can able to do it. But after the deletion of container and again adding the new container I am getting the error of "adding element with duplicate id txn_1". How to fix this issue?
I am using the below code:
var Iconadd = new sap.ui.commons.Button({ //add container code
text : "ADD",
width:"65px",
icon : "sap-icon://add",
press : function() {
var len=$('#panelcontainer .sapUiPanel').length;
//alert("len"+len);
Createnewtransaction(len+1);
//alert(""+len);
//var content=$("#panelcontainer").html();
//$("#panelcontainer").append(content);
//var length=$('#panelcontainer').length;
// alert(""+length);
}
});
Createnewtransaction(1);//onload defaultly one conatiner should show
function Createnewtransaction(len){ //panel code and delete container code
//alert("in"+len);
var oPanel3 = new sap.ui.commons.Panel("txn_"+len,{width: "100%", showCollapseIcon: false});
oPanel3.setAreaDesign(sap.ui.commons.enums.AreaDesign.Fill);
oPanel3.setBorderDesign(sap.ui.commons.enums.BorderDesign.None);
oPanel3.setTitle(new sap.ui.core.Title({text:"Transaction Details"}));
//oPanel3.setTitle(new sap.ui.core.Title({text:"Transaction Details"}));
var oMatrix3 = new sap.ui.commons.layout.MatrixLayout({ width: '600px', columns: 8,width:"auto"});
//oMatrix3.setWidths('150px', '200px','200px','170px','200px');
oMatrix3.setWidths('150px','200px','200px','170px','200px','210px');
oMatrix3.setLayoutFixed(true);
var oLabelmaterial = new sap.ui.commons.Label({text: 'Material:*'});
var oCustomserachmaterial = new sap.ui.commons.TextField({value: '', width: '88%'},{
enabled:true,
change:function(){
}
});
oLabelmaterial.setLabelFor(oCustomserachmaterial);
var oLabelinvoice = new sap.ui.commons.Label({text: 'Invoice Number:'});
var oLabelText = new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelinvoice.setLabelFor(oLabelText);
var oLabelInvoicedate = new sap.ui.commons.Label({text: 'Invoice Date:*'});
// create a simple DatePicker
var oDatePicker1 = new sap.ui.commons.DatePicker('');
oDatePicker1.setWidth("170px");
// oDatePicker1.setYyyymmdd("20100101");
oDatePicker1.setLocale("en-US"); // Try with "de" or "fr" instead!
oDatePicker1.attachChange(
function(oEvent){
if(oEvent.getParameter("invalidValue")){
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
}
);
// attach it to some element in the page
//oDatePicker1.placeAt("sample1");
//oMatrix3.createRow(oLabelmaterial,oCustomserachmaterial,oLabelinvoice,oLabelText,oLabelInvoicedate,oDatePicker1,oLabelcurrency,oCustomserachcurrency,oLabelinvoiceline,oLabelInvoicelinetext,oLabelShipmentdate,oDatePicker2,oLabelunits,oCustomserachunits,oLabelAgreement,oCustomserachagreementnumber);
oMatrix3.createRow(oLabelmaterial,oCustomserachmaterial,oLabelinvoice,oLabelText,oLabelInvoicedate,oDatePicker1);
var oLabelcurrency = new sap.ui.commons.Label({text: 'Currency:*'});
var oCustomserachcurrency = new sap.ui.commons.TextField({value: '', width: '88%'});
oLabelcurrency.setLabelFor(oCustomserachcurrency);
var oLabelinvoiceline = new sap.ui.commons.Label({text: 'Invoice Line Number:'});
var oLabelInvoicelinetext= new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelinvoiceline.setLabelFor(oLabelInvoicelinetext);
var oLabelShipmentdate = new sap.ui.commons.Label({text: 'Shipment Date:'});
// create a simple DatePicker
var oDatePicker2 = new sap.ui.commons.DatePicker('');
oDatePicker2.setWidth("170px");
// oDatePicker1.setYyyymmdd("20100101");
oDatePicker2.setLocale("en-US"); // Try with "de" or "fr" instead!
oDatePicker2.attachChange(
function(oEvent){
if(oEvent.getParameter("invalidValue")){
oEvent.oSource.setValueState(sap.ui.core.ValueState.Error);
}else{
oEvent.oSource.setValueState(sap.ui.core.ValueState.None);
}
}
);
oMatrix3.createRow(oLabelcurrency,oCustomserachcurrency,oLabelinvoiceline,oLabelInvoicelinetext,oLabelShipmentdate,oDatePicker2);
var oImage = new sap.ui.commons.Image();
oImage.setSrc("icon:image/required_field_icon.png");
oImage.setAlt("alternative image text for image");
var oLabelunits = new sap.ui.commons.Label({text: 'Units:*'});
var oCustomserachunits= new sap.ui.commons.TextField({value: '', width: '88%'});
oLabelunits.setLabelFor(oCustomserachunits);
var oLabelAgreement = new sap.ui.commons.Label({text: 'Agreement Number:'});
var oLabelagreement = new sap.ui.commons.TextField({value: '', width: '100%'});
oLabelAgreement.setLabelFor(oLabelagreement);
//Create Search Field for Custom column search
/* var oCustomserachagreementnumber = new sap.ui.commons.SearchField("s9",{
enableListSuggest:false,
placeholder:"Search",
width:"170px",
serach:function(oEvent){
}
});*/
var oLabelnone = new sap.ui.commons.Label({text: ''});
var oLabelnone1 = new sap.ui.commons.Label({text: ''});
var deletebton=new sap.ui.commons.Button({
text:"Delete",
width:"70px",
icon:"sap-icon://delete",
//lite:true,
press:function(oEvent){
if(!oPanel3.getCollapsed()){
oPanel3.setCollapsed(false);
}else{
oPanel3.setCollapsed(false);
}
var len=$('#panelcontainer .sapUiPanel').length;
// var headlen=$('#panelcontainer .sapUiPanel .sapUiPanelHdr').length;
// alert(len);
var selected=oPanel3.getId();
// $('#panelcontainer .sapUiPanel').not( "#txn_1" ).remove();
if(len==1){
$("#"+selected).not("#txn_1").remove();
}else{
$("#"+selected).remove();
}
var splitdata=selected.split('_');
var delposition=parseInt(splitdata[1]);
// alert(delposition);
$('#panelcontainer .sapUiPanel').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id", newid);
$(this).attr("data-sap-ui", newid);
$(this).attr("aria-labelledby",newid+"-title");
$(this).attr("aria-describedby",newid+"-acc");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-hdr");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr .sapUiPanelTitle').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-title");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelHdr .sapUiPanelTb ').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-tb");
}
});
$('#panelcontainer .sapUiPanel .sapUiPanelCont').each(function(i, obj) {
//alert("i22"+i);
var i=i+1;
if(delposition >= i )
{
var newid=splitdata[0]+"_"+i;
$(this).attr("id",newid+"-cont");
}
});
/*for(i;i<len;i++){
var newid=splitdata[0]+"_"+i;
var j = i+1;
var oldID = splitdata[0]+"_"+j;
$("#"+oldID).css({"border-color":"red","border-width":"1px","border-style":"solid"});
$("#"+selected).attr("id",newid);
}*/
//$(this).parent().remove();
// dispAlert() ;
}
}).addStyleClass("datacheck");
//deletebton.addStyleClass("deletedata");
//oPanel3.addButton(deletebton);
oPanel3.onAfterRendering = function() {
if (sap.ui.commons.Panel.prototype.onAfterRendering) {
sap.ui.commons.Panel.prototype.onAfterRendering.apply(this, arguments);
}
var $this = this.$();
var span = $this.find('.sapUiPanelIco');
span.detach();
$this.find('.sapUiPanelHdr').append(span);
};
oMatrix3.createRow(oLabelunits,oCustomserachunits,oLabelAgreement,oLabelagreement,oLabelnone,deletebton);
oPanel3.addContent(oMatrix3);
oPanel3.placeAt("panelcontainer");
}
It's quite clear that you get errors. SAPUI5 offers controls with a powerful API on top of jQuery, including DOM manipulation. If I understand your source code correctly your are manipulationg the DOM by yourself, but you should do this via the API. Please check the documentation for the Panel, there is a method to safely remove content. And please provide well formatted coding examples in future, this is just a mess and only are few people will be helping you through this mess.

How can I remove a single overlay in Openlayers 3.3.0?

I am creating overlays in my mapping application that I need to refresh every 5 seconds. I am only having difficulties removing the stale overlay from my map using the code below. The map.removeOverlay method does not seem to be working correctly. The stacking of the overlays is visibly apparent after only a few iterations.
Using map.getOVerlays().clear() removes the stale overlay, however, this removes all overlays which is not desired. Any assistance with this is appreciated.
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
$.getJSON('json/DATA.json', function(data) {
$.each(data.item, function(key, val) {
var storeName = this.name;
var storeLocation = this.location;
var storeLatitude = this.latitude;
var storeLongitude = this.longitude;
$.each(val.tasks, function(i, j){
var taskName = this.name;
var taskState = this.state;
if (taskState == "Open") {
var taskGeometry = ol.proj.transform([storeLongitude,storeLatitude], 'EPSG:4326', 'EPSG:3857');
function createCircleOutOverlay(position) {
var elem = document.createElement('div');
elem.setAttribute('class', 'circleOut');
return new ol.Overlay({
element: elem,
position: position,
positioning: 'center-center'
});
}
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
map.addOverlay(taskOverlay);
}
});
});
});
}, 5000);
var taskOverlay = createCircleOutOverlay(taskGeometry);
map.removeOverlay(taskOverlay);
The problem is that you are trying to remove the new overlay and not the old one. You would have to store a reference to the overlay so that OpenLayers can remove it from the map. Something like:
var currentOverlay = null;
window.setInterval(function() {
$.ajaxSetup({ mimeType: "text/plain" });
// ...
if (currentOverlay === null) {
map.removeOverlay(currentOverlay);
}
currentOverlay = createCircleOutOverlay(taskGeometry);
map.addOverlay(currentOverlay);
// ...

jssor multiple instances - change the slide of second jssor instance on $EVT_POSITION_CHANGE event of the first jssor instance

Can anyone/jssor support help me how to change the images of second and third jssor sliders when slide show position change event trigger from the first jssor slider? I would be so much appreciated.
thanks,
c
this jssor_slider2.$GoTo(1); is not working.
++++++++++++++++++++++++++++++
function OnSlidePositionChange(slideIndex, fromIndex) {
var jssor_slider2 = new $JssorSlider$('slider2_container', { $AutoPlay: false });
if (slideIndex == 3)
jssor_slider2.$GoTo(1);
else
jssor_slider2.$GoTo(slideIndex + 1);
}
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnSlidePositionChange);
++++++++++++++++++++++++++++++
<script>
jssor_slider1_starter("slider1_container");
jssor_slider2_starter("slider2_container");
jssor_slider3_starter("slider3_container");
</script>
script.js file
jssor_slider1_starter = function (containerId) {
var jssor_slider1 = new $JssorSlider$(containerId, {
...
}
function OnSlidePositionChange(slideIndex, fromIndex) {
//HELP ME PLEASE HERE.....
//var jssor_slider2 = new $JssorSlider$('slider2_container', {});
//if (slideIndex == 3)
// nestedSliders[1].$GoTo(1);
//else
// nestedSliders[1].$GoTo(slideIndex + 1);
}
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, OnSlidePositionChange);
}
jssor_slider2_starter = function (containerId) {
var jssor_slider2 = new $JssorSlider$(containerId, {
......
}
}
jssor_slider3_starter = function (containerId) {
var jssor_slider3 = new $JssorSlider$(containerId, {
......
}
}
$JssorSlider$.$EVT_POSITION_CHANGE fires continuously while sliding.
$JssorSlider$.$EVT_PARK fires while slide change.
Please do this job this way,
function jssor_slider3_starter(containerId_1, containerId_2, containerId_3)
{
var options1 = {};
var options2 = {};
var options3 = {};
...
var jssor_slider1 = new $JssorSlider$(containerId_1, options1);
var jssor_slider2 = new $JssorSlider$(containerId_2, options2);
var jssor_slider3 = new $JssorSlider$(containerId_3, options3);
...
function OnSlidePark(slideIndex, fromIndex) {
if (slideIndex == 3)
jssor_slider2.$GoTo(1);
else
jssor_slider2.$GoTo(slideIndex + 1);
}
jssor_slider1.$On($JssorSlider$.$EVT_PARK, OnSlidePark);
...
}

How to find or trace child click in tableviewrow (Titanium Studio)

I am new to Titanium Studio. I'm working on table view. I've added some Image views and Labels in a tableviewrow. Can I add eventlistener to the each children in table view row. And I'm adding rows to the table inside a loop. Below is my code:
var tweetsTable = Ti.UI.createTableView({height:360, width: 306, top: 58, backgroundColor: '#FFFFFF',borderColor: '#C8C8C8',borderWidth:2, zIndex: -1});
var tweetsArray = [];
for(int i = 0; i < 5; i++)
{
var row = Ti.UI.createTableViewRow({contentHeight: 'auto', width: 320,top:0, selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE});
var my = Ti.UI.createView({ top:10,width:300,height:100 });
var accImage = Ti.UI.createImageView({Image: Ti.App.logoImage,width:50,height:50,left:10,top:5,borderRadius:4});
var addPlus = Ti.UI.createLabel({text:"+",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:20, width: 20, height: 20 });
var addMinus = Ti.UI.createLabel({text:"-",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:10, width: 20, height: 20 });
my.add(accImage);
my.add(addPlus);
my.add(addMinus);
row.add(my);
tweetsArray.push(row);
accImage.addEventListener('click', function(e){
alert(i);
}
addPlus.addEventListener('click', function(e){
alert(i);
}
addMinus.addEventListener('click', function(e){
alert(i);
}
}
I want to add event listener for accImage,addPlus,addMinus. But i unable to find click event of accImage,addPlus,addMinus separately. If i add event listener inside for loop it working, but the last row children only working. If i click first row addPlus, then the last row addPlus is working.
How can i add event listener dynamically for each children in each row.
Can any one please..
I found the solution. My code is below:
var tweetsTable = Ti.UI.createTableView({height:360, width: 306, top: 58, backgroundColor: '#FFFFFF',borderColor: '#C8C8C8',borderWidth:2, zIndex: -1});
var tweetsArray = [];
// response contains array of contents. The following loop will runs up to response length
for(int i = 0; i < response.length; i++)
{
var row = Ti.UI.createTableViewRow({contentHeight: 'auto', width: 320,top:0, selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE});
var my = Ti.UI.createView({ top:10,width:300,height:100 });
var accImage = Ti.UI.createImageView({Image: Ti.App.logoImage,width:50,height:50,left:10,top:5,borderRadius:4});
var addPlus = Ti.UI.createLabel({text:"+",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:20, width: 20, height: 20 });
var addMinus = Ti.UI.createLabel({text:"-",color:"orange", font:{fontSize:18},borderWidth:0,bottom:5,right:10, width: 20, height: 20 });
my.add(accImage);
my.add(addPlus);
my.add(addMinus);
row.add(my);
tweetsArray.push(row);
//find whether event from accImage
tweetsArray[i].children[0].addEventListener('click', function(e){
imageFunction(response[e.index]['name']);
});
//find whether event from addPlus
tweetsArray[i].children[1].addEventListener('click', function(e){
plusFunction(response[e.index]['name']);
});
//find whether event from addMinus
tweetsArray[i].children[2].addEventListener('click', function(e){
minusFunction(response[e.index]['name']);
});
}
I hope it will useful to some one.
Well, I believe your requirement is better suited using the example source code from Titanium Mobile's Kitchen Sink example (Table_view_layout2.js). You can get the source for this inside the Titanium Studio IDE, there is a Samples section on the lower left where you can import the code. In the code, navigate to Resources/iu/common/baseui/table_view_layout2.js to view or debug the example and see how it operates. Make sure you get an updated one, since it looks like they have updated this code since version 2.0.0 was released.
It has a single event listener for the table and queries the source of the click. The example shows an image, which is using a view rather than image view and several labels. The listener determines the item that was clicked and displays it on the screen. You can change that logic to do whatever it is you are trying to accomplish. Similar to your code, they build the table using a for loop, so you can draw some parallels to your code.
For the specific Tweet id, you can place that in your row variable.
var row = Ti.UI.createTableViewRow({
contentHeight: 'auto',
width: 320,
top:0,
selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE,
myTweetId: tweetId // <================= Add here
});
Then in your listener logic, you can query the e.rowData.myTweetid to find which tweet you need to modify.
Just to clarify, the listeners would reduce down to a single listener on the table's (tweetsTable) 'click' event and it would be defined outside of the loop logic you have.
I didn't really want to paste this in here, but this is the code in the file. You could have just looked it up in the free source code I mentioned as well as being able to run through it with the debugger.
function tv_layout2() {
var win = Titanium.UI.createWindow();
win.barColor = '#385292';
if (Ti.Platform.osname !== 'mobileweb') {
//
// CREATE SEARCH BAR
//
var search = Titanium.UI.createSearchBar({
barColor:'#385292',
showCancel:false
});
search.addEventListener('change', function(e)
{
e.value; // search string as user types
});
search.addEventListener('return', function(e)
{
search.blur();
});
search.addEventListener('cancel', function(e)
{
search.blur();
});
}
var tableView;
var data = [];
// create first row
var row = Ti.UI.createTableViewRow();
row.backgroundColor = '#576996';
row.selectedBackgroundColor = '#385292';
row.height = 40;
var clickLabel = Titanium.UI.createLabel({
text:'Click different parts of the row',
color:'#fff',
textAlign:'center',
font:{fontSize:14},
width:'auto',
height:'auto'
});
row.className = 'header';
row.add(clickLabel);
data.push(row);
// when you click the header, scroll to the bottom
row.addEventListener('click',function()
{
tableView.scrollToIndex(40,{animated:true,position:Ti.UI.iPhone.TableViewScrollPosition.TOP});
});
// create update row (used when the user clicks on the row)
function createUpdateRow(text)
{
var updateRow = Ti.UI.createTableViewRow();
updateRow.backgroundColor = '#13386c';
updateRow.selectedBackgroundColor = '#13386c';
// add custom property to identify this row
updateRow.isUpdateRow = true;
var updateRowText = Ti.UI.createLabel({
color:'#fff',
font:{fontSize:20, fontWeight:'bold'},
text:text,
width:'auto',
height:'auto'
});
updateRow.className = 'updated_row';
updateRow.add(updateRowText);
return updateRow;
}
// create a var to track the active row
var currentRow = null;
var currentRowIndex = null;
// create the rest of the rows
for (var c=1;c<50;c++)
{
var row = Ti.UI.createTableViewRow();
row.selectedBackgroundColor = '#fff';
row.height = 100;
row.className = 'datarow';
row.clickName = 'row';
var photo = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/user.png',
top:5,
left:10,
width:50,
height:50,
clickName:'photo'
});
row.add(photo);
var user = Ti.UI.createLabel({
color:'#576996',
font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
left:70,
top:2,
height:30,
width:200,
clickName:'user',
text:'Fred Smith '+c
});
row.filter = user.text;
row.add(user);
var fontSize = 16;
if (Titanium.Platform.name == 'android') {
fontSize = 14;
}
var comment = Ti.UI.createLabel({
color:'#222',
font:{fontSize:fontSize,fontWeight:'normal', fontFamily:'Arial'},
left:70,
top:21,
height:50,
width:200,
clickName:'comment',
text:'Got some fresh fruit, conducted some business, took a nap'
});
row.add(comment);
var calendar = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/eventsButton.png',
bottom:2,
left:70,
width:32,
clickName:'calendar',
height:32
});
row.add(calendar);
var button = Ti.UI.createView({
backgroundImage:'/images/custom_tableview/commentButton.png',
top:35,
right:5,
width:36,
clickName:'button',
height:34
});
row.add(button);
var date = Ti.UI.createLabel({
color:'#999',
font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
left:105,
bottom:5,
height:20,
width:100,
clickName:'date',
text:'posted on 3/11'
});
row.add(date);
data.push(row);
}
//
// create table view (
//
if (Ti.Platform.osname !== 'mobileweb') {
tableView = Titanium.UI.createTableView({
data:data,
search:search,
filterAttribute:'filter',
backgroundColor:'white'
});
} else {
tableView = Titanium.UI.createTableView({
data:data,
filterAttribute:'filter',
backgroundColor:'white'
});
}
tableView.addEventListener('click', function(e)
{
Ti.API.info('table view row clicked - source ' + e.source);
// use rowNum property on object to get row number
var rowNum = e.index;
var updateRow;
if (Ti.Platform.osname !== 'mobileweb') {
updateRow = createUpdateRow('You clicked on the '+e.source.clickName);
tableView.updateRow(rowNum,updateRow,{animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT});
} else {
updateRow = createUpdateRow('Row clicked');
tableView.updateRow(rowNum,updateRow);
}
});
win.add(tableView);
return win;
};
module.exports = tv_layout2;