I'm trying to work through a Google I/O codelab for the Material Design Web App, but port it to the Dart language. http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#4
I'm at the step where you toggle the drawer, but I can't figure out the dart equivalent.
The JS code to toggle the drawer looks like this:
<script>
Polymer('codelab-app', {
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
}
});
</script>
I have tried the following in my CodelabApp class, but I get a NoSuchMethodError: method not found: 'togglePanel'
#CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
CodelabApp.created() : super.created() {}
void toggleDrawer() {
querySelector('core-drawer-panel')..togglePanel();
}
}
my button element properly fires, but I can't figure out how to call the drawer's togglePanel method. <paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
any help or direction to the proper docs would be greatly appreciated.
UPDATE:
This has been fixed in recent versions: https://github.com/dart-lang/core-elements/issues/39
Updating the polymer and core_elements libraries works as expected.
While attempting to commit my own fix to this, I discovered a temporary workaround that works in my case. Maybe will work for you :)
Add the following to the top of your file:
import 'dart:js' show JsObject;
_js(x) => new JsObject.fromBrowserObject(x);
Then change your custom tag code:
#CustomTag('codelab-app')
class CodelabApp extends PolymerElement {
CodelabApp.created() : super.created() {}
void toggleDrawer() {
_js(shadowRoot.querySelector('core-drawer-panel')).callMethod('togglePanel');
}
}
For reference I found this solution by reading through the code here:
https://github.com/dart-lang/core-elements/blob/master/example/core_drawer_panel.html#L68-L81
Related
I'm trying to use vaadin badges in lit element.
The documentation is mentioning to "To use these classes in your application, enable them in your theme’s theme.json" but I don't have such a file so it is really confusing to me. Most of the documentation focuses on Java so I am guessing this is where the confusion comes from. So far I have only installed some components via NPM.
I tried to create a frontend/themes/common-theme/theme.json file anyways, but without success so far.
Here is how my element looks like at the moment :
import {LitElement, html} from 'lit';
import '#vaadin/vertical-layout';
import '#vaadin/horizontal-layout';
import '#vaadin/vaadin-lumo-styles/badge.js';
export class PaymentLink extends LitElement {
static properties = {
version: {},
link : { Object}
};
constructor() {
super();
}
render() {
return html`
<vaadin-horizontal-layout>
${this.link.id}
<span theme="badge">Pending</span>
</vaadin-horizontal-layout>
`;
}
}
customElements.define('payment-link', PaymentLink);
Could someone please show me the light? Here is a stackblitz example : https://stackblitz.com/edit/lit-element-jjzdpa?file=src/index.js
The #vaadin/vaadin-lumo-styles/badge.js module only exports the styles, just importing it will not automatically create a style tag with the respective CSS. With Vaadin Flow or Hilla applications that can done automatically by configuring said theme JSON file.
If you want to use badge standalone in a Lit app, the best approach is probably to add the badge styles to the styles of your root / application Lit component:
import { badge } from '#vaadin/vaadin-lumo-styles/badge.js';
class MyLitApp extends LitElement {
static get styles() {
return [badge, /* ...other app styles */]
}
}
Note that if one of your components using badge uses a shadow root, then you need to add the badge styles to that component in the same manner.
In my vaadin application I need to implement a fixed header, that changes size depending on the scroll position of the UI.
While there are geters for scroll position in Vaadin 8, there seems to be no functionallity implemented to listen for scroll events. So I tried to implement a JavaScript connector, that just informs the server-side UI, that the user has scrolled, so the server-side UI can then notify the Header as a scrollListener.
So far thats what I planned, but I just can't find out, how to implement my connector in a way that it.
is active after the site got requested by a Client.
is able to call my server-side UI.onScrollEvent() method.
Does anyone know, how the described behavior could be implemented?
Thank you for your help in advance.
After I ran into a few issues with implementaton of a custom widget to achieve, I went for a different approach, using extensions in a vaadin-sense. Here is the truncated code for what I did.
(Vaadin requires the client-side connector code shown later in this post to be in a Widget package. I'm not entirely sure if the server-side component has to be in one too, but for conformity reasons with the usual widget-skeleton I put it into one)
So in the package for the widget:
package my.company.project.scrollUI;
import com.vaadin.server.AbstractExtension;
import com.vaadin.ui.UI;
import my.company.project.scrollUI.client.scrollUI.ScrollUIServerRpc;
public class ScrollUI extends AbstractExtension {
private ScrollUIServerRpc rpc = new ScrollUIServerRpc() {
#Override
public void onScroll() {
//do whatever you need for your implementation
...
}
};
public ScrollUI() {
registerRpc(rpc);
}
public void extend(UI ui) {
super.extend(ui);
}
}
as usual the .gwt.xml file in the package folder, nothing special here:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.vaadin.DefaultWidgetSet" />
</module>
In the package for the client-side code to be compiled to JavaScript:
package my.company.project.scrollUI.client.scrollUI;
import com.vaadin.shared.communication.ServerRpc;
public Interface ScrollUIServerRpc extends ServerRpc {
public void onScroll();
}
And finally the connector for the extension:
package my.company.project.scrollUI.client.scrollUI;
import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.google.gwt.user.client.ui.Widget;
import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ServerConnector;
import com.vaadin.client.communication.RpcProxy;
import com.vaadin.client.extensions.AbstractExtensionConnector;
import com.vaadin.shared.ui.Connect;
#Connect(ScrollUI.class)
public class ScrollUIConnector extends AbstractExtensionConnector {
ScrollUIServerRpc rpc = RpcProxy.create(ScrollUIServerRpc.class, this);
#Override
protected void extend(ServerConnector target) {
final Widget ui = ((ComponentConnector) target).getWidget();
ui.addDomHandler(new ScrollHandler() {
#Override
public void onScroll(ScrollEvent event) {
rpc.onScroll();
}
}, ScrollEvent.getType());
}
}
Now don't forget to compile the Widgetset and everything is good to go to be used for your actual UI like all other vaadin extensions:
public class MyUI extends com.vaadin.ui.UI {
#Override
protected void init(VaadinRequest vaadinRequest) {
ScrollUI scrollUI = new ScrollUI();
scrollUI.extend(this);
//everything else that needs to be done
...
}
//everything else that Needs to be done
...
}
I hope this was helpfull for anyone with a similar issue.
I have done this once few years ago by extending the layout component that wrapped the part of UI where I needed this. In GWT there is gwtproject.org/javadoc/latest/com/google/gwt/event/dom/client/… which can be used in DOM handler. So yes, GWT provides suitable client side event. I then used RPC call to server side, where I triggered the corresponding server side event, which I could listen in other parts of the app. The code is not public, but there is LazyLayout add-on that has similar type of implementation, which you could check as reference for your implementation.
https://github.com/alump/LazyLayouts/blob/master/lazylayouts-addon/src/main/java/org/vaadin/alump/lazylayouts/client/LazyVerticalLayoutConnector.java
I have a dart function:
_addSelection(HtmlElement ele){
ele.classes.add("selection");
}
I would either want 1 or 2 things to occur, either A) execute an on-tap and on-track function given the selection class.... OR Dynamically add the on-tap and on-track attributes referencing reflected dart functions.
I have 2 functions:
#reflectable
onTap(CustomEventWrapper cew, params){
//...
}
#reflectable
onTrack(CustomEventWrapper cew, params){
//...
}
I was looking at the HtmlElement class and documentation and I wasnt quite understanding how to do this.
Edit if I were using jQuery and Javascript, I would be doing something as simple as:
$(document).on("tap", function(){});
$(document).on("track", function(){});
Edit2 Added Angular Dart because both designs leverage Dart backend and markup front end.
You could do:
_addSelection(HtmlElement ele) {
ele.classes.add("selection");
ele.onTouchEnd.listen((TouchEvent touch) {
...
});
}
That would give you something close to the tap event. If you wanted to get really fancy you could also listen for onTouchStart and only call your onTap handler when the time between the start and end is small.
OK, I'm on angular-dart 0.11.0, following the examples provided, applying the appropriate name changes and no joy. Here goes:
main.dart
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular/animate/module.dart';
part 'package:myapp/src/my_ctrl.dart';
part 'package:myapp/src/my_dir.dart';
class MyModule extends Module {
MyModule() {
install(new AnimationModule());
bind(MyCtrl);
bind(MyDir);
}
}
main() {
applicationFactory()
.addModule(new MyModule())
.run();
}
main.css
.my-base-class.ng-enter {
transition: all 2s;
opacity: 0.000001; /* to avoid some chrome bug? */
}
.my-base-class.ng-enter.ng-enter-active {
opacity: 1.0;
}
index.html
<div ng-if="ctrl.bool" class="my-base-class">my stubbornly refusing to animate content</div>
the animation related classes ('ng-enter', etc) don't seem to get applied. Instead, i see an 'ng-binding' class. I suspect that the current code doesn't even activate the animation feature but i don't know how to fix it as there are no error messages.
thanks in advance
Sorted it out, there was nothing wrong with the animation setup. The problem was on how I was initiating the animation. I was expecting some data from an ajax call and, of course, angular-dart cannot handle this on its own, it needs to be told about the change through 'scope.watch'
I'm trying to use Isolates in Dart. The tutorials from dartlang.org seem to use the function spawnFunction. But that does not seem to work for me. And I cant find any docs about this.
import 'dart:isolate';
void doThing() {
print('Hello!');
}
main() {
spawnFunction(doThing);
}
.
Unhandled exception:
No top-level method 'spawnFunction' declared.
The docs from api.dartlang.org mention Isolate.spawn but I get an error saying there is no static method spawn declared.
Did I miss something? A link to appropriate docs (if any) would be appreciated.
Thanks!
Isolate.spawn is indeed the new way of creating isolates. Your example would need to be rewritten as:
import 'dart:isolate';
void doThing(_) {
print("Hello!");
}
main() {
Isolate.spawn(doThing, null);
}
See https://groups.google.com/a/dartlang.org/forum/#!topic/misc/EVUMkZXFXtY for the breaking change announcement.