UI Framework written in Dart

[John]

http://phylotic.blogspot.com/2011/11/update-on-luca-ui-framework-for-dart.html

It's open source on github at: https://github.com/LUCA-Studios-LLC/LUCA-UI-Framework-for-Dart

It's in the very early stages, as Dart is, but coming along nicely I
think.

[Ruudjah]

Nice :). Is it an idea to use interfaces instead of classes for UI
widgets like textbox, label et cetera? When more implementations
appear, we can use factories/DI-ish to easily switch implementations.

On Nov 23, 3:01 pm, John <pruj...@gmail.com> wrote:
> http://phylotic.blogspot.com/2011/11/update-on-luca-ui-framework-for-...

[John]

Thanks Ruudjah. Yes I could see adding support for that at some
point.

[Ruudjah]

Maybe not necessar at all:
https://groups.google.com/a/dartlang.org/group/misc/browse_thread/thread/84fe5c4ec4d280d1#

[Bob Nystrom]

This is very very cool. Keep us informed of your progress and any issues you run into.

- bob

[John]

Thanks Bob. And thanks for the great work you and the team are doing
with Dart. So far I'm finding it to be a very intuitive and powerful
language. I'm really pleased with how far I've been able to go with
this project while Dart is still in alpha stage.

The editor is my biggest frustration so far (I've been using the
feedback button quite a bit), but I know that will come along and
consider it the cost of doing business on the bleeding edge.

Regarding my project, ultimately I would like to provide some sort of
tooling capability to link declarative xml files directly with the
Dart editor. So the developer could have "strongly typed" access to
an xml-based representation of a layout. This would be something
analogous to what WPF/Silverlight does in Visual Studio with
"UserControl". I think the Android plug-in for eclipse has something
similar. Any plans for this type of extensible for the Dart editor?

John

On Nov 23, 1:15 pm, Bob Nystrom <rnyst...@google.com> wrote:
> On Wed, Nov 23, 2011 at 6:01 AM, John <pruj...@gmail.com> wrote:
>
> >http://phylotic.blogspot.com/2011/11/update-on-luca-ui-framework-for-...

[Ruudjah]

I am thinking to design a new ds language for UI. Core of it will use
interfaces/classes defined in a UI namespace, and then treating those
classes/interfaces as firstclass language constructs. Simply by
defining new UI widget/layout classes, the language can be extended.
Instead of

VerticalPanel vp = new VerticalPanel();
vp.add(new TextBox());

You'd do something like

VerticalPanel vp {
TextBox searchBox {
keyUp => doSearch()
text "enter query to search"
}
VerticalPanel searchResults {

}
}

to define a domain specific search UI. If it turns out a generic
searchbox makes sense to develop, you'd be able to write a new class
SearchBox, which has builtin background hourglass image, and a
specialized search function. It might look something like this:

VerticalPanel vp {
SearchBox searchBox {
search => doSearch()
}
VerticalPanel searchResults {

}
}

Just sharing rough thoughts here.

[John]

Your idea does provide a more succinct syntax from a programmatic
perspective, and I like that. However, for any UI framework to be
truly well-rounded (in my opinion), you need to separate concerns of
"design" vs "logic" (or if you will, View vs. View Model). So I would
prefer to create a declarative layer in xml, much like Xaml is to
WPF. This allows design tools - and importantly, designers - to more
easily work with the framework.

[Ruudjah]

Right. The actual code would live in Dart, the UI definition in some
codefile using the UI dsl. In above example, doSearch() would refer to
an actual function/method in a "code-behind" dart codefile.

I don't think using xml is a good idea though. There are very valid
arguments that xml is not really humanly-readable (as claimed often
with xml).

Note that SearchBox in above example would be just a regular Dart
class, the UI dsl just defines an instance. A SearchBox might have for
example a getter/setter "backgroundText" i.e. "enter name of author to
search for", which is set invisible when the user focuses on it.

[John]

I disagree. I can read xaml and know exactly what the presentation
layer intent is.

Poorly structured xml, with loose standards, is another matter
entirely.

[Bob Nystrom]

On Wed, Nov 23, 2011 at 12:25 PM, John <pru...@gmail.com> wrote:

Thanks Bob.  And thanks for the great work you and the team are doing
with Dart.  So far I'm finding it to be a very intuitive and powerful
language.  I'm really pleased with how far I've been able to go with
this project while Dart is still in alpha stage.

The editor is my biggest frustration so far (I've been using the
feedback button quite a bit), but I know that will come along and
consider it the cost of doing business on the bleeding edge.

Regarding my project, ultimately I would like to provide some sort of
tooling capability to link declarative xml files directly with the
Dart editor.

Out of curiosity, why XML? Is it just because it's familiar?

I like the idea of a declarative format for UI layout but these days XML is about my least favorite syntax for that. Have you considered JSON (which Dart already has a parser for) or YAML?

 

 So the developer could have "strongly typed" access to
an xml-based representation of a layout.

Templates and typing are something we've given some thought to but we haven't had much time to pursue it yet. We definitely feel it's important. The web is very much based around working with data in multiple different formats. A really great web framework needs to tie code, HTML, CSS, JSON, probably some SQL, and a few template languages together in a way that helps you find problems that span those formats. I haven't seen much out there yet that does that well (maybe Ur or Opa?).

