Open Chrome Web App using GCM - google-cloud-messaging

I am able to send a message to a Chrome Web App using GCM. I am using a http post to: https://android.googleapis.com/gcm/send
sending registrationid, applicationid, and senderid values. The message shows as a Chrome Notification on my screen. My question is - is there a command or a GCM event/function I can use to start the Chrome Web App? Google Chrome is set to run in the background.
This is my GCM Listener for message event:
chrome.gcm.onMessage.addListener(messageReceived);
It calls the messageReceived function and in this function I get message, pop notification on the screen, and open/create the window:
chrome.notifications.create(getNotificationId(), {
title: 'GCM Message',
iconUrl: 'gcm_128.png',
type: 'basic',
message: messageString
}, function() {});
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('register.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
}

You cannot start chrome directly from the code that receives the push message. However once the notification is clicked you can use http://www.w3.org/TR/service-workers/#client-focus to see if there is already a window opened or http://www.w3.org/TR/service-workers/#client-navigate to open a new window.
https://tests.peter.sh/notification-generator/ is a good sample site where you can play with the different options.

This is my GCM Listener for message event:
chrome.gcm.onMessage.addListener(messageReceived);
It calls messageReceived function and in this function I get message, pop notification on the screen, and open/create the window:
chrome.notifications.create(getNotificationId(), {
title: 'GCM Message',
iconUrl: 'gcm_128.png',
type: 'basic',
message: messageString
}, function() {});
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('register.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
}

Related

Record Audio for Android and iOS using Appcelerator Titanium

I'm having problems trying to record audio into a file. I'm trying to run the sample code (with the required permissions in the tiapp.xml) but i'm always getting errors (like "+[NSBlock boundBridge:withKrollObject:]: unrecognized selector sent to class 0x1b5549500"; at the stop() action).
I can't find a module for audio recording (i've used the tutorial.audiorecord but it doesn't work in newest versions of SDK)
This is the sample code from the appcelerator documentation page https://docs.appcelerator.com/platform/latest/#!/api/Titanium.Media.AudioRecorder
I try everything but doesn't work.
Someone have a working example or a module for Appcelerator SDK 7?
var window = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var recordStart = Ti.UI.createButton({
title: 'Start',
top: 10
});
var recordPause = Ti.UI.createButton({
title: 'Pause',
top: 60
});
var recordStop = Ti.UI.createButton({
title: 'Stop',
top: 110
});
var recordPlay = Ti.UI.createButton({
title: 'Play',
top: 160
});
var audioRecorder = Ti.Media.createAudioRecorder();
var record;
var audioPlayer;
window.addEventListener('open', function(e) {
if (!Ti.Media.hasAudioRecorderPermissions()) {
Ti.Media.requestAudioRecorderPermissions(function(e) {
if (e.success) {
window.add(recordStart);
}
});
} else {
window.add(recordStart);
}
});
recordStart.addEventListener('click', function(e) {
audioRecorder.start();
});
recordPause.addEventListener('click', function(e) {
if (audioRecorder.getPaused()) {
recordPause.setTitle('Pause');
audioRecorder.resume();
} else {
recordPause.setTitle('Resume');
audioRecorder.pause();
}
});
recordStop.addEventListener('click', function(e) {
record = audioRecorder.stop();
Ti.API.info(record.getNativePath());
});
recordPlay.addEventListener('click', function(e) {
audioPlayer = Ti.Media.createAudioPlayer({
url: record.getNativePath()
});
audioPlayer.start();
});
window.add(recordPause);
window.add(recordStop);
window.add(recordPlay);
window.open();
Thanks in advance
This is an example using Titanium's Hyperloop: https://gist.github.com/dinahgarcia/119ac00c91334d3951601cf347bad8d4
To be able to use it you need to enable Hyperloop: https://docs.appcelerator.com/platform/latest/#!/guide/Enabling_Hyperloop

web view cannot open youtube link

