Dart programatically instantiating Polymer-elements from within .dart script - dart

I'm working on setting up a server-client test app in dart.
Right now the server/client connection is working fine. One of the things I want to do though is add and remove custom elements from the page at various times. Right now I have the code:
import 'dart:async';
import 'dart:convert';
import 'dart:html';
import 'Signin/sign_in.dart';
import 'package:polymer/polymer.dart';
class Client {
static const Duration RECONNECT_DELAY = const Duration(milliseconds: 500);
WebSocket webSocket;
DivElement viewRoot;
Client() {
// Signin is a custom element defined...
Signin sign = new Signin();
viewRoot = $['hold-everything'];
viewRoot.children.add(sign);
connect();
}
....
}
sign_in.dart
class Signin extends PolymerElement {
Signin.created() : super.created();
InputElement username;
DivElement usernameParent;
DivElement passwordParent;
LabelElement usrWarn;
LabelElement passWarn;
LabelElement submissionWarn;
...
}
When I load the page I get the following error:
[16:08:24.480] : NoSuchMethodError : method not found: 'Symbol("constructor Signin")'
Receiver: ""
Arguments: [] # http://localhost:8080/client.dart.js:1042
And in client.dart I have the following warning over
Signin sign = new Signin();
The class 'Signin' does not have a default constructor

Related

Integrate KoliBri web-components in Vaadin

