Wanted: Rikulo UXL example(s)

Question

I want to get some UXL working with the Dart Editor. I'm afraid that I feel the sample code on UXL Overview is either out of date or lacks some critical steps to let it perform. (See also: What is Rikulo dart really?, which directs people to the blogs).

I want to get up to speed with something like the UXL mark-up for the Dart environment. So are the only examples I've found are on the blog/documentation and the seem to be incomplete.

• https://github.com/rikulo/uxl

And it seems like it may not be 'just me' I find the examples confusing. Is a UXL mark-up a 'abc.UXL' or 'abc.uxl.XML' file? For now I'm looking at Rikulo because I see it as the kind of extremely helpful framework I like to see.

That said, please rikulo people, provide three or four examples that work with a few tweaks and a bit of thought.

I'll put that same thing out there for others wanting doing tools and frameworks. Examples teach. And make sure your examples always work. Make them part of your unit testing.

Cheers, Will.

Answer 1

AFAIK, all samples in the document shall work fine. If we changed spec, we will update the document accordingly.

You can name it .uxl or .uxl.xml, but I'd suggest .uxl.xml if your editor supports XML. Otherwise, you have to configure it to recognize .xul.

Not sure what critical steps you mean or expect. Better to provide a more specific question.

---

A helpful example [ed. Will] ...

I made a small addition to the ScrollView example that is saved on GitHub for the UXL project.

ScrollView.uxl.xml

<!-- ScrollViewTemplate -->
<?dart
part of ScrollViewDemo;
?>

<Template name="ScrollViewTemplate" args="rows: 30, cols: 30">
  <ScrollView class="scroll-view"
  profile="location: center center; width: 80%; height: 80%">
    <Apply forEach="r = 0; r < rows; ++r">
      <Apply forEach="c = 0; c < cols; ++c">
        <View style="border: 1px solid #553; 
              background-color: ${CssUtil.color(250 - r * 4, 250 - c * 4, 200)}"
              left="${r * 50 + 2}" top="${c * 50 + 2}"
              width="${46}" height="${46}">
         ( ${r}, ${c} )
        </View>
      </Apply>
    </Apply>
  </ScrollView>
</Template>

build.dart

//import 'package:polymer/builder.dart';
import 'package:rikulo_uxl/uc.dart';

void main(List<String> args) {
    build( args );
}

What makes this different from the GitHub example?

1. This includes the build.dart file
2. Each cell shows its coordinates. That shows two things.
   
   • How to use UXL values inside the UXL mark-up and
   • In the runtime it shows you how the scrolling works with the cells
3. This demo runs on Dart Editor download
   • Dart Editor version 1.3.0.dev_06_01 (DEV)
   • Dart SDK version 1.3.0-dev.6.1
   • The sample didn't work with the 6.0 version

I would also point out that for me, it seems unusual to need to download the UXL project to find one demo. And I need to clarify what a 'demo' might be to "me" as the code I downloaded wasn't an example of anything it just demonstrated one or three UXL features.

I understand people are busy and stuff. And still, in my opinion testing, integration, documentation and examples make 80% of a project the other 20% being code. Others have different opinions. (I think the proportions will be congruent if you have done this for more than 5 years though. Just guessing.)