Basic lift example

[Tim Humble]

Hi everyone,

As someone new to lift, I'd like to present a simple example of a
website and ask the best practise for doing it in lift. I think there
are a lot of tutorials that deal with the intermediate/advanced
capabilities of lift, but I must admit, I'm still a little lost when
it comes to the basics (any really simple tutorial suggestions would
be most welcome).

Lets imagine that I have a very simple page structure:

<div id="header" class="span-24 last"> ...menu goes here ... </div>
<div id="banner" class="span-24 last"> <img src="/images/
mybanner.png></img> </div>
<div id="content" class="span-24 last">
<div id="leftcolumn" class="span-12">Some content</div>
<div id="rightcolumn" class="span-12 last">Some more content</
div>
</div>

If I have three links in the menu: Home, About Us, Contact

For each of these three links, the only thing I would like to do is to
change the <img> in #banner and to update the contents of #leftcolumn
and #rightcolumn. Everything else would remain the same.

I know it isn't the most glamorous use of the power of lift, but it
does make up a fairly important part of whatever web framework I end
up using, and I'd like to get in the habit of actually using lift the
way it is supposed to be used, rather than just a wrapper for serving
html pages with javascript.

Thanks once again,

Tim

[David Pollak]

On Thu, Sep 15, 2011 at 4:04 PM, Tim Humble <tim.m....@gmail.com> wrote:

Hi everyone,

As someone new to lift, I'd like to present a simple example of a
website and ask the best practise for doing it in lift. I think there
are a lot of tutorials that deal with the intermediate/advanced
capabilities of lift, but I must admit, I'm still a little lost when
it comes to the basics (any really simple tutorial suggestions would
be most welcome).

Have you read http://simply.liftweb.net/index-Chapter-3.html#toc-Chapter-3
 

Lets imagine that I have a very simple page structure:

<div id="header" class="span-24 last"> ...menu goes here ... </div>
<div id="banner" class="span-24 last"> <img src="/images/
mybanner.png></img> </div>
<div id="content" class="span-24 last">
       <div id="leftcolumn" class="span-12">Some content</div>
        <div id="rightcolumn" class="span-12 last">Some more content</
div>
</div>

If I have three links in the menu: Home, About Us, Contact

For each of these three links, the only thing I would like to do is to
change the <img> in #banner and to update the contents of #leftcolumn
and #rightcolumn. Everything else would remain the same.

I know it isn't the most glamorous use of the power of lift, but it
does make up a fairly important part of whatever web framework I end
up using, and I'd like to get in the habit of actually using lift the
way it is supposed to be used, rather than just a wrapper for serving
html pages with javascript.

Thanks once again,

Tim

--
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

Simply Lift http://simply.liftweb.net
Follow me: http://twitter.com/dpp
Blog: http://goodstuff.im

[Tim Humble]

Hi Dave

Thanks for your quick reply.

I've read it more than once. I guess I'm asking if anyone has a few
minutes to explain how they would do the example mentioned, and then I
make sure that I've understood how the various parts fit in. I know
that chapter 2 of the book provides a practical example, but I was
looking for something a lot simpler than the chapter 2 example.

Cheers,

Tim

On Sep 15, 8:18 pm, David Pollak <feeder.of.the.be...@gmail.com>
wrote:

> On Thu, Sep 15, 2011 at 4:04 PM, Tim Humble <tim.m.hum...@gmail.com> wrote:
> > Hi everyone,
>
> > As someone new to lift, I'd like to present a simple example of a
> > website and ask the best practise for doing it in lift. I think there
> > are a lot of tutorials that deal with the intermediate/advanced
> > capabilities of lift, but I must admit, I'm still a little lost when
> > it comes to the basics (any really simple tutorial suggestions would
> > be most welcome).
>

> Have you readhttp://simply.liftweb.net/index-Chapter-3.html#toc-Chapter-3

> Simply Lifthttp://simply.liftweb.net

[David Pollak]

On Thu, Sep 15, 2011 at 8:57 PM, Tim Humble <tim.m....@gmail.com> wrote:

Hi Dave

Thanks for your quick reply.

I've read it more than once. I guess I'm asking if anyone has a few
minutes to explain how they would do the example mentioned, and then I
make sure that I've understood how the various parts fit in. I know
that chapter 2 of the book provides a practical example, but I was
looking for something a lot simpler than the chapter 2 example.

Lift allows you to create a menu hierarchy with SiteMap. That's covered in Chapter 3 (the link I sent).  Lift allows you to transform what's in the template with Snippets.  That's covered in Chapter 3.  So, everything you want to do is covered in Chapter 3.

