I have an app that contains a messaging system. It consists of a TableView that splits off into two TabGroups, using a NavGroup (I'm using Ti 1.7.5).
The problem I'm seeing is two fold;
Both title bars of the NavGroup and the Tab are being displayed, and
The TabGroup's title is not being displayed in the NavGroup title bar.
The following screenshot illustrates both problems:
Code (please note this is heavily summarised):
csu.module.messages.createMainWindow = function() {
csu.module.messages.mainWindow = Ti.UI.createWindow($$.moduleMainWindow);
csu.module.messages.navGroupContainer = Ti.UI.createWindow($$.modalContainer);
var mainTableView = Ti.UI.createTableView($$.tableView);
csu.module.messages.navGroup = Ti.UI.iPhone.createNavigationGroup({
window: csu.module.messages.mainWindow
});
...
mainTableView.addEventListener('click', function(e){
// Event info
var index = e.index, section = e.section, row = e.row, rowData = e.rowData;
switch(index) {
case 0:
// inbox;
csu.module.messages.inboxView = csu.module.messages.createInboxView(); // returns the tabgroup
csu.module.messages.navGroup.open(csu.module.messages.inboxView);
break;
case 1:
// archive;
csu.module.messages.archiveView = csu.module.messages.createArchiveView(); // Returns another tabgroup
csu.module.messages.navGroup.open(csu.module.messages.archiveView);
break;
}
});
...
csu.module.messages.mainWindow.add(mainTableView);
csu.module.messages.navGroupContainer.add(csu.module.messages.navGroup);
}
csu.module.messages.createInboxView = function() {
var tabGroup = Ti.UI.createTabGroup({
title: 'Inbox',
navBarHidden: false,
backgroundColor: '#000000',
barColor: csu.ui.theme.headerColor // black
});
var criticalInbox = csu.module.messages.createListWindow(m_Config.MESSAGE_TYPE_CRITICAL, true);
csu.module.messages.criticalInboxTab = Ti.UI.createTab({
title: 'Critical',
icon: 'images/tab-critical.png',
window: criticalInbox
});
...
// two other tabs are created
tabGroup.addTab(csu.module.messages.criticalInboxTab);
tabGroup.addTab(csu.module.messages.importantInboxTab);
tabGroup.addTab(csu.module.messages.generalInboxTab);
return tabGroup;
};
csu.module.messages.createListWindow = function(listType, isInbox) {
var tabWindow, title, tableView;
switch(listType) {
case m_Config.MESSAGE_TYPE_CRITICAL:
title = 'Critical';
break;
case m_Config.MESSAGE_TYPE_IMPORTANT:
title = 'Important';
break;
case m_Config.MESSAGE_TYPE_GENERAL:
title = 'General';
break;
};
tableView = Ti.UI.createTableView();
var tableData = new Array();
tableView.setData(tableData);
tabWindow = Ti.UI.createWindow({
title: title,
navBarHidden: false
});
tabWindow.add(tableView);
return tabWindow;
}
Does anyone know of a work around or something to get the title in the Navigation bar from the TabGroup? Is this a bug?
Your assistance is appreciated.
Titanium discourage the use of tab groups within navigation groups as they are both window managers, displaying a titlebar at the top.
See: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window
While it doesn't look the same, a tabbed bar should be used instead.
Related
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
this.draw.on('drawend', (e: any) => {
const coordinate = e.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
content.innerHTML =
'<p> Current Position are :</p><code>' + hdms + '</code>';
overlay.setPosition(coordinate);
});
this.map.addOverlay(overlay);
}
pop up is not coming after the draw end. but the pop up is working on map single click events .i could not find anything related on internet
I'm trying to display a heatmap over the globe in Cesium but the globe isn't even showing up on the screen, only the background is. I looked in the network part of google chrome and it shows the actual image I need being loaded from the server.
<script>
var count=0;
var viewer = new Cesium.CesiumWidget('cesiumContainer');
var layers = viewer.scene.imageryLayers;
var imageArray = <?php echo json_encode($images) ?>// PARSING PHP ARRAY INTO JAVASCIPT
alert(imageArray[0]);
var date;var name='HeatMap-2006-01-16.png'; //FOR INITAL PAGE LOAD
loadCesium();
function loadCesium()
{
//Cesium Active Window
layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
url : 'images/'.concat(name),
rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
}));
}
function overlayChange()
{
name = imageArray[count];
for (i = 0; i < name.length; i++)
{
if(name.charAt(i)=="-")
{
date = name.substring(i);
break;
}
}
loadCesium();
count = count + 1;
}
function overlayChangeBack()
{
if(count == 0)
{
count = 39;
name = 'HeatMap';
name = name.concat(count.toString());
loadCesium();
}
else
{
name = 'HeatMap';
count=count-1;
name = name.concat(count.toString());
loadCesium();
}
}
</script>
Right now I'm just trying to display the name variable('HeatMap-2006-01-16.png') for the initial image but it's not displaying. No image I try to put instead displays either so it's definitely an issue with cesium.
I'm not sure why this fixed it because I've had it working without this statement but when declaring the cesiumContainer in the variable viewer, you have to set it as this:
var viewer = new Cesium.CesiumWidget('cesiumContainer', {
imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
url : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
}),
baseLayerPicker : false
});
I have used Google Places API in order to display various places. I want at a time to display 20 places and when user scrolls the table view and reaches last field I want to add the rest of data and so on. I have created a function which returns the view and works perfectly excluding one thing. When further data is not available then it goes on loading the last data which is already loaded. Here goes my code.
Ti.include('Functions/get_lat_long.js');
var myTable = Ti.UI.createTableView();
var next_page;
var nxt_pge_tkn;
var tableData = [];
function json_parsing(url,firsttime,winloading)
{
var view1=Ti.UI.createView({
//height : '100%',
width : '100%',
backgroundColor : '#EDDA74',
top : '10%',
borderColor : "black"
});
//For storing url in case next_page_token variable is invalid
var curloc=Ti.App.Properties.getString("curlocation");
//calling method in order to retrive latitude and longitude of current location
get_latitude_longitude(curloc);
//setting the base url that have been initialized in global.js file
var baseurl=Ti.App.Properties.getString("preurl");
//storing lat and lng file that have been initialized in get_lat_lon.js file get_latitude_longitude function
var lat=Ti.App.Properties.getString("curlat");
var lng=Ti.App.Properties.getString("curlng");
//Storing radius which have been initialized in global.js file
var radiusmts=Ti.App.Properties.getInt("curradius")*1000;
//setting location type from the value that have been selected in app.js file by user
var loc_type=Ti.App.Properties.getString("curcategory");
//fetching and storing key which have been initialized in global.js file
var key=Ti.App.Properties.getString("apikey");
if(firsttime==true)
{
winloading.open();
var completeurl=baseurl+lat+","+lng+"&radius=" + radiusmts+ "&types=" + loc_type+ "&sensor=false&key=" + key;
}
else
{
winloading.show();
var completeurl=url;
}
var client = Ti.Network.createHTTPClient();
Ti.API.info("complete url " +completeurl);
client.open('GET',completeurl);
client.onload = function(e) {
//For getting next_page_token so that next page results could be displayed
var json = JSON.parse(this.responseText);
if(json.next_page_token)
{
Ti.API.info("Next page token found ");
next_page=true;
nxt_pge_tkn=json.next_page_token;
}
else
{
Ti.API.info("Next page token not found ");
next_page=false;
}
if(json.results.length==0)
{
var lblno_record=Titanium.UI.createLabel({
text : "No Record Found",
color : "black",
font : {fontSize : "25%" }
});
view1.add(lblno_record);
}
else
{
for(var i=0; i <json.results.length;i++)
{
//Ti.API.info("Place " + json.results[i].name+ " Lat " + json.results[i].geometry.location.lat + " Lng " + json.results[i].geometry.location.lng);
var row = Ti.UI.createTableViewRow({
className : "row"
//height : "80%"
});
//For temporary storing name in name variable
var name=json.results[i].name;
//Logic for shortening string in order to avoid overlapping of string
(name.length>35)?name=name.substr(0,34)+ "..." :name=name;
//Create label for displaying the name of place
var lblname=Ti.UI.createLabel({
//text : json.results[i].name,
text : name,
color : "black",
font : {fontSize : "20%"},
left : "22%",
top : "5%"
});
Ti.API.info("Name :- " + name);
row.add(lblname);
var add= json.results[i].vicinity;
(add.length>125) ? add=add.substr(0,123)+ ". ." : add=add;
var lbladdress=Ti.UI.createLabel({
text : add,
color : "black",
font : {fontSize : "15%"},
left : "22%",
top : "30%",
width : "71%"
});
row.add(lbladdress);
var imgico=Ti.UI.createImageView({
image : json.results[i].icon,
height : "90",
width : "90",
left : "1%",
top : "3%"
//bottom : "10%"
});
row.add(imgico);
tableData.push(row);
}
//setting data that have been set to mytable view
myTable.setData(tableData);
view1.add(myTable);
}
winloading.hide();
};
client.onerror=function(e){
alert("Network Not Avaliable");
};
myTable.addEventListener('scroll',function(e){
var first=e.firstVisibleItem;
var visible=e.visibleItemCount;
var total=e.totalItemCount;
Ti.API.info("Value of next_page_token before loop " + next_page);
if(next_page==true && first+visible==total )
{
Ti.API.info("Value of next_page_token in loop " + next_page);
var newurl="https://maps.googleapis.com/maps/api/place/nearbysearch/json?pagetoken="+nxt_pge_tkn+"&sensor=false&key="+key;
firsttime=false;
winloading.show();
//myTable.removeEventListener('scroll',function(e){});
json_parsing(newurl,firsttime,winloading);
//get_next_page(newurl);
}
});
client.send();
return view1;
client.clearCookies();
}
I was looking through your code and I would like to point:
There is an important issue with the block:
myTable.addEventListener('scroll',function(e){
...
});
this block is called each time you call your json_parsing function. Because of that you will have several functions attached to myTable scroll event. I'm sure that this isn't your intention. You should put it out of json_parsing.
About your specific issue you could try to look at the json.next_page_token value in your client.onload function:
client.onload = function(e) {
//For getting next_page_token so that next page results could be displayed
var json = JSON.parse(this.responseText);
Ti.API.info(JSON.stringify(this.responseText);
if(json.next_page_token)
{
...
maybe the value is an empty object {} or a 'false' string that will return a thruthy value. Don't forget that in javascript there are only 6 falsy values: false, undefined, null, 0, '' and NaN.
In practice this is a minor issue, but in documentation HTTPClient.onload and HTTPClient.onerror functions must be set before calling HTTPClient.open function
BTW, you have unreachable code at the end of your json_parsing function, but I think you already know that :-)
client.send();
return view1;
client.clearCookies(); //Unreachable code
Im trying to get the first and last tab of the TabGroup to be disable so I can give them custom functionality instead of switching the view. I have tried touchEnabled = false and a handfull of other stuff and I'm cant seem to get anything to work ... any ideas?
function TabView() {
var viewOne = require('ui/common/...');
var viewTwo = require('ui/common/...');
var viewTree = require('ui/common/...');
var self = Ti.UI.createTabGroup();
var tab1 = Titanium.UI.createTab({
title : 'Tab 1'
});
var firstView = viewOne();
var tab2 = Ti.UI.createTab({
title: L('firstView'),
icon: '/images/...',
window: firstView,
active:true
});
firstView.containingTab = tab2;
var secondView = viewTwo();
var tab3 = Ti.UI.createTab({
title: L('secondView'),
icon: '/images/...',
window: secondView
});
secondView.containingTab = tab3;
var thirdView = viewTree();
var tab4 = Ti.UI.createTab({
title: L('Map'),
icon: '/images/....',
window: thirdView
});
thirdView.containingTab = tab4;
var tab5 = Titanium.UI.createTab({
title : 'Tab 5'
});
var tabArray = [tab1, tab2, tab3, tab4, tab5];
for ( i = 0; i < tabArray.length; i++) {
self.addTab(tabArray[i]);
}
return self;
}
module.exports = TabView;
You can have a look at this post to disable a Tab within TabGroup.
I have trouble to parse and show events from Bands in Town´s API in my appcelerator mobile app. (iOS)
This is my bands event that i want to show in a table.
http://api.bandsintown.com/artists/Lucy%20Seven/events.json?api_version=2.0&app_id=LucySeven
And this is the code that i have for showing it
var win = Ti.UI.currentWindow;
win.hideNavBar();
Ti.UI.backgroundColor = '#050505';
var url = "http://api.bandsintown.com/artists/Lucy%20Seven/events.json? api_version=2.0&app_id=LucySeven"
var table = Ti.UI.createTableView({
backgroundColor: '#050505',
separatorColor:'#110000',
});
var tableData = [];
var json, artists, name, picture, title, description;
var xhr = Ti.Network.createHTTPClient({
onload: function() {
// Ti.API.debug(this.responseText);
json = JSON.parse(this.responseText);
for (i = 0; i < json.data.length; i++) {
data = json.data[i];
row = Ti.UI.createTableViewRow({
height:'100dp',
backgroundColor: '#050505',
separatorColor:'#110000',
});
var name = Ti.UI.createLabel({
text: title,
font:{
fontSize:'17dp',
fontWeight:'bold'
},
height:'auto',
left:'90dp',
top:'20dp',
color:'#eee',
touchEnabled:true
});
row.add(name);
var start = Ti.UI.createLabel({
text: description,
font:{
fontSize:'12dp'
},
height:'auto',
left:'90dp',
bottom:'20dp',
color:'#eee',
touchEnabled:true
});
row.add(start);
// Avatar
var img = Ti.UI.createImageView({
image : thumb_url ,
width : 70,
height : 70,
top : 5,
bottom : 5,
borderRadius: 5,
borderColor: '#eee',
left : 5
});
row.add(img);
tableData.push(row);
}
table.setData(tableData);
},
onerror: function(e) {
Ti.API.debug("STATUS: " + this.status);
Ti.API.debug("TEXT: " + this.responseText);
Ti.API.debug("ERROR: " + e.error);
alert('There was an error retrieving the remote data. Try again.');
},
timeout:5000
});
xhr.open("GET", url);
xhr.send();
There is a API responses for json here:
http://www.bandsintown.com/api/responses#events-json
I really cant see what is wrong... Maybe im to blind to see what i have missed?
I would appreciate if someone could point me in the right direction on this.
i have tried with: data.title data.artists.title title artists.titel and so on but nothing have shown up in my tableview.....
Thanx
//R
What's the value of this.responseText and what's the value of json after JSON.parse? In the JSON response I don't see a data property so I'm not sure what json.data is supposed to be. Also in Ti.UI.createLabel you give test: title but title is never given a value.
I suspect what you really want in your for loop is this:
json = JSON.parse( this.responseText ); // `json` will be an array of objects
for (i = 0; i < json.length; i++) {
data = json[ i ];
// ...
var name = Ti.UI.createLabel( {
text: data.title,
// ...
} );
}
The key to debugging this is the same as debugging many things—find out what data you have at each step (I've never used Titanium but it must have something like console.log at the very least) and figure out how it differs from what you expect.