Appcelerator Titanium Alloy | How to access element of other class - titanium

In Alloy Titanium, I can access XML elements with their id $.element_id but how can I get elements of other class? or xml?
EDIT
I have two files.
1. file1.js, file1xml.xml
2. file2.js, file2xml.xml
In File1.js i want to access the variable of file2xml.xml. how can i achieve this?

Anything with an id can be accessed:
file1.xml
<Alloy>
<View id="myView" />
</Alloy>
file2.js
var ctrl1 = Alloy.createController('file1');
ctrl1.myView.backgroundColor = 'red';

if you have required file2.xml in file1.xml like
<Require src="common/viewToolBar" id="viewToolBar"/>
then you can get the element with the id in file1.js like
$. viewToolBar.getView('viewSynch').visible = false;
link for more details

You can use Require tag in alloy with an Id and you can access its elements as below.
**File1.xml**
<Alloy>
<View>
<Label id="labelId">Middle</Label>
</View></Alloy>
**File2.xml**
<Window>
<Require src="File1" id="File1View" type="View"/>
<View id="header"><Label id="headerText">Header</Label></View>
<View id="nav">
<Label class="navButton" onClick="openTab" controllerName="home">Home</Label>
<Label class="navButton" onClick="openTab" controllerName="news">News</Label>
<Label class="navButton" onClick="openTab" controllerName="info">Info</Label>
<Label class="navButton" onClick="openTab" controllerName="more">More</Label>
</View>
</Window>
**File2.js**
$.File1View.labelId.text = "hi";

Related

Titanium appcelerator how to update view inside listview?

I have an Appcelerator Titanium app to do, i have a Ti.UI.ListView with a view inside (view_one.xml):
...
<ListView onItemclick="getEvaluation" id="myLisview" defaultItemTemplate="templateLm" bottom="0" top="10" onItemclick="changePage" backgroundColor="white">
<Templates>
<Require id="lm_items" src="common/templateLm"/>
</Templates>
</ListView>
...
in common/templateLm :
<Alloy>
<ItemTemplate name="templatePageMission">
<View bindId="evaluate" height="10dp">
<Label text="evaluate"></Label>
</View>
<View bindId="stars" height="15dp"/>
</ItemTemplate>
</Alloy>
in view_one.js :
function getEvaluation(e){
switch(e.bindId){
case 'evaluate':
var item = e.section.getItemAt(e.itemIndex);
console.log(item) // <= this is empty ????
item.stars.backgroundColor = "red";
break;
}
}
and when click on the evaluate view I finally got:
undefined is not an object (evaluating item.stars.backgroundColor)
If anyone can help, this is great, anyway thanks for this great community.
You have assigned the itemclick event twice:
onItemclick="changePage"
and
onItemclick="getEvaluation"
So if you just use the latter one, it should catch the controller function correctly and the item should be updated correctly, since your controller code looks valid.

Titanium Layout not working while set touchEnabled=false inside Listview

When I set touchEnabled="false" for a view which was inside my List view template all my list view layout was broken. when i remove the touch enabled property it working fine. Anyone please help me to solve this issue.
Titanium SDK : 3.4.0 ,
OS : IOS and android,
Here is my sample code.
<Alloy>
<Window backgroundColor="#fff">
<ListView id="LstView" top="50" defaultItemTemplate="template1">
<Templates >
<ItemTemplate id="mytemplate" name="template1">
<View layout="horizontal" width="Ti.UI.FILL" touchEnabled="false">
<View width="Ti.UI.SIZE" height="Ti.UI.SIZE" left="5">
<Label bindId="Lbl1" Id="Lbl1" color="black"></Label>
</View>
<View width="Ti.UI.SIZE" height="Ti.UI.SIZE" left="10" >
<Label bindId="Lbl2" Id="Lbl2" color="black"></Label>
</View>
<View width="Ti.UI.SIZE" height="Ti.UI.SIZE" left="10">
<Label bindId="Lbl3" Id="Lbl3" color="black" ></Label>
</View>
</View>
</ItemTemplate>
</Templates>
<ListSection>
<ListItem Lbl1:text="hello" Lbl2:text="how are you?" Lbl3:text="I am fine" height='70'/>
</ListSection>
</ListView>
</Window>
</Alloy>
According to this article touchEnabled = false will forward the touch event to it's peers. Can you show your whole xml file? I can't clarify anything yet..
it seems a titanium bug.. open a ticket in JIRA.. Jira Bug Report

In Titanium JS, when setting rightNavButtons, the buttons only work for the first 4 taps

