IOS7 style inline picker with Titanium - ios7

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.

Related

iOS 13 dark mode is not working using Titanium classic framework

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.

How to display updated values in new window

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.

Options Dialog Button UI change Titanium Appcelerator

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;
}

Table row event listener not working after set table moving property to true

I use titanium to develop iPhone application, in a tableView I set table moving property to true, after giving this property the row click event listener not working.
var contentArry = [];
var containerTbl = Ti.UI.createTableView
({
separatorStyle: Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
backgroundColor: "transparent",
hideSearchOnSelection: false,
moving: true,
width: 320,
left: 0,
top : 0,
height : 480
});
for(i=0;i<5;i++)
{
var containerRow = Ti.UI.createTableViewRow
({
height: 65,
width : 320,
left : 0,
backgroundColor: 'transparent',
selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.BLUE,
});
var nameLbl = Ti.UI.createLabel
({
font: {fontSize: 15, fontWeight: 'bold', fontType: 'HaveticaLTStd'},
textAlign : 'center'
color: '#5F5F5F',
text : "MyName"
})
containerRow.add(nameLbl);
contentArry.push(containerRow);
containerRow.addEventListener('click',function(e){
alert("Name : " e.row.children[0].text)
});
}
containerTbl.data = contentArry;
Try this,
You can add addEventListener on TableView object and perform any type of tasks...
var containerTbl = Ti.UI.createTableView({
zIndex :99999999,
separatorStyle: Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
backgroundColor: "transparent",
hideSearchOnSelection: false,
width: 320,
left: 0,
top : 0,
height : 480,
});
var contentArry=[];
for(i=0;i<5;i++)
{
var containerRow = Ti.UI.createTableViewRow({
title : "MyName"+i,
height: 65,
width : 320,
left : 0,
backgroundColor: 'transparent',
//selectionStyle : Titanium.UI.iPhone.TableViewCellSelectionStyle.BLUE,
});
contentArry.push(containerRow);
}
containerTbl.data = contentArry;
containerTbl.addEventListener("click",function(e){
alert("Name : " +e.row.title);
});
You can put all properties in your tableviewrow's properties like
name1 : "xyz",
name2 :"xyz",
and get like this e.row.name1 etc...
cheers...
Try to set moveable : true or editable : true in TableViewRow.
Refer this: http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TableView-property-moving

How do I create a customer style progress bar using titanium?

I want to create my own progress bar using titanium instead of using the createProgressBar function ... or I want to be able to style (change the look, background, etc) of the progressBar created using createProgressBar function. How can I do that?
var ind2 = Titanium.UI.createProgressBar({
width : 200,
min : 0,
max : 90,
value : 0,
height : 150,
color : '#000000',
font : {
fontSize : 14,
},
top : 60
});
Use views. Spruce it up with graphics.
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var track = Ti.UI.createView({
width: 100, height: 30,
backgroundColor: 'red'
});
var progress = Ti.UI.createView({
left: 0,
width: 1, height: 30,
backgroundColor: 'green'
});
track.add(progress);
win.add(track);
win.addEventListener('open', function () {
progress.animate({
width: 100,
duration: 5000
});
// or: progress.width = 100;
});
win.open();
if it's iOS only, you can use the NappAppearance module and customize your progressbar like this:
var NappAppearance = require('dk.napp.appearance');
NappAppearance.setGlobalStyling({
progressBar:{
progressTintColor:"#CD1625",
trackTintColor:"#ececec",
progressImage:"/images/components/progressBarBG.png",
trackImage:"/images/components/progressBarTrack.png"
},
});