How to create a star rating control for an iPhone app using Titanium?

I'm building an iPhone ap开发者_运维知识库p using the Titanium framework. I need a 5-star rating control in my app, just like the one found in the app store. As a temporary solution I'm using the slider for adding a rating. Most of the examples I found on the web are in objective C. can somebody guide me on achieving this using titanium.

Regards

---

You just need to create a view and populate it with the number of buttons you want then assign a click event to them.

var rateView = Ti.UI.createView(),
    max = 5, min = 1; // used in the flexMin and flexMax

function rate(v) {
    // rate code storage goes here
    // your choice on if you want to have separate images of each rating or run a loop
    // based on the value passed in to change a set number of stars to their alternate 
    // image
}

var flexMin = Ti.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE,
    top: 0, left: 0,
    height:  rateView.height
});

flexMin.addEventListener('click', function(e) {
    rate(min);
});

var flexMax  = Ti.UI.createButton({
    systemButton: Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
    top: 0, right: 0,
    height:  rateView.height
});

flexMax.addEventListener('click', function(e) {
    rate(max);
});

rateView.add(flexMin);
rateView.add(flexMax); 

var stars = [];
for(var i=1;i<max;i++) {
    stars[i] = Ti.UI.createButton({
        // styling including the darker or light colored stars you choose,
        'rating': i
    });
    stars[i].addEventListener('click', function(e) {
        rate(e.source.i);
    });   
}

Using that logic approach above you should be able to change max to set the number of stars you want and simply setup the rate(v) to do one of the two options in the comments above. Keep in mind that you need to add the stars[i] to the view with a left or some type of positing that increments based on the number of stars available. Hope this helps.

---

Appcelerator made a custom ui posting that included a star rating system.

The Code: https://github.com/appcelerator-developer-relations/Forging-Titanium/tree/master/ep-003

The Video: http://vimeopro.com/appcelerator/forging-titanium/video/28122504

---

Here is a sample code https://github.com/dlinsin/DLStarRating

---

Can you not use pieces of Objective-C code in your Titanium built application? Titanium is used for building native applications... Or do you want to know how to write something like this in Javascript?

---

Simply you can us this Tested on (Android - IOS)

var stars = [];
var ratingValue;

   var rateView = Ti.UI.createView({
    layout : 'horizontal',
    height : '30%',
    width : 'auto',
});

for (var i = 0; i < 5; i++) {
    var starImg = Ti.UI.createImageView({
        image : starOffImgSrc,
        height : 26,
        width : 'auto',
    });
    starImg.rating = i + 1;
    starImg.addEventListener('click', function(e) {
        ratingValue = e.source.rating;
        for (var r = 0; r < 5; r++) {
            if (r < e.source.rating) {
                stars[r].image = starOnImgSrc;
            } else {
                stars[r].image = starOffImgSrc;
            }
        }
    });

    stars.push(starImg);
    rateView.add(starImg);
}
    var submitRateBtn = Ti.UI.createButton({
    title : "Submit Rate",
    height : 'auto',
    width : 'auto'
});

    win.add(rateView);
win.add(submitRateBtn);

submitRateBtn.addEventListener('click', function(e) {
    alert(ratingValue);
});

assumed you need 5 stars for rating and your star image height and width = 26

I hope to help you

---

