Titanium scrollable view index

Question

My project is to list products with a views, then when click on a product i have to go to another page and re-list the products with scrollableview and target the clicked view to be displayed first (sorry for bad english):

Let's say this is my list (Grabbed from a collection) :

<Alloy>
<Window id="products" onClose="cleanup" title="All products" class="container" >
    <ScrollView dataCollection="list_products" dataTransform="parse_liste" layout='vertical' id="results" class="resultats">
        <View product_id="{ID}" 
            product_photo="{photo}" 
            product_name="{product_name}" lauyout='horizontal' class='heightAuto' width='Ti.UI.FILL' backgroundColor='#eee' bottom='1'>
            <ImageView touchEnabled="false" left='10' image='{photo}' />
            <View touchEnabled="false" layout='vertical' height='Ti.UI.SIZE'>
                <Label touchEnabled="false" left='100' class='nom' text='{product_name}' />
                <Label touchEnabled="false" left='100' class='nom' text='{product_price} €/h' />
            </View>
        </View>
    </ScrollView>
    <ActivityIndicator color="white" id="activityIndicator" message="Chargement des candidats ..."/>
</Window>

When click on product (the controller) :

var products = Alloy.Collections.liste_recherche;
$.activityIndicator.show();
products.fetch({
    success:function(model,results){
        Alloy.Globals.results = results;
        $.activityIndicator.hide();
    }
});

//// CLICK ON A PRODUCT
$.list_products.addEventListener('click', function(e){
    if( Alloy.Globals.results ){
        ///////// GO TO PRODUCT PAGE AND PASS ARGS
        var xpng = require('xpng');
        xpng.openWin(Alloy.CFG.nav, 'product', Alloy.Globals.products);
    } 
});

The product page :

var args = $.args;

function getProfil(){
    var products_array = [];    
    var c = ['gray','green','blue','red'];
   _.each(args, function(item, key, value){

        /* Créer la vue */
        var product_container = Ti.UI.createView({
            id:item.ID,
            layout:'vertical',
            backgroundColor:c[Math.floor(Math.random() * c.length)]
       });

        var product_image = Ti.UI.createImageView({ image : item.photo});
        var product_name = Ti.UI.createLabel({
        text: item.champs_candidat.nom
    });

    product_container.add(product_image);
    product_container.add(product_name);
    products_array.push(product_container);     
});

    var style = $.createStyle({
        classes: ['listeProfiles'],
        apiName: 'ScrollableView'
    });
    var product_scroller = Ti.UI.createScrollableView({
        className: 'listeProfiles',
        views : products_array,
        showPagingControl:true
   });
   product_scroller.applyProperties(style);
   $.product_win.add(product_scroller);
}

Those codes works fine, just i want to display clicked view (from page A) first.

Thank you for help.

Prashant Saini Prashant Saini · Accepted Answer · 2016-07-11T08:56:57

I think you need to capture which view was clicked on ScrollView click event:

$.list_products.addEventListener('click', function(e){
// e.source will give you the clicked view and will behave like $.VIEW_ID
// so you can access any property or method of the clicked view using e.source here

Ti.API.info("Clicked View ID = " + e.source.product_id);   

    if( Alloy.Globals.results ){
        ///////// GO TO PRODUCT PAGE AND PASS ARGS
        var xpng = require('xpng');
        xpng.openWin(Alloy.CFG.nav, 'product', Alloy.Globals.products);
    } 
});

As per your code, you have already disabled the touches of child-views of the view with this property product_id, so the above modified click event code will be able to provide you the correct product ID of the clicked View inside the ScrollView.

Now:

You have the product_id of the view clicked.
Write code on your collection data to know the index of that product_id.
Use the index from step 2 to set this property currentPage of ScrollableView

Here is the summary of overall process:

Get the product_id of the clicked view using e.source
Use this product_id to know its index in data collection.
Finally, index from step 2 will be the value of currentPage property of ScrollableView. (it's your preference how you pass this index to product page.)

Titanium scrollable view index

1 Answers