bircastri bircastri - 25 days ago 14
Android Question

How to open a new View from ListView

I'm building an app with appcelerator studio. In my View I have insert a custom ListView with a "Templates". This is ok.

This is that I can see:
enter image description here

Now I want that if I click on one of this rows, I can open another View, width also some effect (of slider for e.g.).

This is my code of my xml file:

<Alloy>
<View class="containerClinicalFolder" >

<ListView id="elementsList" defaultItemTemplate="elementTemplate">
<Templates>
<ItemTemplate name="elementTemplate" class="itemTemplate">

<View id="atomProperties">
<Label bindId="name" id="name" />
<View id="secondLine">
<Label class="line2 fieldLabel" text="from: " />
<Label class="line2" bindId="dateStart" id="dateStart" />
<Label class="line2 fieldLabel" text=" to: " />
<Label class="line2" bindId="dateEnd" id="dateEnd" />
</View>
<Label bindId="quantity" id="quantity" left="0"/>
</View>
</ItemTemplate>
</Templates>
<ListSection>
<ListItem quantity:text="10 minute" quantity:color="#090" name:text="Hydrogen" dateStart:text="10-10-2016" dateEnd:text="10-12-2016"/>
<ListItem quantity:text="15 minute" quantity:color="#090" name:text="Helium" dateStart:text="02-01-2015" dateEnd:text="10-10-2019"/>
<ListItem quantity:text="25 minute" quantity:color="#090" name:text="Lithium" dateStart:text="01-01-2001" dateEnd:text="01-01-2018"/>
<ListItem quantity:text="10 minute" quantity:color="#090" name:text="Hydrogen" dateStart:text="10-10-2016" dateEnd:text="10-12-2016"/>

</ListSection>
</ListView>


<Button id="button" class="buttonLanguage"
visible="false" traduzione="true"></Button>

<ImageView image="/images/add_circle_2.png" action="add" id="idImage" class="add"></ImageView>
</View>
</Alloy>


So, how can I do this?

Answer

Add the onItemclick event to your listView(I left out your template for readability):

<ListView id="elementsList" onItemclick="listItemClick">

Now in your controller set this following function:

function listItemClick(e){ /* Open new window here. */ };

Tip: You can get information like the clicked row index from the event data(parameter e).

Comments