Learning Lift – HelloLift Lesson 2

Overview

In HelloLift Lesson 1, we used Git to clone a Lift prototype project to create our HelloLift application. In Lesson 2 we will make some minor changes to the application. We will use Git for version control of the changes. The goal is to learn a little about Lift and a little about Git and little about using both together. I hope you enjoy this lesson.

Learning Something

Learning Something tutorials like this one are prepared while I am learning something new. Because I am a newbie at whatever I am learning, these tutorials tend to be very basic. They are step-by-step instructions prepared by a newbie. Consequently, they may not show the best way to do something. They just show how I understood things at the time. Still, I hope you will benefit from my sharing of these tutorials and I hope you will add comments where you know a better way so we can all learn from each other.

I hope you enjoy and benefit from the Learning Something tutorials. Enjoy!

Pre-requisites

You need to complete HelloLift Lesson 1 in order to follow this lesson. You will also need a text editor such as SciTE which can be downloaded from http://www.scintilla.org/SciTEDownload.html.

Part 1: Change the Web Page

Step 1.1: Background

In Lesson 1 we cloned a Lift prototype project to create our HelloLift application. When we ran our application it appeared as follows.

Step 1.2: Proposed Changes

We will make the following changes to the application in this lesson:

  • Change the application title from code:app:0.1-SNAPSHOT to HelloLift
  • Change the application name from app to HelloLift
  • Change the footer to link to HelloLift instead of Lift.

Step 1.3: Edit the default.html

All of the changes we wish to make to the application can be achieved by editing the contents of the default.html file located in the src/main/webapp/templates-hidden folder of our HelloLift project directory.

The default.html file contents are shown below:

Scroll down to view remainder of the file contents.

Edit line 7 to change the application title from code:app:0.1-SNAPSHOT to HelloLift.

Edit line 59 in the above image to change the application name from app to HelloLift.

Edit line 80 to replace http://www.liftweb.net with http://localhost:8080/ and replace Lift with HelloLift.

Edit line 81 to replace the copyright statement to: is Copyright 2011 Hani Massoud. All rights reserved.

The modified file is shown below.

Scroll down to see remainder of file.

Part 2: Verify Your Changes

Step 2.1: Deploy Your Application

Follow the steps outlined in Part 2 of Lesson 1 of Learning Lift to deploy the applications. In summary these are:

  • Open a new Command Prompt
  • Use the cd command to change to the project directory
  • Launch SBT by entering sbt at the Command Prompt
  • Run the update command in SBT
  • Deploy the application to Jetty by entering jetty-run in SBT.

Please refer to the previous lesson if you require more detailed instructions.

Step 2.2: Browse to our Application

Launch your favourite browser and point it to http://localhost:8080/ to view your application as shown in the image below.

Notice the key changes:

  • The application title has changed from code:app:0.1-SNAPSHOT to HelloLift
  • The application name is now HelloLift, too (instead of app)
  • The footer now links to HelloLift instead of Lift.

Congratulations, you have successfully modified the application as desired.

Part 3: Source Code Management

Now that we have a good working version of the application, let’s commit our changes using Git.

Step 3.1: Launch Git

Launch Git Gui to view the home screen shown below.

Click on the Open Existing Repository link on the home screen (third link from the top in the image above). Git will request you to identify the repository you want to open (see image below).

Click the Browse button and navigate to the HelloLift project directory; our Git repository is stored in the project directory. Once you have selected the project directory, Git Gui will show the following screen.

Click the Open button to launch Git’s main window with the HelloLift application in view as shown below.

We can see from the image above that there is one change in the application (see unstaged changes section in top left corner).

Step 3.2: Stage our Changes

Click on the modified document listed in the Unstaged Changes panel in the first column of the Git Gui screen. Now click the Stage Changed button. The document should now move to the Staged Changes (Will Commit) panel as shown below.

At this point we have staged the changes that we made earlier in this tutorial. The idea is that we have finished with this module but we may want to work on other modules and then stage those, too, before making a commit of all changes together. However, in our case, we only have finished our changes for this tutorial so we will proceed to commit in the next step.

Step 3.3: Commit our Changes

Enter our text to describe this commit in the Commit Message box. The suggested text for your commit message is:

    Change from Clone to HelloLift

Change the cloned application title, name and footer contents to our HelloLift
title, name and footer contents.

I recommend you read the following article to understand what makes a good commit message: http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html.

Once you’ve entered the commit message, the Git Gui screen should appear as shown below.

Now that we have entered our commit message text, click on the Commit button to commit our changes. Once the commit is complete, the Git Gui screen should be as shown below: no Unstaged Changes and no Staged Changes.

Notice also the message at the bottom of the screen, indicating that a commit has been created. Please note that the commit number you get will be different from the one shown in the image above.

Part 4: Where to from Here

So far we have cloned a prototype application and made it our own. We have even placed our project name on the Web page of our application. All along we have been using Git to manage our source code and give us the freedom to make changes knowing that we can undo any mistakes we make between commits.

In the next lesson in this series we will make some changes to the menu and learn a little about Lift’s configuration module and sitemap in the process.

Enjoy!

 

 

 

 

 

 

Copyright 2010-2011, Hani Massoud. All rights reserved. Article copyright and all rights retained by the author.

Views: 221

Tags: Lift, Scala, Tutorial

Comment

You need to be a member of Commerity to add comments!

Join Commerity

Members

Featured Members

Ads

Get your business online and get more customers through the door!

© 2014   Created by Hani Massoud.

Badges  |  Report an Issue  |  Privacy Policy  |  Terms of Service