We Keep Coding

How to create Android Service Without interval in Appcelerator/titanium Android?

I want to create a service in appcelerator android where it starts when i click a download button and stops only if download is interrupted/fails or network is not present.
How can i achieve it? I have referred this article
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Android.Service
I am following this http://docs.appcelerator.com/platform/latest/#!/guide/File_Uploads_and_Downloads for downloading content (videos)
The other problem i face is ,i can't access the UI or the UI becomes almost non responsive, though i can scroll up and down. when download is in progress on android. This is what the UI looks like and i call a function on click of download button.
NOTE: Each element,light gray rectangle is like an accordian control, which toggles(expands and retracts) on click.
I have written a code like this in a videoDownloader.js file
function downloadVideos(video_download_url){
var xhr = Titanium.Network.createHTTPClient({
onload: function() {
// first, grab a "handle" to the file where you'll store the downloaded data
var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,'video.mp4');
f.write(this.responseData); // write to the file
timeout: 10000
});
xhr.open('GET',video_download_url);
xhr.send();
}

You might want to look into this module which handles everything for you.

Programmatically (or optionally) override Chrome's New Tab page

I've written a Chrome extension that overrides the New Tab page:
manifest.json:
"chrome_url_overrides": {
"newtab": "new-tab.html"
},
Is there a way to make this override optional? That is, I'd like to enable the user to uncheck a checkbox in the options page and disable the New Tab override. This must be possible because when I open a new tab for the first time, there's a popup informing of an extension changing the New Tab settings and asking whether to keep changes or restore settings:
I couldn't find any API for controlling overrides. The New Tab Redirect project doesn't have an option to display the native New Tab.

Google made a Star Wars new tab replacement which allows you to view the default new tab page. The url it uses is chrome-search://local-ntp/local-ntp.html.
Example:
options.html:
<input type="checkbox"> Use default new tab page
options.js:
var checkbox = document.querySelector("input[type=checkbox]")
checkbox.addEventListener("click", function() {
chrome.storage.sync.set({ defaultnewtab: checkbox.checked })
})
newtab.js:
chrome.storage.sync.get("defaultnewtab", function(storage) {
if(storage.defaultnewtab) {
chrome.tabs.update({ url: "chrome-search://local-ntp/local-ntp.html" })
}
})

Instead of using the chrome_url_override you could write a listener that listens for when tabs update using the chrome.tabs.onUpdated.addListener(), then check if the url is chrome://newtab/ and if it is and the check box is ticked, then using chrome.tabs.update() relocate them to another page.

Using the Star Wars method as described #Daniel Herr, I did this, which is working well. Although feels a little hack-y.
I have an option being set in the popup.html whether the Extension is "on" or not.
First off, set the default new tab page using the Chrome defined method:
manifest.json
"chrome_url_overrides": {
"newtab": "newtab.html"
},
Then in your Extension's newtab.html call a new JavaScript file, newtab.js (or whatever).
I am also using jQuery, so my code uses that, but you can do this natively using DOMContentLoaded.
newtab.js
$(document).ready(function(){
// It takes a moment for the Chrome query/update so sometimes there is a flash of content
// Hiding the Body makes it look blank/white until either redirected or shown
$('body').hide();
var background = chrome.extension.getBackgroundPage();
var _app = background._app;
// App is OFF, show Default New Tab
if(!_app._on){
// Get the current Tab
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var active = tabs[0].id;
// Set the URL to the Local-NTP (New Tab Page)
chrome.tabs.update(active, { url: "chrome-search://local-ntp/local-ntp.html" }, function() { });
});
// App is ON, show custom content
} else {
$('body').show();
}
});
Basically, the methodology is to update the Tab so that it is redirected to chrome-search://local-ntp/local-ntp.html which is the hard URL to the default Chrome NTP.
Since this is a Chrome internal URL -- the URL field still appears blank.

Firefox Addon Pagemod not executed for youtube

I am building a small add-on that interacts with the youtube website.
For injecting a custom script inside the page I use the convenient page-mod like so :
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*",
contentScript: "window.alert('injected');",
contentScriptWhen : 'start',
attachTo: ["existing", "top"],
onAttach: function(worker) {
console.log(worker.tab.url);
}
});
When I navigate through pages, the 'injected' message shows up each time a new page is loaded. But when it comes to youtube I got no result.
My visited urls are in order :
https://www.google.com -> injected
https://www.google.com/?q=youtube -> injected
https://www.youtube.com -> injected
https://www.youtube.com/watch?v=lnUeovQ68Tw -> nothing
https://www.youtube.com/results?search_query=dark+side+of+the+moon -> nothing
and now on I never get an injected message if I stay on Youtube...
I noticed that when changing from video to video the url change but the webpage doesn't seem to reload...
I was able to get the injected message on a youtube video when I manually reload it (cmd+r or f5).
As I searched I found this article on page-mod's attachTo which could have been a solution, but event with the attachTo: ["existing", "top"] line, the result was the same...
Do you have any idea ?
Thanks

