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'
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 am trying to access a simple method from a service class in a component.
//myfriend.service.ts
export class MyFriendService(){
constructor(){}
testMe() {
window.alert("im friend service");
}
}
//myfriend.component.ts
import {Component} from 'angular2/core';
import {MyFriendService} from 'app/components/myfriend/myfriend.service';
#Component({
directives: [],
providers: [MyFriendService],
templateUrl: `app/components/myfriend/myfriend-view.html`
})
export class MyFriendCmp {
constructor(myFriendService: MyFriendService) {
myFriendService.testMe();
}
}
it is throwing an error
myFriendService.testMe is not a function.
I spent a lot of time in this to get this work.but still trying.Help me to figure this out. Thanks!.
Working Plnkr
Oh can you believe this? It took very long to figure it out. But you have put
not required parenthesis look at this line
export class MyFriendService() <=This parenthesis not required.
I have made two to three plunkr and every time it was working then took lot of time to figure this out that you have made problem with parenthesis.
export class MyFriendService{
constructor(){}
testMe() {
window.alert("im friend service");
}
}
I want to wait until my component is fully loaded. The current approach would be to implement the ShadowRootAware interface. However this does not work, if the component disables the use of shadow dom:
#Component(
selector: 'travel-step',
templateUrl: 'packages/TravelPlanner/travelstep/travel_step_component.html',
useShadowDom: false,
publishAs: 'cmp')
class TravelStepComponent extends AttachAware{
I need to disable the usage of ShadowDom, because I want to use styles from my parent object (e.g. Bootstrap). Is there another way to wait for the dom to be ready?
I want to reference a file upload input. At the moment (angular v.012) there seems to be no other way to upload a file.
You can implement ShadowRootAware interface. For example:
class NgFreeTree implements ShadowRootAware {
void onShadowRoot(ShadowRoot shadowRoot) { ... }
}
It should work regardless of useShadowDom attribute.
It does not give you the error message if you use the following signature:
void onShadowRoot(Node n) {
HtmlElement element = n;
...
}
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