Titanium appcelerator model and collections persistance - titanium

I am about to retrieve datas from remote and create model and collections, here are each part of the app (the controller, the view and the model).
If i really understand using model in titanium is like storing into database so the data persists even if there is no internet connection after i get all datas.
Below code works well, it seems no data is displayed after connection is lost, so i ask myself what is the advantage of using models in titanium instead of using classic way : retrieve from xhr and display data ?
2- My second question (if i am wrong) after retrieving datas and storing into model, i can retrieve it without xhr again inside another page?
3- And the last one : is it a good practice to retrieve data from alloy.js and save to model because i need datas in all my app pages ?
THE CONTROLLER
// This is an istance of my xhr library
var XHR = require('xhr');
var xhr = new XHR();
$.win.addEventListener('open', function(){
url = 'mydomain.com/api/get_posts';
xhr.get(url, onSuccess, onError);
});
function onSuccess(response){
if(typeof response !== null ){
datas = JSON.stringify(response.data);
postsModel = [];
_.each(datas, function(data){
/* Create model */
postsModel.push(Alloy.createModel('mypostsmodel',{
title : data.title,
id : data.id
}));
});
$.posts.reset(postsModel);
}
}
** THE VIEW **
<Alloy>
<Collection src="myposts" instance="true" id="myposts" />
<Window id="win" title="Inscription" class="container" >
<View id="posts_view" class="myposts" dataCollection="$.myposts">
<View postId="{id}" class="post_item">
<Label class="post_label" text="{title}" />
<Label class="exp" id="exp_{id}" text="" />
</View>
</View>
</View>
</Alloy>
THE MODEL
exports.definition = {
config: {
"columns": {
"title": "Text",
"id": "Integer"
},
"defaults": {
"title": "-",
"id": "-"
},
adapter: {
type: "sql",
collection_name: "myposts"
}
},
extendModel: function(Model) {},
...
Thank you all.

The advantage in my opinion a clearer definition of the View. In my opinion the biggest thing Alloy brings to the table is the ability to more cleanly separate your view from the logic that drives your application. Your logic is also simplified (in most cases!) because all you need to do is add the data to the collection, and Alloy handles the display.
The alternative to how you are doing it:
_.each(datas, function(data){
var container = Ti.UI.createView({class: "post_item"}),
title = Ti.UI.createLabel({
text: data.title,
class: "post_label"
}),
exp = Ti.UI.createLabel({class: "exp"});
container.add(title);
container.add(exp);
$.posts_view.add(container);
});
I've done it both ways, and even with alloy, sometimes it is necessary to do this, because of the limitations of Backbone as implemented in Titanium - but I think clearly if you can include your repeating UI components in the markup, it's easier to read and maintain.

Related

Add search to react-native firebase list

I have a react-native list populated from firebase. I want to add a search bar on top of the app. Once I start typing, I want that list to only show results related to the search term. Its similar to this: https://www.freecodecamp.org/news/how-to-build-a-react-native-flatlist-with-realtime-searching-ability-81ad100f6699/
Only problem is the way my data is typed after its retrieved from firebase, its impossible to use the tutorial above to retrieve that data.
My html code is:
<Toolbar title="Hello World"/>
<Button
title="Add New"
type = "outline"
onPress={this.addItem.bind(this)}
/>
<ListView
dataSource={this.state.itemDataSource}
renderRow={this.renderRow}
/>
My Firebase retrieval code is as follows:
getItems(itemsRef) {
itemsRef.on('value', (snap) => {
let items = [];
snap.forEach((child) => {
items.push({
title: child.val().DESCRIPTION,
text: child.val().BASE,
_key: child.key
});
});
this.setState({
itemDataSource: this.state.itemDataSource.cloneWithRows(items)
});
});
}
I just don't know how to add a search bar that searches the retrieved list and displays only relevant stuff on the list as someone types a word in.
Pease help. I'm guessing the type of the data is what is causing the problem.
Results should look like this App. I built this on AppSheet:
https://www.appsheet.com/start/ab7f8d5d-1adf-4107-bdd8-f7022a1a81f8

Rendering results from an API after using a search function with Backbone.js

I am new to Backbone.js and I am trying to create an application that can check if you completed the videos games you control.
I am using an API to retrieve any information about videogames.
I want to be able to search for a game, for example "Zelda". It should then list every Zelda game.
I get stuck because I don't know how to get the search function to work properly with the API and I don't know how to render it properly. I have written a template for the games that should render.
I have no clue what to do know, or if I'm even on the right track. I am not asking for someone to code it completely, I am asking for a step in the right direction.
Let me know if you need more code.
library_view.js
var LibraryView = Backbone.View.extend({
el:$("#games"),
url: url = "http://www.giantbomb.com/api/search/?api_key=[KEY]",
events:{
"keypress input":"findGames"
},
findGames:function(e){
if(e.which == 13){
query = $(".searchfield").val()
field_list = "name,platforms"
resources = "game"
url = url +"&query="+ query +"field_list"+ field_list +"resources"+ resources
}
},
index.html
<input type="search" placeholder="Find a game" class="searchfield">
It looks like you are mashing together a View and a Model.
A view, for instance, shouldn't have URL inside it, it doesn't know what to do with it.
The correct path would be something roughly like so:
var SearchModel = Backbone.Model.extend();
var LibraryView = Backbone.View.extend({
el: $("#games"),
events:{
"keypress input":"findGames"
},
findGames: function(e){
// get query, field_list, resources
var searchModel = new SearchModel()
searchModel.fetch({
url: "http://www.giantbomb.com/api/search/?api_key=[KEY]"+"&query="+ query +"field_list"+ field_list +"resources"+ resources
});
// do something with searchModel
}
});
After the fetch, searchModel will hold the data Backbone Model style.
Let's say the returned value from the AJAX call is:
{
"answer": 42
}
Then:
searchModel.get("answer") // = 42
The SearchModel is just an abstraction here as you don't really need it (you can just ajax it). But I put it to help you understand what Model represents, it basically represents only data... It doesn't know what View is.

How to use localstorage in Titanium/Alloy?

I am very new to Appcelerator/Titanium. Can anyone tell me how to use localstorage function in Alloy (Titanium). (Not getting any good solution on Web).
Thanks! :)
Titanium Alloy has a customized implemntación Backbone. This means that titanium uses Backbone for many things, but at the same time some important features have been left out.
One of the most used parts of Backbone by Titanium are models, while that not identical to those ofrese the js framework, they have lots of things in common.
To work with data models must define an adapter (this can be localStorage, sql, properties or custom sync adapters)
If you want to work with localStorage, your model should look something like this:
exports.definition = {
config: {
"defaults": {
"first_name": "",
"last_name": "",
"phone": "",
"email": ""
},
"adapter": {
"type": 'localStorage',
"collection_name": 'user'
}
},
extendModel: function(Model) {
_.extend(Model.prototype, {
}); // end extend
return Model;
},
extendCollection: function(Collection) {
_.extend(Collection.prototype, {
}); // end extend
return Collection;
}
};
to manipulate the data then you should use:
Create data
model = Alloy.createModel('user', {first_name: 'Pedro', last_name: Picapiedra});
// or model.save();
Alloy.Collections.user.add(model);
Read data
callection = Alloy.Collections.user.fetch()
model = Alloy.Collections.user.get(modelId)
Update data
user.set({
first_name : 'Pablo',
last_name : 'Marmol',
});
user.save();
Delete data
model.destroy();
collection.remove(model);
For more information:
Titanium Sync & apadters
Backbone Sync, collections, models & etc
See https://wiki.appcelerator.org/display/guides/Working+with+Local+Data+Sources for general guide.
Accessing files is done through the Ti.Filesystem. See documentation at http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Filesystem . You should also see the kitchen sink example, as it shows hot to read/write file https://github.com/appcelerator/KitchenSink/blob/master/Resources/ui/common/platform/filesystem.js.
If you simply want to store some data locally, many people use sqlite database. See http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Database .
The simplest way is to use properties. It is limited, but for many people that is enough. http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.App.Properties

How to populate a Extjs4 grid

I'm new to ExtJS4, I have been reading the doc and a book but can't have everything to work how I would like.
I have a form that is submited via AJAX, a JSON response is returned which migh contain none, one or more records. I want to show these records in a new window with a grid component, so the user can select just one record.
I can't make the JSON response to be populated into the grid, for starters,
Where is the JSON response stored?? I have the corresponding success and failure functions.
How I make the grid loads this data into it?
Best Regards,
I'll do something among these lines:
...//This is the form onsuccess
succes: function(response) {
var json = Ext.JSON.decode(response.responseText);
var win Ext.create('Ext.window.Window', {
width: 600,
height: 400,
items: [ {
xtype:'grid',
columns:[ ... ],
store: Ext.create('Ext.data,Store',{
fields: ['field1', 'field2'],
data: json })
}]
});
win.show();
}
Hope that helps.

view is undefine, loading combo box issue in 4.07

I am occassionally ( usually 1 in 3 page loads) receive the following error message
view is undefined
view.onItemSelect(record);
In my view
{
xtype:'combobox',
name:'PurchaseOrderStatusId',
id:'PurchaseOrderStatusCombo',
displayField:'Name',
store:'PurchaseOrderStatuses',
mode:'local',
valueField:'Id',
fieldLabel:'Status',
width: 350
},
{
xtype:'combobox',
name:'SupplierId',
id:'SupplierCombo',
displayField:'Name',
store:'Suppliers',
mode:'local',
valueField:'Id',
fieldLabel:'Suppliers',
width: 350
},
// in my controller
onLaunch: function () {
var suppliers = this.getSuppliersStore();
suppliers.load();
var purchaseOrderStatuses = this.getPurchaseOrderStatusesStore();
purchaseOrderStatuses.load();
var purchaseOrdersStore = this.getPurchaseOrdersStore();
purchaseOrdersStore.load({
callback: this.onPurchaseOrderLoad,
scope: this
});
},
onPurchaseOrderLoad: function (selection) {
var form = Ext.getCmp('purchaseOrderForm');
form.loadRecord(selection[0]);
},
in my model
{
mapping:'PurchaseOrderStatusId',
name:'PurchaseOrderStatusId'
},
{
mapping:'SupplierId',
name:'SupplierId'
}
It's not clear how the error message you are reporting is linked to any of the code you have revealed so far. So it's difficult to connect the dots here.
However here are a couple of observations:
1. If you need your stores to always load ASAP when your app launches set the autoLoad:true config on those stores. This way you don't have to explicitly load them and they have more time to finish loading before your view is ready to go.
2. If you need to load an instance of your model into the form you can use Model.load method instead of having a store do that for you. You will need to provide API on the model on how to read the records from the server.
3. Model mapping is not necessary if your Model fields match to what the server returns.
If you need further help, please update your question with some more debug info.