Let's decide the UI for index page. It should have the ability to:

1. Display a list of girlfriends
2. Add a new girl friend
3. Redirect to the gf detail page when clicked on a row

Open index.html, Remove the default html generated for you, add the following and hit refresh in your browser.

template/Index.html :

You have <span talesId="count"> </span> girlfriends
<div id="wrap">
  <input type="text" id="name" />
  <input type="button" value="add" id="add-gf"/> 
  <ul id="all-gfs">
     <li talesId="rows" >
       <a talesId="name" href="#" >Name1</a>
     </li>
  </ul>
</div>

Quick things to note about tales templating:

1. In tales, html stays Html. No kind of logic is allowed inside html
2. You can preview the html outside of tales and have your designer design or modify it
3. The only thing you will need is the "talesId" tag that represents a "dynamic" part of the page

Open fan/Index.fan. Add a code in main() method to look like this:

using tales 
class Index : Page{ 
  @Route{uri="/gf"}
  Void main(){
    html := Html("template/Index.html")
    html.tag("count").text("2")
    response.writeTag(html)
  }
}

Open your browser and browse to http://localhost:8000/gf. look at the first line. It should say You have "2" girlfriends. The "2" part was added in Index.fan

So here's the deal once again. In our html we had a div with talesId = "count". In the fan file we did html.tag("count").text("2"). The output to the browser will the exact same html defined in Index.html, but with the text of the div with talesId "count" replace by value "2".

We will play a little bit more with tales templating over here. For a complete templating guide go over here

Change the code in Index.fan like this

using tales 
class Index : Page{ 
  @Route{uri="/gf"}
  Void main(){
    html := Html("template/Index.html")
    html.tag("count").text("2").addCss("color", "red")
    response.writeTag(html)
  }
}

Now refresh the page in browser. The output should be exactly same, except the text "2" should appear in red.

Lets try to repeat the count multiple times. Change the code in Index.fan like this

using tales 
class Index : Page{ 
  @Route{uri="/gf"}
  Void main(){
    html := Html("template/Index.html")
    tags := html.tag("count").repeat(4)
    tags.each|Tag tag, Int index|{
        tag.text("Count:$index")
    }
    response.writeTag(html)
  }
}

Now refresh the page in browser. You should see count repeated 4 times

Now that we know how to put dynamic text into tags and set attributes, let's write the actual code for the index page

fan/app/Index.fan

using tales
using fanbatis

class Index : Page{
 @Route{uri="/gf"}  
 Void main(){
    GirlFriend[] friends := Db.list(GirlFriend{})
    html := Html("template/Index.html")
    rows := html.tag("rows").repeat(friends.size)
    rows.each|Tag oneRow, Int index|{
      oneFriend := friends[index]
      oneRow.tag("name").text(oneFriend.name)
                .attr("href","/gf/${oneFriend.id}")
    }
    html.tag("count").text("$friends.size")
    response.writeTag(html)
 }
}

Before you refresh the page, you might want to add a row in the girlfriend table like this

insert into girlfriend(name) values('Aishwarya Rai')

Now refresh the page and you should be seeing Aishwarya rai in the html

Now that we have page setup, Let's add the functionality to add a gf to db