i want to play youtube video in Titanium webview but it cannot play video .the link is http://www.chicagowolves.com/news?format=feed&type=rss .and this link works in mac browser
and the error is
[ERROR] : Error loading: , Error: Error Domain=WebKitErrorDomain Code=102 "Frame load interrupted" UserInfo=0x78fbe6b0 {NSErrorFailingURLKey=https://www.youtube.com/v/IKGPgnram1E?version=3&f=user_uploads&app=youtube_gdata, NSErrorFailingURLStringKey=https://www.youtube.com/v/IKGPgnram1E?version=3&
f=user_uploads&app=youtube_gdata, NSLocalizedDescription=Frame load interrupted}
function WebView(data) {
var self = Ti.UI.createWindow({
backgroundColor : 'white',
title : 'Videos',
height : Ti.UI.FILL,
width : Ti.UI.FILL
});
var webview = Titanium.UI.createWebView({
url : data,
height : Ti.UI.FILL,
width : Ti.UI.FILL,
backgroundColor : 'green'
});
self.add(webview);
return self;
}
module.exports = WebView;
Try this code:
var win = Ti.UI.createWindow();
var webView = Ti.UI.createWebView({
url: 'http://www.youtube.com/embed/' + myVideoID + '?autoplay=1&autohide=1&cc_load_policy=0&color=white&controls=0&fs=0&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0',
enableZoomControls: false,
scalesPageToFit: false,
scrollsToTop: false,
showScrollbars: false
});
win.add(webView);
win.open();
I tried it before, it works fine, it's copied from this link.

how to remove keyboard when user click any where in window?

