I need to display a local page in xamarin forms. I followed this documentation: Xamarin working with WebView and I use following code to display a page:
private void DisplayLocalPage(string filename)
{
HtmlWebViewSource htmlSource = new HtmlWebViewSource();
var html = new HtmlWebViewSource();
html.BaseUrl = DependencyService.Get<IBaseUrl>().Get();
html.Html = ReadFile(filename);
MyWebView.Source = html;
}
The page uses css in separate files - according to documentation, I have to use dependency service to make possible for each platform to reach css files.
So my project looks like this:
TestWebView (Portable):
Resources:
local_page.html
stylesheet.css
TestWebView:Droid
Assets:
stylesheet.css
TestWebView:iOS
Resources:
stylesheet.css
As long as I can have html only in portable project, why do I have to use platform-specific resources for css? And is there any way to store the css also only once? The documentation didn't mention that.
Related
TLDR; In a Javascript file for my Firefox extension, how can I load the contents of other files from inside my extension (such as an HTML view & CSS stylesheet) for use on the current web-page?
I'm working on my first Firefox extension, for personal use.
So I setup my manifest.json to load /script/panel.js when any page of the site loads.
In panel.js, I would like to do something like:
const html = MyExtension.getFileContent('/view/panel.html');
const node = document.createElement('div');
node.innerText = html;
document.body.appendChild(node);
But I can't find anything like MyExtension.getFileContent(). All I've been able to find is how to add sidebar (through manifest?) & browser action for the toolbar at the top of the browser & other non-programmatic ways of exposing files that are inside my extension.
Then in /view/panel.html, Ideally, I'd like to also reference /style/panel.css which is also found inside my extension's root directory, such as with a <link tag.
Did you set web_accessible_resources in your manifest.json? It is required to make resources in your extension readable from webpages.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources
I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.
If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.
This is pretty much Day 1 for me with NativeScript and I have run into a few issues.
I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html
to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy
app
|
____home
|
____www
|
______ index.html
|
______css
|
______ tpl
|
.....
However, when I use the markup
<Page actionBarHidden="true" >
<WebView src="~/www/index.html"></WebView>
</Page>
I am shown the error message
The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.
I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.
About using local HTML file
Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.
new CopyWebpackPlugin([
{ from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
]
Example here
About hiding the ActionBar
NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here
NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.
I have created a theme for Firefox that involve a simple stylesheet. I am currently using Stylish extension for this but would like to share my theme as an Firefox addon (since Theme are simple image).
I didn't quickly find anything about that in search engine and only find an outdated ressource on MDN.
Any tip to make share this CSS as an addon? (bonus: automate release from a git repo)
If it's a simple stylesheet as you described, then you would have to attach the stylesheet to the nsIDOMWindow. Example code with addon-sdk
const { attachTo, detachFrom } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
const { getMostRecentWindow } = require("sdk/window/utils");
const { browserWindows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const style = Style({
uri: "./index.css" // path to file
});
attachTo(style, getMostRecentWindow());
browserWindows.on("open", function(window) {
attachTo(style,viewFor(window));
});
require("sdk/system/unload").when(function() {
for (let window of browserWindows)
detachFrom(style, viewFor(window));
});
EDIT:
To start using addon-sdk you must have jpm. Here it is described how to install it. Once you installed it, you should create a directory that will contain your extension. Then open a terminal/console and type jpm init. Fill the prompted fields according to your needs. You can also check out these additional options available in the package.json (it's in the root of your directory with the extension) and use them aswell.
The next step is to paste my code in the index.js (you can paste the code somewhere else but then you have to import that file using require). Create a directory "data" in the extension directory and create a file with stylesheet there. Then replace "index.css" here
uri: "./index.css"
with your file name.
Once you are done, type jpm xpi in your terminal/console and your extension is ready to install! Good luck
Is there a way to set or override a project deployment folder in Mono for Android? For example, my application right now deploys to /data/data/SolutionEngine/files/.__override__
The nature of the application is that it loads plug-ins using Reflection, and by default it looks in the /Adapters sub-folder from the app root. This is how it works on the desktop and the Compact Framework, so for simplicity we'd like to continue to do the same on Android.
If I have a single solution that has the app and some plug-ins in it, I'd like those files to get deployed in the proper structure when I start debugging.
You could write out the plugins as android assets (see screenshot below). Please Note: You might need to change the extension to .mp3. See here. I didn't have this issue though.
Once you do that, you should be able to get the assets by using the Asset Manager. You can copy them to a different folder or do whatever with them. Here is a sample of reading them into memory and them writing out the name.
const String pluginPath = "Plugins";
var pluginAssets = Assets.List(pluginPath);
foreach (var pluginAsset in pluginAssets)
{
var file = Assets.Open(pluginPath + Java.IO.File.Separator + pluginAsset);
using (var memStream = new MemoryStream())
{
file.CopyTo(memStream);
//do something fun.
var assembly = System.Reflection.Assembly.Load(memStream.ToArray());
Console.WriteLine(String.Format("Loaded: {0}", assembly.FullName));
}
}
Im currently in the process of porting a completely static site using trigger io to convert it to an app. The site comprises of lots of folders in folders with index.html files in them to make the urls nice. The site uses absolute urls to include stylesheets, javascripts, on a tags, and images in every page.
I would like to set a root directory for trigger.io, but I cannot find any way of doing this. Is this even possible?
Cheers,
Rich
Edit:
Example:
<script src="/json.js" type="text/javascript"></script>
<img alt="Bar_hat" class="bar_hat" src="/assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
The script tag is in all of the files.
The img tag is used in 90% of the files. These are obviously not being found from within the app.
Copy your "assests" directory to the "src" directory and use without a "slash" before assets -
<img alt="Bar_hat" class="bar_hat" src="assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg" />
Also, if you want to access via javascript you must use this pattern:
forge.file.getUrl("assets/bar_hat-09efbabebef04dd368425a6b71badfa7.jpg",
function(file) {
// If using zepto or jquery
$("#whateverImage").attr("src", file);
},
function(err) {
// error
}
);
Edit: getUrl vs getLocal