I want to change text of label and make its visiblity true from another controller.
win_drawer_governmentNotification.xml
<Label id="filterCount" text="2"></Label>
win_drawer_governmentNotification.tss
"#filterCount":{
borderRadius: 100,
borderWidth: 1,
borderColor: "#f26418",
left: 46,
color: "#fff",
backgroundColor: "#f26418",
top: 15,
width: "8%",
textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
verticalAlign: Titanium.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
visible : false,
font: {
fontSize: Alloy.CFG.fonts.f_10,
fontFamily: Alloy.CFG.font_family.calibri
}
},
Now I want to change text of label filterCount from another controller in a function
I tried below code.
win_drawer_governmentNotification_filter.js
function applyFilter(e) {
var controller = Alloy.createController('win_drawer_governmentNotification');
Ti.API.info('controller = ' + controller);
var filterLabel = controller.filterCount;
Ti.API.info('filter label = ' + filterLabel);
Ti.App.fireEvent("win_drawer_governmentNotification:filterCount", {
text : "1",
visible : true
});
win_drawer_governmentNotification_filter.xml
<View id="view_apply_main" onClick="applyFilter">
<View id="view_apply">
<Label id="lbl_apply" text="APPLY FILTERS"/>
</View>
</View>
I tried different solutions from stackoverflow still haven't found solution like in
win_drawer_governmentNotification_filter.js
controller.filterCount.text = "1";
controller.filterCount.visible = true;
Can someone please help me what I am doing wrong? I am new to titanium.
Thanks in advance.
Related
I have a large image on center of a page.
There are textboxes below the image. Once the user clicks on a textbox I want the image to move to top right corner of the page.
Here is the constructor of the class -
constructor(props) {
super(props);
const {theme} = props;
this.theme = theme;
//****Initial state of the image (centered aligned on the parent container)
this.state = {
imgDimensions: {height: 93, width: 206, alignSelf: 'center'},
keyboardOpen: false,
};
//********
this.moveIcon = this.moveIcon.bind(this);
this.unMoveIcon = this.unMoveIcon.bind(this);
this._keyboardDidShow = this._keyboardDidShow.bind(this);
this._keyboardDidHide = this._keyboardDidHide.bind(this);
this.animatedValue = new Animated.Value(0);
}
Now I am calling this method on textbox click to resize the image and move to top-right corner -
moveIcon() {
this.setState({
imgDimensions: {
height: 39,
width: 87,
alignSelf: 'flex-end',
top: getStatusBarHeight(),
//marginTop: 20,
position: 'absolute',
},
});
Can this movement from flex 'center' to 'flex-end' be animated?
Please let me know if I can provide more information.
Here is the Image code -
<Animated.Image
style={{
...this.state.imgDimensions,
}}
source={require('../../assets/images/logo_final.png')}
resizeMode="contain"/>
use this package
react-native-animatable
to Install
npm install react-native-animatable --save
the problem is quite simple I think, but I can't seem to figure it out. I am using the react-native-router-flux library and the NativeBase library for the buttons.
This is my code:
<Button transparent onPress={Actions.MainOne } style={{ width: 50, height: 50 }} >
<Text>Option1</Text>
</Button>
<Button transparent onPress={Actions.MainTwo} style={{ width: 50, height: 50 }} >
<Text>Option2</Text>
</Button>
I want to change the background color of the button whenever i press it and it's active. And if I click another button, then the button I just pressed gets the background and the first button goes back to normal transparent background. I am not really sure how i can add two actions to the button. If anyone can assist I would appreciate it. I don't need to necessarily use the button library, so any ideas about this are welcome !
Thank you !
I use the flux-router to navigate through scenes. This is how I would change the background color of a button when pressed:
constructor() {
super();
state = {
color1: 'transparent',
color2: 'transparent',
}
}
setActive(button) {
if (button === 1) {
if (this.state.color1 === 'transparent') {
this.setState({
color1: 'red',
color2: 'transparent'
})
}
} else {
if (this.state.color2 === 'transparent') {
this.setState({
color2: 'red',
color1: 'transparent'
})
}
}
}
{ . . . }
<Button
onPress={this.setActive.bind(this, 1)}
style={{ width: 50, height: 50, backgroundColor: this.state.color1 }}
>
<Text>Option1</Text>
</Button>
<Button
this.setActive.bind(this, 2)
style={{ width: 50, height: 50, backgroundColor: this.state.color2 }}
>
<Text>Option2</Text>
</Button>
I am feverishly trying to make the title of a window multiline.
I have a fairly long title and need to be able to see the whole title.
Right now the title just gets cut of and has three dots if it is longer than the window allows
But I need it to break into two lines if it is too long
My current markup looks like:
/////// create first starting window ////////
var startWin = Titanium.UI.createWindow({
title: 'Some really long title that has to be wrapped',
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png',
titleAttributes: {
color: '#FFF',
font: {
fontSize: 20,
minFontSize: 15,
fontWeight: 'bold',
wordWrap: true
}
}
});
Or can I maybe use a multiline label?
Anyone an idea ?
Thanx
My working code thanx to Sebastian
page_title = Ti.UI.createLabel({
text: 'Algorithmen',
height: 80,
left: 60,
right: 60,
textAlign: 'center',
color: '#fff',
font: {
fontSize: 18,
fontWeight: 'bold',
wordWrap: true
}
}),
startWin = Titanium.UI.createWindow({
titleControl: page_title,
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png'
});
You can set the window.titleControl with a label
var startWin = Titanium.UI.createWindow({
titleControl: Ti.UI.createLabel({
text:'Some really long title that has to be wrapped'
font:{
fontSize: 20,
minFontSize: 15,
fontWeight: 'bold'
}
}),
navBarHidden: false,
exitOnClose: true,
barImage: '/images/header_background.png',
});
I have never managed to do this, so I have always hidden the title bar and created my own, with android you will need to create a custom theme to hide the title bar, also there is no title bar on iOS.
I use alloy mainly and created a nav control view that I added by reference to each page, then set the title and menu options in that.
Using React native 0.26,
My component is something like this
const Search = () => {
return (
<View style={styles.backgroundImage}>
<TextInput style={styles.textInput} onChangeText={(text) => console.log(text)} placeholder={"Enter Search Term"}/>
</View>
)
}
And my styles :
const styles = StyleSheet.create({
backgroundImage: {
flex : 1,
flexDirection: "column",
justifyContent: 'center',
alignItems: 'center'
},
textInput: {
justifyContent: "center",
alignItems: "stretch",
borderRightWidth: 30,
borderLeftWidth: 30,
height: 50,
borderColor: "#FFFFFF",
}
})
The problems that I am facing are
The border right width and left width do not seem to have any effect and the placeholder text just begins on the left edge.
The background of TextInput is "grey" its the same as the View's background. I was expecting it to be white by default, (Feels transparent).
With iOS simulator how to bring up the keyboard, I would like to set returnKeyType and see how the keyboard looks (and have some code on onSubmitEditing and test).
Screenshot below :
1 You cannot declare a specific border directly on the TextInput unless multiline is enabled (For example borderLeftWidth will not work unless multiline={true} is enabled but borderWidth will work), but you can just wrap the TextInput in a View and give it a border.
inputContainer: {
borderLeftWidth: 4,
borderRightWidth: 4,
height: 70
},
input: {
height: 70,
backgroundColor: '#ffffff',
paddingLeft: 15,
paddingRight: 15
}
2 You need to declare a backgroundColor for the TextInput.
3 To make the native keyboard show up, you need to go to the simulator menu and disconnect your hardware. Go to Hardware -> Keyboard -> Connect Hardware Keyboard, toggle it off.
As of react-native: 0.61.5 you can directly set the borderBottomWidth on TextInput. Like below in inline style or if you want in separate style object.
style = {{borderBottomWidth : 1.0}}
By default the boderWidth will be set for 0. So use borderWidth : 5 defaults for (Top, Right, Bottom, Left).
If you want to asign width individually you have options like,
style = {{
borderStartWidth : 2
borderEndWidth : 3
borderTopWidth : 1
boderLeftWidth: 2
borderRightWidth: 3
borderBottomWidth : 4
}}
I am trying to add controls programmatically in titanium alloy.
I did the fallowing code but it not working i don't know why??
XML
<Alloy>
<Window class="container">
<View id="TextOrders">
<ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" >
</ScrollView>
</View>
</Window>
</Alloy>
Controller
var args = arguments[0] || {};
var TextOrders = Ti.UI.createView({
backgroundColor:'white'
});
function createRow(i) {
var row = Ti.UI.createView({
backgroundColor: 'white',
borderColor: '#bbb',
borderWidth: 1,
width:'100%', height: 70,
top: 0, left: 0
});
var inputTextField = Ti.UI.createTextField({
hintText: 'Enter value ' + i,
keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
top: 10, left: '10%',
width: '80%', height: 60
});
row.add(inputTextField);
return row;
}
var scrollView = Ti.UI.createScrollView({
bottom:120,
contentHeight: 'auto',
layout: 'vertical',
backgroundColor: 'red',
height:'58%'
});
for(var i = 0; i <= 20; i++){
var row = createRow(i);
scrollView.add(row);
}
TextOrders.add(scrollView);
tss
".container" : {
backgroundColor:"white"
}
"#TextOrders":{
width:'100%',
height:'57%',
borderColor:'red',
borderWidth:'1px',
top:'0px',
}
"#scrollView":{
width:'80%',
borderColor:'blue',
borderWidth:'1px',
top:'0px',
height:'80%',
}
It does not giving me any error but controls is not getting added.
TextOrders.add(scrollView);
should be:
$.TextOrders.add(scrollView);