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
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.
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 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>
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);
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;
}