Thursday, May 29, 2014

titanium: Option dialog

//-- Option Dialog
var optdialog = Ti.UI.createOptionDialog({
 cancel: 2,
 options: ['2 hours', '4 hours', '8 hours'],
 buttonNames: ["Cancel"],
 selectedIndex: 2,
 destructive: 0,
 title: 'Sleep'
});
optdialog.show();

optdialog.addEventListener('click', function(e){
Ti.API.info("option dialog ended with: "  + e.index);
});

titanium: Switch, Picker, Button, AlertDialog

 var view = Ti.UI.createView();

// ---------- Switch
var basicSwitch = Ti.UI.createSwitch({
 value:true,
 top: 30, right: 30
});
view.add(basicSwitch);




// ---------- Picker
var picker = Ti.UI.createPicker({
 top:100, right: 30
});

var list = ['Bananas', 'Strawberries','Mangos','Grapes'];
var data = [];
for(var i = 0; i < list.length; i++){
data[i]=Ti.UI.createPickerRow({title:list[i], rowIndex: i});
}


picker.add(data);
picker.selectionIndicator = true;

picker.addEventListener("change", function(e){
Ti.API.info("changed: " + e.rowIndex );
});

view.add(picker);



//-- date picker
var datepicker = Ti.UI.createPicker({
type: Titanium.UI.PICKER_TYPE_DATE,
 top:200
});
datepicker.addEventListener("change", function(e){
Ti.API.info("changed: " + e.value );
});

view.add(datepicker);



//-- button
var button = Titanium.UI.createButton({
  title: 'Get Result',
  top: 420
});
button.addEventListener("click", function(e){
Ti.API.info("switch: " + basicSwitch.value);
Ti.API.info("picker: " + picker.getSelectedRow(0).rowIndex);
Ti.API.info("date picker: " + datepicker.value);

//-- Alert Dialog
var dialog = Ti.UI.createAlertDialog({
   message: 'You have selected switch: ' + basicSwitch.value,
   cancel: 1,
   buttonNames: ["OK",'Try Again', 'Cancel'],
   title: 'Button Clicked'
 });

dialog.addEventListener('click', function(e){
Ti.API.info("dialog ended with: "  + e.index);
});

dialog.show();

});

view.add(button);




Thursday, May 15, 2014

Titanium TableView

var list = [{title:"Label Demo", url:""},
{title:"Button Demo", url:"SecondView.js"}, 
{title:"Switch Demo", url:""}, 
{title:"ImageView Demo", url:"imageview.js"}];
var tableData = [];

for (var i=0; i  < list.length; i++){
 var row = Ti.UI.createTableViewRow({
   className:'forumEvent', // used to improve table performance
   //selectedBackgroundColor:'white',
   rowIndex:i, // custom property, useful for determining the row during events
   height:70,
   backgroundSelectedColor:'#ccc'
 });
 
 
 var labelUserName = Ti.UI.createLabel({
   color:'#333',
   font:{fontFamily:'Roboto', fontSize:18},
   text:list[i].title,
   left:20, top: 15,
   width:200, height: 40
 });
 
 row.add(labelUserName);
 
 tableData.push(row);
}

var tableView = Ti.UI.createTableView({
 backgroundColor:'white',
 separatorColor:'#999',
 data:tableData
});

tableView.addEventListener("click", function(e){
Ti.API.info("clicked at row " + e.rowData.rowIndex);
var win = Ti.UI.createWindow({
url:list[e.rowData.rowIndex].url,
title: list[e.rowData.rowIndex].title,
myVar: list[e.rowData.rowIndex].title,
backgroundColor:"white"
});
win.open();
})

self.add(tableView);


titanium ImageView

  // create another variable , self
var self = Ti.UI.currentWindow;
var view = Ti.UI.createView();


var imageView = Ti.UI.createImageView(
{
image:'/images/screenshot_AVD.png',
enableZoomControls:false,
width:'auto',
height:'auto'
}
);
imageView.addEventListener("load", function(e){
Ti.API.info("image loaded");
Ti.API.info("size: " + imageView.size.width + ", " + imageView.size.height);
}

);
var scrollView = Ti.UI.createScrollView(
{
//contentWidth: 'auto',
 //contentHeight: 'auto',
 showVerticalScrollIndicator: true,
 showHorizontalScrollIndicator: true,
 height: '80%',
 width: '80%'
 //zoomScale:2,
 //minZoomScale:1,
 //maxZoomScale:7
}
);

var originalWidth = -1;
var originalHeight = -1;
var scale = 1;

scrollView.addEventListener("touchend", function(e){
Ti.API.info("touchend");

originalWidth *= scale;
originalHeight *= scale;
});

scrollView.addEventListener("pinch", function(e){
Ti.API.info("pinch: " + e.scale);
//scrollView.zoomScale = e.scale;
if(originalWidth < 0){
Ti.API.info("size: " + imageView.size.width + ", " + imageView.size.height);
originalWidth = imageView.size.width;
originalHeight = imageView.size.height;
}
imageView.width = e.scale * originalWidth;
imageView.height = e.scale * originalHeight;
scale = e.scale;
//scrollView.contentWidth *= e.scale ;
//scrollView.contentHeight *= e.scale;
})

scrollView.add(imageView);
self.add(scrollView);



not fool proof for zooming. scrollbar not showing properly
may be better to use the transform matrix, eg. scale

Titanium Appcelerator - commonly used API & quick code samples

 http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Label
var label2 = Ti.UI.createLabel({
  color:'blue',
  text: 'A long label with\na few line breaks\nand unicode (UTF8)\nsymbols such as\na white chess piece \u2655\nand the euro symbol \u20ac\nlooks like this!\n',
  textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
  top: 30,
  width: 300, height: 200
});

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button
var button = Titanium.UI.createButton({
   title: 'Hello',
   top: 10,
   width: 100,
   height: 50
});
button.addEventListener('click',function(e)
{
   Titanium.API.info("You clicked the button");
});

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TextField
var textField = Ti.UI.createTextField({
  borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
  color: '#336699',
  top: 10, left: 10,
  width: 250, height: 60
});

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.View
var view = Titanium.UI.createView({
   borderRadius:10,
   backgroundColor:'red',
   width:50,
   height:50
});

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ScrollView
var scrollView = Ti.UI.createScrollView({
  contentWidth: 'auto',
  contentHeight: 'auto',
  showVerticalScrollIndicator: true,
  showHorizontalScrollIndicator: true,
  height: '80%',
  width: '80%'
});

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.TableView
var tableData = [ {title: 'Apples'}, {title: 'Bananas'}, {title: 'Carrots'}, {title: 'Potatoes'} ];
var table = Ti.UI.createTableView({
  data: tableData
});

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window
var window = Titanium.UI.createWindow({
     backgroundColor:"#FFC",
     title:"Scroll View Demo",
     navBarHidden:true,
    url:"ScrollViewDemo.js"
 });
 window.open();

http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ImageView
var image = Ti.UI.createImageView({
  image:'/images/banner.jpg'     // assuming that the JPG is stored in 'images' folder in 'Resources' folder
});

http://developer.appcelerator.com/question/116655/session---global-variables
eg.: Ti.App.myVar (something like session variable)
OR
Ti.App.Properties.setObject("mystr", "mystr") // persistant storage
OR
newWindow.myVar (something like GET variable passed)