I try to change the background image of a LeftNavButton after a click, but nothing happens. When I do this with a normal button the image will change. Are there some restrictions in doing that or is there another way to do that?
index.xml:
<Alloy>
<NavigationWindow id="win1" platform="ios">
<Window id="win2" title="Window">
<LeftNavButton>
<Button id="navButtonFilter" class="navButtonFilter" onClick="doClick" platform="ios" autoStyle="true">XX</Button>
</LeftNavButton>
<Button id="button" class="navButtonFilter" onClick="doClick"> </Button>
</Window>
</NavigationWindow>
</Alloy>
index.js:
function doClick(event) {
Ti.API.info('doClick');
$.addClass($.navButtonFilter, 'navButtonFilterActive');
$.addClass($.button, 'navButtonFilterActive');
}
$.win1.open();
index.tss:
"#win1": {
backgroundColor:"white"
}
".navButtonFilter": {
backgroundImage : "/filter.png",
}
".navButtonFilterActive": {
backgroundImage : "/list.png",
}
Related
I want to create a modal component from the parent and fill data in that modal in a listview
If the component was already created, I don't have a problem, but I want the component created in that parent page
template>
<Page class="page">
<ActionBar title="Modal Data" class="action-bar"></ActionBar>
<ScrollView>
<StackLayout class="m-20">
<Button text="Button" #tap="goToDetailPage" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
const Detail = {
template: `
<Page>
<ActionBar title="Asal Ikan" />
<StackLayout>
<ListView class="list-group" for="mylist in mylists" style="height:600px;">
<v-template>
<FlexboxLayout flexDirection="row" class="list-group-item">
<Label :text="mylist.name" style="width:100%;" #tap="closeModal" />
</FlexboxLayout>
</v-template>
</ListView>
</StackLayout>
</Page>
`
};
export default {
data() {
return {
mylists: [{
code: "SL",
name: "Sinjai"
},
{
code: "MK",
name: "Makasar"
}
]
};
},
methods: {
goToDetailPage() {
this.$showModal(Detail);
}
}
};
</script>
Data from my List is not showing.
here the playground link :
https://play.nativescript.org/?template=play-vue&id=WlzgRU&v=104
There are a number of things you may want to improve / correct in your code.
Detail is a standalone component, it won't have access to the data in your Master (HelloWorld) component. You should pass mylists in props if you like to access the same data.
A Page can only be hosted within a Frame and a valid Page can only have ActionBar. Since you haven't defined a Frame in your Detail component, it won't be valid.
With ListView use itemTap event instead of adding event listeners to individual component.
Updated Playground
I'm using the excellent https://github.com/tjvantoll/nativescript-IQKeyboardManager on iOS, which has a 'done' button (effectively a close button). However, for Android softkeyboard there is no such thing... All the solutions to hide a keyboard suggest referencing the original element which triggered the keyboard - an impractical solution...
I found this forum post on how to dismiss a keyboard in nativeScript https://discourse.nativescript.org/t/unable-to-hide-keyboard/4129/9
import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";
// then as a method inside your vue
methods: {
dismissSoftKeybaord() {
if (isIOS) {
frame.topmost().nativeView.endEditing(true);
}
if (isAndroid) {
utils.ad.dismissSoftInput();
}
},
dimissSoftKeyboard should be attached to the outside / top element - eg page... Then, when clicking outside of a form field (TextField or TextView) the keyboard will be hidden / dismissed.
<Page #tap="dismissSoftKeybaord()">
Here is the code as a handy mixin:
import * as utils from "utils/utils";
import { isIOS, isAndroid } from "platform";
import * as frame from "ui/frame";
export default {
methods: {
dismissSoftKeybaord() {
if (isIOS) {
frame.topmost().nativeView.endEditing(true);
}
if (isAndroid) {
utils.ad.dismissSoftInput();
}
},
}
};
I do have a bit of an issue with layout, in that some elements wrap other elements so I've had to apply dismissSofteyboard in a few places - but it works....
<template>
<Page class="page" statusBarStyle="dark" backgroundSpanUnderStatusBar="true">
<ActionBar backgroundColor="#253945" color="#ffffff" flat="true" #tap="dismissSoftKeybaord()">
<StackLayout orientation="horizontal">
<Label ... />
</StackLayout>
</ActionBar>
<GridLayout rows="*,60" #tap="dismissSoftKeybaord()">
<ScrollView row="0" #tap="dismissSoftKeybaord()">
<StackLayout class="logFormWrapper">
<StackLayout class="input-field" marginBottom="20" >
<TextField ... />
</StackLayout>
<StackLayout class="input-field" marginBottom="20">
<TextField ... />
</StackLayout>
...
...
</StackLayout>
</ScrollView>
<StackLayout margin="0" row="1" class="footer"></StackLayout>
</GridLayout>
</Page>
</template>
So I'm now just trying to figure out how I can adjust the layout so I don't need so many dismissSoftKeyboard #taps everywhere....
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.
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);