I have “issues” I want users to be able to navigate to, using Apple Maps or Google Maps.
I launch the maps interface with a client-side link. If either app is installed on iOS or Android, it loads.
In this example, the Button loads a client-side link correctly on Android and Chrome on Windows. It also works on Apple in Safari. However, on Apple hybrid app, it does not, while the A HREF in the label does work.
In addition to the A HREF on a label, LinkMenuItem also works in my hybrid app (Native apple code that loads WiseJ website) to load the navigation interface. I can’t get a Button to work, however.
Is there a better way to do this that works on iOS webview?
thanks,
Andrew
PS: related thread: https://wisej.com/support/question/client-side-links-mailto-sms-etc
public void SetNavigateIssueClientLink()
{
//Get Platform
string strPlatform = "Google";
if (WiseJFunctions.IsHybridApp() && WiseJFunctions.IsIOS())
{
strPlatform = "Apple"; // its a hybrid session, and on an iphone...
}
//Get map url
string curMapUrl = LocationServices.MakeDirectionsMapLink(selectedIssue.GetCoordinatesString(), selectedIssue.GetHeadline(), strPlatform); ;
AlertBox.Show("URL set to " + curMapUrl,MessageBoxIcon.None,null,System.Drawing.ContentAlignment.BottomCenter,1000);
//Set Javascript on Button
string strJS = "this.addListener('execute', function(e) { window.open('" + curMapUrl + "', '_blank'); })";
JavaScript JSE = new JavaScript();
JSE.SetJavaScript(btnNavigateToSelectedIssue, strJS);
//set linklabel href
linkLabel1.AllowHtml = true;
linkLabel1.Text = "<a href='" + curMapUrl + "' target='_blank'>Navigate</a>";
}
See attached sample. All you need to do is use the “button” appearance on a label with html in it. With css you can align it, color it, etc.
This extension method will format a button with a client-side link. It calculates the size of the rendered text, and applies a padding element to the link, so the link area is equal to the button area. The link foreground color is hard-coded as white, which matches the Blue 1 theme. It is also necessary to record the original button size going in, and then set it back after applying the HTML, or else the button may change in size by a few pixels.
It will NOT work if text is wrapped on the button; it must be on one line.
static class WiseJFunctions
public static void FormatButtonWithClientSideLink(this Button b, string url, string text)
{
int originalButtonWidth = b.Width;
int originalButtonHeight = b.Height;
Size szText = TextUtils.MeasureText(text, b.Font);
int Vpadding = ((b.Height – szText.Height) / 2) -2;
int Hpadding = ((b.Width – szText.Width) / 2)-2 ;
string pad = “padding: ” + Vpadding.ToString() + “px ”
+ Hpadding.ToString() + “px ”
+ Vpadding.ToString() + “px ”
+ Hpadding.ToString() + “px;”;
string html = “<a href='” + url + “‘ target=’_blank’ style=’display: block; white-space: nowrap; color: #FFFFFF; text-decoration: none; ” + pad + “‘>” + text + “</a>”;
b.AllowHtml = true;
b.AutoSize = false;
b.Text = html;
//ensure original size is enforced, if changed
b.Width = originalButtonWidth;
b.Height = originalButtonHeight;
}
It is true we can use CSS to improve the situation, like this
int padding = Convert.ToInt32(btnNavigateToSelectedIssue.Width / 2);
btnNavigateToSelectedIssue.AllowHtml = true;
btnNavigateToSelectedIssue.Text = “<a href='” + curMapUrl + “‘ target=’_blank’ style=’display: block; padding: ” + padding.ToString() + “px;’>Navigate</a>”;
However, the link text shows up as a different color than normal button text, and the padding is hard to determine exactly — you need to calculate the width and height of the rendered text, and pad exactly enough on top, left, bottom, right in order to perfectly fit the padded area inside the button.
Thus I propose a LinkButton, which I tried to get working based on the MenuItemLink example posted here (https://wisej.com/support/answers/4263/file/594/Wisej.DynamicFacebookMeta.zip)
attached is what I did so far. What is missing is a “Target” property, in addition to the HRef property … and also I cannot get the button to render in the designer. It says “Unknown type” where the button should be.
Would you be able to assist me further? Is it possible to get a LinkButton as a WiseJ standard control or extension? Then all users will be able to enjoy the benefits of a Button that can launch client-side links.
The issue is that only a small portion of the button is clickable to load the client-side link: the text
The problem is made worse for touch interfaces
You can put a <a href=””> anywhere. In a label, in a button, in a cell, etc. I tried with a button and with a label and didn’t see any issue. It’s a simple as this:
this.label1.AllowHtml = true; this.label1.Text = "<a href='http://google.com">Google</a>";
WiseJ’s Button can’t hold a client-side html link to begin with, so the native code would not even receive the link. What is needed is a LinkMenuItem equivalent for Button.
You probably need to implement the functionality in the related WKWebView delegate.
https://stackoverflow.com/questions/26501172/launching-phone-email-map-links-in-wkwebview.
HTH,
Levie
Please login first to submit.