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
Related
very new to Nativescript and Vue so please excuse my half baked question.
I am trying to build a small app in which i have an image tag and a button, on press of a button, the image should display, i would like this image source to be passed on as a variable, but on pressing the button, my app crashes, i am writing this in nativescript playground.
here is the code:
<template>
<Page class="page">
<ActionBar title="Home" class="action-bar" />
<ScrollView>
<StackLayout class="home-panel">
<Image src="{{img_src}}" #tap="onImgTap" />
<Button text="Button" #tap="onButtonTap" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
const imageSourceModule = require("tns-core-modules/image-source");
const imageSourceModule = require("tns-core-modules/image-source");
const fileSystemModule = require("tns-core-modules/file-system");
export default {
methods: {
onButtonTap() {
console.log("Button was pressed");
img_src:native_img
},
onImgTap(){
alert("Dont press image !");
}
},
data() {
return {
native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png"
};
},
}
</script>
<style scoped>
.home-panel {
vertical-align: center;
font-size: 20;
margin: 15;
}
.description-label {
margin-bottom: 15;
}
</style>
really appreciate any help.!
Regards,
~Harry
Your app is crashing as your to assign value to variable img_src:native_img is incorrect.
It should be,
onButtonTap() {
console.log("Button was pressed");
this.img_src=native_img;
}
Also in data need to define img_src:""
data() {
return {
native_img:"https://play.nativescript.org/dist/assets/img/NativeScript_logo.png",
img_src:""
};
}
Also in Html, src={{img_src}} to :src=img_src
<Image :src="img_src" #tap="onImgTap" />
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 want to bind click event inside webview
Below is my code but its not working.
_renderContent() {
var s = '';
if(this.state.contents.length > 0) {
this.state.contents.map(( guid, i) => {
s += '<div style="font-size:48;padding-left:10px;"><button onClick = alert("hi");>try<button></div>';
});
return (
<WebView
source={ { html: s} }
scalesPageToFit={true}
startInLoadingState={false}
/>
);
}
}
What happens if you close your button tag properly and maybe wrap your alert('hi') in quotes?
<div style="font-size:48;padding-left:10px;"><button onClick="alert('hi')";>try</button></div>
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();
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);
});