I am having some problems with Tizen wearable Web Widgets.
I just created a sample project with HTML + JS and tried to update page on events described in life-cycle -> On load / visibility change
the sample code can be found at: https://github.com/Ryccoo/widget-test/blob/master/widget/StockQuote/js/main.js
When I add widget I can see the text "something" -> meaning that onload function was successfully called.
However swiping to another widget and back does not trigger the visibilityChange event as described.
How do I correctly upload the contents when user scrolls to this widget ?
Another question is just how to debug the web widgets? You cant run debug to interactively debug the program with widgets (only for web apps) and when I want to print something to console I only see
The web console logging API (console.log, console.info, console.warn, console.error) has been disabled.
To activate it, you should launch project with Debug mode.
How do I launch the widget in Debug mode ?
Thank you
Web Widget Debug feature is not Supported yet on Tizen Studio.
But I've test the code for Visibility Change event, and It worked fine on my Samsung Gear S3. Visibility Change callback is being called every time I change between widgets. You may give this code sample a try:
Project folder > Widget folder> index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main-container Panel">
<div id="Visibility"> Visibilty: Init </div>
</div>
<script src="js/main.js"></script>
</body>
</html>
Project folder > Widget folder> js > main.js
window.onload = function() {
};
document.addEventListener('visibilitychange', visibilitychange);
function visibilitychange() {
if (document.visibilityState === 'hidden') {
document.getElementById("Visibility").textContent = "Hidden";
} else {
document.getElementById("Visibility").textContent = "Visible";
}
}
Related
I am using a small Blazor Wasm app to learn web programming. In particular, Visual Studio Community 2019 v16.6.2 with AspNetCore v3.2.0 and Chrome v83.0.4103.116. There are times when changes I make to my code (JavaScript and Blazor) aren't applied when I run the debugger, unless I do a Hard Refresh. I have set 'Disable cache' in the Network portion of the Chrome DevTools, but it doesn't remain set between debugging sessions. Having to do a Hard Refresh each time I debug just in case is of course a big pain. Any idea what I can do to prevent caching under these circumstances?
Short answer
At the beginning of your index.html file, before any Blazor initialization, write a Javascript method call that clear the Blazor cache:
<script type="text/javascript">
caches.delete("blazor-resources-/").then(function (e) {
console.log("'blazor-resources-/' cache deleted");
});
</script>
By doing this, the Cache Storage will be cleared at each page load, just before the Blazor initialization.
Full answer
I think it is better to control the behavior of this depending the context.
For a basic if in Debug or Release configuration, assuming that you are hosting your Blazor WASM application on ASP.NET Core, here are the steps:
Copy your index.html file from your Client WASM project on your Server project, in a Pages folder you may have. In my case, i have copied it in ./Pages/
Rename the file to _Host.cshtml or something suitable for you.
Open this new file. We will now state in it that this is the root page if this page come from a routing context, and we will add our clear cache logic depending we are actually in Debug mode or not. You file content may look like this:
#page "/"
#{
Layout = ""; //Force no Layout
bool clearCache = false;
#if DEBUG
clearCache = true;
#endif
}
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>MyProject</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Beeworking.Client.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
#if (clearCache)
{
<script type="text/javascript">
caches.delete("blazor-resources-/").then(function (e) {
console.log("'blazor-resources-/' cache deleted");
});
</script>
}
<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>
Now in your Startup.cs file in your Server project:
Change:
endpoints.MapFallbackToFile("index.html");
To:
endpoints.MapFallbackToPage("/_Host");
If it don't work, you may have to specify the root search path for Razor views. In ConfigureServices, change AddRazorPages to something suitable on your current configuration to find your starting view:
services.AddRazorPages(options => options.RootDirectory = "/Pages");
That's it ! . If everything goes right, your Blazor WASM index page will now be the CSHTML one at boot, and because we condtionnally inject the clearing cache code, the cache will be cleared at every page load, but the behavior will not be present when the app will be published or built in Release configuration mode.
After publishing there is a file at wwwroot/_framework/Blazor.boot.json
Change cacheBootResources to false.
{
"cacheBootResources": false
...
Clear your cache on the client browser.
I would like to remove the "Mark Task Complete" button from the Task Ribbon on my Project Web App to prevent users from clicking on it. I have been successful in adding a custom JavaScript Web Part to hide the button after a 200 millisecond delay because the JavaScript has to wait for the page to load. However, this not only leads to a bad user experience but also it is not guaranteed that the page will fully load in 200 milliseconds and thus leaves the possibility of the users seeing the button and being able to interact with it. Here is that JavaScript.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.ms-cui-tt a:eq(1)").trigger("click");
});
window.onload = function(){
setTimeout(function(){
document.getElementById('Ribbon.ContextualTabs.MyWork.Home.Tasks.MarkComplete-Large').style.display = 'none';
}, 200);
};
</script>
</body>
</html>
Is there a way to accomplish the desired affect without using a delay?
You can use CSS for the same result, note that you have to substitute the dot in the class name with \.
It should look a bit like this (In a Scritp Editor Web Part on the Page):
<style type="text/css">
#Ribbon.ContextualTabs.MyWork.Home.Tasks.MarkComplete-Large {
display: none
}
</style>
I'm trying to generate Bing map ajax scripts on the fly depending on user selections in an access form. I would like to be able to display the map in an Access web browser control.
The problem is that two identical looking htm files act differently.
Good.htm loads in access, IE, firefox and opera fine.
Auto.htm, the one generated by code, opens in opera, firefox with no bugs in firefly, but not in access. It opens in IE but with the pop-up "Internet Explorer restricted this webpage from running scripts or ActiveX controls". When I click the "Allow blocked content" button it loads fine.
It will not load in access, if I put buttons in they will show, but the map won't.
I wrote a program to check both files for any differences in characters, there are none.
I can copy the script from auto.htm and paste it into good.htm and it will still be good.
One thing I did notice though, is that the properties that windows reports for good.htm, oddly, has "This file came from another computer and might be blocked...". If I click "unblock" then it will no longer work. auto.htm doesn't have that restriction.
I made good.htm by copying the html from "Bing Maps V7 Interactive SDK" and pasting it into a text file, them changing the extension to .htm.
For what it's worh, here's the script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"enter code here"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Map view (bounds)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
var boundingBox = Microsoft.Maps.LocationRect.fromString("42.3262, -83.8191, 42.2322, -83.6713");
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{credentials: 'my basic developer key',
bounds: boundingBox,
heigth: 590,
width: 850
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:850px; height:590px;"></div>
</body>
</html>
You could try adding the "Mark Of the Web":
Http://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx
I have a page where I want to redirect users to the Instagram app when it's installed. That part works well, but when the user doesn't have the app installed it prompts them to go to the app store and download the app, which is not what I want.
I'm seeing this behavior on OS X in Safari, and the HTML involved is ({username} would be populated by my application based on the user submitting the form):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="0; url=instagram://user?username={username}">
</head>
<body>
<div>
Taking you to Instagram...
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
setTimeout(function() {
window.location = "https://instagram.com/{username}";
}, 200);
});
</script>
</body>
</html>
EDIT
Specifically, what's happening is the line <meta http-equiv="refresh" content="0; url=instagram://user?username={username}"> is showing the following dialog:
I'd like for that dialog not to display and let the "window.location =" in the take over and redirect the user to Instagram within the browser.
My question is how can I modify the "instagram://" redirect to not ask users to install the Instagram app on their machine?
There is no (official) way to detect in the browser if an app (like Instagram) is installed and thus you cannot use a custom url scheme without offering an alternative. You should let the choice to the end-user and prompt to open the website (https scheme) or the app (Instagram scheme).
The user will know if the app is installed.
If you know already that the user has the Instagram app installed, you can look at the browser agent to see if you are on an iOS device.
I'm new to phonegap and I'm still trying to understand the basics. I want to make a simple app that when it starts up it checks to see if it has an internet connection and if it does I want it to redirect to a website or load that website in the web view. If it doesn't have an internet connection, then I want it to stay on the app and just display static content.
Here's what I have so far.
<!DOCTYPE html>
<html>
<head>
<title>Online Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
document.addEventListener("online", onOnline, false);
}
// Handle the online event example
//
function onOnline() {
window.location.href ="http://google.com";
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I also set OpenAllWhitelistURLsInWebView to true.
Does the online event only work if the app was offline then gets called when the app goes back online?
Thanks in advance!
No, Online event is fired when the app starts if internet is connected and it is also called when the app goes from offline to online mode.
If you want to open a external website in phonegap you can add a child browser plugin for the same Or else you can open a website in a embedded webveiw. window.location.href doesn't work in Phonegap.
I don't know whether you are working on iOS or Android so the link for iOS and for Android
Move your wiring up of the online event handler (i.e. this line):
document.addEventListener("online", onOnline, false);
up into your onLoad() function. I found that the online/offline events need to be registered on load, rather than later for some reason.