In my app for iOS I've used the rightNavButtons property of a window to add two buttons in the top right.
However, the click events on these buttons only work for the first 4 taps and then nothing happens when you click on them. What is going on? Could this be a bug with Titanium?
Here is my code:
Titanium SDK version: 3.4.0.v20140916181713
Alloy version: 1.5.1
Controller - index.js:
var addButton = Ti.UI.createButton({ systemButton: Ti.UI.iPhone.SystemButton.ADD });
var searchButton = Ti.UI.createButton({ systemButton: Ti.UI.iPhone.SystemButton.SEARCH });
addButton.addEventListener("click", function () {
console.log("ADD was clicked!");
});
searchButton.addEventListener("click", function () {
console.log("SEARCH was clicked!");
});
$.win.setRightNavButtons([searchButton, addButton]);
$.index.open();
View - index.xml
<Alloy>
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="win" title="Tab 1">
<Label>I am Window 1</Label>
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
<Window title="Tab 2">
<Label>I am Window 2</Label>
</Window>
</Tab>
</TabGroup>
</Alloy>
Found a workaround!
I avoid the <RightNavButtons>, which can contain more than one view.
Instead I use <RightNavButton> which can contain only one child view.
To add still add two buttons to my navbar, I nested the buttons in the view container (the single child of the <RightNavButton>.
<RightNavButton>
<View>
<Button class="i i-heart nav-button" id="favorite" onClick="toggleFavorite" right="0" />
<Button class="i i-share nav-button" id="share" right="32" />
</View>
</RightNavButton>
No issues anymore. Both onClick events of the <Button> childs inside the View container are fired.
Tested this code and it should work for you
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="win" title="Tab 1">
<RightNavButtons platform=ios>
<Button systemButton="Ti.UI.iPhone.SystemButton.ADD" onClick="addHandler" />
<Button systemButton="Ti.UI.iPhone.SystemButton.SEARCH" onClick="searchHandler" />
</RightNavButtons>
<Label>I am Window 1</Label>
</Window>
</Tab>
When I tried to execute your code, the event listeners weren't being called at all for me on 3.4.0.GA / Alloy 1.5.0 and iOS8 Simulator.
However, when I put the RightNavButton inside the XML as below, it worked fine and the event listener was called every time I clicked on it. Looks like a bug to me...
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="win" title="Tab 1">
<RightNavButton platform=ios>
<Button systemButton="Ti.UI.iPhone.SystemButton.ADD" onClick="closeWindow" />
</RightNavButton>
<Label>I am Window 1</Label>
</Window>
</Tab>

Titanium Alloy LeftNavButton not showing up in simulator

Not sure where I am doing wrong. I tried via code and by xml, but for some reason the left nav button does not show up. I am using the simulator since I don't have an actual device for ios.
The xml view
<!--filename: playType.xml->
<Alloy>
<Window class="container">
<LeftNavButton platform="ios">
<Button title="Back" onClick="closeWindow"/>
</LeftNavButton>
<View class="buttonContainer">
<Button class="menuButton" title="Single Player"/>
<Button class="menuButton" title ="Duel"/>
</View>
</Window>
</Alloy>
The Controller
//playType.js
var args = arguments[0] || {};
var closeWindow = function(){
$.playType.close();
};
The tss style
//playType.tss
".container" : {
backgroundColor:"white",
height:Ti.UI.FILL,
},
".buttonContainer":{
center:{x:"50%",y:"50%"},
height:Ti.UI.SIZE,
layout:"vertical"
}
I using this from the index.js
var playType = Alloy.createController('playType').getView();
playType.open();
The window shows up fine with the two buttons in the center but the back button doesn't appear.
What am I doing wrong. I went through the doc and also tried the code way too. Same result, no back button. :(
You have to create the window using navigation window otherwise navButton wont show up.here goes the code link for you
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.iOS.NavigationWindow
Thanks
Your window must be placed inside a TabGroup which handles all the capabilities of a navigation controller inside each tab.
<Alloy>
<TabGroup>
<Tab id="tab1" title="Tab 1">
<Window id="win1" title="Tab 1">
<LeftNavButton platform="ios">
<Button title="Back" onClick="closeWindow"/>
</LeftNavButton>
...
</Window>
</Tab>
</TabGroup>
</Alloy>
As for the back button, open a child window of the current tab using the tab as the reference to the open method.
tab.open(newWindow);

Titanium Alloy get all label text value from xml

I want to console log all label text value displayed from my xml, And this is how I was doing to log the label Ti.API.info($.label.getText()); , but this code doesn't seem to work since this only works for only a single value from a variable. How I'm going to do this? Sorry,Just so noob enough. Thanks!
<TableView id="table" dataCollection="person">
<TableViewRow id="row">
<Label id="label" text="{name}"></Label>
</TableViewRow>
</TableView>
from the Appcelerator documentation http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Data_Binding
dataTransform: specifies an optional callback to use to format model attributes. The passed argument is a model and the return value is a modified model as a JSON object.
<TableView id="table" dataCollection="person" dataTransform="dumpText" >
<TableViewRow id="row">
<Label id="label" text="{name}"></Label>
</TableViewRow>
</TableView>
So we can use this method to dump whatever is being added to the list
function dumpText(model) {
// model to a JSON object
var o = model.toJSON();
Ti.API.info(o.name);
return o;
}