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.
Related
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.
I have a datatable and i have print button and pdf button.
I can change font size when print page but i can't change font size while exporting pdf file.
{
extend: 'pdfHtml5',
text: 'Save PDF',
exportOptions: {
modifier: {
page: 'current'
}
},
header: true,
title: 'My Table Title',
orientation: 'landscape'
},
{
extend: 'print',
text: 'Print',
customize: function ( win ) {
$(win.document.body)
.css( 'font-size', '15pt' )
$(win.document.body).find( 'table' )
.addClass( 'compact' )
.css( 'font-size', '8pt' );
},
header: false,
title: '',
orientation: 'landscape'
},
can you help me?
If you look at the src of html5.js, it creates a default object literal doc holding default settings :
var doc = {
pageSize: config.pageSize,
pageOrientation: config.orientation,
content: [
{
table: {
headerRows: 1,
body: rows
},
layout: 'noBorders'
}
],
styles: {
tableHeader: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154',
alignment: 'center'
},
tableBodyEven: {},
tableBodyOdd: {
fillColor: '#f3f3f3'
},
tableFooter: {
bold: true,
fontSize: 11,
color: 'white',
fillColor: '#2d4154'
},
title: {
alignment: 'center',
fontSize: 15
},
message: {}
},
defaultStyle: {
fontSize: 10
}
};
You can use the customize callback to change those default settings :
{
extend: 'pdfHtml5',
text: 'Save PDF',
exportOptions: {
modifier: {
page: 'current'
}
},
header: true,
title: 'My Table Title',
orientation: 'landscape',
customize: function(doc) {
doc.defaultStyle.fontSize = 16; //<-- set fontsize to 16 instead of 10
}
},
Changing the header font size:
doc.styles.tableHeader.fontSize = 30
https://jsfiddle.net/2nwqa2jk/12/
Change alignment, set center to all headers, all columns all footers :
doc.defaultStyle.alignment = 'center'
https://jsfiddle.net/2nwqa2jk/13/
I'd like ask that when I input data into textarea, I cannot get the result in new window.
I mean, when I click the calculation button, the result displays NaN. I cannot handle how to do it. Code is below
Can anyone inform me please?
Titanium.UI.setBackgroundColor('white');
var win1 = Ti.UI.createWindow({
title : 'Welcome to BMI'
});
var win2 = Ti.UI.createWindow({
title:'BMI'
});
var win3 = Ti.UI.createWindow({
title:'BMI'
});
var win4 = Ti.UI.createWindow({
title:'BMI'
});
win4.addEventListener('open', function(e){
textAreaHeight.value/textAreaWeight.value;
});
var label1 = Ti.UI.createLabel({
top: 100,
text:'Welcome to BMI',
color : 'blue',
font: { fontSize:48 }
});
var standardButton = Ti.UI.createButton(
{
title:'Standart',
top : 250,
height:50,
width: 200
});
standardButton.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
var metricButton = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 50,
width: 200
});
metricButton.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
var labelHeight = Ti.UI.createLabel({
text:'Height',
color:'red',
top:300,
left:100,
font: { fontSize:24 },
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var HeightValue = Titanium.App.Properties.getInt("HeightValue");
var textAreaHeight = Ti.UI.createTextArea({
value : HeightValue,
borderWidth: 2,
borderColor: '#bbb',
borderRadius: 5,
color: '#888',
font: {fontSize:20,
fontWeight:'bold'},
left:200,
top: 300,
width: 125,
height : 40
});
textAreaHeight.addEventListener('click', function(e) {
textAreaHeight.blur();
Titanium.App.Properties.setInt("HeightValue", e.value);
});
var labelWeight = Ti.UI.createLabel({
text : "Weight",
color:'red',
top:400,
left:100,
font: { fontSize:24 },
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var WeightValue = Titanium.App.Properties.getInt("WeightValue");
var textAreaWeight = Ti.UI.createTextArea({
value : WeightValue,
borderWidth: 2,
borderColor: '#bbb',
borderRadius: 5,
color: '#888',
font: {fontSize:20,
fontWeight:'bold'},
left:200,
top: 400,
width: 125,
height : 40
});
textAreaWeight.addEventListener('click', function(e) {
textAreaWeight.blur();
Titanium.App.Properties.setInt("WeightValue", e.value);
});
var CalculatorButton = Ti.UI.createButton({
title:'Calculate',
top:475,
width:400,
height:90,
left:75
});
CalculatorButton.addEventListener('click', function(e){
//alert(textAreaHeight.value);
//alert(textAreaWeight.value);
win2.close();
win4.open();
});
var BMILabel = Ti.UI.createLabel({
text:textAreaHeight.value/textAreaWeight.value,
font:{fontSize:84},
color:'red',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top:100
});
var ExitButton = Ti.UI.createButton({
title:'Exit',
top:475,
width:400,
height:90,
left:500
});
ExitButton.addEventListener('click', function(e)
{
win2.close();
win1.open();
});
win2.add(ExitButton);
win2.add(CalculatorButton);
//win2.add(BMILabel);
win2.add(labelHeight);
win2.add(textAreaHeight);
win2.add(labelWeight);
win2.add(textAreaWeight);
//win4.add(textAreabmi);
win4.add(BMILabel);
win1.add(standardButton);
win1.add(metricButton);
win1.add(label1);
win1.open();
Try this
CalculatorButton.addEventListener('click', function(e){
win4._myValue = textAreaWeight.value;
win4.open();
win2.close();
});
win4.addEventListener('open', function(e){
alert(win4._myValue);
});
Hope it helped you.
I am using ExtJs Color Picker component.
var cp = Ext.create('Ext.picker.Color', {
style: {
backgroundColor: "#fff"
} ,
listeners: {
scope:me,
select: selectColor
}
});
But I do not know how can I position color picker at the screen ?
You can encapsulate color component in window object
It will be something like this
var cp = Ext.create('Ext.picker.Color', {
style: {
backgroundColor: "#fff"
} ,
listeners: {
scope:me,
select: selectColor
}
});
var window = Ext.create('Ext.window.Window', {
title: 'Select Color',
resizable: false,
draggable: false,
closeAction: 'hide',
width: 150,
height: 135,
border: false,
hidden: true,
layout:'fit',
floating: true,
renderTo: "divCompare",
items: [cp]
})
Than you can use
win.showat(x,y)
method
I created table view with rows, those contains label and switch box , style is check box. My requirement is, among those row check boxes, I select some of them. Then after, I want those check boxes which are checked and which are unchecked. Here is my code:
// My Array Data for Table-view
var checkboxArray = [ { title: "Mountain View (North America)\nCloudy", leftImage: "http://www.google.com/ig/images/weather/cloudy.gif" },
{ title: "Sucre (South America)\nMostly Cloudy", leftImage: "http://www.google.com/ig/images/weather/mostly_cloudy.gif" },
{ title: "Prague (Europe)\nClear", leftImage: "http://www.google.com/ig/images/weather/sunny.gif" },
{ title: "St Petersburg (Europe)\nSnow", leftImage: "http://www.google.com/ig/images/weather/snow.gif" },];
// My Android checkbox
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"Sound Enabled",
value:true
});
// My Header label inside table-view
var headerLabel = Ti.UI.createLabel({
backgroundColor:'#035385',
color:"white",
font:{ fontSize: 30, fontWeight:"bold" },
text:"Favoriete Merken",
textAlign:"center",
height:45,
width:500
});
// My Table View
var table = Ti.UI.createTableView({
backgroundColor:"white",
data:checkboxArray,
headerView:headerLabel,
separatorColor:"black",
top:0,
width:'auto'
});
win2.add(table);
Rows created via object literals cannot have views added to them. But if you create the row via Ti.UI.createTableViewRow, you can. So to add checkboxes, just change your example to create the rows explicitly, add the checkboxes, store a reference to the checkboxes, and you're done.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var rows = [];
var data = [
{ title: 'Mountain View (North America)\nCloudy', leftImage: 'http://www.google.com/ig/images/weather/cloudy.gif' },
{ title: 'Sucre (South America)\nMostly Cloudy', leftImage: 'http://www.google.com/ig/images/weather/mostly_cloudy.gif' },
{ title: 'Prague (Europe)\nClear', leftImage: 'http://www.google.com/ig/images/weather/sunny.gif' },
{ title: 'St Petersburg (Europe)\nSnow', leftImage: 'http://www.google.com/ig/images/weather/snow.gif' }
];
for (var i = 0, l = data.length; i < l; i++) {
var row = Ti.UI.createTableViewRow();
row.add(Ti.UI.createImageView({
image: data[i].leftImage,
width: 45, height: 45,
left: 0
}));
row.add(Ti.UI.createLabel({
text: data[i].title, textAlign: 'left',
color: '#000',
left: 50, right: 50
}));
row.add(data[i].switch = Ti.UI.createSwitch({
style: Ti.UI.Android && Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title: 'Sound Enabled',
value: true,
right: 5,
width: 40
}));
rows[i] = row;
}
win.add(Ti.UI.createTableView({
data: rows,
backgroundColor: 'white',
separatorColor: 'black',
headerView: Ti.UI.createLabel({
backgroundColor: '#035385',
color: 'white',
font: { fontSize: 30, fontWeight: 'bold' },
text: 'Favoriete Merken', textAlign: 'center',
height: 45
}),
bottom: 45
}));
var alertFirstSwitchValue = Ti.UI.createButton({
title: 'Alert First Switch Value',
bottom: 0, right: 0, left: 0,
height: 45
});
alertFirstSwitchValue.addEventListener('click', function () {
alert(data[0].switch.value);
});
win.add(alertFirstSwitchValue);
win.open();