I am trying to integrate KoliBri web-components (https://github.com/public-ui/kolibri) in a Vaadin project. I followed the documentation for web components integration (https://vaadin.com/docs/latest/create-ui/web-components) but I was not successful.
I want to integrate a KoliBri-button (kol-button) and therefor created getter and setter methods for the required properties of the button. When loading the website, the kol-button-component is loaded successfully from the .js file.
enter image description here
But the kol-button element in the DOM is empty and won´t show up:
enter image description here
Here is my KolButton.java:
package com.example.application.views.helloworld;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Synchronize;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
#Tag("kol-button")
#NpmPackage(value = "#public-ui/components", version = "1.1.10")
#JsModule("#public-ui/components/dist/components/kol-button")
public class KolButton extends Component {
public boolean getLabel() {
return getElement().getProperty("_label", false);
}
public void setLabel(String label) {
getElement().setProperty("_label", label);
}
public void setVariant(String variant) {
getElement().setProperty("_variant", variant);
}
public boolean getVariant() {
return getElement().getProperty("_variant", false);
}
}
And the view.java:
package com.example.application.views.helloworld;
import com.example.application.views.MainLayout;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;
#PageTitle("Hello World")
#Route(value = "hello", layout = MainLayout.class)
#RouteAlias(value = "", layout = MainLayout.class)
public class HelloWorldView extends HorizontalLayout {
public HelloWorldView() {
var kolButton = new KolButton();
kolButton.setLabel("TestText");
kolButton.setVariant("danger");
setVerticalComponentAlignment(Alignment.END, kolButton);
add(kolButton);
}
}
Do you have any idea to solve this? Thanks in advance

Dart2 Router Implementation

I am trying to upgrade Dart1 application to Dart 2.4, I am facing a problem in Router my code is as shown below
import 'dart:async';
import 'dart:convert';
import 'package:angular/src/core/di/decorators.dart';
#Injectable()
class SpRouterImpl implements SpRouter {
final Router _router;
SpRouterImpl(this._router);
#override
void go(String routeName, Map<String, String> parameters,
[bool openInNewWindow = false]) {
if (openInNewWindow) {
var url = _router.generate([routeName, parameters]).component.urlPath;
window.open(url, "_blank");
} else {
_router.navigate([routeName, parameters]);
}
}
}
I am getting error in this line
var url = _router.generate([routeName, parameters]).component.urlPath;
The method generate isn't defined for the class Router
Second error is here
_router.navigate([routeName, parameters]);
The argument type List can't be assigned to the parameter type 'String'
The above function is working fine in Dart 1 but when I upgrade to Dart 2, I am getting the errors, don't know how to solve it.
Can anyone help in this regard
You need a RoutePath instance to define your "route".
final search = RoutePath(path: "search/:term"); // term is the parameter
Then use that path to navigate to that route.
_router.navigate(search.toUrl(parameters: {'term': searchTerm}));
So in your case it might look like this:
import 'dart:async';
import 'dart:convert';
import 'package:angular/src/core/di/decorators.dart';
#Injectable()
class SpRouterImpl implements SpRouter {
final Router _router;
SpRouterImpl(this._router);
#override
void go(String routeName, Map<String, String> parameters,
[bool openInNewWindow = false]) {
final path = RoutePath(routeName);
final url = path.toUrl(parameters: parameters)
if (openInNewWindow) {
window.open(url, "_blank");
} else {
_router.navigate(url);
}
}
}
It might not drop in and work depending on how your routeName is defined but this is the general idea.
There are several other options for RoutePath check them out and see what works best for you!

JavaFX WebView doesn't execute JavaScript

I am on Windows 8. I have a JavaFX app that creates a simple window with a webview control and loads the local file "test.html". "test.html" contains javascript (a simple "alert("hello");<(script>").
However, the javascript is ignored.
What rendering engine does webview in JavaFX use?
I have Firefox and IE installed. The latter executes JS contained in local files only if the users accepts to do so. So my assumption is that webview uses IE due to some configuration of my OS. Is this possible?
Thanks for your help.
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.concurrent.Worker.State;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
public class Hello extends Application {
#Override
public void start(final Stage stage) {
stage.setWidth(400);
stage.setHeight(500);
Scene scene = new Scene(new Group());
WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
ScrollPane scrollPane = new ScrollPane();
scrollPane.setContent(browser);
String filepath = this.getClass().getResource("test.html").toExternalForm();
webEngine.load(filepath);
scene.setRoot(scrollPane);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
The JavaFX WebView does not visually show a popup when you use the alert() function in javascript. Instead it raises an event in java that you can handle like this:
myWebView.getEngine().setOnAlert((WebEvent<String> wEvent) -> {
System.out.println("JS alert() message: " + wEvent.getData() );
});

Vaadin refresher extension doesn't work

I am trying to make a simple usage of refresher plug-in as below but it doesn't seem to work. I am tried to run this example in Chrome and in firefox. I am exporting the project as WAR and deploying it in tomcat webapps folder.
package com.example.vaadinapp;
import javax.servlet.annotation.WebServlet;
import com.github.wolfie.refresher.Refresher;
import com.github.wolfie.refresher.Refresher.RefreshListener;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.Page;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
#SuppressWarnings("serial")
#Theme("vaadinapp")
public class VaadinappUI extends UI {
Refresher refresher;
Label timeLabel;
Page page;
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = VaadinappUI.class)
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
refresher = new Refresher();
page = this.getPage();
timeLabel = new Label(String.valueOf(page.getWebBrowser().getCurrentDate()));
refresher.setRefreshInterval(1000);
refresher.addListener(new RefreshListener() {
#Override
public void refresh(Refresher source) {
timeLabel.setCaption(String.valueOf(page.getWebBrowser()
.getCurrentDate()));
}
});
addExtension(refresher);
layout.addComponent(timeLabel);
}
}
What am I doing wrong here? I also tried the same example with SimpleDateFormat instead of using WebBrowser getCurrentDate() but still the same issue
since vaadin 7.2 you don't need the refesher addon. just enable push support
https://vaadin.com/book/vaadin7/-/page/advanced.push.html

JavaFX2: Webview: Page shows empty screen

I tried displaying the google web page on my javafx view using webview. All it does is display an empty page. For testing I did add a text element at the bottom and it did show up. Any pointers would be helpful. My code and the sample screen are attached.
I am running this application on a Windows 7 machine with 8 GB RAM and this is deployed in an environment that needs proxy authentication.
import java.net.Proxy;
import java.net.ProxySelector;
import java.net.URI;
import java.net.URISyntaxException;
import java.util.List;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class MyBrowser extends Application
{
private Pane root;
#Override
public void start(final Stage stage) throws URISyntaxException
{
root = new VBox();
List<Proxy> proxies = ProxySelector.getDefault().select(new URI("http://www.google.com"));
final Proxy proxy = proxies.get(0); // ignoring multiple proxies to simplify code snippet
if (proxy.type() != Proxy.Type.DIRECT)
{
// you can change that to dialog using separate Stage
final TextField login = new TextField("login");
final PasswordField pwd = new PasswordField();
Button btn = new Button("Login");
btn.setOnAction(new EventHandler<ActionEvent>()
{
public void handle(ActionEvent t)
{
System.setProperty("http.proxyUser", login.getText());
System.setProperty("http.proxyPassword", pwd.getText());
displayWebView();
}
});
root.getChildren().addAll(login, pwd, btn);
}
else
{
displayWebView();
}
stage.setScene(new Scene(root, 400, 600));
stage.show();
}
private void displayWebView()
{
root.getChildren().clear();
WebView webView = new WebView();
final WebEngine webEngine = webView.getEngine();
root.getChildren().addAll(webView, new Text("HELLO"));
webEngine.load("http://www.google.com");
}
public static void main(String[] args)
{
launch();
}
}
I copied and pasted your code and ran it on Windows 7 with Java7u40 both Java8b108.
In both cases the code functioned correctly and displayed the http://www.google.com page.
The proxy selector code in your source was not triggered for me (probably because I have a Proxy.Type.DIRECT connection, so there was nothing for it to do).

Resources