Sideways Coding

Lifty 1.6.1

2011-03-20T15:33:00.000-07:00

In the past two weeks Lifty 1.6 and 1.6.1 have been released. The following issues have been fixed:

Now works with paths that contain white-space
Now works on Windows
Templates have been improved and updated to use Lift version 2.3-RC3

I'm sorry that it has taken this long to fix these bugs. I was caught between Scala versions and was patiently waiting for the libraries that I use to update to Scala 2.8.x. With Timothy Perrett's book Lift in Action nearing its publication date I couldn't afford to wait any longer so two weeks ago I finally chose to create a patched version of the library that caused these issues and everything should be running smoothly now.

I'm by no means done working on Lifty - I've got some great ideas which I'll be working on but I'll cover that in another blog post.

For more information on Lifty see the site. For install guides go here

Thank you for your patience,
Mads

Introduction to type classes in Scala in 5 minutes

2011-01-19T12:47:00.000-08:00

The aim of this short blog post is to give you enough information about type classes (in Scala) that you won’t twitch every time someone mentions the subject on twitter. It will focus on one application of type classes: An alternative to ad-hoc polymorphism. Once you have more time I’d suggest reading the paper Type Classes as Objects and Implicits to get a better understand of the subject.

The above article states that type classes have two roles

Define a set of requirements for the type parameters used by generic algorithms
Propagate constraints automatically making generic algorithms convenient and practical to use

The first is achieved by defining a trait and the second by providing an implicit object which extends that trait for a given type and an implicit parameter to the generic algorithm.

Now to make it a bit less abstract lets use an example. Assume you want to write a method named ‘greedy’ which picks the largest of whichever two instances of the same class you pass to the method. For this we need to have some idea of the ordering of the instances. Instead of forcing the instances to extend some type you can accomplish it with type classes.

case class MyModel(val data: Int) 

trait Ord[T] { 
  def compare (x: T, y: T): Boolean
}

implicit object ordMyModel extends Ord[MyModel] { 
  def compare (m1: MyModel, m2: MyModel) = m1.data <= m2.data
}
 
def greedy[T](m1: T,m2: T)(implicit ordM: Ord[T]) = 
  if (ordM.compare (m1,m2)) m2 else m1

With the above code you can invoke the following in the REPL

val m1 = new MyModel(3) 
val m2 = new MyModel(5)
greedy(m1,m2)

The nice thing about this is that if you want to be able to use the method greedy with another type you simply have to implement and implicit object which extends the Ord[T] trait. This keeps the inheritance chain of your classes clean.

ENSIME Textmate Bunde preview

2010-11-04T17:17:00.000-07:00

For the last week or so I've been spending some of my spare time hacking on an ENSIME bundle for Textmate. I won't explain how to use it yet as it's still under development and everything might change from one day to another. But I do want to show you some of the features that I've already implemented.

You can watch the bundle on Github

Enjoy!

Lift TableSorter Widget

2010-10-24T02:37:00.000-07:00

I recently committed some changes to Lift's TableSorter widget which allows you to customize it's behavior in your Scala code. In this blog post I will show you how you can use the TableSorter widget in your code. I've also added this guide to the lift wiki

About the Widget

The TableSorter Widget is a wrapper for the jQuery Plugin TableSorter.

How to use it

The code

Lets start with some example code

import _root_.scala.xml.{NodeSeq, Text}
import _root_.net.liftweb.http.SHtml._
import _root_.net.liftweb.util.Helpers._
import _root_.net.liftweb.widgets.tablesorter.{TableSorter, DisableSorting, Sorting, Sorter}

class TableSorterDemo {
  
  val headers = (0, DisableSorting()) :: (3,Sorter("currency")) :: Nil
  val sortList = (3,Sorting.DSC) :: Nil
  
  val options = TableSorter.options(headers,sortList)
  
  def render(xhtml: NodeSeq) :NodeSeq = {
    TableSorter("#myTable", options)
  }  
}

The most import bit is this TableSorter("#myTable2", options) which will convert the DOM Node that matches the the CSS selector ‘#myTable’ into a sortable table. So the first argument is a CSS selector and the second is your configuration of the table. You can leave out the second argument if you just want the default configuration.

You create the configuration of the table by calling the TableSorter.options with a List of (int x TableSorterOption) and a List of (int x Sorting). Here’s what the headers and sortList configure.

The headers is a List of (int x TableSorterOption) which tells the table how it should sort the data in that column. You can disable sorting of that column by using DisableSorting() or you can specify a sorter using the Sorter class. Some of the possible options for the Sorter are: “shortDate, usLongDate, percent, isoDate, url, ipAddress, currency, digit, text, shortDate, time, metadata” but check the official plugin site for more information.

The sortList is a List of (int x Sorting) tuples which decides what the default sorting of the table should be (Ascending or Descending). You could add another tuple to the list and that would be the secondary sorting.

The Markup

The widgets will only work if you have a table with a <thead> tag. The following is an example from test source of the lift-widgets project.

