I need to show the multiple windows under the single Titanium.UI.iOS.NavigationWindow. I need to show those windows dynamically.
Actually, Titanium.UI.iOS.NavigationWindow is really meant to hold multiple windows with some predefined features like back button, sweet open/close animations.
Following the example from Ti Docs:
var win2 = Titanium.UI.createWindow({
backgroundColor: 'red',
title: 'Red Window'
});
var win1 = Titanium.UI.iOS.createNavigationWindow({
window: win2
});
var win3 = Titanium.UI.createWindow({
backgroundColor: 'blue',
title: 'Blue Window'
});
var button = Titanium.UI.createButton({
title: 'Open Blue Window'
});
button.addEventListener('click', function(){
win1.openWindow(win3, {animated:true});
});
win2.add(button);
var button2 = Titanium.UI.createButton({
title: 'Close Blue Window'
});
button2.addEventListener('click', function(){
win1.closeWindow(win3, {animated:false}); //win3.close() will also work!!
});
win3.add(button2);
win1.open();
You can test in above code how to open/close window(s), with optional open/close animation.
Related
In iOS ellipsize property is not working for me. The same code is working for android. I have attached the iOS screenshot for iOS issue below. Please help me to understand If I am missing something.
Thanks in Advance!!!
Ti SDK: v9.0.3GA
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: '#DCDCDC',
layout: 'vertical'
});
var tableView = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: Ti.UI.FILL
});
var firstLabel = Ti.UI.createLabel({
text: 'Hello, This is for testing. I wanted to check Ti Ellipsize property ...',
height: 'auto',
right: '10',
top: '50',
left: '10',
color: '#F0F0F0',
font: { fontSize: 15, fontFamily: 'Arial' },
//horizontalWrap: true,
wordWrap: false,
ellipsize: true,
maxlines: 1
});
row.add(firstLabel);
tableView.setData([row]);
win.add(tableView);
win.open();
I just did research on this above issue and I came to know in iOS its automatically applied ellipsize property to your labels. The only thing we need to take care is height property if possible remove or assigned Ti.UI.SIZE.
I have modified my above code and mentioned here in this post. I write a conditional logic for android device.
var deviceDetect = require('./deviceDetect');
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: '#DCDCDC',
layout: 'vertical'
});
var tableView = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: Ti.UI.FILL
});
var firstLabel = Ti.UI.createLabel({
text: 'Hello, This is for testing. I wanted to check Ti Ellipsize property ...',
height: Ti.UI.SIZE,
right: '10',
top: '50',
left: '10',
color: '#F0F0F0',
font: { fontSize: 15, fontFamily: 'Arial' },
//wordWrap: false, //remove this deprecated in Ti v8.x
ellipsize: deviceDetect.isAndroid() ? true : false,
lines: deviceDetect.isAndroid() ? 1 : undefined
});
row.add(firstLabel);
tableView.setData([row]);
win.add(tableView);
win.open();
i have created a navigation window - Titanium.UI.iOS.NavigationWindow
i have added three windows
i have open all three windows
now how do i make window3 come first with out closing window1 and window 2
var ani =false;
var winRoot = Titanium.UI.createWindow({
backgroundColor: 'red',
title: 'Red Window'
});
var win = Titanium.UI.iOS.createNavigationWindow({
window: winRoot
});
var button = Titanium.UI.createButton({
title: 'Open Blue Window'
});
button.addEventListener('click', function(){
win.openWindow(win1, {animated:ani});
});
winRoot.add(button);
var win1 = Titanium.UI.createWindow({
backgroundColor: 'blue',
title: 'Blue Window'
});
var button1 = Titanium.UI.createButton({
title: 'Open Green Window'
});
button1.addEventListener('click', function(){
win.openWindow(win2, {animated:ani});
});
win1.add(button1);
var win2 = Titanium.UI.createWindow({
backgroundColor: 'green',
title: 'green Window'
});
var button2 = Titanium.UI.createButton({
title: 'Open Yellow Window'
});
button2.addEventListener('click', function(){
win.openWindow(win3, {animated:ani});
});
win2.add(button2);
var win3 = Titanium.UI.createWindow({
backgroundColor: 'yellow',
title: 'yellow Window'
});
var button3 = Titanium.UI.createButton({
title: 'Open Blue Window'
});
button3.addEventListener('click', function(){
win.openWindow(win1, {animated:ani});
});
win3.add(button3);
win.open();
in button3 i cannot go back to blue window without closing the yellow and green window
You can't open in NavigationWindow the same window twice. If you want to bring it to front you have to close it and than open again:
Below is your code modified. I created one event listener which closes and opens given window based on buttons custom property target:
var windows = {};
function openWindow() {
win.closeWindow( windows[this.target] );
win.openWindow( windows[this.target] );
}
windows.red = Titanium.UI.createWindow({
backgroundColor: 'red',
title: 'Red Window'
});
var win = Titanium.UI.iOS.createNavigationWindow({
window: windows.red
});
var button = Titanium.UI.createButton({
title: 'Open Blue Window',
target: 'blue'
});
button.addEventListener('click', openWindow);
windows.red.add(button);
windows.blue = Titanium.UI.createWindow({
backgroundColor: 'blue',
title: 'Blue Window'
});
var button1 = Titanium.UI.createButton({
title: 'Open Green Window',
target: 'green'
});
button1.addEventListener('click', openWindow);
windows.blue.add(button1);
windows.green = Titanium.UI.createWindow({
backgroundColor: 'green',
title: 'green Window'
});
var button2 = Titanium.UI.createButton({
title: 'Open Yellow Window',
target: 'yellow'
});
button2.addEventListener('click', openWindow);
windows.green.add(button2);
windows.yellow = Titanium.UI.createWindow({
backgroundColor: 'yellow',
title: 'yellow Window'
});
var button3 = Titanium.UI.createButton({
title: 'Open Blue Window',
target: 'blue',
});
button3.addEventListener('click', openWindow);
windows.yellow.add(button3);
win.open();
The other approach would be creating new window with same parameters:
var params = {
red: {
window: {
backgroundColor: 'red',
title: 'Red Window',
},
button: {
title: 'Open Blue Window',
target: 'blue'
}
},
blue: {
window: {
backgroundColor: 'blue',
title: 'Blue Window',
},
button: {
title: 'Open Green Window',
target: 'green'
}
},
green: {
window: {
backgroundColor: 'green',
title: 'Green Window',
},
button: {
title: 'Open Yellow Window',
target: 'yellow'
}
},
yellow: {
window: {
backgroundColor: 'yellow',
title: 'Yellow Window',
},
button: {
title: 'Open Red Window',
target: 'red'
}
}
};
function createWindow(color) {
var win = Titanium.UI.createWindow(params[color].window);
var button = Titanium.UI.createButton(params[color].button);
win.add(button);
button.addEventListener('click', function() {
navwin.openWindow( createWindow( this.target ) );
});
return win;
}
var navwin = Titanium.UI.iOS.createNavigationWindow({
window: createWindow('red')
});
navwin.open();
Try both examples and check which behaviour suits you better.
am using 3.1.3.GA SDK, Alloys and 4.2 Android Emulator and am using option dialog to show my options to the users and I need to change its selector button from this type to as our design/theme. How to achieve it.
You have to create it by your own, a first look it would be a Window with 0.7 opacity, a view that contains the the black and two white views (preferably horizontal ) each of them contains a label and another view or button for your custom confirmation, you can also use border width and border color for the light gray details. i have created something similar:
http://postimg.org/image/6ygh7wi6p/
Here is the code:
var mainWindow = Titanium.UI.createWindow({
modal: true,
navBarHidden : true,
backgroundImage:"/global/bg-opacity.png_preview_70x50.png"
});
var alertView = Ti.UI.createView({
width: 300,
height: 500,
borderColor : Alloy.CFG.colors.SILVER,
borderWidth : 1,
backgroundColor:"black",
});
var titleLabel = Ti.UI.createLabel({
top: 10,
height : 40,
left:10,
color : "white",
font : Alloy.CFG.fonts.DEFAULT_22_BOLD,
text: "BACK-UP CARE MOBILE"
});
var testWrapper = Ti.UI.createScrollView({
top:55,
widht:Ti.UI.FILL,
height:385,
borderColor : "#181818",
borderWidth : 1
});
alertView.add(testWrapper);
var textLabel = Ti.UI.createLabel({
top : 10,
bottom: 10,
left : 20,
right : 20,
textAlign: "left",
height : Ti.UI.SIZE,
font : Alloy.CFG.fonts.DEFAULT_17,
color : "white",
text : App.localize("FIRST_RUN_MESSAGE")
});
testWrapper.add(textLabel);
var buttonsWrapper = Ti.UI.createView({
top:440,
height:60,
widht:Ti.UI.FILL,
backgroundColor:"#848684"
});
alertView.add(buttonsWrapper);
var continueBtn = Ti.UI.createButton({
title: 'Continue',
top: 5,
width: 140,
height: 50,
left:155
});
buttonsWrapper.add(continueBtn);
var createProfileBtn = Ti.UI.createButton({
title: 'Create Profile',
top: 5,
width: 140,
height: 50,
left:5
});
buttonsWrapper.add(createProfileBtn);
mainWindow.addEventListener("android:back", function(){
});
Hope it helps.
function createAlert(_args) {
//283x170
var alert = Ti.UI.createView({
width:283,
height:170,
visible:false,
backgroundImage:'/images/alert.png'
});
var label = Ti.UI.createLabel({
text:'This is a custom alert box.\n\nAre you sure that you really want to do that?',
width:263,
height:100,
top:10,
textAlign:'center',
color:'#fff',
font:{
fontWeight:'bold',
fontSize:16
}
});
alert.add(label);
var cancel = Ti.UI.createButton({
width:127,
height:42,
bottom:10,
left:10,
title:'Wait a tick ...',
backgroundImage:'/images/cancel.png'
});
cancel.addEventListener('click', function(e) {
alert.hide();
});
alert.add(cancel);
var ok = Ti.UI.createButton({
width:127,
height:42,
bottom:10,
right:10,
title:'Lets do it!',
backgroundImage:'/images/ok.png'
});
ok.addEventListener('click', function(e) {
alert.hide();
});
alert.add(ok);
return alert;
}
I'm trying to create panel draggable by an element inside that panel.
Unfortunately delegate property is not working in my code and whole panel can be used as drag handle.
What am I doing wrong?
How to fix this code?
I'm using extjs 4.1.1.
Thanks.
http://jsbin.com/ahipob/1/watch
Ext.onReady(function() {
var btn1 = Ext.create('Ext.button.Button', {
text: 'btn1'
});
var btn2 = Ext.create('Ext.button.Button', {
text: 'btn2'
});
var panel1 = Ext.create('Ext.panel.Panel', {
width: 100,
height: 100,
items: [btn1, btn2],
draggable: {
delegate: '#'+Ext.escapeId(btn1.id)
}
});
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
items: [
panel1
]
});
});
I have a map with a marker, and i want to make the marker clicktable to show some basic info.
I am new to Sencha, and I need advice what should I implemante in listener function to get the same effect as i click on list item:
for example, this is my code of maprender function
var lat = 37.428607;
var lng = -122.169344;
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latLng,
map: gmap,
draggable: false,
animation: google.maps.Animation.DROP,
title: 'cool'
});
var contentString = 'bla bla bla';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
/* here comes something that will make my detail list visible with the marker details*/
});
and i want to make it work in the same way as my function for "itemtap" which i use in my list... something like this:
onMyListItemTap: function(dataview, index, target, record, e, options) {
this.setActiveItem('detalji');this.down('#back').show();
this.down('#detalji').setData(record.data);
}
There is a great example on Github for Sencha Touch 1...I believe it's called World Map. If you unzip that (the app is in one of the many folders) you can see a Google map wil multiple custom markers. This project is very useful for learning, as it not only shows custom map markers, but also popup overlays on a marker click.
I have yet to adapt it to Sencha Touch 2, but it shouldn't be too difficult...here is some example code (after multiple markers have been added):
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 500,
styleHtmlContent: true,
scroll: 'vertical',
items:[{
xtype:'button',
ui:'round',
text:'See Country Profile',
handler:goToCountryWrapper,
scope : this
},
(new countryOverlay(country)).overlayPanel
],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: country.title
}],
});
};
this.popup.show('pop');
});
Also I think from what I understand about Sencha Touch 2, you would have to put a listener in your map controller (MyApp.map.controller file)....read up about the refs, as the refs 'finds' the marker(s) you have defined and adds a listener to the item.
If you have any progress please post your findings :-)