Photo Gallery Integration in Titanium

var win = Titanium.UI.createWindow();

var imageList = ['http://2niteshanghai.com/files/parties/thumbs/thumb_19_159_19_22_IMG_9699.JPG', 'http://2niteshanghai.com/files/parties/thumbs/thumb_19_819_19_52_IMG_9642.JPG', 'http://2niteshanghai.com/files/parties/thumbs/thumb_19_677_19_227_IMG_9598.JPG', 'http://2niteshanghai.com/files/parties/thumbs/thumb_19_184_19_602_IMG_9582.JPG', 'http://2niteshanghai.com/files/parties/thumbs/thumb_19_258_19_60_IMG_9640.JPG', 'http://2niteshanghai.com/files/parties/thumbs/thumb_19_269_19_226_IMG_9770.JPG'];
var scrollGalleryView = Ti.UI.createScrollableView({
    showPagingControl : true,
    maxZoomScale : 5,
    minZoomScale : 1
});
var viewCollection = [];
for (var i = 0; i < imageList.length; i++) {
    var view = Ti.UI.createView({});
    var img = Ti.UI.createImageView({
        maxZoomScale : 5,
        defaultImage : 'http://2niteshanghai.com/files/parties/thumbs/thumb_19_159_19_22_IMG_9699.JPG'
    });
    if (i < 3) {// only preload the first 3 images
        img.image = imageList[i];
    }
    view.add(img);
    viewCollection.push(view);
}
scrollGalleryView.addEventListener('scroll', function(e) {
    if (scrollGalleryView.currentPage < (imageList.length - 1)) {
        var nxt = scrollGalleryView.currentPage + 2;
        // get the 2nd next image (since the next one is already loaded)
        scrollGalleryView.views[nxt].children[0].image = imageList[nxt];
    }
});
scrollGalleryView.views = viewCollection;
win.add(scrollGalleryView);
win.open();
 

 

 

 

Output Screenshot :




Login Page Design by titanium studio

 

Source Code :

 


    var mainWindow = Ti.UI.createWindow({
        backgroundColor:'#000000',       
    });

   
    //SELF VIEW
    var self = Ti.UI.createView({
        backgroundColor:'#000000',
        top:5,
        left:5,
        right:5,
        layout: 'vertical'
    });
   
    var contentView = Ti.UI.createView({
        backgroundColor:'#000000',
        top:5,
        left:5,
        right:5,
        layout: 'vertical',
        height:350,
    });
           
    var profile_title_view = Ti.UI.createView({
        backgroundColor : '#393C39',
        width : '100%',
        height : '25',
        top : 0,
    });
   
    var profile_label = Ti.UI.createLabel({
                text : 'User Login',
                color : 'white',
                font : {
                    fontSize : 16
                },
                height : Ti.UI.SIZE,
                width : Ti.UI.SIZE,
                top : 0,
                left : 5,
                textAlign : 'left'
            });

    profile_title_view.add(profile_label);
    contentView.add(profile_title_view);
   
    var username_lbl = Ti.UI.createLabel({
        text : 'Username',
        color : 'white',
        font : {
            fontSize : 16
        },
        height : Ti.UI.SIZE,
        width : Ti.UI.SIZE,
        top : 10,
        left : 5,
        textAlign : 'left'
    });
    contentView.add(username_lbl);
       
    var username = Titanium.UI.createTextField({
        borderWidth : 2,
        borderColor : '#bbb',
        borderRadius : 5,
        color : 'white',
        font : {
            fontSize : 20,
        },
        textAlign : 'left',
        value : '',
        top : 2,
        left : 5,
        right : 5,
        width : '95%',
        height : 40,
        backgroundColor : 'black',
        borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
        returnKeyType : Titanium.UI.RETURNKEY_DONE,
});
contentView.add(username);
 
var password_lbl = Ti.UI.createLabel({
        text : 'Password',
        color : 'white',
        font : {
            fontSize : 16
        },
        height : Ti.UI.SIZE,
        width : Ti.UI.SIZE,
        top : 10,
        left : 5,
        textAlign : 'left'
    });
    contentView.add(password_lbl);
 
var inputPassword = Titanium.UI.createTextField({       
        passwordMask:true,       
        borderWidth : 2,
        borderColor : '#bbb',
        borderRadius : 5,
        color : 'white',
        font : {
            fontSize : 20,
        },
        textAlign : 'left',   
        top : 2,
        left : 5,
        right : 5,
        width : '95%',
        height : 40,
        backgroundColor : 'black',
        borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
        returnKeyType : Titanium.UI.RETURNKEY_DONE,
});
contentView.add(inputPassword);
 
var loginBtn = Titanium.UI.createButton({
    title:'Login',
    top:20,
    width:200,
    height:35,
    borderRadius:1,
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});
contentView.add(loginBtn);

var signUpBtn = Titanium.UI.createButton({
    title:'Sign Up',
    top:20,
    width:200,
    height:35,
    borderRadius:1,
    font:{fontFamily:'Arial',fontWeight:'bold',fontSize:14}
});

contentView.add(signUpBtn);
 
signUpBtn.addEventListener('click',function(e)
{
    var RegistrationPage = require('ui/common/RegistrationPage');
    var user_registration_page = new RegistrationPage();
        user_registration_page.open();               
});   


self.add(contentView);
mainWindow.add(self);
mainWindow.open();
 

 

ScreenShot :

 


Tags : php,  mysql,  sourcecode,  

Titanium options Field Making

 

var window = Titanium.UI.createWindow();

var mainView = Ti.UI.createView({

    borderWidth : 1,

    borderColor : "red",

    height : 100,

    width : Ti.UI.SIZE,

    top : 150,

    layout:'horizontal'    

});

var gender_lbl = Ti.UI.createLabel({

                text : 'Select Gender',

                color : 'white',

                font : {

                    fontSize : 16

                },

                height : Ti.UI.SIZE,

                width : Ti.UI.SIZE,

                top : 0,

                left : 5,  

               textAlign : 'left'

            });

 

mainView.add(gender_lbl);

var gender_picker = Titanium.UI.createPicker({

        top:0,

        left:5,

});

gender_picker.selectionIndicator=true; 

var gender_picker_options = [

    Titanium.UI.createPickerRow({title:'Male','value':'1'}),

    Titanium.UI.createPickerRow({title:'Female','value':'2'})   

];

 

gender_picker.add(gender_picker_options);

 

mainView.add(gender_picker);

window.add(mainView);

window.open();

 

 

 

Output : Screenshot