RTM version of the developer tools.
I am building an app. In parts of the app I have some text provided by a web service, I take this text and process it to make the URLs in the text act as hyperlinks.
The container for this is a wrap panel.
<wrap:WrapPanel x:Name="PostMessage2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
Then in the constructor of the page I have this simple code.
PostMessage2.Children.Add(new HyperlinkButton()
{
Content = new TextBlock()
{
Text = "test url",
Foreground = new SolidColorBrush(Colors.White)
},
NavigateUri = new Uri("http://www.google.com/")
});
(I know this code is will not open an IE session and navigate to the Url)
Now when I run this program, I will not see anything visible on the screen, but if I tap the screen where the start of the url should be, then it will try to navigate to the url (which causes an exception as the navigation isn't handled correctly).
If I add a Textblock before and after the URL the test in those blocks is visible, and they will be separated by approximately 3 spaces, which if you tap the middle of this it will try to navigate to the url.
So my question is why are the hyper-links not visible but they are active as you can tap them, am I missing some obvious property or setting?
Thanks in advance for help.
You don't need to set the Content of the HyperlinkButton to be a TextBlock. It's expecting a string and you can set the Foreground color on the HLB:
PostMessage2.Children.Add(new HyperlinkButton()
{
Content = "test url",
Foreground = new SolidColorBrush(Colors.White),
NavigateUri = new Uri("http://www.google.com/")
});
Related
The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:
//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>
//via the regular api:
new MapboxGL.Popup()
.setLngLat([0.0, 0.0])
.setHtml(<h1>this text is also unselectable</h1>)
.addTo(map);
//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
.setDOMContent(placeholder)
.setLngLat()
.addTo(map);
In the Mapbox examples, their text is selectable. Any idea why mine isn't? Thanks.
I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:
Use the same class they use in the examples for the content: mapboxgl-popup-content
Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:
Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content
Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.
In my app, I can't figure out how to properly style the toolbar with my logo image.
What I want to make it look like is pretty much like the Toolbar from the "Sport1" App.
Example
So I need the back Command on the left side of the toolbar, my logo in the middle from a MultiImage out of the resource and on the right another command.
Also, I'd like to let the Toolbar get smaller with scrolling.
What I have tried so far:
res_theme = r;
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
So, this looks good the way it is. I dont actually need a Title, thats why I do
Form f = (" ", ...);
If I don't add a title to the form, the toolbar gets very small and squeezes the background Image from the toolbar. The centered logo from the toolbar is just for styling reasons there, it does not need to have a command. Is there a way to leave out the Title? I now have set it to completely transparent, but for me this is just a work-around.
Also, I guess rather than setting the logo as background with a centered alignment, I think it would be better to add it to the title section as Image, but I don't know if this is better or how to do it.
Now, I also want to make the Toolbar get smaller when scrolling down. I found kind of a example code in the Codename One Toolbar Documentation, but it does not work out for me, since the background Image gets removed.
This was the code for the scrolling Animation:
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
In the example, it worked. With my toolbar it does not, I have no clue why. I also can't see, where the size of the "after scrolling toolbar" is set.
Can I add there an Image as well? Kinda like one toolbar before scrolling with my logo, then while scrolling it transforms into a smaller one with only a textlogo image?
Here is my whole code what I have tried to make it work:
Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
logo = res_theme.getImage("Logo_Gema_vertikal.png");
f.getToolbar().getTitleComponent().setUIID("toolbar_image");
Style stitle = f.getToolbar().getStyle();
stitle.setBgTransparency(0);
stitle.setBgImage(logo);
stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
stitle.setPaddingTop(5);
f.add(new SpanLabel("asdasdasdasd");
ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
f.getAnimationManager().onTitleScrollAnimation(title);
f.show();
From the example above if looks like you just want to use the image as the title instead of styling the toolbar with a background image.
Just use ((Label)toolbar.getTitleComponent()).setIcon(myImage);.
I've dynamically created a horizontal scrolling list of labels (with icon and bottom text) within a container in a tab.
However, I cannot seem to bind any action to this Label - I want touch, long press, options(commands), drag, etc
If I use Button instead of Label, I cannot seem to use URLImage to grab the icon from a url and save it to storage and use that as the button icon. It always uses only the placeholder from:
Image img = URLImage.createToStorage(placeholder, counter+"_thumbnail", thumbnailURL, URLImage.RESIZE_SCALE);
How do I grab events on the Labels? Here is a snippet of how I'm adding the labels to the container:
Container c = StateMachine.instance.findFirstListContainer();
for(...){
Label l = new Label();
l.setText(title);
l.setIcon(img);
l.setUIID("listItem");
l.setTextPosition(2);
c.addComponent(l);
}
You should use a Button rather than a Label and invoke the setUIID("Label") method.
The reason why you didn't do this is a separate question/issue: https://groups.google.com/d/msg/codenameone-discussions/5HoDEFjB5II/5dc4iKuYNSYJ
I'm developing a reporting dashboard application using W8 Metro UI style application. The application has a dark theme, so most of the screen is black. I'm using the WebView control to display SSRS .rdl reports from our report server (which all have black backgrounds). The problem I'm seeing is that when I navigate to a new report, the WebView control flashes white for a split second and then loads the new report. To get around this, I tried putting an Easing opacity animation on the WebView control to make it fade out, load the report, and then fade back in. However, no matter what I try, I can't get the flickering to go away.
I then tried putting a black rectangle on top of the WebView and fading that one in and out... still no luck. The WebView is always on top at runtime, meaning I can't put any control on top of it. Does anyone know of a way around this?
I breifly looked into the WebView.Transitions, but couldn't find many resources on this. Could this be my answer?
EDIT:
Event to load the new report:
void ItemListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// Create a WebViewBrush of the content currently loaded in the WebView
WebViewBrush b = new WebViewBrush();
b.SourceName = "WebView1";
b.Redraw();
Rectangle1.Fill = b;
// Hide the WebView
WebView1.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
// Navigate to the new report
var selectedItem = ItemListView.SelectedItem;
WebView1.Navigate(((Report)selectedItem).ReportUri);
}
void WebView1_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
{
// Show the new report
WebView1.Visibility = Windows.UI.Xaml.Visibility.Visible;
Rectangle1.Fill = new SolidColorBrush(Colors.Transparent);
}
This is just the way WebView works because internally its loading the trident COM control into a separate hwnd. The workaround is to set Visibility to Hidden on the webview and instead show a webviewbrush which isn't interactive but does integrate with the rest of your UI so it can be animated, etc
I have the following code in a click handler of a Silverlight application (4). I have two problems getting this to work.
1) While the browser doesn't have pop-ups disable IsPopupWindowAllowed is returning false. Why?
2) If I ignore the if test, the window doesn't show. :(
if ( HtmlPage.IsPopupWindowAllowed )
{
var options = new HtmlPopupWindowOptions
{
Left = 0,
Top = 0,
Width = 500,
Height = 400,
Scrollbars = false,
Status = false
};
HtmlPage.PopupWindow(new Uri("http://www.monster.com"), "_blank", options);
}
Make sure all the following is done correctly, as mentioned on this page, http://msdn.microsoft.com/en-us/library/system.windows.browser.htmlpage.popupwindow%28v=vs.95%29.aspx
The AllowHtmlPopupWindow property must be set to true on the Silverlight plug-in.
The call to PopupWindow must be triggered by a user-initiated click on a visible area of the hosting Silverlight plug-in. PopupWindow can be called only once per interactive user event.
This prevents the display of multiple pop-ups during the course of a single click on the Silverlight plug-in.