Re: [Lift] Re: Lift designer friendly templates & CSS-style binding

[David Pollak]

On Tue, Oct 26, 2010 at 7:50 AM, Indrajit Raychaudhuri <indr...@gmail.com> wrote:

David Pollak wrote:

On Tue, Oct 26, 2010 at 12:33 AM, Florian Hars <flo...@hars.de

<mailto:flo...@hars.de>> wrote:

   On Mon, Oct 25, 2010 at 08:46:22PM -0700, David Pollak wrote:
    > My mistake.  I corrected it and the code pushed to dpp_issue_695
   uses # for
    > selecting ids and . for selecting classes.

   While you are changing single characters, I think this

   <div id="content" class="lift:surround?with=default?at=content">

   is suboptimal as it forces everyone to constantly remember that this
   looks almost
   exactly like URL parameters, only you have to use question marks
   everywhere. Make
   that accept

   <div id="content" class="lift:surround?with=default&at=content">


The reason I stuck with question marks is because the above syntax is
not valid XHTML, it would have to be written:
<div id="content" class="lift:surround?with=default&amp;at=content">

And I figured that'd confuse people even more.

Do these do any better?

<div id="content" class="lift:surround?with=default+at=content">

Rough analogy (free form query params):
google.com/search?q=awesome+scala+lift+off

The + char is a space in URL Encoding land, so it doesn't make a good separator.
 

<div id="content" class="lift:surround?with=default;at=content">

Rough analogy (scala statement(s)):
val surround={with=default;at=content}

I could go with this.  What do others think?
 

   too, and everybody will understand the syntax without further
   thinking about it.

   - Florian

   --
   #!/bin/sh -
   set - `type -p $0` 'tr [a-m][n-z]RUXJAKBOZ [n-z][a-m]EH$W/@OBM' fu
   XUBZRA.fvt\
   angher echo;while [ "$5" != "" ];do shift;done;$4 "gbhpu $3;fraqznvy
   sKunef.q\
   r<$3&&frq -a -rc "`$4 "$0"|$1`">$3;rpub 'Jr ner Svt bs
   Obet.'"|$1|`$4 $2|$1`

   --
   You received this message because you are subscribed to the Google
   Groups "Lift" group.
   To post to this group, send email to lif...@googlegroups.com

   <mailto:lif...@googlegroups.com>.

   To unsubscribe from this group, send email to
   liftweb+u...@googlegroups.com

   <mailto:liftweb%2Bunsu...@googlegroups.com>.

   For more options, visit this group at
   http://groups.google.com/group/liftweb?hl=en.




--
Lift, the simply functional web framework http://liftweb.net
Beginning Scala http://www.apress.com/book/view/1430219890
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im
Surf the harmonics

--
You received this message because you are subscribed to the Google
Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to
liftweb+u...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/liftweb?hl=en.

--
You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.

--
Lift, the simply functional web framework http://liftweb.net
Beginning Scala http://www.apress.com/book/view/1430219890
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im
Surf the harmonics

[Indrajit Raychaudhuri]

David Pollak wrote:
>
>
> On Tue, Oct 26, 2010 at 7:50 AM, Indrajit Raychaudhuri
> <indr...@gmail.com <mailto:indr...@gmail.com>> wrote:
>
>
>
> David Pollak wrote:
>
>
>
> On Tue, Oct 26, 2010 at 12:33 AM, Florian Hars <flo...@hars.de
> <mailto:flo...@hars.de>

> <mailto:flo...@hars.de <mailto:flo...@hars.de>>> wrote:
>
> On Mon, Oct 25, 2010 at 08:46:22PM -0700, David Pollak wrote:
> > My mistake. I corrected it and the code pushed to dpp_issue_695
> uses # for
> > selecting ids and . for selecting classes.
>
> While you are changing single characters, I think this
>
> <div id="content" class="lift:surround?with=default?at=content">
>
> is suboptimal as it forces everyone to constantly remember
> that this
> looks almost
> exactly like URL parameters, only you have to use question marks
> everywhere. Make
> that accept
>
> <div id="content" class="lift:surround?with=default&at=content">
>
>
> The reason I stuck with question marks is because the above
> syntax is
> not valid XHTML, it would have to be written:
> <div id="content" class="lift:surround?with=default&amp;at=content">
>
> And I figured that'd confuse people even more.
>
>
> Do these do any better?
>
>
> <div id="content" class="lift:surround?with=default+at=content">
> Rough analogy (free form query params):
> google.com/search?q=awesome+scala+lift+off

> <http://google.com/search?q=awesome+scala+lift+off>

>
>
> The + char is a space in URL Encoding land, so it doesn't make a good
> separator.

Oh yes. Totally forgot about that.

>
>
>
> <div id="content" class="lift:surround?with=default;at=content">
> Rough analogy (scala statement(s)):
> val surround={with=default;at=content}
>
>
> I could go with this. What do others think?
>
>
>
>
> too, and everybody will understand the syntax without further
> thinking about it.
>
> - Florian
>
> --
> #!/bin/sh -
> set - `type -p $0` 'tr [a-m][n-z]RUXJAKBOZ
> [n-z][a-m]EH$W/@OBM' fu
> XUBZRA.fvt\
> angher echo;while [ "$5" != "" ];do shift;done;$4 "gbhpu
> $3;fraqznvy
> sKunef.q\
> r<$3&&frq -a -rc "`$4 "$0"|$1`">$3;rpub 'Jr ner Svt bs
> Obet.'"|$1|`$4 $2|$1`
>
> --
> You received this message because you are subscribed to the
> Google
> Groups "Lift" group.
> To post to this group, send email to
> lif...@googlegroups.com <mailto:lif...@googlegroups.com>