<lift:TableSorterDemo />
<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Email</th>
            <th>Due</th>
            <th>Web Site</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Smith</td>
            <td>John</td>
            <td>jsmith@gmail.com</td>
            <td>$50.00</td>
            <td>http://www.jsmith.com</td>
        </tr>
        <tr>
            <td>Bach</td>
            <td>Frank</td>
            <td>fbach@yahoo.com</td>
            <td>$50.00</td>
            <td>http://www.frank.com</td>
        </tr>
        <tr>
            <td>Doe</td>
            <td>Jason</td>
            <td>jdoe@hotmail.com</td>
            <td>$100.00</td>
            <td>http://www.jdoe.com</td>
        </tr>
        <tr>
            <td>Conway</td>
            <td>Tim</td>
            <td>tconway@earthlink.net</td>
            <td>$50.00</td>
            <td>http://www.timconway.com</td>
        </tr>
    </tbody>
</table>

Table Sort a table on the go

By using TableSorter.jsRender("#myTable3", options).cmd you get a JsCmd that will convert a regular table to a TableSorter table on the fly.

Here’s an example of how to use it in a snippet

 def demo3(xhtml: NodeSeq) :NodeSeq = {
    bind("demo3", xhtml, 
      "btn" -> a( () => TableSorter.jsRender("#myTable3", options).cmd, Text("TableSorter that table!") ))
  }

This will convert a tag like this <demo3:btn /> into an ajax link which will convert the table that match the CSS selector ‘#myTable3’ into a sortable table.

Using TextMate for Scala Development

2010-08-31T09:31:00.001-07:00

I’ve been developing Scala using TextMate for a couple of months now. It’s been a pleasure but every once in a while I’ve stumbled upon features that were missing that would improve the experience. I couldn’t resist the urge to implement the most interesting of these features so while working on my GSoC Project, Lift and a commercial Scala project I set out to develop a SBT Plugin and a Scala Bundle.

In this blog post I’ll guide you through the installing progress, show you the robes and you’ll be off happily hacking Scala using TextMate shortly after that.

Just to get you excited I've taken some screen shots

Installation

The bundle

Installing and configuring the bundle is a three step process. First off download & install it by typing the following in your terminal (requires git):

git clone git://github.com/mads379/scala.tmbundle.git
open scala.tmbundle

Then add the shell variable SCALA_HOME in TextMate -> Preferences... -> Advanced -> Shell Variables to the root of your Scala installation. For me this is

/Users/Mads/dev/programming_languages/scala-2.8.0.final

Some of the features of the bundle uses ctags, so please add the following to your ~/.ctags file (If you haven’t got one, simply create one)

--langdef=scala
--langmap=scala:.scala
--regex-scala=/^[ \t]class[ \t]+([a-zA-Z0-9_]+)/\1/c,classes/
--regex-scala=/^[ \t]trait[ \t]+([a-zA-Z0-9]+)/\1/t,traits/
--regex-scala=/^[ \t]*type[ \t]+([a-zA-Z0-9]+)/\1/T,types/
--regex-scala=/^[ \t]def[ \t]+([a-zA-Z0-9_\?]+)/\1/m,methods/
--regex-scala=/^[ \t]val[ \t]+([a-zA-Z0-9]+)/\1/C,constants/
--regex-scala=/^[ \t]*var[ \t]+([a-zA-Z0-9]+)/\1/l,local variables/
--regex-scala=/^[ \t]package[ \t]+([a-zA-Z0-9_.]+)/\1/p,packages/
--regex-scala=/^[ \t]case class[ \t]+([a-zA-Z0-9]+)/\1/c,case classes/
--regex-scala=/^[ \t]*final case class[ \t]+([a-zA-Z0-9]+)/\1/c,case classes/
--regex-scala=/^[ \t]object[ \t]+([a-zA-Z0-9_]+)/\1/o,objects/
--regex-scala=/^[ \t]private def[ \t]+([a-zA-Z0-9_]+)/\1/pd,defs/

And that’s it! For more information about the bundle check out the Github project. If you haven’t done so already feel free to ‘watch’ the bundle. It encourages me when I see a new watcher ;)

The plugin

Now, for the bundle just visit this site and download the newest version of the plugin. At the time of writing this is Terminal-BETA-2.0.zip. Once you’ve downloaded it simply unzip it and double click the Terminal.tmplugin file.

You also have to add the SBT_PATH shell variable in TextMate. It has to point to a shell script that starts SBT without colors, here’s an example:

java -Xmx1512M -XX:+CMSClassUnloadingEnabled -Dsbt.log.noformat=true  -XX:MaxPermSize=256m -jar dirname $0/sbt-launch-0.7.4.jar “$@”

My SBT path is set like this:

SBT_PATH = /Users/Mads/dev/tools/sbt/sbtnocolors

Now relaunch TextMate (I’m pretty sure this is necessary) and open the TextMate preference. The plugin should’ve added a new tab called SBT Console. In this view you can change the colors of error messages etc. so it matches your current theme.

Using it

The bundle

Like any other TextMate bundle this bundle includes a language definition which tells TextMate how it should highlight the file, indention rules, comment rules etc. The syntax definition for this bundle have been greatly improved by Paul Phillips. Paul Phillips works on the Scala compiler (to my knowledge) so the syntax highlighting is pretty precise.

Besides the basic language definition it comes with a set of snippets also. The best way to explore these is by hitting ctrl+escape in a .scala file and check out the menus.

Now for the fun part. The bundle also comes with a set of commands. I’ll go through the most awesome ones now.