While looking in another firefox extension lib I found a solution to my question :
background.js
pageMod.PageMod({
include : youtubeRegex,
contentScriptFile : 'permanent.js',
onAttach : function(worker){
worker.port.on('update', function(){
console.log('update from contentscript');
worker.port.emit('include'); // call the script update
});
},
contentScriptWhen : 'start',
});
permanent.js
// 1st line of the file
self.port.emit("update");
// stuff called once
// ...
// stuff called on each udpate
self.port.on('include', function(){
window.alert('injected');
});
This way I get a injected even in the youtube website.
Hope it will help :)

YouTube changes the content of their site using JS. I am not sure if there are any events fired when youtube changes the location. The only event I know of is popstate, which fires, whenever the user navigates using the back or forward buttons (see https://developer.mozilla.org/en-US/docs/Web/Events/popstate).

How to pass values to new tab opened by chrome.tabs.create?

I am new to writing extensions for Chrome. I am trying to write a simple extension that will open a new tab with the specified url, on a click of the extension icon and need to pass a value to it so that this value is filled in the input area (ex: input for search) of the specified url.
I am successful in opening the new tab with the given url on clicking the icon. I used background script to listen for the event on the icon and open a tab, the script is as follows:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': 'www.google.com'}, function(tab1) {
// Tab opened.
});
});
Now I am confused about what method will allow me to send some values to the new tab and use the value and perform some operation there like, if I pass "java api" I have to put this in the search area of the google page. I tried looking the Chrome extension docs but it is confusing as to what to use?

You should use chrome.tabs.executeScript() to run a content script in this tab:
chrome.tabs.create(..., function(tab1) {
chrome.tabs.executeScript(tab1.id, {file: ...});
});
This content script will then be able to do something with the tab contents. If it needs some data from your extension it will have to send a message.

Ajax to make browser Load

1- OPEN FIREBUG, on the console tab
2- OPEN YOUR GMAIL ACCOUNT,
3- when gmail is loaded, click on one of your label (at the left under the draft box)
4- WITH FIREBUG YOU SEE THAT THE PAGE DOES NOT COMLETLY RELAOD SINCE ALL PREVIOUS ACTION STILL THERE FOR THE CURRENT DOCUMENT, BUT THE BROWSER COMPLETLY ACT LIKE THE PAGE HAVE BEEN RELOADED, stop button browser own loading effect, etc...)
5- !!!!! this is it..!!!!
Does some on have a clue on how site like Gmail can make the browser load on ajax call ( I mean show the loading icon and all, history, etc)
I already know what to check for the history navigation but how in the world they can make the browser to act like this was a simple link that load a complete new page.
from what I see with things like firebug Gmail basically retrieve mail information in JSON and than use some Javascript to render it to the user. But how they make the browser load in the while.
In gmail once it is loaded, obviously they ain't load all the data, from all your folder in background, so when you click on some of your folder and the data is not already loaded they make the browser 'load' like if it were loading a complete new page, while they retrieve the information from their server with some ajax call ( in Firefox you see the browser act like when you click on a normal link, loading icon, stop (x) button activated, and all).
Is it clear?
I came up with some 'ugly' code to achieve my goal that work quite nice in FireFox and IE (sadly it seems to not work in Chrome/WebKit and Opera).
I tell the browser to go to a url that it will not be able to reach before the ajax call end, with window.location=. The browser start to load and than when the ajax call sucess I call window.stop() (window.document.execCommand('Stop') for IE) than innerHTML the ajax data in the document
To me its look ugly and since it not work properly in Chrome/Webkit, this is apparently not the way to go.

There are many ways to utilize AJAX.
Gmail needs to load a lot of files/data before something meaningful can be displayed for the users.
E.g. showing the folder tree first doesn't make sense if it's not clickable or not ready for any interactive use.
Hence, what they do is show something lightweight like a loading graphic/progress bar while asynchronously (behind the scene), pull more data from the server until they can populate the page with a full interface for usage.
I don't know how to explain further. Maybe wiki can help: http://en.wikipedia.org/wiki/Ajax_%28programming%29

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
Use one of the methods shown as triggering a browser busy state in the table on the page above.

document.getElementById('iframe').src = "http://www.exemple.com/browser_load.html";

They are using iFrame. By changing the source of the iFrame.

Sitepoint has a book "Build Your Own AJAX Applications" and they show some content (all?) in this tutorial:
http://articles.sitepoint.com/article/build-your-own-ajax-web-apps
They will guide you with your AJAX coding.

Think this is your answer:
http://www.obviously.com/tech_tips/slow_load_technique
Looks like gmail and facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)

$(function($){
$('a').attr('onclick','return false;').click(function(){
var title = $(this).attr('title');
var href = $(this).attr('href');
$('title').html(title);
$('#content').load(href+' #content', function(){
history.pushState(null, null, href);
}, function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
});
});
});
window.onpopstate = function( e ) {
var returnLocation = history.location || document.location;
var returnTitle = history.propertyName || document.title;
$('title').html(returnLocation.title)
$('#content').load(returnLocation.href+ ' #content', function(){
history.pushState(null, null, href);
}, function(responseText) {
var title = responseText.match(/<title>([^<]*)/)[1];
document.title = title;
});
}