I have a problem with a window that contains a TabGroups "there are 5 tabs"
the window and there appears that the window of the first tab that appears but when I clik on anything else happens.
I have a main window that contains views and each view refers to a file js
js file contents that I have after clicking my view is the one I just posted
In addition to the icons of the tab does not appear as
Another concern the back button when I click on it nothing happens and I can not assign an image to this button here
can you help me please
here is the code
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('white');
// create tab group
var tabGroup = Titanium.UI.createTabGroup({
barColor:'black'
});
// create base UI tab and root window
var win1= Titanium.UI.createWindow({
//modal:true,leftNavButton:boutonRetour, // ajout bouton retour
title:'Récentes',
backgroundColor:'white'
});
//win.add(boutonRetour);// bouton retour
var var1 = Titanium.UI.createTab({
icon:'images/icons/recentes_off.png',
title:'var1',
window:win1
});
var win2= Titanium.UI.createWindow({
title:'var2',
backgroundColor:'white'
});
var var2 = Titanium.UI.createTab({
//icon:'recentes_on.png',
title:'var2',
window:win2
});
var win3= Titanium.UI.createWindow({
title:'var3',
backgroundColor:'white'
});
var var3 = Titanium.UI.createTab({
//icon:'recentes_on.png',
title:'Thèmes',
window:win3
});
var win4 = Titanium.UI.createWindow({
title:'var4',
backgroundColor:'white'
});
var var4 = Titanium.UI.createTab({
//icon:'recentes_on.png',
title:'var4',
window:win4
});
var win5 = Titanium.UI.createWindow({
title:'var5',
backgroundColor:'white'
});
var var5 = Titanium.UI.createTab({
// icon:'recentes_on.png',
title:'var5',
window:win5
});
// add tabs------------------------------------------
tabGroup.addTab(var1);
tabGroup.addTab(var2);
tabGroup.addTab(var3);
tabGroup.addTab(var4);
tabGroup.addTab(var5);
// open tab group-----------------------------------------
tabGroup.open();
// -------------------ajout bouton Retour --------------------
var ButtonRetour = Ti.UI.createButtonBar({
labels: ['Retour'],
backgroundColor: '#ae4041',
backgroundImage: 'images/back.png',
color: '#ffffff'
});
ButtonRetour.addEventListener('click', function(){
win.close();
});
win1.leftNavButton = ButtonRetour;
// ---------------fin --------------------
none of your windows have a URL to tell Ti where to get the js file
Ti.UI.createWindow({
url: 'link/to/js/file.js',
title: 'Window Title',
backgroundColor: '#fff'
});
each of your windows defined need to have a URL if you are going to link to them by added them to a tab like so window: win1
as for the icon no showing up the image path is probably incorrect.
Related
I'm trying to create a popup that stays open until I click the x in the top right corner to close it down. What is the best way to do this? My code is below, thanks!
//pop up code
//create custom icon
var newicon = L.icon({
iconUrl: 'logo.png',
})
// creating marker
var marker = L.marker(new L.LatLng(41.77, -87.6), {
icon: L.mapbox.marker.icon({
'marker-color': 'ff8888'
}),
icon: newicon,
draggable: true,
}).addTo(map);
// bind popup to marker
marker.bindPopup("I am a text that will stay open until closed").openPopup();
New solution, the old one doesn't seem to work:
var new_popup = L.popup({"autoClose": false, "closeOnClick": null});
marker.bindPopup(new_popup);
Use:
var newpopup = L.popup({ closeOnClick: false }).setContent("I am a text that will stay open until closed");
marker.bindPopup(newpopup);
To get poups to open, you need to start by specifying closePopupsOnClick: false inside L.map() so that no popups close by default
L.map('map',
{
...
closePopupOnClick: false
}
Then, for individual popups that you do want to close, you can close them inside click()
map.on('popupopen', function (e) {
//save e.popup to an array or something
}
map.on('click', () => {
//close the popups you want to by calling map.closePopup(popup);
});
Everything I try just does nothing, no errors, message, really anything. So I have three tabs, the first being a login tab, each tab has its own .js code, so for example, the login has its own login.js. Now, I use the httpClient to authenticate back to our website, and now want to remove the login tab and display the other tabs, cannot get it to work for the life of me, I can now remove the login tab but cannot load ay of the other tabs. Driving me nuts because I am finding 20 examples but they either don't separate the tabs into their own .js files or the example just plain doesn't work for me. Help! This seems so basic but yet...
app.js
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
// create base UI tab and root window
//
var scan = Titanium.UI.createWindow({
title:'Scan',
backgroundColor:'#fff',
url:'scan.js',
mylabel:'Hello Scan'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Scan',
window:scan
});
var login = Titanium.UI.createWindow({
title:'User Authentication',
tabBarHidden:true,
url:'login.js'
});
var loginTab = Titanium.UI.createTab({
title:"Login",
window:login
});
//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({
title:'Manual',
backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
icon:'KS_nav_ui.png',
title:'Manual',
window:win2
});
var label2 = Titanium.UI.createLabel({
color:'#999',
text:'I am Manual Window ',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win2.add(label2);
//
// add tabs
//
tabGroup.addTab(loginTab);
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
login.js
var win = Titanium.UI.currentWindow;
var tabGroup = Ti.UI.currentWindow.tabGroup;
var appUrl = "http://localhost:3001/ticket_agents/sign_in";
var email = Titanium.UI.createTextField({
color:'#336699',
top:10,
left:10,
width:300,
height:40,
hintText:'Email',
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(email);
var password = Titanium.UI.createTextField({
color:'#336699',
top:60,
left:10,
width:300,
height:40,
hintText:'Password',
passwordMask:true,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(password);
var loginBtn = Titanium.UI.createButton({
title:'Login',
top:110,
width:90,
height:35,
borderRadius:1,
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
var loginReq = Titanium.Network.createHTTPClient({
onload : function(e) {
var json = this.responseText;
var response = JSON.parse(json);
Ti.API.info("Received text: " + this.responseText);
if (response.id > 0)
{
alert("login Success");
win.tabGroup.close();
tabGroup.removeTab(loginTab);
tabGroup.setActiveTab(2);
tabGroup.open();
}
else
{
alert("Unknown login error");
}
},
onerror : function(e) {
var response = this.responseText;
Ti.API.debug(e.error);
alert('error: ' + this.responseText);
},
timeout : 5000
});
loginBtn.addEventListener('click',function(e)
{
if (email.value != '' && password.value != '')
{
loginReq.open("POST",appUrl);
var params = {ticket_agent: {email: email.value, password: password.value, remember_me: 0}
};
var authstr = 'Basic ' + Titanium.Utils.base64encode(email.value + ':' + password.value);
loginReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
loginReq.setRequestHeader('Authorization', authstr);
loginReq.send(JSON.stringify(params));
}
else
{
alert("Email/Password are required");
}
});
win.add(loginBtn);
I think that's all you'd need to see, the login.js has my latest attempt but I've tried things like tabGroup.open({url : 'app.js'}) and about three our four other option. Thanks.
You may want to add this eventListener to your app.js where the tabGroup is.
You can then fire a "app:gotoTab" event from anywhere.
app.js
Ti.App.addEventListener('app:gotoTab', function(e) {
tabGroup.setActiveTab(e.tab);
});
login.js
// tab index starts with 0, so 0 is your first tab
Ti.App.fireEvent('app:gotoTab', { tab: 0 });
Simply Copy paste this code
Login.js
var win = Titanium.UI.currentWindow;
var appUrl = "http://localhost:3001/ticket_agents/sign_in";
var email = Titanium.UI.createTextField({
color:'#336699',
top:10,
left:10,
width:300,
height:40,
hintText:'Email',
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(email);
var password = Titanium.UI.createTextField({
color:'#336699',
top:60,
left:10,
width:300,
height:40,
hintText:'Password',
passwordMask:true,
keyboardType:Titanium.UI.KEYBOARD_DEFAULT,
returnKeyType:Titanium.UI.RETURNKEY_DEFAULT,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(password);
var loginBtn = Titanium.UI.createButton({
title:'Login',
top:110,
width:90,
height:35,
borderRadius:1,
font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
var loginReq = Titanium.Network.createHTTPClient({
onload : function(e) {
var json = this.responseText;
var response = JSON.parse(json);
Ti.API.info("Received text: " + this.responseText);
if (response.id > 0)
{
alert("login Success");
tabGroup.setActiveTab(2);
}
else
{
alert("Unknown login error");
}
},
onerror : function(e) {
var response = this.responseText;
Ti.API.debug(e.error);
alert('error: ' + this.responseText);
},
timeout : 5000
});
loginBtn.addEventListener('click',function(e)
{
if (email.value != '' && password.value != '')
{
loginReq.open("POST",appUrl);
var params = {ticket_agent: {email: email.value, password: password.value, remember_me: 0}
};
var authstr = 'Basic ' + Titanium.Utils.base64encode(email.value + ':' + password.value);
loginReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
loginReq.setRequestHeader('Authorization', authstr);
loginReq.send(JSON.stringify(params));
}
else
{
alert("Email/Password are required");
}
});
win.add(loginBtn);
Hey Ross, You always remember window.close work on child Window perfectly.
In this application. You can use single Window base Application.
If, In First Window Login Successfully then, you can OPEN Second child Window.
for more details you can use KICHEN Shink Example. this is very useful for You.
You may want to redesign your UI. The Apple Human Interface Guidelines specifically say that you shouldn't programmatically switch tabs or add/remove tabs. They expect that a tabgroup should only be controlled by the user once you put it in front of them.
If the user needs to log in before they can use other features of your app you can present the a login window before the window with the tab group. Otherwise, you should replace the content of the login tab with something else after a successful login, perhaps with user profile information or some instructions.
I can't seem to get the my map markers to display when I use an image sprite on the iphone. They appear when I use the standard google map markers on iphone and when viewing the site in the desktop the sprite icons work fine.
Here is the code I use to create the markers, I am using Zepto but JQuery could as easily apply.
$.ajax({
dataType: 'jsonp',
url: myLocations.LocatorUrl,
timeout: 8000,
success: function(data) {
var infoWindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
$.each(data, function(index, item){
var data = item, pincolor,
latLng = new google.maps.LatLng(data.lat, data.lng);
var d = 'http://blah';
var pinImage = new google.maps.MarkerImage(d+"/assets/img/sprite.locator.png",
new google.maps.Size(24, 36),
new google.maps.Point(0,25),
new google.maps.Point(10, 34));
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.type,
icon: pinImage
});
bounds.extend(latLng); // Extend the Latlng bound method
var bubbleHtml = '<div class="bubble"><h2>'+item.type+'</h2><p>'+item.address+'</p></div>'; // Custom HTML for the bubble
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(bubbleHtml);
infoWindow.open(map, marker);
});
markers.push(marker); // Push markers into an array so they can be removed
})(marker, data);
});
map.fitBounds(bounds); // Center based on values added to bounds
}, error: function(x, t, m) {
console.log('errors')
if(t==="timeout") {
alert("got timeout");
} else {
alert(t);
}
}
});
Got it. Turns out the images I was referencing were on localhost, when I swapped this to the actual IP address of my local machine it worked.
The info window shows ok on desktop, and if I set an alert to show the content it will show the correct html code. However, on the iPhone it will just pop a blank info window (No text within it).
Here is my code:
function showPOICategory(category) {
// Icons { ID, Image }
// Entry { Latitude, Longitude, Name, Description, iconID);
$.getJSON('ajax/poi.php?key=' + jQGMSettings.apiKey + '&c=' + category , function(data) {
$.each(data.poi, function(key, val) {
// Set current position marker
var $image = new google.maps.MarkerImage('/images/pois/'+data.icons[val.image],
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(32, 37),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(16, 37)
);
var $marker = new google.maps.Marker({
title: val.title,
icon: $image,
clickable: true,
draggable: false,
position: new google.maps.LatLng(val.latitude, val.longitude),
animation: google.maps.Animation.DROP,
map: map
});
// Info Window
if( val.info == null ) {
var $infowindow = new google.maps.InfoWindow({
content: '<div><h1>' + val.title + '</h1>Prueba</div>'
});
} else {
var $infowindow = new google.maps.InfoWindow({
content: '<div style="color:#000000;"><h1 style="font-size:14px; font-family:Helvetica; padding:0px; margin:0px;">' + val.title + '</h1>' + val.info + 'Prueba</div>',
maxWidth: 200
});
}
var $listener = google.maps.event.addListener($marker, 'click', function() {
if( infoWindow != null ) {
infoWindow.close();
}
infoWindow = $infowindow;
infoWindow.open(map,$marker);
});
// Keep track of the marker to remove it ;)
pois.push({
marker: $marker,
listener: $listener
});
});
});
}
Anyone had this problem before? I'm going nutts to find out where the problem could be located.
OK I finally was able to solve my issue but not sure if it will help you. Are you using loadHTMLString method? if so and you aren't declaring a baseURL try declaring in the call
baseURL:[NSURL URLWithString:#"/"]
I created a SplitButton in TinyMCE and I am using a for loop to add buttons, but for some reason the buttons' onclick is always calling the same one (the last from the for loop). It seems every time I add a menu option, the callback is being overwritten.
Let me describe what I mean.
var c = cm.createSplitButton('optionsList', {
title : 'Options',
});
c.onRenderMenu.add(function(c, m){
var Opts1 = options[0];
var Opts2 = options[1];
var Opts3 = options[2];
var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
sub1.add({title: Opts1[x], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts1[x]);
}});
}
var sub2 = m.addMenu({title: "Options 2"});
for(var y in Opts2){
sub2.add({title: Opts2[y], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts2[y]);
}});
}
var sub3 = m.addMenu({title: "Options 3"});
for(var z in Opts3){
sub3.add({title: Opts3[z], onclick: function(){
tinyMCE.activeEditor.execCommand('mceInsertContent',false,Opts3[z]);
}});
}
});
The menus are created correctly, but for example if I select 'Options 1' and select any option, tinyMCE will print the last option from that subMenu. I don't know how to fix this.
I fixed it, so I'll answer my own question. I needed to use a closure. The solution was:
var insertVar = function(val){
return function(){tinyMCE.activeEditor.execCommand('mceInsertContent',false,val);}
};
var sub1 = m.addMenu({title: "Options 1"});
for(var x in Opts1){
var variable = insertVar(Opts1[x]);
sub1.add({title: Opts1[x], onclick: variable});
}