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.
Related
I am trying to implement dark mode theme in our app for iOS 13 and above. I have followed this link Dark Mode in iOS 13. But I am facing some issue. I have attached the sample code below. I am expecting if I change enable dark appearance then it should change the color of window according to semantic colors file.
var deviceDetect = require('./deviceDetect');
var dialog = require('./dialogueBox');
var currentStyle = deviceDetect.isIos() ? Ti.App.iOS.userInterfaceStyle : undefined;
var colorWindow = Ti.UI.fetchSemanticColor("backgroundColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow,
layout: 'vertical'
});
var top = Ti.UI.createView({
backgroundColor: 'red',
layout: 'horizontal',
height: Ti.UI.SIZE,
width: Ti.UI.FILL,
top: deviceDetect.isAndroid() ? 0 : '50%'
});
var view = Ti.UI.createView({
center: { x: 205, y: 250 },
height: 400,
width: 300,
backgroundColor: colorWindow,
layout: 'vertical',
top: '20%'
});
var img = Titanium.UI.createImageView({
center: { x: 150, y: 110 },
image: './logo.png',
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
});
view.add(img);
var emailField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 30,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
var passField = Ti.UI.createTextField({
width: Ti.UI.FILL,
height: 30,
top: 10,
left: 10,
right: 10,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
returnKeyType: Ti.UI.RETURNKEY_DONE
});
view.add(emailField);
view.add(passField);
if (deviceDetect.isIos() && currentStyle === Ti.App.iOS.USER_INTERFACE_STYLE_DARK) {
// dark mode
console.log("I am here", colorWindow, colorWindow[Ti.UI.semanticColorType]);
//win.backgroundColor = 'green';
}
if (deviceDetect.isIos()) {
Ti.App.iOS.addEventListener('traitcollectionchange', function (event) {
if (currentStyle !== Ti.App.iOS.userInterfaceStyle) {
currentStyle = Ti.App.iOS.userInterfaceStyle;
if (currentStyle == 2) {
//tfAmount.color = 'white';
// dark mode
//win.backgroundColor = colorWindow;
//view.backgroundColor =
} else {
//win.backgroundColor = '#AAAAFF';
//view.backgroundColor = '#90EE90';
}
//console.log(colorWindow);
//win.backgroundColor = colorWindow;
//Ti.API.info('User Interface Style changed: ' + currentStyle);
}
});
}
win.add(view);
win.add(top);
win.open();
Here are the semantic.colors.json file content:
{
"backgroundColor": {
"light": "#ffffff",
"dark": "#000000"
}
}
Thanks in advance!!!
let me know If I missing something.
I've slimmed down the example to see just the parts that are needed and it works fine (iOS + Android [I've used 9.1.0 already]):
/app/controllers/index.js
var colorWindow = Ti.UI.fetchSemanticColor("windowBackgroundColor");
var bgColor = Ti.UI.fetchSemanticColor("viewColor");
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: colorWindow
});
var view = Ti.UI.createView({
height: 300,
width: 300,
backgroundColor: bgColor
});
win.add(view);
win.open();
/app/assets/semantic.colors.json
{
"windowBackgroundColor": {
"dark": "#666666",
"light": "#ff0000"
},
"viewColor":{
"dark": "#00ff00",
"light": "#0000ff"
}
}
Make sure to use 9.0.3.GA (or later).
It will display a grey/green or red/blue screen, depending on your phones settings. Also make sure to close the window when changing the dark-mode on Android.
Has anyone achieved to implement an IOS7 style inline picker in Titanium? I would be thankful for any hints or demos.
As e.g. in the calendar: http://i.stack.imgur.com/hUDZK.png
This is my current code:
var HintTextArea = require('hinttextarea');
var self = Ti.UI.createWindow({
backButtonTitle: '',
title: L('addwish_title'),
backgroundColor: 'white',
layout: 'vertical',
});
var title = Ti.UI.createTextField({
hintText: L('addwish_title'),
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE,
color: 'black',
top: 10, bottom: 10, left: 40,
width: 270,
height: Ti.UI.SIZE,
suppressReturn: true
});
var rowTitle = Ti.UI.createTableViewRow({touchEnabled: false});
rowTitle.add(title);
var category = Ti.UI.createLabel({
text: L('addwish_category'),
touchEnabled: false,
color: 'black',
top: 10, bottom: 10, left: 40,
width: 270,
height: Ti.UI.SIZE
});
var rowCategory = Ti.UI.createTableViewRow({});
rowCategory.add(category);
var categoryPicker = Ti.UI.createPicker({
//visible: false,
selectionIndicator: true,
//height: 0
});
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
data[4]=Ti.UI.createPickerRow({title:'Bananas'});
data[5]=Ti.UI.createPickerRow({title:'Strawberries'});
data[6]=Ti.UI.createPickerRow({title:'Mangos'});
data[7]=Ti.UI.createPickerRow({title:'Grapes'});
categoryPicker.add(data);
categoryPicker.setSelectedRow(0, 3);
var rowPicker = Ti.UI.createTableViewRow({touchEnabled: false});
rowPicker.add(categoryPicker);
var description = HintTextArea.createTextArea({
color: 'black',
font: {fontSize: 16},
top: 10, left: 39,
height: 180,
width: 272,
suppressReturn: true
});
var rowDescription = Ti.UI.createTableViewRow({touchEnabled: false});
rowDescription.add(description);
var footerView = Ti.UI.createView({
height : Ti.UI.SIZE
});
var addWishButton = Ti.UI.createButton({
title: L('addwish_add_button'),
height: 20,
top: 10,
bottom: 5
});
footerView.add(addWishButton);
// now add the complete tableview form
var tableView = Ti.UI.createTableView({
data: [rowTitle, rowCategory, rowDescription],
footerView : footerView,
allowsSelection: false
});
self.add(tableView);
// *** EVENTS
category.addEventListener('click', function(e) {
Ti.API.debug('category event');
// check if the picker is already visible
tableView.insertRowAfter(1, rowPicker);
});
self.open();
The problem is that you add event listener to Label view which has property touchEnabled set to false. Change it to:
var category = Ti.UI.createLabel({
text: L('addwish_category'),
color: 'black',
top: 10, bottom: 10, left: 40,
width: 270,
height: Ti.UI.SIZE
});
and also event listener to:
// *** EVENTS
var pickerEnabled = false;
category.addEventListener('singletap', function(e) {
Ti.API.debug('category event');
// check if the picker is already visible
if (pickerEnabled) {
tableView.deleteRow(rowPicker);
pickerEnabled = false;
} else {
tableView.insertRowAfter(1, rowPicker);
pickerEnabled = true;
}
});
There is some issue with click event on Label in TableView but singletap works fine.
Also I added simple if statement, which will prevent adding second picker to table.
Below is the code i use for my cloud user login...the slight problem is; whenever i login and logout, data inserted into the textfields does not disappear...i don't want them to be saved, i want users to insert textfields all over again after logout.
//create textfields for sign_in page/interface
var userNameField = Titanium.UI.createTextField({
color: 'black',
hintText: 'username',
height: 35,
top: 120,
left: 10,
width: 250,
borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(userNameField);
var passwordField = Titanium.UI.createTextField({
color: 'black',
hintText: 'password',
height: 35,
top: 160,
left: 10,
width: 250,
passwordMask: true,
borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(passwordField);
var button = Titanium.UI.createButton({
title: 'log in',
top: 190,
left: 10,
width: 100,
height:50,
Color:'#336699'
});
win.add(button);
//then create event listener and login user to ACS cloud server
button.addEventListener('click', function(){
Cloud.Users.login({
login: userNameField.value,
password: passwordField.value,
}, function (e) {
if (e.success) {
var user = e.users[0];
alert('success');
} else {
alert('Unable to log you in:' + e.message);
}
});
});
I think you want to clear the textfields. You just need to empty the textFields upon successful login. For this you just need to modify your code as follows
button.addEventListener('click', function(){
Cloud.Users.login({
login: userNameField.value,
password: passwordField.value
}, function (e) {
if (e.success) {
var user = e.users[0];
//Clears the TiUITextField's values
userNameField.value = "";
passwordField.value = "";
alert('success');
} else {
alert('Unable to log you in:' + e.message);
}
});
});
This will do the trick :)
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 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();