How do I create a customer style progress bar using titanium? - 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"
},
});

Related

Titanium ellipsize property is not working for Label in iOS

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();

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.

IOS7 style inline picker with Titanium

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.

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