can you please tell me how to hide the keyboard in IOS when user click anywhere in window.I used blur() on button click it work but when i used in view it not work..:(
I check if user click any where other than textfield it hide the keyboard my my logic fail..:(
Here is my code..
//FirstView Component Constructor
function FirstView() {
//create object instance, a parasitic subclass of Observable
var self = Ti.UI.createView({
layout:"vertical"
});
var self1 = Ti.UI.createView({
layout:"horizontal",
top:20,
height:Ti.UI.SIZE
});
var self2 = Ti.UI.createView({
layout:"horizontal",
top:10,
height:Ti.UI.SIZE
});
//label using localization-ready strings from <app dir>/i18n/en/strings.xml
var nameLabel=Ti.UI.createLabel({
text:"Name",
left:15,
width:100,
height:35
});
var nameTextField=Ti.UI.createTextField({
height:35,
width:140,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
self1.add(nameLabel);
self1.add(nameTextField);
self.add(self1);
var passwordLabel=Ti.UI.createLabel({
text:"Password",
left:15,
width:100,
height:35
});
var passwordTextField=Ti.UI.createTextField({
height:35,
width:140,
passwordMask:true,
borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
var loginButton =Ti.UI.createButton({
title:"LOGIN",
top: 120,
width:200,
height:40
});
loginButton.addEventListener('click',function(e){
passwordTextField.blur();
nameTextField.blur();
});
self2.add(passwordLabel);
self2.add(passwordTextField);// self.backgroundImage="http://bluebackground.com/__oneclick_uploads/2008/04/blue_background_03.jpg";
self.add(self2);
self.add(loginButton);
self.addEventListener('click',function(e){
if(e.source != [Ti.UI.TextField]){
alert("window click");
passwordTextField.blur();
nameTextField.blur();
}
});
return self;
}
module.exports = FirstView;
Maybe you could precise the Titanium version you're using.
But as far as I know, with the version 3.1.1.GA, you can do like this :
if (e.source != '[object TiUITextField]') {
instead of :
if(e.source != [Ti.UI.TextField]){
For me, it works just fine :
click on textfields : open the keyboard
click somewhere else : close the keyboard
And you don't even need the event listener on your button anymore.

Titanium Mobile: cant navigate between pages

i am new to Titanium and i am have 2 seemingly simple problems while trying to use it for the Android.
1) i am trying to navigate to the next page on click of a button. but instead it is showing me a blank black screen. i know my second page CreateNewMeetup.js is correct because i tried displaying it as the landing page of my app and it works. my codes are as follows:-
ApplicationWindow.js
...
var button = Ti.UI.createButton({
height:44,
width:'auto',
title:'Create New Meetup',
top:20
});
self.add(button);
button.addEventListener('click', function() {
var newWindow = Ti.UI.createWindow({
url : "/ui/common/CreateNewMeetupWindow.js",
fullscreen: false
});
newWindow.open();
});
return self;
CreateNewMeetupWindow.js
//CreateNewMeetUpView Component Constructor
function CreateNewMeetupWindow() {
var self = Ti.UI.createWindow({
layout : 'vertical',
backgroundColor:'white'
});
var contactsField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
self.add(contactsField);
var locationField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
self.add(locationField);
var lblNotifyMe = Ti.UI.createLabel({
color : 'black',
text : 'Notify me when s/he is',
textAlign : Ti.UI.TEXT_ALIGNMENT_LEFT,
width : 'auto',
height : 'auto'
});
self.add(lblNotifyMe);
var btnGo = Ti.UI.createButton({
title : 'Go',
height : 'auto',
width : 100
});
btnGo.addEventListener('click', function() {
// Check console
Ti.API.info('User clicked the button ');
});
self.add(btnGo);
return self;
};
2) after installing the app onto my device, i tried to launch it. the app shows momentarily (about 3 seconds maybe) and then it shuts down by itself. i guess its an app crash? but it works well on the emulator.
Titanium experts please help :$
You can use the following methods in your program to navigate between windows
Method 1
//Your app.js file
var button = Ti.UI.createButton({
height:44,
width:'auto',
title:'Create New Meetup',
top:20
});
self.add(button);
button.addEventListener('click', function() {
//By doing this you're opening a new window
var newWindow = Ti.UI.createWindow({
url : "ui/common/CreateNewMeetupWindow.js",//Provide the correct path here
fullscreen: false
});
newWindow.open();
});
//Your CreateNewMeetupWindow.js file
var newWindow = Ti.UI.currentWindow;
var contactsField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
newWindow.add(contactsField);
//You can add other controls here just like I added the contactsField
Method 2
var button = Ti.UI.createButton({
height:44,
width:'auto',
title:'Create New Meetup',
top:20
});
self.add(button);
button.addEventListener('click', function() {
var window = require('/ui/common/CreateNewMeetupWindow');
var newWindow = new window();
newWindow.open();
});
//Your CreateNewMeetupWindow.js file
function CreateNewMeetupWindow() {
var self = Ti.UI.createWindow({
layout : 'vertical',
backgroundColor:'white'
});
var contactsField = Ti.UI.createTextField({
borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color : '#336699',
width : 400,
height : 60
});
self.add(contactsField);
//Add other controls here
return self;
}
module.exports = CreateNewMeetupWindow;
You can use any single method from above. Do not mix the methods together.
You can use the following link for references
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window-property-url
http://docs.appcelerator.com/titanium/latest/#!/api/Global-method-require
For your first problem, you are using the url property with a CommonJS object. So instead instantiate your window like this:
var newWindow = require("/ui/common/CreateNewMeetupWindow");
newWindow.open();
You would use the url property if your CreateNewMeetupWindow.js was not a CommonJS module.
Not sure what your second problem is, check your device logs and crash reports, otherwise there is no way to know what is going on.

Titanium notification (android toast) with image

I want to show an image as a toast instead of plain text message.
I have tried:
try{
var toast = Titanium.UI.createNotification({
duration: Ti.UI.NOTIFICATION_DURATION_LONG,
background: '/images/img1.png'
});
toast.show();
}
catch (err)
{
alert(err.message);
}
Application gets crashed without giving any alert. I have also tried :
try{
var toast = Titanium.UI.createNotification({
duration: Ti.UI.NOTIFICATION_DURATION_LONG,
message: 'text',
});
toast.setBackgroundImage('/images/img1.png');
toast.show();
}
catch (err)
{
alert(err.message);
}
But same issue. App crashes without giving error alert. Anyone knows how to give image in toast?
I think you missed '..' in the background image path.
/images/img1.png should be: ../images/img1.png
I solved it by the functions below. I have decide fade-out time as per my requirement (i.e. 10% of total time). This code may need to handle back button pressed event manually.
var createImageToast = function (img, time)
{
Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow();
var image = Ti.UI.createImageView({
image: img,
});
win.add(image);
win.open();
setTimeout(function(){
decreaseImageOpacity(win,image,1,parseInt(time/10));
},parseInt(time*9/10));
}
var decreaseImageOpacity = function (win, image, opacity, time)
{
if(opacity<=0)
{
win.close();
}
else
{
setTimeout(function(){
image.setOpacity(''+opacity);
decreaseImageOpacity(win,image,opacity-0.1, time);
},parseInt(time/10));
}
}