I'm trying to write a very simple Windows 7 gadget, which is easy enough. But I can't get any of the data I'm saving with System.Gadget.Settings.write/read (writeString/readString) to persist between runs of the gadget. I know it can be done, because all the other Microsoft gadgets do it. I'm obviously missing something crucial, but can't see it.
This is a very simple cut down example:
<html>
<head>
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>test</title>
<script type="text/javascript">
function save() {
var e = document.getElementById("name");
if (e && e.value) {
System.Gadget.Settings.write("name", e.value);
prompt("turnedout", System.Gadget.Settings.read("name"));
}
}
function load() {
var t = System.Gadget.Settings.read("name");
prompt("turnedout", t);
}
</script>
</head>
<body scroll="no" unselectable="on" onload='load()'>
<label for='name'>Name</label>
<input id='name'>
<input type="button" value='Save' onclick='save()' />
</body>
</html>
I've traced through the code and everything appears to go in the right places. What's missing?
Gadgets don't work like desktop applications with regard to settings. The settings are per instance of a gadget. Close the instance and you lose the settings. There are other limitations as well. There's a good explanation at: http://dotnetslackers.com/articles/net/SettingsManagerforWindowsVistaSidebarGadgets.aspx
Even I had the same issue, but when I moved the System.Gadget.Settings.write("name", e.value); to the html which is specified in the gadget.xml file, it wrote to the settings.ini file properly
Related
I'm currently facing a problem when playing around with Polymer - actually I just figured out when I tried in Firefox or IE (11) as in Chrome everything just works as I expected it.
So here is a small demo to reproduce my problem:
The "Webcomponents are ready to use!" box is shown right after the page is loaded (but in fact it doesn't matter because at this time no custom element is on the page yet).
When clicking the "Insert Polymer" button the paper-input element is added to the page using innerHTML - as soon as the label should be printed (see call to alertLabel()) it will print "undefined" (I guess the element has not yet been upgraded). When I click the "Alert label" button afterwards it works as expected.
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<script>
window.addEventListener('WebComponentsReady', function(){alert('Webcomponents are ready to use!');});
</script>
</head>
<body unresolved>
<button id="insertelement" onclick="insertPolymerElement();">Insert Polymer</button>
<button id="button" onclick="alertLabel();">Alert label</button>
<div id="placeholder"></div>
<script>
function insertPolymerElement(){
document.getElementById('placeholder').innerHTML = '<paper-input id="testinput" label="I\'m the label!"></paper-input>';
alertLabel();
}
function alertLabel(){
alert(document.getElementById('testinput').label);
}
</script>
</body>
</html>
So the question is: how can I determine when I can interact with the added element? - The WebComponentsReady event is never fired again.
Thanks for your help!
After hitting some of the limitations in a standard browser based application, I decided to convert it to a chrome App that doesn't use the browser.
Below are all the relevant parts. The problem I'm trying to solve is to add a load listener for a button that was working in the browser and doesn't work under the app architecture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>POS Data Entry Sheet</title>
<link href="./POS.css" rel="stylesheet" type="text/css" />
<script src="./POS.js"></script>
<script src="./POS.underDevelopment.js"></script>
<script src="./POS.generateTable.js"></script>
<script src="./POS.menu.js"></script>
<script src="./POS.portion.js"></script>
<script src="./POS.formula.js"></script>
<script src="./POS.dialog.js"></script>
</head>
<body>
<script>
addLoadListener(addHandlerForLoginButton);
</script>
<section id="login">
<h1>Please login:</h1>
<p>
<label>User ID:</label><input type="text" id="userID">
<label>Password:</label><input type="password" id="password">
<button type="submit" id="loginButton">Login</button>
</p>
</section>
<div id="main"></div> <!--Everything gets attached to this div.-->
</body>
</html>
Everything above works via the browser.
I created the manifest:
{
"name": "Point of Sale System",
"description": "Dual currency Point of Sale System",
"version": "0.1",
"app": {
"background": {
"scripts": ["POS.dialog.js",
"POS.formula.js",
"POS.generateTable.js",
"POS.js",
"POS.menu.js",
"POS.portion.js",
"POS.underDevelopment.js",
"background.js"]
}
}
}
This is my first attempt at the background.js
It brings up the rudimentary page, but the in line script wasn't working.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('POS.html', {
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
});
});
So, I commented out the inline script and attempted to add a callback function
This also doesn't work. No event listeners are recorded as per the debug tool.
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('POS.html', {
'bounds': {
'width': screen.availWidth,
'height': screen.availHeight
}
}, function(win) {win.addEventListener('load', addHandlerForLoginButton, false);});
});
I'm at a loss after several hours of attempting everything I could think of. Why doesn't the original in line script work, and why doesn't the callback work in the Chrome App architecture?
I think you are running into CSP problems, which does not allow inline script or script blocks. See http://developer.chrome.com/apps/contentSecurityPolicy.html for details.
You should be able to convert your first attempt by simply creating a page.js file, including it via a script src='page.js' tag, and put the contents of your script block in it:
addLoadListener(addHandlerForLoginButton);
Your second versoin didn't work because the win parameter to your callback isn't a DOM window but is an AppWindow. It has a DOM window attached via the contentWindow attribute, see http://developer.chrome.com/apps/app_window.html#type-AppWindow for details.
Lastly, you don't need to list all of those scripts in the app.background.scripts field of the manifest, only the background script background.js. The others will be loaded as needed when you open your page.
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I'm new on Grails and I have some troubles with Ajax (so I could have missed something). On my main gsp I want a select box, that, when I click on its options, makes appear another field on the same page to select other things. As the content in the second part is dynamic, I need somme Ajax. Anyway I haven't succeed yet. Here is my code :
main.gsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="layout" content="main" />
<title>Sample title</title>
<g:javascript library="jquery"/>
</head>
<body>
<h1>Selection de l'email</h1>
<div class="dialog">
<g:select name="selectTemplate"
from="${templateCategories}"
value="category"
noSelection="['':'--- choisissez un modèle ---']"
onchange="${remoteFunction(
controller:"email"
action:"printTestTemplate"
update:"listTemplates"
params:'\'category=\'+this.value'
)}"
/>
<div id="listTemplates">RRR</div>
</div>
</body>
</html>
EmailController
def printTestTemplate = {
println params.category //doesn't print anything
println "YEAAAAAAAAAH" //the same
render(view:"formSelectTemplate", model:[templates:EmailTemplate.findByCategory(params.templateCategory)])
}
formSelectTemplate.gsp
<h1>YOUHOUUU !</h1>
I've both tried to call a view or template (by renaming the gsp of course), but nothing worked. Nevertheless I don't understand, I followed the official doc. Notice that the HTML result creates no event on the select box, and that Firebug tells me there is no 404. So I must have missed something in the creation of the box.
select result in HTML :
<select id="selectTemplate" name="selectTemplate">
<option value="Refus">Refus</option>
<option value="Informations complémentaires">Informations complémentaires</option>
</select>
Did you forget comas between the arguments of your remoteFunction call ? like this:
onchange="${remoteFunction(controller:"email",
action:"printTestTemplate",
update:"listTemplates",
params:'\'category=\'+this.value' )}"
Did it as stated at this page, but got undefined in my Firefox 4 Beta 7.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function read(files) {
var myFile = files[0];
document.write(myFile.url);
}
</script>
</head>
<body>
<input type="file" onchange="read(this.files);" />
</body>
</html>
I think this page will be more useful ;)
I don't know why it isn't working in the current beta. I don't think the standard is very stable yet, so file.url might have been removed since the article was written. I can't find anything about it in the current API draft.
It seems you get the same type of url in FF 4 beta 7 if you use createBlobURL(myFile) instead of myFile.url