Windows phone: Loading data in a listview is very slow (Appcelerator Titanium) - windows-phone

I have a problem with my windows phone app.
I try to load about 80 items in a listview. When I do that in the controller and I create an instance of the controller at the moment that the app starts, i get a timeout message.
When I call the loadData method after the app has been started it works but to load the data takes about 27 seconds (on the device), in the emulator it takes about 4 seconds, which is much better but still a bit long in my opinion.
I have no idea what causes this delay. Any suggestions are very much appreciated.
This is the code for loading the data in the listview. (Titanium SDK 5.3.0.GA)
function loadData() {
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
var fruitDataSet = [
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}},
{properties: { title: 'test item'}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);
listView.sections = sections;
Ti.API.info('done');
}

Related

How to style elements inside SanityBlock?

I'm building blog using Sanity CMS. I want to style all elements I have in SanityBlocks like p, h1, h2, h3, h4. Below is the element I'm using to get the body of a single post.
<SanityBlocks :blocks="blocks" :serializers="serializers" />
In blockContent.js I have those styles.
styles: [
{ title: 'Normal', value: 'normal' },
{ title: 'H1', value: 'h1' },
{ title: 'H2', value: 'h2' },
{ title: 'H3', value: 'h3' },
{ title: 'H4', value: 'h4' },
{ title: 'Quote', value: 'blockquote' },
],

ejs print value of array from specific id

