Sample list items with lift

Add/Edit/Remove items in lift sample

  • 1- Create the menu in boot

    in src/main/scala/bootstrap/liftweb/Boot.scala

    
    // List items menu
    val itemsMenu = Menu(Loc("Items", "items" :: "index" :: Nil, "List items"))
    
    // Build SiteMap
    val entries = Menu(Loc("Home", List("index"), "Home")) :: itemsMenu :: Nil
    
  • 2- Define the default database
    The properties in src/main/resources/props/default.props with the connection url

    
    db.driver   = org.h2.Driver
    db.url      = jdbc:h2:~/hello_db
    db.user     =
    db.password =
    

    in src/main/scala/bootstrap/liftweb/Boot.scala

    
    
    DB.defineConnectionManager(DefaultConnectionIdentifier, DefaultDBVendor)
    Schemifier.schemify(true, Log.infoF _, Item)
    
    ...
    
    object DefaultDBVendor extends ConnectionManager {
        def newConnection(name: ConnectionIdentifier): Box[Connection] = {
            try {
                val connectionUrl = Props.get("db.url").openOr("") + "?user=" +
                                    Props.get("db.username").openOr("") + "&password=" +
                                    Props.get("db.password").openOr("")
    
                Class.forName(Props.get("db.driver").open_!)
                val dm = DriverManager.getConnection(connectionUrl)
                return Full(dm)
            }
            catch {
                case e: Exception => {
                    Log.error(e.getMessage);
                    return Empty
                }
            }
        }
    
        def releaseConnection(conn: Connection) = conn.close
    }
      
    
  • 3- Create items/index.html
    in src/main/webapp/items/index.html

    
    <lift:surround with="default" at="content">
        <ul>
            <lift:adminItems.list>
                <li>
                    <item:name />
                </li>
            </lift:adminItems.list>
        </ul>
    </lift:surround>
    
    

    and snippet in src/main/scala/com/sample/snippet/AdminItems.scala

    
    package com.sample.snippet
    
    import scala.xml.{NodeSeq, Text}
    
    import net.liftweb.util.{Helpers, Log}
    import Helpers._
    
    import com.sample.model.Item
    
    class AdminItems {
    
        def list(node: NodeSeq): NodeSeq = {
            Item.findAll match {
                case Nil   => Text("There is no items in db")
                case items => items.flatMap(i => bind("item", node, "name" -> {i.name}))
            }
        }
    ...
    }
    
  • 4- Add item form

    create a template for add/edit items in src/main/webapp/templates-hidden/item_form.html,
    we are going to use the same template for edit and add items,
    using TemplateFinder in AdminItems snippet

    
    <fieldset>
        <legend><itemForm:title /></legend>
        <label for="name">Name</label>
    
        <itemForm:name />
        <itemForm:id />
    
        <itemForm:submit />
    </fieldset>
    
    

    we are going to use two requestvars to decide when to display the edit form or the add form

    
        private object ShowAddItem  extends RequestVar[Int](0)
        private object SelectedItem extends RequestVar[Long](0)
    

    declare a showAddItem and showEditItem function in adminItems snippet

    
        def clear = {
            ShowAddItem(0)
            SelectedItem(0)
        }                  
    
        def showAddItem(node: NodeSeq): NodeSeq = {
            ShowAddItem.get match {                
                case 1 => {                        
                    var name = ""                  
                    val template: NodeSeq = TemplateFinder.findAnyTemplate(ITEM_TEMPLATE :: Nil).openOr(<p></p>)                                                                     
                    val content = bind("itemForm", template, "title"  -> Text("New item"),    
                                                              "name"   -> SHtml.text(name, name = _),                                                                                   
                                                              "id"     -> Text(""),           
                                                              "submit" -> SHtml.submit("save", () => addItem(name)),                                                                    
                                                              "close"  -> SHtml.link("index", () => clear, Text("close")))                                                              
    
                    <div>{content}</div>
                }                       
                case _ => SHtml.link("index", () => ShowAddItem(1), <p>Add</p>)
            }                                                                  
        }                                                                      
    
        def showEditItem(node: NodeSeq): NodeSeq = {
            if (SelectedItem.get > 0) {             
                var id = SelectedItem.get           
                val item = Item.find(id).open_!     
    
                var name = item.name.is
    
                val template = TemplateFinder.findAnyTemplate(ITEM_TEMPLATE :: Nil).openOr(<p></p>) 
                val content  = bind("itemForm", template, "title"  -> Text("Edit item"),      
                                                          "name"   -> SHtml.text(name, name = _),                                                                                       
                                                          "id"     -> Html.hidden(() => {id = id}),                                                                                    
                                                          "submit" -> SHtml.submit("save", () => saveItem(id, name)),                                                                   
                                                          "close"  -> SHtml.link("index", () => clear, Text("close")))                                                                  
    
                <div>{content}</div>
            }                       
            else {                  
                <div></div>
            }                       
        }           
    

    Now we can call the showEditItem and showAddItem snippets functions in items/index view

    
    <lift:surround with="default" at="content">
        <ul>
            <lift:adminItems.list>
                <li>
                    <item:name />
    
                    <item:edit />
                    <item:remove />
                </li>
            </lift:adminItems.list>
        </ul>
    
        <lift:adminItems.showAddItem  form="POST" />
        <lift:adminItems.showEditItem form="POST" />
    </lift:surround>
    
    

    The attribute form=”POST” on the snippet will create a form with method=”POST” automatically arround the snippet content.

    And that’s it, a simple list with liftweb.
    The code can be found on http://github.com/jgoday/sample_lift_testing

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: