Calling phone with appcelerator - titanium

I'm trying on device make calls but device do not nothing...
This is my code, i'm using Appcelerator 4.4.0.201511241829, IOS 9.2
var dialog = Ti.UI.createAlertDialog({
cancel: 0,
buttonNames: ['Cancel', 'Ok'],
message: "Are you sure?"
});
dialog.addEventListener('click', function(e){
if (e.index !== e.source.cancel){
// IF WE ARE BUILDING FOR DEVELOPMENT PURPOSES - TRY CALLING A FAKE NUMBER
if(ENV_DEV){
Titanium.Platform.openURL('tel:00000000');
}
// ELSE IF WE ARE BUILDING PRODUCTION - THEN USE THE LISTED NUMBER
else if(ENV_PRODUCTION){
Titanium.Platform.openURL('tel:00000000');
}
}
});
dialog.show();
any help?

Your code for call a number seems correct. I suppose that nothing happen because ENV_DEV and ENV_PRODUCTION variables are not True, and so the two if statements are not satisfy.
First of all I suggest you to add an else statement for be sure that one one condition is satisfy. You can modify your code like this:
// IF WE ARE BUILDING FOR DEVELOPMENT PURPOSES - TRY CALLING A FAKE NUMBER
if(ENV_DEV){
Titanium.Platform.openURL('tel:00000000');
}
// ELSE IF WE ARE BUILDING PRODUCTION - THEN USE THE LISTED NUMBER
else if(ENV_PRODUCTION){
Titanium.Platform.openURL('tel:00000000');
}else{
Titanium.Platform.openURL('tel:00000000');
}
Secondly you can add a console log like this Ti.API.info("yourMsg") in each statements to check in which if you are.
I hope this is helpful