Navigation (⌘⇧c)
This is my all-time favorite. This will display a pretty list of all the traits/classes/objects/types in the project. Simply pick the one you want and press enter and Textmate will jump to the appropriate line in the file where you declare that class/trait (etc.). This command requires you to have an index file of the project. To create one hit ⎇⌃⌘t.
Comments
- Javadoc for line (⌃⇧d)
  This will analyze the the current line and add the appropriate documentation for the line (i.e. correct @param etc.)
- New javadoc line (shift-enter in comment scope)
  This will create a new correctly indented comment line.
Refactoring
- Organize imports (⌃⇧o)
  This will take the current selection and organize the imports alphabetically.
- Reformat Document (⌃⇧h)
  This will reformat the current document using Scalariform (http://github.com/mdr/scalariform).

The plugin

The plugin is of course only relevant to you if you’re using SBT. But who am I kidding. Of course you’re using SBT.

Open a TextMate project - so just any folder that contains a SBT project. Now hit ⌃⇧1 to toggle the SBT console. Now you can start an interactive SBT session by typing sbt shell or you can run a single command by typing sbt compile or whatever command you want. You can toggle focus between the document and console by hitting ⌘⇧1

If any errors/warnings happen it will link to the appropriate line in the file that contains an error. Try removing a { or similar to try it out.

Thats it. Thanks for Reading,
Mads Hartmann

It's Chat App Time

2010-07-31T03:01:00.000-07:00

This is now the "Getting started" page on Lift's website

I have the honor to represent the demo that David Pollak gives all the time, it's the ubiquitous Lift chat app.

In this article I'll show how you can create a comet-enabled chat application using Lift. I will show all the code you need to get it working and walk through the lines step by step to give you an understanding of what's happening. In the end I'll show how to enhance the application with some extra functionality and a few effects.

Before we begin I want to say a quick word about comet in case it's the first you've heard of it. Comet describes a model where the client sends a request to the server. The request is hanging till the server has something interesting to response. As soon as the server responses another request is made. The idea is to give the impression that the server is notifying the client of changes on the server.

To get started install the Simple Build Tool (aka sbt) and download the TAR or Zip of the default Lift project and un-tar or un-zip the file.

Now cd into the new folder and type sbt update to grab the dependencies.

Next, spark up your editor of choice and create the src/main/scala/code/comet/Chat.scala file. Put the following code into Chat.scala:

package code.comet
  
import net.liftweb._
import http._
import actor._
  
object ChatServer extends LiftActor with ListenerManager {
  
  private var messages = List("Welcome")
  
  def createUpdate = messages
  
  override def lowPriority = {
    case s: String => messages ::= s ; updateListeners()
  }
}
  
class Chat extends CometActor with CometListener {  
  
  private var msgs: List[String] = Nil  
  
  def registerWith = ChatServer  
  
  override def lowPriority = {
    case m: List[String] => msgs = m; reRender(false)  
  }  
  
  def render = {  
    <div>
    <ul>
    {
      msgs.reverse.map(m => <li>{m}</li>)
    }
    </ul>
    <lift:form>
    {
      SHtml.text("", s => ChatServer ! s)
    }
    <input type="submit" value="Chat"/>
    </lift:form>
    </div>
  }
}

In your src/main/webapp/index.html file, put the tag: <lift:comet type="Chat"/> and run the app by typing the following in your console:

sbt ~jetty-run

Now browse to http://localhost:8080 with multiple browsers and you have your chat app. Pretty cool huh? Lets walk through the code to figure out how it all fits together.

object ChatServer extends LiftActor with ListenerManager {
  
  private var messages = List("Welcome")
  
  def createUpdate = messages
  
  override def lowPriority = {
    case s: String => messages ::= s ; updateListeners()
  }
}

We're doing a couple of things here. In the first line we're defining a chat server as an object (singleton) that's a LiftActor and that can manage listeners by mixing in the ListenerManager trait.

In the implementation of our ChatServer we're creating a private list of strings that we'll use to store the messages posted by the clients. The createUpdate method is called when the updateListeners method needs a message to send to the subscribed Actors. Here's it's simply returning all the messages posted to the server.

Lastly we're overriding the lowPriority method where we're pattern matching against the messages sent to us. If the message is a string we're simply adding it to the list of messages and telling all the listeners that something happened by invoking the updateListeners method which we got by mixing in the ListenerManager trait.

lowPriority is just one of three methods (lowPriority, mediumPriority, hightPriority) you can override to process the messages. As the names may suggest the three methods lets you prioritize your messages.

class Chat extends CometActor with CometListener {

Here we're defining our chat component that knows how to push updates to the browser and interact with the ChatServer.

private var msgs: List[String] = Nil

This is where we'll store our local state.

def registerWith = ChatServer

Here the component is registrering itself with the ChatSever so it will get notified of any changes.

override def lowPriority = {
  case m: List[String] => msgs = m; reRender(false)
}

This is where we implement how our component will handle the messages from our ChatServer. We're simply updating our local state (msgs) and invoking reRender(false). false tells Lift that we don't want to rerender the entire page but just the comet component.

def render = {
  <div>
  <ul>
  {
    msgs.reverse.map(m => <li>{m}</li>)
  }
  </ul>
  <lift:form>
  {
    // a <lift:form> is an Ajax form.  Define our
    // input box that sends the message to the chat server
    SHtml.text("", s => ChatServer ! s)
  }
  <input type="submit" value="Chat"/>
  </lift:form>
  </div>
}

Here we're telling the component how to render itself. But, OMG... we've mixed view logic with our Scala code, gaaakkk... sputter... barf. Yes, Lift allows you to mix view into your business logic, but it's a choice. Here's how we can break the code out to separate the view from the logic. The critical thing to keep in mind is that we did not change our logic at all in order to achieve the separation.

First, let's update our view (src/main/webapp/index.html) to:

<lift:comet type="Chat">
  <ul>
    <chat:line>
      <li><chat:msg/></li>
    </chat:line>
  </ul>
  <lift:form>
    <chat:input/>
    <input type="submit" value="chat"/>
  </lift:form>
</lift:comet>

The view now contains the definition of the layout with "bind points" where dynamic content will be inserted.

Next, let's update our Chat component's render method. Replace the def render = line through the end of the file (except the closing brace) with:

// import NodeSeq... yes, this can be done inside any scope in Scala
import scala.xml.NodeSeq

def render =
    bind("chat", // the namespace for binding
         "line" -> lines _, // bind the function lines
         "input" -> SHtml.text("", s => ChatServer ! s))

private def lines(xml: NodeSeq): NodeSeq =
  msgs.reverse.flatMap(m => bind("chat", xml, "msg" -> m))

Instead of using inline xhtml we're using the bind method. You'll find the bind method in the BindHelpers trait and it is used to bind real content to the binding points of your templates.

In this code we're binding content to tags with the namespace chat. The last argument of bind is repeatable and accepts BindParam. So the second and third line of the bind statement are really instances of BindParam and should be read: "replace the tag <chat:line> with the return value of invoking lines" and "replace the tag <chat:input> with the return value of invoking the text method on the SHtml object".
You might notice that we aren't specifying which xml to bind to in our bind statements like we've done previously. This is because the markup passed to the comet component when it is instantiated (i.e. every child node of <lift:comet type="Chat">) is kept around and that's what we're binding against.

the method lines simply takes a NodeSeq and returns a NodeSeq. It reverses the list of messages so the newest message will be at the end of the list and flatMaps the list of messages into the proper xhtml by using the bind method. Note that we have to use flatMap instead of map, because map would result in a Seq[NodeSeq] instead of the expeced NodeSeq (Seq[Node]).

The text method of the SHtml object returns an input field. The method takes two normal arguments and a repeatable one. The first is the initial value of the input field and the second is a function that takes a string and returns Any ((String) => Any). This function will be invoked when the form is submitted. Our function takes a string s and sends that string to our ChatServer using the bang (!) method.

I hope this has helped you gain a better understanding of what the code does. Now, it would be quite dull if all I did was recite the demo that David has done numerous times - Lets see if I can't spice the demo application up a bit to provide some extra functionality.

Lets add the following to our application

It should be possible to delete messages
When a message is deleted/added it should fade out/in

To achieve this lets start editing the view (src/main/webapp/index.html) so it looks like this:

<lift:comet type="Chat">
  <ul id="ul_dude">
    <chat:line>
      <li><chat:msg/> <chat:btn/></li>
    </chat:line>
  </ul>
  <lift:form>
    <chat:input/>
    <input type="submit" value="chat"/>
  </lift:form>
</lift:comet>

Not a whole lot change in the view, we simply added a new tag <chat:btn/> and added an id attribute to the <ul> tag. So lets fast forward to the exciting part. Changing the ChatServer and Chat.

Start by adding the following imports to your src/main/scala/code/comet/Chat.scala file:

import js._
import JsCmds._
import js.jquery.JqJsCmds.{AppendHtml, FadeOut, Hide, FadeIn}
import java.util.Date
import scala.xml._

Now that we've got the right classes imported lets start looking at the actual code, again in your src/main/scala/code/comet/Chat.scala file add the following:

sealed trait ChatCmd

object ChatCmd {
  implicit def strToMsg(msg: String): ChatCmd =
    new AddMessage(Helpers.nextFuncName, msg, new Date)
}

final case class AddMessage(guid: String, msg: String, date: Date) extends ChatCmd
final case class RemoveMessage(guid: String) extends ChatCmd

In the two last lines we're creating two case classes (the final keyword means you can't subclass them). We're going to send instances of these classes between the client and server instead of strings as we did earlier. We're also creating an object named ChatCmd which has an implicit conversion from string to AddMessage as this will simplify the code in Chat as we'll be able to send the string the user entered in the input field and let the implicit conversion do the work of instantiating an instance of AddMessage.

The Helpers.nextFuncName simply creates a unique string based on the current time and a random String generation. We use it here as a unique id for both AddMessage and RemoveMessage.

Now lets take a look how we need to change the ChatServer:

object ChatServer extends LiftActor with ListenerManager {
  
  private var messages: List[ChatCmd] = List("Welcome")
  
  def createUpdate = messages
  
  override def lowPriority = {
    case s: String => messages ::= s ; updateListeners()
    case d: RemoveMessage => messages ::= d ; updateListeners()
  }
}

Instead of using a list of strings to store our messages we're using a list of ChatCmd (both AddMessage and RemoveMessage are subclasses of ChatCmd). The lowPriority message has also changed a bit. We're pattern matching against the message and if it's a string we simply add it to the list of ChatCmd ... but wait ... String isn't a subclass of ChatCmd so surely this doesn't compile. Oh, but it does, this is where our implicit conversion from String to AddMessage comes in handy. The compiler does notice that String isn't a subclass of ChatCmd but before it starts complaining it checks if there is any implicit conversion in scope that might be able to solve the type problem and in this case there is.

Finally lets take a look at the Chat. Replace the following implementation of Chat with the one currently in your file:

class Chat extends CometActor with CometListener {  
  private var msgs: List[ChatCmd] = Nil  
  private var bindLine: NodeSeq = Nil

  def registerWith = ChatServer  
  
  override def lowPriority = {
    case m: List[ChatCmd] => {
      val delta = m diff msgs
      msgs = m
      updateDeltas(delta)
    }
  }  

  def updateDeltas(what: List[ChatCmd]) {
    partialUpdate(what.foldRight(Noop) {
      case (m: AddMessage , x) =>
        x & CmdPair(AppendHtml("ul_dude", doLine(m)), 
                    CmdPair(Hide(m.guid), FadeIn(m.guid, TimeSpan(0),TimeSpan(500))))
      case (RemoveMessage(guid), x) =>
        x & CmdPair(FadeOut(guid,TimeSpan(0),TimeSpan(500)),
                    After(TimeSpan(500),Replace(guid, NodeSeq.Empty)))
    })
  }

  def render =
    bind("chat", // the namespace for binding
         "line" -> lines _, // bind the function lines
         "input" -> SHtml.text("", s => ChatServer ! s)) // the input
  
  private def lines(xml: NodeSeq): NodeSeq = {
    bindLine = xml
    val deleted = Set((for {
      RemoveMessage(guid) <- msgs
    } yield guid) :_*)

    for {
      m @ AddMessage(guid, msg, date) <- msgs.reverse if !deleted.contains(guid)
      node <- doLine(m)                              
    } yield node
  }

  private def doLine(m: AddMessage): NodeSeq =
    bind("chat", addId(bindLine, m.guid),
         "msg" -> m.msg,
         "btn" -> SHtml.ajaxButton("delete", 
                                   () => {
                                     ChatServer ! 
                                     RemoveMessage(m.guid)
                                     Noop}))
              

  private def addId(in: NodeSeq, id: String): NodeSeq = in map {
    case e: Elem => e % ("id" -> id)
    case x => x
  }
}

Bam, If you restart the jetty server and browse to http://localhost:8080 after pasting in the above code you should have a chat application with fancy fading messages and the ability to delete old messages. I hope this is enough to keep your motivated as we walk through the code. Lets take it from the top:

private var msgs: List[ChatCmd] = Nil  
private var bindLine: NodeSeq = Nil

def registerWith = ChatServer

We're declaring a list of ChatCmd which we'll use as our local state (ChatCmd instead of String) and a NodeSeq called bindLine which I'll talk about later when we're using it. We're still registering with ChatServer.

override def lowPriority = {
  case m: List[ChatCmd] => {
    val delta = m diff msgs
    msgs = m
    updateDeltas(delta)
  }
}

Again, the lowPriority method is the one that deals with the messages sent from the ChatServer. We're pattern matching against the messages and if it's a list of ChatCmd we're calculating the difference between the new list and our local state using the diff method on List and store the result in the variable delta. Then we're replacing our local state with the new list and finally we call updateDeltas with delta. Now lets take a look at what updateDeltas actually does:

def updateDeltas(what: List[ChatCmd]) {
  partialUpdate(what.foldRight(Noop) {
    case (m: AddMessage , x) =>
      x & CmdPair(AppendHtml("ul_dude", doLine(m)), 
                  CmdPair(Hide(m.guid), FadeIn(m.guid, TimeSpan(0),TimeSpan(500))))
    case (RemoveMessage(guid), x) =>
      x & CmdPair(FadeOut(guid,TimeSpan(0),TimeSpan(500)),
                  After(TimeSpan(500),Replace(guid, NodeSeq.Empty)))
  })
}

We're calling partialUpdate which is declared in CometActor and takes a JsCmd as it's only argument. As the name may suggest partialUpdate is used to do partial updates of your comet component. The exciting part of updateDeltas is how we convert a List[ChatCmd] into a JsCmd. Lets take a look.

We declared what as an argument of updateDeltas. We're calling foldRight on what which is a method on List that has the following method signature foldRight [B](z : B)(f : (A, B) => B) : B. Unless you're used to reading Scala code this doesn't help you much, so here's the explanation of foldRight from the Scala Library Documentation: Combines the elements of this list together using the binary function f, from right to left, and starting with the value z.

In our case we're currying it with Noop which extends JsCmd and basically is an empty javascript statement. In the binary function we're pattern matching against the arguments which is the current element from the list starting from the right-most element and the cumulated value of foldRight so far.

If the element is an instance of AddMessage we're doing a couple of things, first off we're chaining javascripts calls using CmdPair which takes two arguments of type JsCmd. The left-most argument well be invoked before the right-most one. We're also using the AppendHtml object declared in JqJsCmds which has an apply method def apply(uid: String, content: NodeSeq): JsCmd that takes the id of the node to append html to, in this case it's our UL tag with the id ul_dude. The second argument is the NodeSeq to append. In this case we're calling the doLine method with our instance of AddMessage. Well go through that method in due time don't worry. For the second argument of the first CmdPair we're chaining together another CmdPair where we're hiding the html we've just created using the Hide class and then we're using the FadeIn object to fade in the message. Had this not been a demo I would probably have added a css class to the newly created messages with the display property set to none and then simply fade in the messages ones added.

In the second match statement we're using Scala Extractors to fetch the value guid of RemoveMessage. For more information about extractors read this. If the unapply method on RemoveMessage was successful (i.e. returned Some) we're using CmdPair once more. First we're fading out the message using FadeOut and then we're creating an instance of After which allows us to invoke a JsCmd after waiting for the amount of time specified in the instantiation of After. The JsCmd we're handing to After is an instance of Replace which we use to replace the node with id guid with NodeSeq.Empty (i.e. nothing).

In each case we're using the & method on JsCmd to combine the new JsCmd with the cumulated JsCmd which means that the entire foldRight method wil results in a JsCmd that will remove all unwanted messages and add all the new ones on the fly with Javascript. Neat!

The render method hasn't changed so we can skip that. The lines method however has, so lets take a look at it:

private def lines(xml: NodeSeq): NodeSeq = {
  bindLine = xml
  val deleted = Set((for {
    RemoveMessage(guid) <- msgs
  } yield guid) :_*)

  for {
    m @ AddMessage(guid, msg, date) <- msgs.reverse if !deleted.contains(guid)
    node <- doLine(m)                              
  } yield node
}

The first thing we're doing is storing the xml in the private variable bindLine (the one I mentioned earlier). We're storing it because we need to use it in the doLine method that I'll explain next. Next we're creating a local variable deleted that we'll use to store the guid of all the messages that should be deleted. We find all the deleted messages by using a for comprehension. We're yielding the guild of all the objects in msgs (our local list of messages) by using the RemoveMessage extractor (which I explained earlier) in our for-comprehension. The for-comprehension returns a List so if we pass it to Set(..) we'll get a Set with Lists instead of a Set of String. To avoid this we're using :_* which tells scala to pass each element of the list to Set as a separate argument.

Next we're using yet another for-comprehension. This time we want to do something with all the instances in msgs (reversed) that isn't part of set of deleted messages. In the second line we're storing the result of invoking doLine with the message. Again we're yielding the result of the for-comprehension so the result of the for-comprehension will be NodeSeq.

Finally it's time to take a look at doLine:

private def doLine(m: AddMessage): NodeSeq =
  bind("chat", addId(bindLine, m.guid),
       "msg" -> m.msg,
       "btn" -> SHtml.ajaxButton("delete", 
                                 () => {
                                   ChatServer ! 
                                   RemoveMessage(m.guid)
                                   Noop}))

We're using the bind message to bind content to nodes with the prefix chat in the NodeSeq returned by calling addId with bindLine and the guid of the AddMessage passed to doLine. We'll look at addId next. The new thing in this bind statement is the invocation of SHtml.ajaxButton(...). The AjaxButton of the SHtml object takes two arguments, the text of the button and a function that takes zero arguments and returns a JsCmd that will get invoked when the button is clicked. In this case we're setting the value of the button to delete and the function sends a RemoveMessage with the guid of the current message to the ChatServer followed by Noop.

Now lets take a look at the very last method:

private def addId(in: NodeSeq, id: String): NodeSeq = in map {
  case e: Elem => e % ("id" -> id)
  case x => x
}

It takes a NodeSeq and a String. It simply matches against the NodeSeq: If it's an Elem (scala.xml.Elem) it simply adds the attribute id with the value of the argument id. If it's anything else (well it has to be NodeSeq or a subclass of NodeSeq or else the compiler would have complained) it just returns that.

And thats it! I hope this have given you some taste of what Lift is able to do. If you have any feedback please don't hesitate to communicate it to the community.

Textmate Javascript API

2010-05-03T14:03:00.000-07:00

TextMate has a lot of really cool APIs that you might not be aware of. The biggest one as far as I know is the Ruby wrapper which is really impressive. I'll write a post about that on a later date.

In this post I'll cover the Javascript wrapper. This is how the LaTex Bundle allows you to typeset/clean/etc. your tex files by clicking on buttons.

How to use it

When you display output as HTML you have access to the TextMate javascript object. One very interesting method of the TextMate object is the system method which enables you to run system (shell) commands from Javascript.

Here's an example from the Javascript Console bundle I'm currently working on:

var JsConsoleHelper = (function() {

 var helper = {};
 
 helper.openGlobalConfig = function() { 
  var cmd = 'cd "${TM_BUNDLE_SUPPORT}"; mate jsconsole_config.yaml',
    myCommand = TextMate.system(cmd);
  myCommand.onreadoutput = function(str) { console.log("read: " + str); };
  myCommand.onreaderror = function(str) { console.log("error: " + str); };
 };
 
 helper.openProjectConfig = function() {
  var cmd = 'cd "${TM_PROJECT_DIRECTORY:-$TM_DIRECTORY}"; mate jsconsole_config.yaml',
    myCommand = TextMate.system(cmd);
  myCommand.onreadoutput = function(str) { console.log("read: " + str); };
  myCommand.onreaderror = function(str) { console.log("error: " + str); };
 };
 
 return helper;
 
})();

The system function returns a RuntimeObject. It has hooks for handling output and error output. In my example I currently just write to the console but what you would most likely want to do is update the DOM in some way to notify the user of what's going on.

Novel TextMate theme

2010-03-25T13:30:00.000-07:00

I'm addicted to changing my TextMate theme and recently I've run out of themes to switch between - So I though wth, I'll create my own.

However as I don't have a single design bone in my body I was just picking random colours and the result was pretty hideous - So I though it might be better to get 'inspiration' somewhere else and I picked one of the standard themes of Terminal.app

Comments "that theme makes programming look like a walk in the park some late afternoon with your best friend & toffee #goodstuff"
@pokho

Right now I've only created Novel but I reckon It won't be long before I give Red Sands a shot too. Take a look:

Grab the themes at github

As always, feel free to fork me and help out :)

Textmate Lift bundle v0.2

2010-03-03T14:53:00.000-08:00

I finally found the time to sit down and hack a bit more on the Lift bundle for TextMate - I've also created a little teaser-video to show you what it's capable of

I forgot to show that it's capable of inferring the type of the following variable 'test' also.

var test = new WhatEver
test.

So you don't have to declare the type ':WhatEver' if you're using the new keyword

Lift Textmate bundle now with primitive code-completion

2010-02-22T02:59:00.000-08:00

It's now been two weeks since I said I would have developed further on the Lift TextMate bundle in one week so I though I'd better start writing ;)