If you have tried to go through the code in Chapter 3 and have a specific question, we'll be happy to answer it on this list.
 

--

Lift, the simply functional web framework http://liftweb.net

Simply Lift http://simply.liftweb.net

[Tim Humble]

Hi Dave,

I do apologise if my question is already covered, I really do
appreciate you taking the time to answer.

I think I need to be more specific. I understand the basic idea behind
snippets and have used them several times. I'm also quite comfortable
with SiteMap, although there are some bits that I haven't quite
grasped, like creating a menu containing images rather than text (any
pointers here would be greatly appreciated).

My problem is that I'm fine when it comes to the first time the page
loads, and the dynamic text is displayed (like HelloWorld), but I'm
slightly confused on how to update content dynamically on the page
when a menu link is clicked, without loading a new page. So far I've
had a menu that links to /aboutus (in my example above), and I've just
created aboutus.html which wraps the same default template as
index.html around something different.

I can even do the dynamic update with a form button, like some of the
AJAX examples that update a counter when you click a button. I'm just
missing how to do it with a menu like the one created by SiteMap.

Honestly, I'm sure it's in front of me in the chapter, I just haven't
quite figured it out. Maybe I'll write an idiot's guide to starting
Lift by the time I'm finished :-)

Last question, what is best practise for including javascript plugins?
For example, there are a lot of jQuery plugins like supersized and
bgstretcher for displaying a background slideshow. They have a
<plugin>.js file, as well as some initialisation code, that looks
like:

$(document).ready(function() {
$("body").myPlugin({
variable: 'value',
anotherVariable: 'anotherValue'
});
});

Would you just include both in the default template, or is it better
to have a nested template just for them, or would you use Lift's
access to JavaScript to initialise them? I'm not really asking about
something specific, but all of the plugin's I've come across work much
the same way.

Regards,

Tim

On Sep 16, 6:45 am, David Pollak <feeder.of.the.be...@gmail.com>
wrote:

[Rogelio]

Hi Tim,

I'm new at Lift myself, so this may not be what you are looking for.
I think though that
maybe what you need to try is the "SHtml.a(...)" method to create a
link, and in that you
can reference a method (that you define) to dynamically update some
component of the
current page via the SetHtml method (maybe via the "embed" directive
on a NodeSeq).
I can't post the entire code, but in one of my projects,
I had a webpage that basically was divided into two parts -- left side
and right side. The left hand side listed
the schools in a county. The right hand side was for editing that
school (e.g. if the school
name changed).