Your 'dial a number' code indeed seems correct. I would like to suggest you to structure your code a bit different, I'll give you an example from a recent project of mine.
You can configure phone numbers for your different environments(prod, dev) in your config.json(assuming you are working on an Alloy project, and not a Classic Titanium project), an example:
{
"global": {
"phoneNumber": tel:0032499001122"
},
"env:development": {
"phoneNumber": tel:0111111"
},
"env:test": {},
"env:production": {}, ..
This reduces the code in your click-handler to:
if (e.index !== e.source.cancel){
Ti.Platform.openURL(Alloy.CFG.phoneNumber);
}
Because you pass the environment when you start the application, you do not longer need to check the environment in your code.
Don't forget to add your environment flag(-D development) if you run your app via the CLI, eg.
titanium build -p ios -T simulator -D development

Related

<video> tag. DOMException: The element has no supported sources, when not utilizing require()

I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.

How to set proxy through setting.json in JetBrains Toolbox?

When I click change proxy setting button on this app, it will crash. And I realize that I can set proxy through settings.json. But in this file it shows like below.
{
"autostart": true,
"install_location": "D:/Jetbrains/ToolBox",
"privacy_policy": {
"eua_accepted_version": "1.1"
},
"proxy": null
"shell_scripts": {
"enabled": false
},
"statistics": {
"allow": true
},
"update": {
"filter": {
"quality_filter": {
"order_value": 10000
}
}
}
}
I got no idea about proxy:null, there is no sample to help me figure out how to set proxy through json. So what's the right properties about proxy in this file? Could anybody give a sample?
It takes a dictionary where the keys are the same variable names you'd define in your shell and the values are the values you'd assign them. For instance http_proxy, https_proxy, no_proxy. Here is an example of what I have in my settings.json:
"proxy": {
"http_proxy": "http://my.proxy.url:8888",
"https_proxy": "http://my.proxy.url:8888",
"no_proxy": "localhost,127.0.0.1,localaddress,.localdomain.com"
},
I also tried manually editing the .desktop file's Exec line by adding the proxy environmental variables and while that works the first launch, the .desktop file is overwritten each time the application is launched so it won't work on subsequent launches and won't work if you have the application launch on login. Setting the proxy in the settings.json is the only way to make it work without manual intervention every time it's launched.
This is not documented anywhere that I could find and I wasted way more time than I'd liek to admit before I tried this solution. I'm glad it was as simple as it is but how hard would that be to document? It may seem intuitive, but how often have we all been burned by something where the intuitive and logical answer was not the actual implementation.

Worklight 6.1: How to add EULA to hybrid app

Environment:
Worklight 6.1.0.2
dojo 1.9.4
We have created a hybrid app using Worklight 6.1 for android, iOS and windows8 platform. Now we would like to add and show End User License Agreement (EULA) window to the user, when the app first time launch. It should have Accept and Decline button. If user tap on Accept button, then he should be able to use the app.
I would like to know, how can we achieve this using Worklight 6.1.
Any help on this, will be much appreciated.
FYI there is nothing specific here to Worklight.
You could implement this in any number of ways w/out ever using any Worklight API whatsoever.
You could achieve it for example like this (untested code - you'll need to experiment):
In main.js create some global variable eulaAccepted:
var eulaAccepted;
// You will need to handle this property using HTML5 Local Storage so that it will persist for the next time the app is launched, and have the app act accordingly.
Then, in wlCommonInit():
function wlCommonInit() {
if (!eulaAccepted) {
displayEula();
} else {
displayApp();
}
}
In displayEula():
function displayEula() {
// either display a dialog using `WL.SimpleDialog`...
// Or maybe custom HTML with "accept" and "not accept" buttons
WL.SimpleDialog.show(
"Eula Agreement", "your-eula-text-here",
[{text: "Accept", handler: acceptEula },
{text: "Reject", handler: rejectEula}]
);
}
Handle the result:
function acceptEula() {
eulaAccepted = true;
... // Some code that will store the `eulaAccepted` variable using HTML5 Local Storage API
displayApp();
}
function rejectEula() {
// Display some other custom HTML instead of your app.
// Maybe also additional logic to try again to accept the Eula...
}

Simply cannot make SignalR (asp.net mvc4) and require.js work together

I've seen similar posts around the web and nothing anyone has suggested works for me. I'm really faced with the choice of dumping one or the other it seems at this point.
This "Getting Started with SignalR and MVC 4 tutorial":
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr-and-mvc-4
says you need two script includes to make signalR work:
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-1.0.1.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
I'm at a loss as to how to make the second one, the autogenerated SignalR hub script, happen in require.js. Unless I'm missing something there just doesn't seem to be a viable require.js syntax for inclusion of autogenerated scripts. Without it you get this error at line 159 of jquery.signalR-1.1.2.js:
"JavaScript runtime error: SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. "
The code at that point in jquery.signalR is doing this:
signalR.hub = {
start: function () {
// This will get replaced with the real hub connection start method when hubs is referenced correctly
throw new Error("SignalR: Error loading hubs. Ensure your hubs reference is correct, e.g. <script src='/signalr/hubs'></script>.");
}
};
Has anyone actually made this autogenerated script thing happen via require.js?
Been studying this a bit more. Let me add some detail:
I'm using this approach - Structuring scalable client side applications: (http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/) to make a more scalable structure. Second part in that series "Permit modules to utilize multiple files and a logical folder structure" http://johndavidmathis.wordpress.com/2013/04/23/structuring-scalable-client-side-applications/ has me splitting my actual signalr code out into a separate Marionette chat module (separate from my main app.js file) to achieve a better file structure. I really like this approach. The rest of my project is set up like this now and it really is showing benefits when it comes to finding code. I think that extra split is where I'm stuck. Can't seem to get that second dependency, the autogenerated script, into that separate chat module file. I'm still studying this but it looks like this to me at this point. require.js gets the dependency into my Marionette app:
require(["marionette","handlebars", "signalr", "signalr.hubs"], function (Marionette) {
window.App = new Marionette.Application();
App.addRegions({
headerRegion: "#header",
contentRegion: "#content",
footerRegion: "#footer",
});
require(["modules/main/loader", "modules/chat/loader"], function () {
App.start();
});
})
If I want chat that dependency to make its way further into the app, into the chat module in another file?
Something like?
define(dependencies,
function () {
App.module("ChatModule", function (ChatModule, App, Backbone, Marionette, $, _, "signalr.hubs", "signalr.hubs") {
// SignalR Proxy created on the fly
var chat = $.connection.chatHub;
// Start the connection
$.connection.hub.start();
//more chat code...
An update:
The answer below does work in my dev environment. But it does not work when I publish the code to a real production server.
When the code is published to a real production server (IIS 6.1 on Windows Server Enterprise 2008 R2) the browser console once again shows a "404" for the autogenerated reference.
Specifically, the console shows the "?" is being added into the reference path before ".js", like this...
http://mydomain.com/myapp/Scripts/application/signalr/hubs?.js...
Tried taking the "?" out but then it removes my app name from the path, like this...
http://mydomain.com/signalr/hubs.js.
I think what would get me there is the first one, without the "?", like...
http://mydomain.com/myapp/Scripts/application/signalr/hubs.js
I'm just not seeing how to make that happen.
FINAL UPDATE:
Final piece of the puzzle for production server is the site's virtual directory. Here's final code that worked for me. Thanks Raciel R for your help:
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/productionservervirtualdirectory/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
//Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
requirejs.config({
paths: {
//core
"jquery": "jquery-1.9.1",
"signalr": "jquery.signalR-1.1.2",
"signalr.hubs": "/signalr/hubs?"
},
shim: {
"jquery": {exports: "$"},
"signalr": { deps: ["jquery"] },
"signalr.hubs": { deps: ["signalr"] }
});
Then all you have to do is to make signalr.hubs required in your modules. Ie:
require(["signalr.hubs"], function(){
//your code here
});
I set up RequireJS successfully using #raciel-r's solution but I was still having problems with other JavaScript modules like karma that were also confused by the dynamic proxy. I converted the signalr proxy to a static file and used that with RequireJS instead:
Import Microsoft.AspNet.SignalR.Utils
Run packages/Microsoft.AspNet.SignalR.Utils.2.X.X/tools/signalr.exe
ghp /path:my/bin /o:path/to/scripts/server.js where /my/bin is the directory containing the assemblies with your SignalR Hubs.
Replace your reference in to /signalr/hubs with server:
requirejs.config({
paths: {
// ...
"signalr.hubs": "path/to/scripts/server"
},
// ....
If you are using the convenience methods of the generated proxy, you will also have to rewrite them (see How to create a physical file for the SignalR generated proxy)

Array store Sencha Touch 2

While building my first mobile app using sencha touch 2 some questions got in my way and I can't seem to find their answer.
Where should an app configuration be stored (theme, language, font size ). I was thinking
to count the data from a store and if bigger than 0 work on that data otherwise add data( this would happen only the first time application is opened or localstorage cleared..). There are other options for this kind of thing(things like an array which will be changed when user is interacting with the app) ?
I need to use in my application around 100 images. I don't know what options I have here to embed the images into app. Saw lots of examples loading image from external server but not sure if there is an option for packing them with the app.
If I had an array with a name(key) and the image url(value), where should this array be ? in a json file and use an ajax load each time a need a name in there ?
Thanks.
Let me suggest few options:
1- App configuration : If app configuration is like set of constant values which won't change by user interaction you can create a file (e.g. properties.js) and load it on application load.
Properties = {
SERVICE_URL : 'http://mycompany.com/api',
PAGE_SIZE : 20
}
and to load it you just have to edit app.json
"js": [
{
"path": "touch/sencha-touch.js",
"x-bootstrap": true
},
{
"path": "resources/data/properties.js"
}
]
If you want to control these values then you can keep it on your server and give its URL as "path" in app.json
2- There is always option of packaging images with your app, just like all the icon & startup images are packaged but its not suggested because it increases size of your deployable and people with slow internet connections and low end devices might skip installing it if size it too large.
3- No need to load the JSON file every time you need it, you can cache the data in global variable after first load and keep referring to the array whenever required. Now where to define global variable is another interesting discussion with people suggesting lot of things but I prefer to have a singleton class which can keep all the global functions & variables. See this thread to understand how : Where do I put my global helper functions if they are needed before Ext.application() is being executed?
For Text we can Try like this
var A_address=Ext.getCmp('address').getValue(); //get the value
localStorage.setItem("Adult1_select1",A_select1); // assign localstore
var web_arrayTotalPAssengers=[];
web_arrayTotalPAssengers.push(localStorage.getItem("web_TotalPassengers"));
console.log(web_arrayTotalPAssengers);
// push the values in array...
Ext.Ajax.request({
url:'http:/...........',
method:'POST',
disableCaching: false,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
jsonData: {
origin:Ext.decode(web_arrayTotalPAssengers), //decode and send
}
success:function(response)
{
console.log(response);
console.log("Success");
},
failure : function(response)
{
console.log("Failed");
}