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. )