Last time I said I would implement the following features

Primitive autocompletion for methods of the current objet. This is only realistic when the type of the object has been explicitly stated in the document
Snippet output
Images in the drop-down list that indicates if it's a function, object or a class

And so far I've managed to get #1 and #2 done, I'm fairly happy with the result even though it's not that clever when it comes to working out the type of a variable - I'll be teaching it a thing or two before the next release

What is planned for the future:

Improving the type interference (it's extremely lightweight now)
Teach it about packages to help your organize/add/remove imports

NB: Ctags was created to help the developer navigate source files and as such it doesn't record each function in each Class/Object/Trait but instead each function in each of the files it analyzes. This means that you might get some weird suggestion if there's more than one class in each file. But don't worry the compiler won't allow you to do anything illegal :)

I'll be rolling out my own static analyzer when I get the time (hopefully soon) to address this issue

Requirements

If you don't have it already install ctags
Add the contents of this file to your .ctags file. If you don't have one already simple place this one in your home folder (~/)

How to get started

Download the bundle here
Add the following shell variables to TextMate LIFTWEB_PATH - point it to the lift source code for me this is /Users/Mads/Dev/liftweb/framework/. If you don't have it download it here and SCALA_LIBRARY_PATH - point it to the scala library source code for me this is /Users/Mads/Dev/scala-2.7.7.final-sources/src/library/ you can download it here
Create the ctags file by pressing cmd+shift+c
Code, code, code - try hitting option+escape every once in a while to see if it works