So I had:
--------------
def doBind(in:NodeSeq):NodeSeq = {
val slist = School.findAll(By(School.sysnum,
mySystem),OrderBy(School.schname, Ascending))
slist match {
case schools => {
rows = schools.flatMap(e => {
Helpers.bind("row", chooseTemplate("list","school", in),
"name" -> SHtml.a(updateSchool(e.id.toInt),
Text(e.schname))
)
})
}
}
bind("list", in,
"newsch" -> SHtml.a(updateSchool(-1), Text("Add a new
school")),
"schools" -> rows)
}
-----------

Notice the SHtml.a(...) -- actually there are two of them. Once is
creating
a link for "adding" a new school" (I use "-1" as the param to indicate
to the updateSchool method that this a a new school, so don't try
finding it
in the database), and the other is for editing a school (with the
given id). So
visually, the left hand side of my webpage has a link called "Add A
New School"
followed by a bunch of rows of school names, each clickable so that
when
clicked the right hand side of the page either displays data for an
existing
school for editing, or it creates a blank form on the right hand side
for entering
data about a new school.

The connection is the "updateSchool()" method in the first param of
the SHtml.a
method. It looks like this in my case:

def updateSchool(id:Int) : () => JsCmd = {
() => SetHtml("schedit", <lift:SchoolMgr.schoolEdit
eager_eval="true" sid={id.toString}><lift:embed what="schooledit" /></
lift:SchoolMgr.schoolEdit>)
}


So I have a div called "schedit" (basically the right hand side of the
webpage) that I'm saying needs
to be updated/replaced with the Nodseq that is in the 2nd param.

I realize that this is not using a sitemap menu (at least the way I'm
thinking about it), and probably there is
some other way to do the above. And this was older code, so it
doesn't use the new CSS selector
transforms (see sect 7.10 of David's Simply Lift book). Hope it
helps though.

Rog

[Tim Humble]

Thanks Rog, that seems like a big help.

[Kevin]

Follow the inline.

> --------------
> def doBind(in:NodeSeq):NodeSeq = {
>         val slist = School.findAll(By(School.sysnum,
> mySystem),OrderBy(School.schname, Ascending))
>         slist match {
>           case schools => {
>             rows = schools.flatMap(e => {
>              Helpers.bind("row", chooseTemplate("list","school", in),
>                "name" -> SHtml.a(updateSchool(e.id.toInt),
> Text(e.schname))
>              )
>          })
>         }
>       }
>  bind("list", in,
>          "newsch" -> SHtml.a(updateSchool(-1), Text("Add a new
> school")),
>          "schools" -> rows)
>       }
> -----------

>

> The connection is the "updateSchool()" method in the first param of
> the SHtml.a
> method.  It looks like this in my case:
>
> def updateSchool(id:Int) : () => JsCmd = {
>          () => SetHtml("schedit", <lift:SchoolMgr.schoolEdit
> eager_eval="true" sid={id.toString}><lift:embed what="schooledit" /></
> lift:SchoolMgr.schoolEdit>)
>       }
>
> So I have a div called "schedit" (basically the right hand side of the
> webpage) that I'm saying needs
> to be updated/replaced with the Nodseq that is in the 2nd param.
>
> I realize that this is not using a sitemap menu (at least the way I'm
> thinking about it), and probably there is
> some other way to do the above.

You may like to follow the similar pattern from this http://demo.liftweb.net/ajax
for sitemap.
source code https://github.com/lift/examples/tree/master/combo/example

[Tim Humble]

Thanks everyone for your help.

I'm still stuck on one thing. How do I integrate the snippet
responsible for changing the HTML with SiteMap or even a hand-coded
menu?

In other words, I want to have several <a></a> tags which should
interact with a snippet which will then change some of the HTML on the
page. Am I thinking along the right lines?

Could I even integrate it with some kind of URL rewriting, so that a
link to /aboutus would have the same kind of effect?

I'm going back to the first example that I posted at the very top of
the message. When the user clicks on About Us in the menu, I would
change the content of one of the <div></div> sections. I can change it
with a button via onclick"" but what's the best way to do it with a
normal link?

Thanks,

Tim

> source codehttps://github.com/lift/examples/tree/master/combo/example

[Kevin]

Let me try.


I have been learning a lot about the mentioned functionalities in the
following example for long time. The learning of additional functions
would only enhance the efficiency and power.

http://demo.liftweb.net/ajax

//How do I integrate the snippet responsible for changing the HTML

with SiteMap or even a hand-coded
menu?

There are many patterns in this link.
http://demo.liftweb.net/templating/


//When the user clicks on About Us in the menu, I would change the

content of one of the <div></div> sections.

SHtml.a(doJSactionsAndReturnJScmd, @param body - the NodeSeq to wrap
in the anchor tag)

def doJSactionsAndReturnJScmd{
dosomethingIfyouwant(optional)
SetHtml("ID", Text("XYZ"))
}

/*
so when the produced link is clicked, the markup text with the ID tag
will be changed to "XYZ". And Text() is a function to produce NodeSeq
or kind of Elem.
*/


HTH

[David Pollak]

On Sun, Sep 18, 2011 at 8:24 AM, Tim Humble <tim.m....@gmail.com> wrote:

Thanks everyone for your help.

I'm still stuck on one thing. How do I integrate the snippet
responsible for changing the HTML with SiteMap or even a hand-coded
menu?

In other words, I want to have several <a></a> tags which should
interact with a snippet which will then change some of the HTML on the
page. Am I thinking along the right lines?

No.  A SiteMap is responsible for per-URL site navigation and access control (does the current session have access rights to a given URL?).

You are looking to do some JavaScript that changes the contents of the page without changing the URL.  This has nothing to do with SiteMap.
 

Could I even integrate it with some kind of URL rewriting, so that a
link to /aboutus would have the same kind of effect?

No.  Stay away from URL rewriting.  It's low-level stuff that has *nothing* to do with changing the contents of the DOM once the page has been loaded.
 

I'm going back to the first example that I posted at the very top of
the message. When the user clicks on About Us in the menu, I would
change the content of one of the <div></div> sections. I can change it
with a button via onclick"" but what's the best way to do it with a
normal link?

Use a snippet.  A snippet transforms NodeSeq => NodeSeq during the server-side page rendering.  The logic in the snippet has nothing to do with anything else unless you want to ask about current state.

If you need more help, please put together an example application (see Posting example code | Lift Space | Assembla ) and we can all work on it together.


 

--
Lift, the simply functional web framework: http://liftweb.net
Code: http://github.com/lift
Discussion: http://groups.google.com/group/liftweb
Stuck? Help us help you: https://www.assembla.com/wiki/show/liftweb/Posting_example_code

--

Lift, the simply functional web framework http://liftweb.net

Simply Lift http://simply.liftweb.net