I send an array of object called gudangs from my controller app.js like this
res.render('daftar-staff', {
title: 'Daftar Staff',
session: req.session,
layout: 'layouts/main-layouts',
gudangs
})
Its successfully sent to the ejs view and I received
{ _id: new ObjectId("61a804c4059d1d90797c8ad0"), nama: 'gudang benowo', alamat: '', __v: 0 },{ _id: new ObjectId("61a804ecdfa6962a0162850f"), nama: 'gudang pakal', alamat: '', __v: 0 },{ _id: new ObjectId("61a86fb98b3cd7f948a388b7"), nama: 'gudang tandes', alamat: 'tandes no 19', isFull: 'true', __v: 0 },{ _id: new ObjectId("61a872c07cc01577ddf78b53"), nama: 'gudang kepatihan', alamat: '', isFull: 'true', __v: 0 },{ _id: new ObjectId("61a954eee3c45454070d4b10"), alamat: 'jalan benowo 13', __v: 0 },{ _id: new ObjectId("61a955954e757a01405e44b4"), alamat: 'jalan benowo 13', __v: 0 }
What i want is to print nama on specific gudang _id
Right now I can accomplish this by iterate through all gudangs array like this
<% gudangs.forEach((gudang,i) => { %>
<% if(gudang._id==='xxxx'){ %>
<%= gudang.nama %>
<% } %>
<% } %>
I wonder is there any simple way to do this?
Using JS array filters
<%= gudangs.filter(({ _id })=> {return _id === 'XXX'})[0]['nama'] %>
gudangs = [{ _id: "61a804c4059d1d90797c8ad0", nama: 'gudang benowo', alamat: '', __v: 0 },{ _id: "61a804ecdfa6962a0162850f", nama: 'gudang pakal', alamat: '', __v: 0 },{ _id: "61a86fb98b3cd7f948a388b7", nama: 'gudang tandes', alamat: 'tandes no 19', isFull: 'true', __v: 0 },{ _id: "61a872c07cc01577ddf78b53", nama: 'gudang kepatihan', alamat: '', isFull: 'true', __v: 0 },{ _id: "61a954eee3c45454070d4b10", alamat: 'jalan benowo 13', __v: 0 },{ _id: "61a955954e757a01405e44b4", alamat: 'jalan benowo 13', __v: 0 }];
console.log(gudangs.filter(({ _id })=> {return _id === '61a804ecdfa6962a0162850f'})[0]['nama']);
This is a working snippet. Remember that ObjectId is not defined in frontend Javascript.

React Native Filter data

I'm making a chat app with N participants, and want to search according to first name.
const filteredData = this.state.rawData.filter(id =>
id.members[0].first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
||
id.members[1].first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
)
is not acceptable, as there are n members, not always two.
const filteredData = this.state.rawData.filter(id =>
id.members.forEach(element => {
element.first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1
}
)
Returns me that undefined is not an object 'element.first_name.toUpperCase'
Why?
EDIT:
Sample data
rawData: [
{
new: 0,
id: '1',
members:
[
{
email: 'grantmarshall#test.com',
first_name: 'Grant',
last_name: 'Marshall',
id: "1",
last_login_time: 10002,
phone_number: '1234665',
phone_number_international: '+1',
picture: '',
status:'',
username:'Grant Marshall',
user:'',
},
{
email: 'you#you.com',
first_name: 'youfn',
last_name: 'yousn',
id: "5ad0007828b1930043a5303d",
last_login_time: 10002,
phone_number: '1234665',
phone_number_international: '+1',
picture: '',
status:'',
username:'youfn youfn',
user:'',
},
{ email: 'self#self.com' }],
messages:
[
{ chat_id: 1, _id: "1", from: 'Grant Marshall', text: 'roident est duis duis sit occaecat ea eiusmod laboris mollit', time: '9:22', parse_mode: 'none' }
,
{ chat_id: 1, _id: "5ad0007828b1930043a5303d", from: 'Dave Pilkinton', text: 'Should not display', time: '9:22', parse_mode: 'none' },
{ chat_id: 1, _id: "1", from: 'Grant Marshall', text: 'my second', time: '9:22', parse_mode: 'none' }
,
{ chat_id: 1, _id: "5ad0007828b1930043a5303d", from: 'Dave Pilkinton', text: 'my second Should not display', time: '9:22', parse_mode: 'none' },
]
},
It's because element.first_name is undefined in 3rd iteration of the array.
Change your condition to:
element.first_name && element.first_name.toUpperCase().indexOf(event.toUpperCase()) !== -1

Resource squeezed in preview

I'm using this format:
https://fullcalendar.io/js/fullcalendar-scheduler-1.5.1/demos/vertical-resource-view.html
, but when I add more than 4 rooms, it gets squeezed. I wanted that by adding more rooms (I need 12) I would not get everything squeezed. How can I do this?
This my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/fullcalendar.min.css' rel='stylesheet' />
<link href='../lib/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link href='../scheduler.min.css' rel='stylesheet' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/fullcalendar.min.js'></script>
<script src='../scheduler.min.js'></script>
<script>
$(function() { // document ready
$('#calendar').fullCalendar({
defaultView: 'agendaDay',
defaultDate: '2017-03-06',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay,agendaTwoDay,agendaWeek,month'
},
views: {
agendaTwoDay: {
type: 'agenda',
duration: { days: 2 },
// views that are more than a day will NOT do this behavior by default
// so, we need to explicitly enable it
groupByResource: true
//// uncomment this line to group by day FIRST with resources underneath
//groupByDateAndResource: true
}
},
//// uncomment this line to hide the all-day slot
//allDaySlot: false,
resources: [
{ id: 'a', title: 'Consultório A' },
{ id: 'b', title: 'Consultório B', eventColor: 'green' },
{ id: 'c', title: 'Consultório C', eventColor: 'orange' },
{ id: 'd', title: 'Consultório D', eventColor: 'red' },
{ id: 'e', title: 'Consultório E', eventColor: 'blue' },
{ id: 'f', title: 'Consultório F', eventColor: 'yellow' },
{ id: 'g', title: 'Consultório G', eventColor: 'black' },
{ id: 'h', title: 'Consultório H', eventColor: 'white' },
{ id: 'i', title: 'Consultório I', eventColor: 'gray' },
{ id: 'j', title: 'Consultório J', eventColor: 'brown' },
{ id: 'k', title: 'Consultório K', eventColor: 'purple' },
{ id: 'l', title: 'Consultório L', eventColor: 'purple' },
{ id: 'm', title: 'Consultório M', eventColor: 'purple' }
],
events: [
{ id: '1', resourceId: 'a', start: '2017-03-06', end: '2017-03-08', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2017-03-07T09:00:00', end: '2017-03-07T14:00:00', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2017-03-07T12:00:00', end: '2017-03-08T06:00:00', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2017-03-07T07:30:00', end: '2017-03-07T09:30:00', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2017-03-07T10:00:00', end: '2017-03-07T15:00:00', title: 'event 5' }
],
select: function(start, end, jsEvent, view, resource) {
console.log(
'select',
start.format(),
end.format(),
resource ? resource.id : '(no resource)'
);
},
dayClick: function(date, jsEvent, view, resource) {
console.log(
'dayClick',
date.format(),
resource ? resource.id : '(no resource)'
);
}
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
I also had this problem. My solution was to use this in the eventAfterAllRender callback function.
function eventAfterAllRenderCallback(){
$('.fc-agendaDay-button').click(function(){
$("#schedule_container").css('min-width',$('.fc-resource-cell').length*slot_width_resource);
}
$('.fc-resourceDay-button').click(function(){
$("#schedule_container").css('min-width','');
}
}
The slot_width_resource is the number of pixel wide you want the columns to be (I use 125). Until Fullcalendar comes out with better support this solution has worked work me
Place this function after your fullcalendar initializer and inside the initializer put the callback function like another fullcalendar option
$('#calendar').fullCalendar({
eventAfterAllRender:eventAfterAllRenderCallback,
});

Translucent tab bar in Sencha Touch 2

I was wondering what is the best way to make the tab bar translucent (iOS7 style) and have the content scroll underneath it. I am using a tab panel. Thoughts?
I tried setting tab bar to floating:true, but:
1. tabBar seems to be intended for private use and couldn't find floating property on it
2. On doing the following on the tab panel:
tabBar: {
floating: true
},
tabBarPosition: 'bottom'
I'm just getting the tab bar to be docked on top. Thoughts?
Thanks!
As of right now, you can't achieve translucence with CSS and dynamic content underneath. If it was a static image, you could do it.
You can approximate the effect with transparency. You basically need to use a container as your tab bar and style it with "position: absolute;" and set bottom: 0. The tab bar container shouldn't be an item of the list, rather an item of a container which also has the list.
Here's a quick example: https://fiddle.sencha.com/#fiddle/26i
Ext.application({
name : 'Fiddle',
launch : function() {
var toolbar = {
xtype: 'container',
bottom: 0,
alias: 'bottomtoolbar',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Option 1',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
},
{
xtype: 'button',
text: 'Option 2',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
},
{
xtype: 'button',
text: 'Option 3',
style: 'background: transparent;',
iconAlign: 'top',
width: 80,
height: 60,
margin: '0 10 0 10'
}
],
width: '100%',
height: 80,
style: 'position: absolute; background: rgba(255,255,255,0.9);'
};
var list = {
xtype: 'list',
itemTpl: '{title}',
items: [
{
// Spacer so end of list is selectable
xtype: 'container',
height: 80,
scrollDock: 'bottom'
}
],
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
};
Ext.Viewport.add(toolbar);
Ext.Viewport.add(list);
}
});
Granted, it's not styled very well, but you get the idea. Hope that helps.
Tabbar is docked by default to the bottom of the screen so even if you make it translucent all the content will be above it you will be unable to achieve what you wish. Instead you can set a bottom for the tab bar to position it below then add some opacity like .75 or .8 to try & get what you want