As stated above it's not very good at figuring out the type of a variable yet - in fact it only knows what type to look for when you explicitly state it like so:

val myList :Array[String] = "H,e,l,l,o".split(",")

This is not very convienient as it forces you to drop type-interference, however, if you want to get a list of the methods List has you can simply type 'List.' and hit option+escape

Remember this is still extremely beta - It works for me but I can't promise it will work for you. If you find any issues feel free to fork me on github and help me out :)

The making of http://www.robocatapps.com/stickers

2010-02-09T12:13:00.000-08:00

I recently coded a small one-pager for Robocat Apps and thought it would be fun to record the process. Slicing out the .psd file and coding the markup/css took about 1 hour and 50 minutes from scratch. The movie doesn't show the initial slicing of the photoshop file because frankly, that's now very interesting to look at ;)

I'm using:

Textmate for editing
the compass framework which has a nice list of mixins to use and to do continuous compilation of the sass code to css
chrome (webkit) to test the site

Check it out:

Class-level autocompletion for Lift-based projects in Textmate

2010-02-08T08:35:00.000-08:00

I'm currently working on a bundle for Textmate that brings autocompletion for Lift-based scala projects to Textmate. It's very very primitive right now - It only knows how to complete partial typed classes and the ouput isn't snippets so you can't use tab to jump through the different arguments.

I'm planning to implement the following the next week or so:

Primitive autocompletion for methods of the current objet. This is only realistic when the type of the object has been explicitly stated in the document
Snippet output
Images in the drop-down list that indicates if it's a function, object or a class

I'm using:

ctags to index the classes, methods, objects etc. in every file in the lift project
grep to find the lines in the ctags file that are relevant
34 lines of ruby to match the class names and arguments from the lines returned by grep

Here's a small demo of it so far:

Creating Textmate bundles

2010-02-07T03:33:00.001-08:00

I know a lot of people are anticipating the release of Textmate 2 and I can understand why. The current version of Textmate is awesome, so awesome that it's hard to image that whatever Alan Oddegaard and XXXX has spent the last three years on will be nothing short of mind blowing.

But to be honest I'm quite happy with Textmate 1.5.9 and ... I checked out the top 20 list of requested features and on top 5 was "Code completion for language «xyz»" - I'm sorry to say it but I doubt Textmate 2 will ship with code completion support for your favorite language. So what to do then? Just dump Textmate (your favorite editor) all-together and use a bloated IDE? Don't be silly, you implement it yourself of course! This post will guide you through the process and in the end you should have a good idea of what to do next to get code completion for favorite language in Textmate

If you're about to leave this post I'm sorry but you don't deserve code-completion - If you're not ready to do a little bit scripting you don't want it enough.

The following is a small list of tools we'll use to make it a lot easier to implement

Ctags
Exuberant Ctags is a multilanguage implementation of Ctags which supports 41 different programming languages. We use it to recursively scan a folder of source files and output a list with a line for each class, method, interface <<whatever programming constructs your language uses>>
Dialog2
This is a ruby wrapper that is bundles with Textmate it's what we'll use to display the drop-down list of potential completions
grep
grep (global / regular expression / print) from wikipedia: The grep command searches files or standard input globally for lines matching a given regular expression, and prints them to the program's standard output.
small amount of ruby scripting
If you don't know ruby then don't worry, I don't really know it either xxx link to _why xxx should be enough to get your started (It's quite fun!)

Just to convince you that I'm not all talk and no action, here's a small video clip of the auto-completion i implemented for scala/lift

Okay, great! Lets get started!

First, create the ctags file

I hope you enjoyed reading this, if you have any questions or implemented code completion for a language, please post a comment below

View-first templating in Lift

2010-02-04T01:34:00.000-08:00

EDIT: I've been informed that there's an article on github that coveres the same subject (go to 'Advanced Binding')

I'm currently re-writing a project from PHP to Scala using the Lift framework. I'm very new to both Scala and the Lift Framework, but I'm enjoying working with it none the less. I'm slowly getting used to the 'View-First' approach that the Lift framework uses but the other day I got stuck when I needed to iterate over a collection of data.
Normally I simply inject a few lines of inline code in the template to iterate over the collection, but since you can't have logic in a template in Lift I was stuck. After searching through the lift google group and playing around with a bit of code I worked out one way to do it and I thought I would share it here. I won't be explaining how the Scala code works, I'll just explain my approach

