dart-webui

问题 I can make a String or a num type observable by using the @observable declaration in the Dart code: @observable var x = ''; and {{ }} syntax in the html: <div>x = {{x}}</div> But @observable does not work with Lists and Maps. How do I make those observable? 回答1: Use toObservable() with the List or Map as an argument. This creates a binding between the List or Map object and its representation in the UI. The following example uses toObservable() . Notice that the List and Map objects have data

问题 I have a rest API which I am calling to retrieve a PNG image to display on my page. My Code: void getProfilePicture(var pic_id) { request = new HttpRequest(); request.responseType = "blob"; request.onReadyStateChange.listen(onPicture); // Get Basic Auth credentials var authorization = 'Basic '+storage.loginData['password']; // Build JSON Map reqData = new Map(); reqData['id'] = pic_id.toString(); reqData['type'] = 'WEB_SMALL'; // SEND the request to the server. var url = sifted.serverAPI+'

问题 I've been attempting to learn enough html, css, and Dart to create my first web page and all is going well, except that I do not understand how to create a simple page and a server side web-socket server that will just echo it back. The examples that I find tend to illustrate other Dart tools and either connect to echo server on the web or do other things that make their code not simple for a newbie. I've tried to simplify Seth Ladd's example "dart-example-web-sockets-client" as the 'best'

问题 I'm currently working on translating our current Dart Web UI project to Polymer.dart. We use Bootstrap 3 for the front-end styling and many web animations (e.g. dropdown menus, modals, tooltips). However after I translated one Web UI component into Polymer, all the Bootstrap JavaScript stopped working for the sub component, since it was now encapsulated in the ShadowDOM. To access an element in the ShadowDOM from Dart I have to use the shadowRoot field, and from JavaScript in Chrome I have to

问题 I created a WebComponent where I created a constructor for it. When run, this constructor does not seem to be invoked, though the rest of the components work, but they have to be created outside my custom constructor. Here is an example of what I'm talking about. <element name="x-navigation" constructor="Navigation" extends="div"> <template> <div>{{items}}</div> </template> <script type="application/dart"> import 'package:web_ui/web_ui.dart'; class Navigation extends WebComponent { List

问题 Definition: <element name="x-card" constructor="Card" extends="div"> <template> <div>{{titleText}}</div> </template> <script type="application/dart"> import 'package:web_ui/web_ui.dart'; class Card extends WebComponent { String titleText = ''; } </script> </element> Instantiation: <x-card data-value="titleText:something"></x-card> or <x-card titleText="something"></x-card> Nothing is working. Here something is not a variable. Its a string literal. How do i go about passing it? Also what if i

问题 I am having problems adding web_ui to my existing dart application. I haven't even added any of the webui specific code to my html file, i'm just trying to build. I added the web_ui to pubspec.yaml and ran pub install. When i run my build.dart file, it generates: Uncaught Error: type 'AttributeName' is not a subtype of type 'String' of 'name'. This is what my build.dart file looks like (it is in root dir of my project): import 'package:web_ui/component_build.dart'; import 'dart:io'; void main

问题 Short Version: The custom web component example in the first link isn't working for me. Why not? I'm running this in Dartium. Long Version: I copied and pasted this Dart Web UI example from this tutorial into the Dart Editor and tried to run it. Nothing showed up on the page. I've used dart before but not with web components, so I noticed that one difference between this code and other code I've written is that there was no <script src="packages/browser/dart.js"></script> , so I added that at

问题 I've tried to bind a custom event handler to a WebComponent that has an EventStreamProvider exposed via a getter, but it comes back with " Class 'DivElement' has no instance getter 'onMainAction'. ". Trimmed down component .dart code... import 'dart:html'; import 'dart:async'; import 'package:web_ui/web_ui.dart'; class SegmentedButtonsListComponent extends WebComponent { static const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");

问题 Say I have a custom component with <head> <link rel="stylesheet" src="..."> </head> <body> <element name="elem"> <template> <ul class="foo"> ... where the referenced style sheet has an entry ul .foo { list-style-type: none; } The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul