im working in a mobilefirst adapter (6.3) that need to pass an image from an url that is in the internarl network file system(example :http://www.up.edu.pe/RED_Compartir/facebook.png) but i cant get the data correctly, the img data isnt in the text variable:
Here is my server side code:
function getImage(id){
var input = {
method : 'get',
returnedContentType : 'plain',
path : '/someUrl/someUrl2/'+id+'.jpg'
};
return {
out: Base64.encode(WL.Server.invokeHttp(input).text)
};
}
Here is my client code to process de image:
function getImageFrom() {
execMobileFirstAdapter("adapterName", "method", ["parameter"]).then(function (data){
WL.Logger.debug("OK")
var imageBase = data.invocationResult.out;
document.getElementById('imageServer').setAttribute( 'src', 'data:image/jpeg;base64,'+ imageBase );
}).fail(function(data){
WL.Logger.debug("error");
})
}
Is there a way to return the base64 from a jpg image from a mobilefirst adapter?
Ive used this example:
https://www.ibm.com/developerworks/community/blogs/mobileblog/entry/ibm_worklight_adapter_accessing_an_image?lang=en
and Works perfectly but i need to do this only with JavaScript in the server. is this posible?
Is there a way to return the base64 from a jpg image from a
mobilefirst adapter?
I've used this example:
https://www.ibm.com/developerworks/community/blogs/mobileblog/entry/ibm_worklight_adapter_accessing_an_image?lang=en
and Works perfectly but i need to do this only with JavaScript in the
server. is this possible?
The easiest approach is in fact to implement it the way the example does it in the article you've provided.
The only other way is to find a JavaScript lib that does base64 encoding and try to add this lib to the adapter and then use it.
Note that JavaScript adapters do not support adding additional files to the adapter, so that means you need to take the entire implementation of whichever lib you'll find and put it inside your adapter code. Not so nice. Also does not guarantee it'll work.
Additionally, are you calling your adapter from inside a Cordova plug-in? That was strange. Why? Why not just use the WL.Client.invokeProcedure API... just like in the article...
Related
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.
In Android native development, to allow XMLHttpRequests in some scenarios when we need to request javascript files from an webview, one way to do that is setting setAllowUniversalAccessFromFileURLs(true) on WebSettings instance (on API Level 17+).
Is there a way to do that on nativescript?
The error displayed is:
XMLHttpRequest cannot load file:///data/data/.... Cross origin
requests are only supported for protocol schemes: http, data, https.",
source:
file:///data/data/com.yourdomain.appname/files/app/app/frameworks/nativescript.framework/app/components/login/
Just quickly looking at the Android docs you could get the WebSettings for the webview with: https://developer.android.com/reference/android/webkit/WebView.html#getSettings()
So in the loaded event for your webview instance, attach an event handler and in that JS code do something like this:
function webViewLoaded(args) {
if (args.object.android) {
var webView = args.object.android;
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
}
}
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...
}
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)
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");
}