Nativescript Vue: How to create a basic layout - nativescript

How can I create a basic template for all my pages?
I try to make a RadSideDrawer on all pages available. (With exception for some specific pages like login / registration etc.).
Currently I copy and past my Menu on all pages. What is the correct way handling this?

You haven't shown any code... So not sure how are you even including it. In app-root?
But you can set menu to false to disable it on some pages:
Example:
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
let sideDrawer = Application.getRootView()
sideDrawer.getViewById('sideDrawer')
sideDrawer.gesturesEnabled = false
And enable it programmatically this way.

Related

Xamarin Forms WebView open external link

I have a webview inside my application and when an external link is clicked (that in normal browser is open in a new tab), I can't then go back to my website.
It is possible when a new tab is open to have the menu closed that tab like Gmail do ?
The objective is that, whenever a link is clicked, the user would have the choice to choose which option to view the content with, e.g. Clicking a link would suggest open youtube app or google chrome. The purpose is to appear the google chrome option
Or what suggestions do you have to handle this situation ?
If I understood you correctly, you want to have the option to select how to open the web link - inside your app, or within another app's (browser) context.
If this is correct, then you can use Xamarin.Essentials: Browser functionality.
public async Task OpenBrowser(Uri uri)
{
await Browser.OpenAsync(uri, BrowserLaunchMode.SystemPreferred);
}
Here the important property is the BrowserLaunchMode flag, which you can learn more about here
Basically, you have 2 options - External & SystemPreferred.
The first one is clear, I think - it will open the link in an external browser.
The second options takes advantage of Android's Chrome Custom Tabs & for iOS - SFSafariViewController
P.S. You can also customise the PreferredToolbarColor, TitleMode, etc.
Edit: Based from your feedback in the comments, you want to control how to open href links from your website.
If I understood correctly, you want the first time that you open your site, to not have the nav bar at the top, and after that to have it. Unfortunately, this is not possible.
You can have the opposite behaviour achieved - the first time that you open a website, to have the nav bar and if the user clicks on any link, to open it externally (inside a browser). You have 2 options for this:
To do it from your website - change the a tag's target to be _blank like this;
To do it from your mobile app - create a Custom renderer for the WebView. In the Android project's renderer implementation, change the Control's WebViewClient like so:
public class CustomWebViewClient : WebViewClient
{
public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, IWebResourceRequest request)
{
Intent intent = new Intent(Intent.ActionView, request.Url);
CrossCurrentActivity.Current.StartActivity(intent);
return true;
}
}

How to disable the click event in electron app

I am able to built the desktop app in electronJS. I am trying to implement the functionality to disable the click event on window when there is no internet connectivity similar to the slack.I found the API to detect the internet in electron but not able to find the way to disable the click events.
You can disable all pointer events by adding the following rule to your page's CSS:
body {
pointer-events:none;
}
or via JavaScript:
document.body.style.pointerEvents = "none";
to re-enable:
body {
pointer-events:auto;
}
or
document.body.style.pointerEvents = "auto";
You can do this on more specific elements to gain more granular control.
You could add an invisible panel in front of everything and catch the clicks there.

NativeScript Side Drawer unhooked page

I'm new to NativeScript and I've been following the instructions here to create my app.
However I find out that all pages are hooked to the drawer, how do I unhook some pages, such as Login, Create ...?
You can get a reference to the sidedrawer and disable the interaction.
import { getRootView } from "tns-core-modules/application";
this.drawer = <RadSideDrawer>getRootView();
this.drawer.gesturesEnabled = false;
The above is implemented in the login page of this POC application.

NativeScript adding xml namespace on Page tag

I'm new to NativeScript. I have created a new project using the Angular Blank template. The navigation is done using page-router-outlet. I want to include a xmlns attribute on the page level. As far as i can see and understand the entire code is rendered inside a global page attribute. I've seen that I can modify the page properties by injecting the Page in a component and changing it's properties, but how can I do this for xmlns?
Best regards,
Vlad
To register a UI component in Angular based application you should use registerElement and not XML namespaces (which is a concept used in NativeScript Core). Nowadays most plugin authors are doing this job for you, but still, some of the plugins are not migrated to use the latest techniques so in some cases, we should manually register the UI element.
I've created this test applicaiton which demonstrates how to use nativescript-stripe in Angular. Here are the steps to enable and use the plugin.
Installation
npm i nativescript-stripe --save
Register the UI element in app.module.ts as done here
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CreditCardView", () => require("nativescript-stripe").CreditCardView);
Add the following in main.ts as required in the plugin README
import * as app from "tns-core-modules/application";
import * as platform from "tns-core-modules/platform";
declare const STPPaymentConfiguration;
app.on(app.launchEvent, (args) => {
if (platform.isIOS) {
STPPaymentConfiguration.sharedConfiguration().publishableKey = "yourApiKey";
}
});
Use the plugin in your HTML (example)
<CreditCardView id="card"></CreditCardView>

how to get the current tab url in popover for safari extension

Hi There best collegue,
Currently im busy with developing a bookmarker extension for safari and running up against a problem. How can i acces the current tab url in the popover?
Tnx in advance:)
The popover doesn't have access to safari.application so can't get the current URL directly, but it can call functions in the global page which can.
In your global page:
function currentUrl() {
return safari.application.activeBrowserWindow.activeTab.url;
}
Then in the popover:
alert(safari.extension.globalPage.contentWindow.currentUrl());
Ensure that the Access Level is set to 'All' in the Extension builder and secure pages are included otherwise the URL will sometimes be undefined.

Resources