Dart with RIkuloUI. Why is there no output?

107 Views Asked by At

Good evening Coders,

I have a serious problem with Dart and Rikulo_Ui to be more specific the problem only comes with Rikulo_Ui.

I am really a newbie to all Dart stuff so please be gentle and don't hesitate to ask for more infos.

My Problem is that as soon as I try to use Rikulo_ui components I only get to see a white Screen in my browser there is nothing displayed. Really nothing. The code bevore the rikulo part is invoked but the first call of a Rikulo method leads to the white screen error. So for this code:

import 'package:rikulo_ui/view.dart';
import 'dart:js' as js;
void main() {
  js.context.callMethod("alert",["Hello"]);
  final welcome = new TextView("Hello World!");
  welcome.profile.location = "center center";
  welcome.on.click.listen((event) {
    welcome.text = "Hi, this is Rikulo.";
    welcome.style.border = welcome.style.border.isEmpty ? "1px solid blue": "";
    welcome.requestLayout(); //need to re-layout since its size is changed
  });
  welcome.addToDocument();
}

The alert is invoked perfectly but then I only see a white screen. The developer tools of the dartium browser led me to the following exception:

package:rikulo_ui/src/view/view_impls.dart:26 Exception: No static getter 'browser' declared in class '_ViewImpl'.

NoSuchMethodError: method not found: 'browser'
Receiver: Type: class '_ViewImpl@107880211'
Arguments: [...]

I used pub with the configuration from the tutorial and just added the dependency rikulo_ui and used pub get and pub install.

The HTML file that should display my code looks as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="packages/rikulo_ui/css/default/view.css" />
</head>
<body>
<script type="text/javascript" src="packages/browser/interop.js"></script>
<script type="application/dart" src="HelloWorld.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>

The downloaded examples from the Rikulo side exited with the same error. I really just not able to use any Rikulo compoents. I also made sure that Dartium and Dart both have the same version (1.13.0).

Thank you for your help!

Regards, Torsten

2

There are 2 best solutions below

2
On BEST ANSWER

Please upgrade to the latest Rikulo UI (0.8.0). I fixed some incompatibility issues for the latest SDK.

2
On

Some suggestions not related to the problem related in your question but spare you some more issues when trying out Dart:

For all tools to work properly you should stick with the Pub package layout convention https://www.dartlang.org/tools/pub/package-layout.html

  • in a GitHub repository, the pubspec.yaml file should be at the top-level (no Dart subdirectory). This doesn't matter in this case but prevents to add the repository as a dependency in pubspec.yaml. https://www.dartlang.org/tools/pub/dependencies.html#git-packages

  • the web entry pages should be in the web top-level directory. This is more important.

  • just a Dart style guide recommendation: only use lowercase and underscore in file and package names. This ensures everything runs well on all operating systems.

  • add concrete version constraints instead of none or any. This often leads to unexpected old package versions when published old packages have no proper constraints itself, which sometimes happens these old versions are picked if there are resolution conflicts with recent packages because of incompatible constraints.