Any plans for this type of extensible for the Dart editor?

I'm not aware of any but hopefully someone on the editor team will chime in.

- bob

[John]

I'm not married to XML. It is the most familiar to me (Xaml) coming
from the WPF/Silverlight world. I suppose my main goal on that topic
is to use something that strikes a balance between human readability
and succinctness. I can write Xaml from scratch, much like I can
write Html, because the syntax is well standardized and easily
constructed. On the other hand, Xaml can be incredibly verbose at
times, especially when you get into animation and control templates.

I'll take a look at the JSON approach - having something in a format
supported by a native Dart parser is certainly very attractive.

John

On Nov 28, 10:58 am, Bob Nystrom <rnyst...@google.com> wrote:

[John]

By the way, where is that JSON parser located?

[Justin Fagnani]

On Mon, Nov 28, 2011 at 2:36 PM, John <pru...@gmail.com> wrote:

By the way, where is that JSON parser located?

#import('dart:json');

then use JSON.parse(String) and JSON.stringify(Object)

-Justin

[Marty Pitt]

I'm a Flex developer, so I'm also pretty familiar with XML based
documents to decsribe UI layout (for us, MXML is to WPF's XAML)

I'd vote for XML in favour of JSON or YAML here. I know that XML is
out-of-favor these days, but I still think it's great for certain
things, including describing UI layouts.

Specifically, XML provides a clear way of seperating attributes of an
object from it's children object.

This is really clear:

<s:Group alpha="0.5" backgroundColor="#000000">
<s:Checkbox enabled="false" />
</s:Group>

In that it contains a partially visible group with a disabled
checkbox.

IMHO the similar layout described in JSON is more verbose, and less
clear:

group {
alpha: "0.5"
backgroundColor: "#000000"
children {
checkbox {
enabled: "false"
}
}
}

Additionally, XML gives the ability to provide qualified namespaces
(s:Checkbox vs mx:Checkbox - which resolve to the classes
flex.components.spark.Checkbox and flex.components.mx.Checkbox
respectively) where JSON doesn't tend to offer the same.

Also, - I may be a little late in relaying the message but - I think a
UI framework for Dart, which is separate from the DOM is a brilliant
idea.

On Nov 29, 9:40 am, Justin Fagnani <justinfagn...@google.com> wrote:

[Ladislav Thon]

This is really clear:

<s:Group alpha="0.5" backgroundColor="#000000">
   <s:Checkbox enabled="false" />
</s:Group>

In that it contains a partially visible group with a disabled
checkbox.

IMHO the similar layout described in JSON is more verbose, and less
clear:

group {
  alpha: "0.5"
  backgroundColor: "#000000"
  children {
      checkbox {
         enabled: "false"
      }
  }
}

I personally think that

group(alpha: 0.5, backgroundColor: "#000000") {

  checkbox(enabled: false)

}

would be even better. And it is actually valid Groovy syntax. Also, JavaFX Script (now Visage: http://visage-lang.org) did this rather nicely.

When choosing from XML, JSON and YAML, I'd definitely pick XML for describing UI layout, but I would still think that it is a poor choice.

Oh, and maybe Dart's proposed method cascades would work here too, not sure.

LT

[John]

@Marty & Ladislav

I'm hoping to build a capability in my library that is extensible, and
able to consume multiple UI formats, by using a provider model with a
IPresentationParser interface. So Xml and JSON are both on the table
in my view. Although, I prefer XML for readability and namespaces.

The consensus I am hearing, which validates my own thinking, is that
it is important to separate the presentation (design) component from
the implementation (code) component of any UI framework.

[Rob]

I'm from the Flex world as well, and understand the pull to MXML or
XAML.

However, I think a stripped-down YAML could be the bee's knees:

s-Group:
style: { alpha: 0.5, background: '#000000' }
s-Checkbox: { enabled: false }

[Rob]

Or, for that matter, something trivially parse-able, something
LISPlike.

(s:Group (alpha 0.5) (background #000000)
(s:Checkbox (enabled false)
)
)

[John]

Rob, I like both concepts.

[John]

I'd love to have someone collaborate on the project with me, focusing
on this piece. Hit me up here or on github if interested.

[funcoder]

Although i started learning dart 2 weeks ago, i would be very
interested and motivated to work on the UI framework for dart.
Dart rocks and i wanna be a small part of it ;-)

[John]

Cool :) Best thing to do to get started is follow the project on
github and get to know the framework a little bit. Then we can divide
and conquer after you get comfortable with it.

[John Evans]

Progress Report: http://phylotic.blogspot.com/2011/12/luca-ui-progress-report.html

[Lars Tackmann]

On Dec 26, 9:20 pm, John Evans <pruj...@gmail.com> wrote:> Progress
Report:http://phylotic.blogspot.com/2011/12/luca-ui-progress-
report.html
Cool work John!.
I know its a bit of extra work but if slapped together a demo app like
GWT showcase http://gwt.google.com/samples/Showcase/Showcase.html -
that would really help (since its pure client side you could just put
it on a github page).
I would start on it myself, but its christmas and I decided to spend
the holidays writing a HTML5 game in Dart instead ;)
Happy hacking