Hi i'm a beginner with titanium and i would like to get the value from textfields
in a tablerow
my view
<Alloy>
<Collection src="field"/>
<Window id="addWin" title="Add Name" class="container" modal="true">
<TableView id="textfield" dataCollection="field">
<TableViewRow>
<TextField class="insertField" hintText="{field_description}"/>
</TableViewRow>
</TableView>
<Button onClick="addForm">Add form</Button>
</Window>
And my controller
function addForm() {
while (fieldlist.isValidRow())
{
var field_description = fieldlist.fieldByName('field_description');
if(field_description == 'name') {
var contact = Alloy.createModel('contact', {
name : $.insertField.value,
});
}
fieldlist.next();
}
contacts.add(contact, {silent:true});
contact.save();
closeWindow();
}
I need to filter my insertField.value to get just one textfield from my form but i don't know how to do it. It return something like Cannot read property 'value' of undefined.
I think i need to loop it but i don't how.
Thanks if you help me
Well if you have the view file static ( as pasted by you ) , I will suggest to add an id to the TextField.
Something like :
<TextField class="insertField" id="myTextField" hintText="{field_description}"/>
Then get the value of TextField as :
var myTextFieldValue = $.myTextField.getValue();
Related
In react-admin, there doesn't seem to be any way to access the state of an input, nor to add an onChange prop to an input. We want to be able to have the user select something from, say an AutocompleteInput, and then populate a value in, say, a TextInput. Is this possible? If so, please post a code example.
Here's an example - two TextInput fields (quantity and cost) that, when the user enters these values, automatically populates the third field, amount. When not using react-admin, we can do this:
handleTextInputChange = event => {
let {target} = event;
let source = target.getAttribute('source');
let {record} = this.state;
let {amount} = record;
if( 'cost' === source || 'quantity' === source ){
amount = ( 'cost' === source ? record.quantity*target.value : target.value*record.cost );
}
if( source ){
record[source] = target.value;
if( 'amount' !== source ){
record['amount'] = amount;
}
this.setState({record: record});
}
};
render() {
let {record} = this.state;
return (
<form>
<Grid container spacing={24}>
<Grid item sm={4} xs={12}>
<label>Quantity</label><br />
<TextField
id="quantity"
fullWidth={true}
value={this.state.record.quantity}
inputProps={{source: "quantity"}}
onChange={this.handleTextInputChange}
/>
</Grid>
<Grid item sm={4} xs={12}>
<label>Cost</label><br />
<TextField
id="cost"
fullWidth={true}
value={this.state.record.cost}
inputProps={{source: "cost"}}
onChange={this.handleTextInputChange}
/>
</Grid>
<Grid item sm={4} xs={12}>
<label>Amount</label><br />
<TextField
id="amount"
fullWidth={true}
value={this.state.record.amount}
inputProps={{source: "amount"}}
disabled={true}
onChange={this.handleTextInputChange}
/>
</Grid>
</Grid>
</form>
);
}
How can we accomplish this with react-admin?
I am developing an App and I have a tableview that load data from an API, and render the tableviewrows from an external file.
When the screen opens, the tableview is blank, but If I scroll up the tableview, I can see the title in the firts rows.
Can you help me? Thanks!
categorias.xml
<Alloy>
<Window class="container">
<View class="titleBar">
<Button id="backButton" onClick="backWindow" />
<Label class="lblTitle">Categorias</Label>
<Button id="nextButton" onClick="create" TipoAtributoId="0">Novo</Button>
</View>
<TableView id="tblData" top="70" editable="true" deleteButtonTitle="Apagar">
</TableView>
</Window>
</Alloy>
categoria.js
function getCategoria(){
var rows = [];
net.categoriaGet(function(data){
$.tblData.data = [];
if (data != null){
for (var i=0; i < data.length; i++){
var arg = {
type:'categoria',
title: data[i].Nome,
id: data[i].CategoriaId
};
rows.push(Alloy.createController('row', arg).getView());
}
$.tblData.setData(rows);
Alloy.Globals.hideIndicator();
rc.endRefreshing();
} else {
Alloy.Globals.hideIndicator();
rc.endRefreshing();
}
});
}
row.xml
<Alloy>
<TableViewRow id="rowView" onClick="edit"/>
</Alloy>
row.js
var args = $.args;
$.rowView.title = $.args.title;
initial screenscreen after scroll to up
I want to have two tab buttons on top and some content underneath.
After that, the content I need a View like this :
<Form style={styles.form}>
<Label style={styles.label}>
data 1
</Label>
<Item >
<Input/>
</Item>
<Label style={styles.label}>
Data2
</Label>
<Item>
<Input/>
</Item>
</Form>
When I clicking on the first button, it is active. I need that form to appear.
After that, when I clicking on the second button, I need that form change to:
<Form style={styles.form}>
<Label style={styles.label}>
data 3
</Label>
<Item >
<Input />
</Item>
</Form>
What I'm understanding is that I need a state variable.
state = {showFirst : true, showSecond:false }
and have somewhere a conditional:
if showFirst true, display FORM1
if showSecond true, display FORM2
And
onPress {() => {this.setState{{the state = true)}}
But I am not sure how to bind this together as I'm using React Native for the first time.
Currently what I'm using now is it a good practice?
I set separate states variables for both forms, because another button may be added later.
So I can't only one button:
state = { showForm: true}
showForm?Form1:Form2
onPress={() => {this.setState{{showForm:false)}}
How can I get this to work?
This is a minimum example Component for what you said you were trying to achieve:
import React, {Component} from ‘react’;
import {Button, View} from ‘react-native’;
export default class ExampleComponent extends Component {
constructor(props) {
super(props);
this.state = {
showForm: 0
};
}
render() {
var form;
if (this.state.showForm === 0) {
form = (
<View> INSERT_FORM1 </View>
);
} else if (this.state.showForm === 1) {
form = (
<View> INSERT_FORM2 </View>
);
}
return (
<View>
<Button title=‘Show Form 1’ onPress={() => this.setState({showForm: 0})}/>
<Button title=‘Show Form 2’ onPress{() => this.setState({showForm: 1})}/>
{form}
</View>
);
}
}
You can dynamically choose what content to show based on the Component props and state.
In the example above I used a numerical value to determine what form to show to minimize the amount of state values you would have to track later if the form count expanded.
A switch statement would be a better choice in the event of more available form choices, but I used if-else here for easy of typing for now.
I want to animate an element in a ListItem
For example, consider the following simple ListView:
<ListView>
<Templates>
<ItemTemplate name="foo">
<View layout="vertical">
<Label color="red" id="label" bindId="bExampleLabel"/>
<Button onClick="onClickButton">Click Me to make the label go blue</Button>
</View>
</ItemTemplate>
</Templates>
<ListSection id="exampleListSection">
<ListItem template="foo" bExampleLabel:text="Example 1"></ListItem>
<ListItem template="foo" bExampleLabel:text="Example 2"></ListItem>
</ListSection
</ListView>
and the following script:
function onClickButton(e) {
var item = $.exampleListSection.getItemAt(e.itemIndex);
item.bExampleLabel = {
color: 'blue'
};
$.exampleListSection.updateItemAt(e.itemIndex, item);
}
The above XML code simply has a ListView which contains 2 ListItem, which each contains a label and a button. When you click the button, it makes the label go blue.
However I want it so that it animates it to blue.
Usually this is done like so:
$.elementId.animate({
color: 'blue'
});
However, I do not know how to do this in the context of a ListItem as you cannot seem to access the objects directly.
you can't animate ListItem in listView, you can change only the item properties accessing with bindId
templates : Dictionary
Contain key-value pairs mapping a style name (key) to an ItemTemplate (value).
This property cannot be changed once a window has been opened.
if you want to set animation in listing use TableView, and you can do what you want with TableViewRow
I seem to be having trouble updating objects in Titanium Appcelerator Alloy,
I basically want to be able to add a table row to a table that is in a different controller/view that i am currently in..... hopefully the below will better describe this :s
basket.xml
<Alloy>
<Window id="basketWindow" class="container">
<TableView id="basketTable" />
<Button id="addItemButton" onClick="addItem">Add Item</Button>
</Window>
</Alloy>
basket.js
function addItem()
{
var itemList = Alloy.createController('item_list');
itemList.getView().open();
}
item_list.xml
<Alloy>
<Window id="itemListWindow" class="container">
<TableView id="itemListTable">
<TableViewRow id="item1" className="item" onClick="addItemToBasket">
Test Item
</TableViewRow>
</TableView>
</Window>
</Alloy>
item_list.js
function addItemToBasket()
{
var row = Ti.UI.createTableViewRow({title: 'Test Item'});
// Here i would ideally want to put something like $.basketTable.append(row);
// But nothing happens, im guessing it cant find $.basketTable as its in a different controller?
}
Does anyone know away around this?
Thanks for reading :)
One simple, easy solution is to just trigger an app wide event when you add an item to the basket:
function addItemToBasket() {
Ti.App.fireEvent("app:itemAddedToBasket", {
title : "Test Item",
otherAttribute : "Value"
});
}
Then listen for the event in the basket controller somewhere, and add the table row:
// inside basket.js
Ti.App.addEventListener("app:itemAddedToBasket", function(e) {
// object 'e' has all the row information we need to create the row
var row = Ti.UI.createTableViewRow({
title: e.title,
otherAttribute: e.otherAttribute
});
// Now append it to the table
$.basketTable.append(row);
});