Controller-first vs. View-first approach

Before going further it might be wise to summarize the two approaches:

Controller first approach This is the approach I'm used to. The controller fetches and prepares the data I want to display and makes it available to the template. The template is usually xhtml/html with inline code whenever it's necessary to iterate over a collection of data or inject some of the data prepared by the controller.

View first approach This is the templating approach used in Lift and it's named 'View-first' because it starts with the xhtml and the controller (it's called Snippet in Lift lingo) can then fill in the data in the desired places.

EDIT: I don't view snippets as controllers at all. Comparing to Spring MVC for instance AFAIK controllers are the ones that process the requests and generate data that will be rendered (in MVC way). Here snippets per say never process requests although they typically bind user's function that in turn could be compared with controllers. Snippets just render dynamic markup. Comment by Marius Danciu

For a more in-depth description of the 'view-first' approach take a look at the article on the lift wiki

The template (view)

<lift:surround with="default" at="content"> 
    <h2>Welcome to your project!</h2> 
    <p>
      <lift:helloWorld.howdy>
        <p> Welcome to helloworld at <howdy:date /> </p> 
      </lift:helloWorld.howdy>
    </p> 
</lift:surround>

This is prettty cool, the template is pure xhtml, no inline code or other nasties.

The snippet (controller)

class HelloWorld { 
  def howdy(in :NodeSeq) :NodeSeq {
    bind("howdy", in, "date" -> Text(new java.util.Date))
  } 
}

Pretty simple, however, on the projects I work on the pages are rarely this simple. I normally have to interate over a few collections etc. so lets look at a bit more elaborate example

The more ellaborate template

<lift:surround with="default" at="content">
<h2>Welcome to your project!</h2>
 <lift:helloWorld.howdyAll>
  <p> Welcome to helloworld at <howdy:date /> </p>  
  <ul>
   <howdy:users>
    <li><user:name /></li>
   </howdy:users>
  </ul>
 </lift:helloWorld.howdyAll>
</lift:surround>

A bit more advanced snippet

class HelloWorld {

  def howdyAll(in: NodeSeq) :NodeSeq = {
    // list of users
    val userList :List[String] = "Arthur Dent" :: "Ford Prefect" :: "Zaphod Beeblebrox" :: Nil

    // extract the tag <howdy:users> and all of it's children
    val usersTemplate :NodeSeq = template(in, "howdy", "users") match {
      case Full(xhtml) => xhtml
      case Empty => <strong>Error</strong>
      case Failure(msg, _, _) => <strong>Error</strong>
    }

    // loop through each user and bind the values
    val users :NodeSeq =
      userList.flatMap { name :String =>
        bind("user", usersTemplate, "name" -> Text(name))
        }

    // now bind the tags <howdy:date> and <howdy:users>
    val date = new java.util.Date
    bind("howdy", in, "date" -> Text(date.toString),"users" -> users)
    }
}

Nice and simply, hope it will help someone else new to Lift