May be this will help you to create simple star rating

    var StarWinView = Ti.UI.createView({
        width : "80%",
        height : "35%",
        backgroundColor : "#FFF",
        // layout:"vertical",
        borderRadius : 10,
        borderWidth:2,
        borderColor : "#00968A"

    });

    var StarLabel = Ti.UI.createLabel({
        top : "10dp",
        text : "Rate the Camp",
        color : "#00968A",
        font : {
            fontSize : 18,
            fontWeight:"bold"
        }
    });

    StarWinView.add(StarLabel);

    var StrBtnView = Ti.UI.createButton({

        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        backgroundColor : "#FFF",
        layout : "vertical",
        // top:"20%",

    });

    var StarView = Ti.UI.createView({
        width : Ti.UI.SIZE,
        height : Ti.UI.SIZE,
        backgroundColor : "#FFF",
        layout : "horizontal"
    });

    var BTN1 = Ti.UI.createButton({
        backgroundImage : "/images/FilledStar.png",
        height : "30dp",
        width : "30dp",

    });
    StarView.add(BTN1);

    var BTN2 = Ti.UI.createButton({
        backgroundImage : "/images/FilledStar.png",
        height : "30dp",
        width : "30dp",

    });
    StarView.add(BTN2);

    var BTN3 = Ti.UI.createButton({
        backgroundImage : "/images/FilledStar.png",
        // backgroundColor:"#000",
        height : "30dp",
        width : "30dp",

    });
    StarView.add(BTN3);

    var BTN4 = Ti.UI.createButton({
        backgroundImage : "/images/FilledStar.png",
        height : "30dp",
        width : "30dp",

    });
    StarView.add(BTN4);

    var BTN5 = Ti.UI.createButton({
        backgroundImage : "/images/FilledStar.png",
        height : "30dp",
        width : "30dp",

    });
    StarView.add(BTN5);

    StrBtnView.add(StarView);

    var ButtonView = Ti.UI.createView({
        top:"30dp",
        width : "170dp",
        height : "35dp",
        backgroundColor : "transparent"
    });

    var SubmitBTN = Ti.UI.createButton({
        left : "0dp",
        height : "100%",
        width : "45%",
        backgroundColor : "00968A",
        title : "Rate",
        borderRadius:5,
        font : {
            fontSize : 12
        },
        color : "#FFF"

    });
    ButtonView.add(SubmitBTN);

    var NotNowBTN = Ti.UI.createButton({
        right : "0dp",
        height : "100%",
        width : "45%",
        backgroundColor : "00968A",
        title : "Not Now",
        borderRadius:5,
        font : {
            fontSize : 12
        },
        color : "#FFF"

    });
    ButtonView.add(NotNowBTN);

    StrBtnView.add(ButtonView);

    StarWinView.add(StrBtnView);

    $.StarPopUp.add(StarWinView);

    var rating = 5;
    BTN1.addEventListener('click', function() {

        rating = 1;
        Ti.API.info('rating == ' + rating);

        BTN1.backgroundImage = "/images/FilledStar.png";
        BTN2.backgroundImage = "/images/BlankStar.png";
        BTN3.backgroundImage = "/images/BlankStar.png";
        BTN4.backgroundImage = "/images/BlankStar.png";
        BTN5.backgroundImage = "/images/BlankStar.png";
    });

    BTN2.addEventListener('click', function() {

        rating = 2;
        Ti.API.info('rating == ' + rating);

        BTN1.backgroundImage = "/images/FilledStar.png";
        BTN2.backgroundImage = "/images/FilledStar.png";
        BTN3.backgroundImage = "/images/BlankStar.png";
        BTN4.backgroundImage = "/images/BlankStar.png";
        BTN5.backgroundImage = "/images/BlankStar.png";
    });

    BTN3.addEventListener('click', function() {

        rating = 3;
        Ti.API.info('rating == ' + rating);

        BTN1.backgroundImage = "/images/FilledStar.png";
        BTN2.backgroundImage = "/images/FilledStar.png";
        BTN3.backgroundImage = "/images/FilledStar.png";
        BTN4.backgroundImage = "/images/BlankStar.png";
        BTN5.backgroundImage = "/images/BlankStar.png";
    });

    BTN4.addEventListener('click', function() {

        rating = 4;
        Ti.API.info('rating == ' + rating);

        BTN1.backgroundImage = "/images/FilledStar.png";
        BTN2.backgroundImage = "/images/FilledStar.png";
        BTN3.backgroundImage = "/images/FilledStar.png";
        BTN4.backgroundImage = "/images/FilledStar.png";
        BTN5.backgroundImage = "/images/BlankStar.png";
    });

    BTN5.addEventListener('click', function() {

        rating = 5;
        Ti.API.info('rating == ' + rating);

        BTN1.backgroundImage = "/images/FilledStar.png";
        BTN2.backgroundImage = "/images/FilledStar.png";
        BTN3.backgroundImage = "/images/FilledStar.png";
        BTN4.backgroundImage = "/images/FilledStar.png";
        BTN5.backgroundImage = "/images/FilledStar.png";
    });

    SubmitBTN.addEventListener('click', function() {
        Ti.API.info('rating == ' +rating);
        $.StarPopUp.close();

        if (rating == 1) {
            Alloy.Globals.starRating.image = "/images/1star.png";
        } else if (rating == 2) {
            Alloy.Globals.starRating.image = "/images/2star.png";
        } else if (rating == 3) {
            Alloy.Globals.starRating.image = "/images/3star.png";
        } else if (rating == 4) {
            Alloy.Globals.starRating.image = "/images/4star.png";
        } else if (rating == 5) {
            Alloy.Globals.starRating.image = "/images/5star.png";
        }
    });

    NotNowBTN.addEventListener('click', function() {
        $.StarPopUp.close();
    });