I have tried to run a Windows Phone 8 App written in Sencha Touch in Worklight. I used sencha in the following way:
<script src="//Microsoft.WinJS.1.0/js/base.js"></script><script src="//Microsoft.WinJS.1.0/js/ui.js"></script><script>
// Define WL namespace.
var WL = WL ? WL : {};
/**
* WLClient configuration variables.
* Values are injected by the deployer that packs the gadget.
*/
WL.StaticAppProps = {
"APP_DISPLAY_NAME": "Cockpit",
"APP_ID": "Cockpit",
"APP_SERVICES_URL": "http:\/\/192.168.99.11:10080\/CockpitProj\/apps\/services\/",
"APP_VERSION": "1.2.1",
"ENVIRONMENT": "windows8",
"LOGIN_DISPLAY_TYPE": "embedded",
"WORKLIGHT_PLATFORM_VERSION": "6.1.0.00.20131219-1900",
"WORKLIGHT_ROOT_URL": "http:\/\/192.168.99.11:10080\/CockpitProj\/apps\/services\/api\/Cockpit\/windows8\/"
};</script>
<script src="worklight/cordova.js"></script>
<script src="worklight/wljq.js"></script>
<script src="worklight/worklight.js"></script>
</head>
<body>
<div class="loadingSpinner bigLoad" id="appLoadingIndicator"></div>
<script src="js/initOptions.js" type="text/javascript"></script>
<script src="js/sencha-touch-all.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/messages.js" type="text/javascript"></script>
</body>
</html>
If I run this code, I get an exception:
Unable to add dynamic content. A script attempted to inject dynamic
content, or elements previously modified dynamically, that might be
unsafe. For example, using the innerHTML property to add script or
malformed HTML will generate this exception. Use the toStaticHTML
method to filter dynamic content, or explicitly create elements and
attributes with a method such as createElement. For more information,
see http://go.microsoft.com/fwlink/?LinkID=247104.
This can be solved by every sencha call inside the sencha-touch-all into a
MSApp.execUnsafeLocalFunction(function () {}
This can only be a workaround, as there are too many of these sencha calls.
What is the general concept of using Sencha for Windows Phone, like
these steps from Phonegap:
IMO there is no good way around it in Windows Phone development. Doesn't matter if it is a pure Cordova app, or a Worklight-based app.
See the second option in the following discussion. Perhaps you could set it in a way that it will work for all code parts required by your app:
http://social.msdn.microsoft.com/Forums/windowsapps/en-US/e35017b4-e21b-4807-8668-fc3c332c6b32/javascript-runtime-error
Copy-paste:
The host enforcement code will throw an access denied exception in the
event that you try to set the innerHTML (and outerHTML and a couple of
others) of an element to HTML which doesn't conform to a whitelist of
known safe HTML. You can get around this in a couple of ways:
call toStaticHTML() on your string first which should strip out everything which is disallowed
use WinJS.Utilities.setInnerHTMLUnsafe(element, text), this allows you to set innerHTML to anything you like
use msWWA.execUnsafeLocalFunction, for instance:
msWWA.execUnsafeLocalFunction(function () { element.innerHTML = text; })
Option 2 is implemented in terms of 3. Be aware that if you set
innerHTML of an element to html that you don't control (e.g. something
you downloaded off the web like an RSS feed) it may contain script
which will be able to access the WinRT and do bad things which is why
the names of the functions in 2) and 3) are purposefully a little
scary.
Related
I'd like to use Vue.js within one page of a large legacy application. The idea is to replace the old JS+jQuery hodge-podge within a single page -- but leave the rest of the app (many other pages) untouched. So, not interested in using NPM, Node, Vue CLI, Webpack, Babel, etc., just yet.
This is a proof-of-concept before we invest in refactoring the entire frontend of the application.
The approach we followed was to include vue.js via as explained here: https://v2.vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include in that one page, and the use Vue only within that one page. This is the general page layout:
<html>
<head>
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
...
</head>
<body>
<div id="el">
... vue template ...
</div>
<script>
...
var vm = new Vue({
el : '#el',
data : {
config : <% config.json %> // this is server-rendered, using server templating
...
},
...
});
...
</script>
</body>
</html>
The page does work. However, I get the following error/warning within the Vue console:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Although I'd rather not, I can certainly move the page-specific JS to its own separate file (and that does eliminate the warning/error). However, I wouldn't be able to set vm.config with server-provided data along with the loaded page by using server-side template, e.g. config : <% config.json %>. I know I could GET it using JS separately, after pageload, via an AJAX call directly from the server, but for practical reasons I'd like to avoid doing that here.
I'd greatly appreciate any suggestions on how to get this to work nicely. I'm also open to other suggestions with regard to this general pattern, that don't involve retooling the front-end just yet.
And perhaps the answer is to ignore the warning, or somehow disable it, given the page does work as intended...
Thank you!
One simple solution here is to write it to the global window object. IIRC SSR frameworks like Angular universal/Nuxt/Next/... all use this approach.
window.__STATE__ = <% config.json %>
In your JS file you can then refer to the window.__STATE__ object.
var vm = new Vue({
el: '#el',
data: {
config: window.__STATE__
}
})
Ofcourse the order is important here:
<body>
<script>
window.__STATE__ = <% config.json %>
</script>
<script src="app.js"></script>
</body>
Grrr, after several days after enduring this error, I discovered this:
<fieldset id="el">
...
<div id="el">
...
</div>
...
</fieldset>
So the issue was repeating #el within same page.
My mistake.
Just wish the error message emitted by Vue had been a bit more useful!
Bottom line: The pattern described in the origional question works just fine without NPM/CLI.
When pages with Vue components are translated via chrome's translate option, the vue components stops re rendering and updating the view.
Ex: Translate https://v2.vuejs.org/v2/guide/#Handling-User-Input on chrome using the translate option from chromes's context menu into a different language, the reverse message demo stops working.
Since Google translate plugin updates DOM outside of Vue's control, this is sort of expected. Looking for any work arounds that let both co-exist. The sections can be marked with "notranslate" class but that would mean it is no longer translatable.
React inspite of being based on virtual DOM, works even with DOM being modified by translate plugin.
A possible workaround is to use the Vue special attributes key (as described here) and ref (as described here).
Here it is an example I did, starting from the link you provide above:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js Reverse Example</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app-5" class="demo">
<!-- Adding Vue attributes here -->
<p :key="message" ref="msg">{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var vm = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
// vm.$refs.msg.innerText retrieves the translated content
this.message = vm.$refs.msg.innerText.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
As you may notice, the DOM element where you'd like to maintain the Vue reactive behavior (i.e.: the reverse operation here), has been enriched with both a key attribute and a ref one.
The idea here is to use:
:key to force replacement of the element instead of reusing it;
ref to register a reference to the element: it is used in reverseMessage method in order to get the translated innerText content after the Google translation is performed.
For sure, this workaround would affect the performance, but at least it provides the expected behavior (i.e.: the reverse function properly working also after a page translation).
I'm really new on Angular JS development and I'm trying to implement the following authentication module : https://github.com/witoldsz/angular-http-auth (more info at http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application), to my project .
THE MODULE
The module has been thought to allow the following scenario :
user asks for: something.com/secured/formXyz,
server sends a login form,
user logs in, fills a long and complicated form, but they are doing it so long that theirs session expires,
user submits a form, but since the session is not valid anymore, login screen appears,
once user logs in, server can process the submitted form, **no need to re-enter everything again**.
The solution to do such a thing is :
server side behavior :
for every /resources/* call, if user is not authorized, response a 401 status. Otherwise, when user is authorized or when not a /resources/* request, send what client asked for.
client side behavior :
capture 401 response,
save the request parameters, so in the future we can reconstruct original request,
create and return new object representing server’s future answer (instead of returning the original failed response),
broadcast that login is required, so application can react, in particular login form can appear,
listen to login successful events, so we can gather all the saved request parameters, resend them again and trigger all the ‘future’ objects (returned previously).
MY PROJECT
My project is a basic one, which uses the $route service. When I try to add the directive which catch the events :
scripts/directives/login-directive.js
angular.module('myApp', ['http-auth-interceptor','content-mocks'])
/**
* This directive will find itself inside HTML as a class,
* It is responsible for showing/hiding login form.
*/
.directive('authDirective', function() {
return {
restrict: 'C',
link: function(scope, elem, attrs) {
var login = elem.find('#login');
var main = elem.find('#main');
login.hide();
main.show();
scope.$on('event:auth-loginRequired', function() {
login.show();
main.hide();
});
scope.$on('event:auth-loginConfirmed', function() {
main.show();
login.hide();
});
}
}
});
to my index.html :
<body ng-app='myApp' class='auth-directive'>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="components/es5-shim/es5-shim.js"></script>
<script src="components/json3/lib/json3.min.js"></script>
<![endif]-->
<div id="login" name="login">
<p>login</p>
</div>
<div id="main" name="main">
<p>main</p>
<div class="container" ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-resource/angular-resource.js"></script>
<script src="components/angular-cookies/angular-cookies.js"></script>
<script src="components/angular-sanitize/angular-sanitize.js"></script>
<script src="components/angular-http-auth/angular-mocks-1.0.1.js" type="text/javascript"></script>
<script src="components/angular-http-auth/http-auth-interceptor.js" type="text/javascript"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/directives/login-directive.js"></script>
<script src="scripts/mocks/content-mocks.js" type="text/javascript"></script>
</body>
The directive ngView doesn't work anymore. Nothing appears on console log. Is there any incompatibility between the two directives ?
By the look of your login-directive files it seems that you are (improperly) reinitialising you Angular app by passing the dependencies array as a second parameter to your angular.module call:
angular.module('myApp', ['http-auth-interceptor','content-mocks'])
Dependencies should be defines only once, when app is initialised (probably in app.js), and when you want to reference your application in another file you should call the angular.module without the second parameter:
angular.module('myApp')
.directive('authDirective', function() { ...
I need some help as well as some advice on how to use Dojo correctly in my project. At the moment, this is what I'm doing:
Say I setup a project named 'Test'. Test.html is the first file hit, and in that file I have the following:
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true" src="dojo/dojo.js"></script>
<script type="text/javascript" src="dojo/core-web-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-ui-layer.js"></script>
<script type="text/javascript" src="dojo/mobile-compat-layer.js"></script>
<script type="text/javascript">
require(
// Set of module identifiers
[ "dojo", "dojox/mobile/parser", "dojox/mobile/SwapView", "dojox/mobile", "dojox/mobile/compat", "dojox/mobile/deviceTheme", "dojox/mobile/ScrollableView" ],
// Callback function, invoked on dependencies evaluation results
function(dojo) {
dojo.ready(function() {});
});
</script>
I also have this in Test.js:
require([ "dojo", "dojox/mobile/parser", "dojox/mobile/deviceTheme",
"dojox/mobile/ScrollableView", "dojox/mobile/compat", "dojox/mobile",
"dojox/mobile/Button", "dojox/mobile/View", "dojox/mobile/Heading",
"dojox/mobile/TabBarButton", "dojox/mobile/TabBar",
"dojox/mobile/TextBox", "dojox/mobile/RoundRectList",
"dojox/mobile/ListItem", "dojox/mobile/Button",
"dojox/mobile/SpinWheel", "dojox/mobile/SpinWheelSlot",
"dojox/mobile/IconContainer", "dojox/mobile/SwapView" ],
function(dojo, parser) {
dojo.ready(function() {
});
});
Now, when I click a on one of my buttons, it triggers the WL.Page.Load method and my pagePort div now shows my new page inside of my Test.html page (let's say this is Page2.html), however, there's a problem. The Dojo stuff works fine on page one, but now it doesn't work on page two. I'm not sure what's happening behind the scenes but I feel I'm missing a step (do I need to unload Dojo? Declare it again in the next page?).
If somebody could help me get Dojo working on this second page so I'm able to use Dojo on further pages (after learning what I'm doing wrong) I would be really grateful!
My best guess based on the info you've given is that Page2.html is not really inside Test.html and its a new page. In this case you will need to have the script references in Page2 as well.
If you're testing your code in a web browser you can view the Console and hopefully gain some insight as to what exactly is going wrong.
You can also try working with the Worklight logger to help locate the problem.
http://wpcertification.blogspot.com/2012/03/enabling-debuglog-console-in-worklight.html
Here is a general link for "Problem Determination" from IBM as well
http://publib.boulder.ibm.com/infocenter/ieduasst/v1r1m0/index.jsp?topic=/com.ibm.iea.worklight/worklight/5.0/Problem_Determination/IMFV50_ProblemDetermination/player.html
As Nick said if you load totally different HTML page you will have that page to declare the classes your are using. In dojox/mobile/tests see test_IconContainer.html for example.
That said you could proceed differently by for example having your alternate views defined in the same HTML or as your are in Worklight by using the fragment mechanism (see https://www.ibm.com/developerworks/mobile/worklight/getting-started/ modules 60.1, 2 and 3).
I have a website that is rendering a prototype based calender on 90% of the pages. I'm also looking at using the Uploadify module for handling multiple uploads with Paperclip. As you know, Paperclip and JQuery don't play nicely and a lot of the solutions I've tried such as NoConflict hasn't worked for me I still get the "not defined" errors in firebug all over the place. I'm wondering what the best way for me to approach adding this JQuery module that will be very localized in a largely Prototype-based application. I've considered switching my Prototype code with JQuery but I've yet to see a better JQuery solution for this particular calendar plugin that I'm using.
Use a proper structure for noConflict.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($){
$("#someelement").uploadify();
});
</script>
If this doesn't answer your question, please provide more(some) code.
Edit for comments:
Just run the $.noConflict() immediately following your jQuery plugins, and then use jQuery instead of the $ variable throughout your JS files.
<script src="prototype.js"></script>
<script src="someprototypeplugin.js"></script>
<script src="jQuery.js"></script>
<script src="uploadify.jquery.js"></script>
<script>
$.noConflict();
</script>
sample js file:
(function($){
// since we passed a reference to jQuery to this anonymous
// function and accepted it as a parameter named "$", we can
// safely use "$"
$("#target").uploadify();
})(jQuery);
If you need a document ready, you can do it this way:
jQuery(document).ready(function($) {
$("#target").uploadify();
});