> <mailto:lif...@googlegroups.com <mailto:lif...@googlegroups.com>>.

>
> To unsubscribe from this group, send email to
> liftweb+u...@googlegroups.com
> <mailto:liftweb%2Bunsu...@googlegroups.com>

> <mailto:liftweb%2Bunsu...@googlegroups.com
> <mailto:liftweb%252Buns...@googlegroups.com>>.

[Mads Hartmann Jensen]

; fits me fine.

Wil probably resolve in an increase in smilies-looking-things in the templates but that's fine with me ;) 

Mads

[Florian Hars]

Am 26.10.2010 17:00, schrieb David Pollak:
> <div id="content" class="lift:surround?with=default;at=content">
>

> I could go with this. What do others think?

The W3C is with you:

http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.2.2

So the best thing would probably be to support both & and ; here and
where ever lift parses URL parameters.

- Florian.

[Naftoli Gugenheim]

I see. You just answered my next question!

The question after that one :) is, how to do nested iteration?

For instance, to take something I just did, say I need a table that contains a row for each User, and one column for user.email, and one column for each member of Role, a scala Enumeration. User has a MappedEnumList called roles. How would that look? In real life there's a checkbox for each user/role but for illustration purposes a static X is fine. 

On Mon, Oct 25, 2010 at 10:20 PM, David Pollak <feeder.of...@gmail.com> wrote:

On Mon, Oct 25, 2010 at 6:27 PM, Naftoli Gugenheim <nafto...@gmail.com> wrote:

Real neat!

Is this intended to be a general purpose replacement for binding that happens to be designer friendly, or are people not working with designers recommended to stick to regular binding?

The CSS selector mechanism is more flexible... for example:

"#chat_item *" #> List("Hello", "Dude", "Thing")

When applied to:

<ul>
  <li class="chat_item">Test</li>
</ul>

Becomes:

<ul>
  <li class="chat_item">Hello</li>
  <li class="chat_item">Dude</li>
  <li class="chat_item">Thing</li>
</ul>
 

Thus, a lot of the iteration that we do in standard binding goes away... it also takes care of https://liftweb.assembla.com/spaces/liftweb/tickets/690-implement-funcboxbindparam and https://liftweb.assembla.com/spaces/liftweb/tickets/629-option-bind--being-able-to-remove-large-portion-of-html-if-none

On Mon, Oct 25, 2010 at 8:39 PM, David Pollak <feeder.of...@gmail.com> wrote:

Folks,

I've finished a long slog of work to implement designer friendly templates.

First, the template:
<html lift:content_id="content">
  <head>
  </head>
  <body>
    <div id="content" class="lift:surround?with=default?at=content">
      <h2>Welcome to your project!</h2>
      <p>
    <span class="lift:HelloWorld.howdy">Welcome to your Lift app at
      <span id="my_time">now</span>
    </span>
      </p>
    </div>
  </body>
</html>

the lift:content_id attribute on the <html> tag tells Lift to find the element with the id "content" and start the page rendered at that node.  Lift will look for lift:content_id in templates served as HTML files as well as templates referred to in the embed snippet.

The next thing to note is that snippet invocation is done via the class attribute.  If Lift finds lift:xxx in the class attribute, it will invoke a snippet.  Note the lift:surround and lift:HelloWorld snippet invocations.

Next, let's look at the snippet:

class HelloWorld {
  lazy val date: Box[Date] = DependencyFactory.inject[Date] // inject the date

  def howdy = ".my_time *" #> date.map(_.toString)
}

Note that the howdy method returns a CSS-like selector.  This selector looks for the node with id of my_time and substitutes the String into the body of the node.  If the selector had been ".my_time", the <span> would have been replaced.  "#foo_bar" will select all nodes with the class "foo_bar".  "name=frog" looks for all elements with the attribute name which equals frog.  ".my_time [href]" will set the href attribute on the node with an id of "my_time".

You can group the selectors:

".my_time" #> myTime & ".my_name" #> <b>David</b>

Anyway, I'll be checking the code in and onto review board later tonight.

I'm very excited about the changes because they make Lift more concise, more friendly to designers, and it aligns Lift's binding/rewrite mechanism with jQuery and web technology.

Thanks,

David

[Naftoli Gugenheim]

I like ; too. "lift:surround;with=default;at=content" seems to visually parse better.

Other options might be "lift:surround(with=default,at=content)" (analagy obvious to all, at the cost of one extra character), or "lift:surround/with=default/at=content".

Actually, now that it's in a class attribute, is prefixing 'lift:' the best way to distinguish lift server-side element classes? What about using some symbol, e.g., class="!surround;with=default;at=content"? Or maybe ^, since pointing upwards can be seen as an allusion to "lift"! :)

class="green ^surround;with=default;at=content wide"

[David Pollak]

Okay... lift:surround?with=default;at=content or lift:surround?with=default&amp;at=content will both be supported
 

- Florian.

--

You received this message because you are subscribed to the Google Groups "Lift" group.
To post to this group, send email to lif...@googlegroups.com.
To unsubscribe from this group, send email to liftweb+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/liftweb?hl=en.