HI THIS TOUTORIAL WILL HELP FULL FOR STARTUP IN GRAILS CREATED BY NaveenRaju
Part8: Ternery RelationShip in sql by using Grails views
Part9:Gsp Tags And there Implimentation in gsp Pages
PART2:
1 how to use controllers with views
Step1: create grails application
ie grails create-app ContrlVewDemo
step2: create controller
ie grails create-controller NaveenController
step3: open folloing link and code like this
ie C://ControllerViewDemo/grails-app/controllers/contrlviewdemo/NaveenController.groovy
package contrlviewdemo
class NaveenController {
def index() {
redirect(action:"raja")
}
def raja = {
def name = "NaveenRaju"
def address = "Bangalore,India"
def company= "DataQuotient"
[ name: name, address: address ,company:company ]
}
}
step4: Create a View on folloing Path
C:/ContrlViewDemo/grails-app/views/naveen
Then create raja.gsp by clicking Save on folling path
step5: code on raja.gsp page like this
<html>
<head>
<title>Naveen Controller Raja Actons Gsp Page</title>
</head>
<body>
<p>Hi My Self This Is ${name}</p><br>
<q>I am Working on ${company}</q><br>
<r>At ${address}</r>
</body>
</html>
step7: run the application
grails run-app
step8:go to any browser and run this application
ie http://loclhost:8080/ControlViewDemo
step9: click on the link
contrlviewdemo.NaveenController
step10: if u whant to stop the server means go to cmd prompt and press Ctrl+C
Note: from bove demo i used 1 controller and 1 view
In controller 1 action called (raja) is there with respect to this action name in View we
need to create raja.gsp this naming convention is mandadry.
2.How to add Styles to our gsp page hear i am using inline Css
Step1: Hear i am doing modifications to above Application
Consider above gsp page raja.gsp and re code like this
<html>
<head>
<title>Naveen Controller Raja Actons Gsp Page</title>
<style type="text/css">
#naveen
{
width: -20px;
height:-20px;
background: cyan;
border-radius: 0px;
margin-top: 0em;
padding:300px;
color:red;
}
#naveen1
{
width: -20px;
height:-20px;
background: blue;
border-radius: 0px;
margin-top: 0em;
padding:300px;
color:red;
}
#naveen2
{
width: -20px;
height:-20px;
background: pink;
border-radius: 0px;
margin-top: 0em;
padding:300px;
color:red;
}
</style>
</head>
<body>
<div id="naveen">
<h1>Hi My Self This Is ${name}</h1><br>
</div>
<div id="naveen1">
<h1>I am Working on ${company}</h1><br>
</div>
<div id="naveen2">
<h1>At ${address}</h1>
</div>
</body>
</html>
step2: run ur application
And browse to that sever ip address then o/p looks like this
step3:Stop the Server By pressing Ctrl+c on Cmnd prompt
3.How to add Styles to our gsp page outline Css
step1:create css file like this in c:/ControlVieDemo/web-app/css in that i am creating css file
like NaveenRaju.css
step2: In NaveenRaju.css code like this
#naveen
{
width: -20px;
height:-20px;
background: cyan;
border-radius: 0px;
margin-top: 0em;
padding:300px;
color:red;
}
#naveen1
{
width: -20px;
height:-20px;
background: blue;
border-radius: 0px;
margin-top: 0em;
padding:300px;
color:red;
}
#naveen2
{
width: -20px;
height:-20px;
background: pink;
border-radius: 0px;
margin-top: 0em;
padding:300px;
color:red;
}
step3: modify the view raja.gsp like this
<html>
<head>
<title>Naveen Controller Raja Actons Gsp Page</title>
<link rel="stylesheet" href="${resource(dir:'css',file:'NaveenRaju.css')}" />
</head>
<body>
<div id="naveen">
<h1>Hi My Self This Is ${name}</h1><br>
</div>
<div id="naveen1">
<h1>I am Working on ${company}</h1><br>
</div>
<div id="naveen2">
<h1>At ${address}</h1>
</div>
</body>
</html>
step4: run ur application
grails run-app
And browse to that sever ip address then o/p looks like this
step5: if u whant to stop the server means Press Ctrl+c
Note:i) in gsp page we can directly write css,javascripts directly.While in linking css,Javascript
to our gsp page some what different in grails gsp's we need to follow this strategy which i
mention Below
ii)copy css,javascript files on web-app what ever the directory u whant but in gsp page
on linking css or javascript mention the directory name u placed in web-app and css file
in that directory
CSS------------><link rel="stylesheet" href="${resource(dir:'specify Directory',file:'CSS file Name')}" />
JavaScript------><script language="JavaScript" src="${resource(dir: ' specufy Dir', file: 'Js file Name')}">
</script>
Examples:
i) application-name/web-app/css /NaveenRaju.css
CSS---------><link rel="stylesheet" href="${resource(dir:'css',file:'NaveenRaju.css')}" />
ii)application-name/web-app/js /NaveenRaju.js
JavaScript--------><script language="JavaScript" src="${resource(dir: ' js', file: 'NaveenRaju.js')}">
</script>
4.How to add immage to our gsp page :
step1: i am doing modifications on above raja.gsp page
step2: copy immage naveenraju.jpg in location
c:/ContrlViewDemo/web-app/images/naveenraju.jpg
step3: copy folloing code in raja.gsp page
<html>
<head>
<title>Naveen Controller Raja Actons Gsp Page</title>
<link rel="stylesheet" href="${resource(dir:'css',file:'NaveenRaju.css')}" />
</head>
<body>
<IMG BORDER="0" SRC="../images/naveenraju.jpg" WIDTH="100" ALT="*" HEIGHT="100">
<div id="naveen">
<h1>Hi My Self This Is ${name}</h1><br>
</div>
<div id="naveen1">
<h1>I am Working on ${company}</h1><br>
</div>
<div id="naveen2">
<h1>At ${address}</h1>
</div>
</body>
</html>
step4: run the application
grails run-app
and browse to folloing address
step5: stop the Server u Whant Ctrl+c
3.How to Use javaScript functionality to our gsp page:
Hear I Am Explaining if two passwords are not equal request can not be process
step1:create grails Application
i.e grails create-app PasswdDemo
step2:create controller
ie grails create-controller CreateAccount
step3:Then Open
c:/PasswdDemo/grails-app/createAccount/CreateAccountController.groovy
code like this
package passwddemo
class CreateAccountController {
def index() {
redirect(action:raja)
}
def raja={ //by means of this action we are going to create raja.gsp in //views/createAccount/raja.gsp
}
def create={
redirect(action:raja)
}
}
step4: Coppy The Image naveenraju.jpg in
c:/ PassedDemo/web-app/images folder (u can specify what ever the image u need)
step5: copy css File naveen2.css in
C:/ PassedDemo/web-app/css folder
step6: In naveen2.css code like this
input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
.button {
border: none;
background: url("images/top02.jpg") no-repeat top left;
padding: 2px 60px;
}
.button:hover {
border: none;
background: url('images/Copy of pro_line_1.gif') no-repeat top left;
padding: 3px 60px;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br { clear: left; }
a:link {background-color: #00FF00; color: #0000ff;}
a:visited {color: #ff0000;}
a:active {color: #00FF00;}
a:hover {background-color: #ffffff;}
a {text-decoration: none}
.styled-button-5 {
background:#00A0D1;
background:-moz-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00A0D1),color-stop(100%,#008DB8));
background:-webkit-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:-o-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:-ms-linear-gradient(top,#00A0D1 0%,#008DB8 100%);
background:linear-gradient(top,#00A0D1 0%,#008DB8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A0D1',endColorstr='#008DB8',GradientType=0);
padding:8px 20px;
color:#cfebf3;
font-family:'Helvetica Neue',sans-serif;
font-size:13px;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border:1px solid #095B7E
}
.loginboxdiv{
margin:0px;
height:21px;
width:146px;
background:url("css/login_bg.gif") no-repeat bottom;
}
/* attributes of the input box */
input {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
color:indigo;
border: 1px solid #006;
background: #ffc;
}
.input:hover
{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 1px solid #f00;
background: #ff6;
}
#foot3
{
width: 200px;
height:1px;
background: #bbb;
border-radius: 10px;
margin-top: -4em;
padding:0px;
display:block;
}
body{
overflow:hidden;
}
img{
position:absolute;
top:20px;
left:-56px;
}
step7:Copy naveen.js file in folloing location
c:/PassedDemo/web-app/js folder
step8: in naveen.js code like this
var imgs=[];
var t=[];
var c=25;
window.onload=function(){
var d=Math.min(window.innerWidth?window.innerWidth:document.documentElement.clientWidth,window.innerHeight?window.innerHeight:document.documentElement.clientHeight);
for(var i=0;i<c;i++){
var img=new Image();
img.src="../images/naveenraju.jpg"; //in this line u give ur image to animate
img.style.width=d+"px";
img.style.height=d+"px";
document.body.appendChild(img);
imgs.splice(0,0,img);
t.splice(0,0,i);
}
window.step();
};
window.step=function(){
for(var i=0;i<c;i++){
var scale=(i/c-0.2);
var deg=(t[i]|0);
if(typeof(imgs[i].style.transform)!="undefined")
imgs[i].style.transform="rotate("+deg+"deg) scale("+scale+")";
else if(typeof(imgs[i].style.MozTransform)!="undefined")
imgs[i].style.MozTransform="rotate("+deg+"deg) scale("+scale+")";
else if(typeof(imgs[i].style.OTransform)!="undefined")
imgs[i].style.OTransform="rotate("+deg+"deg) scale("+scale+")";
else if(typeof(imgs[i].style.WebkitTransform)!="undefined")
imgs[i].style.WebkitTransform="rotate("+deg+"deg) scale("+scale+")";
t[i]+=(i+1)/3;
t[i]%=360;
}
window.setTimeout(window.step,0);
};
step9: create raja.gsp page on
c:/PasswdDemo/grails-app/views/createAccount/raja.gsp
In raja.gsp code like this
<!doctype html>
<html>
<head>
<title>Registration Page</title>
<link rel="stylesheet" href="${resource(dir:'css',file:'naveen2.css')}" />
<script language="JavaScript" src="${resource(dir: 'js', file: 'naveen.js')}"></script>
<script type="text/JavaScript">
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
</script>
</head>
<body>
<TABLE width="100%" ALIGN="left" >
<div data-role="content">
<header>
<TR >
<td >
<div id="foot3" >
<MAP NAME="example">
<AREA SHAPE=RECT COORDS="165,0,320,69" HREF="../images/naveenraju.jpg">
<AREA SHAPE=CIRCLE COORDS="202,139,71" HREF="../images/naveenraju.jpg">
<AREA SHAPE=POLY COORDS="42,27,0,123,1,183,4,182,21,208,22,208,52,208,52,208,42,30" HREF="../images/naveenraju.jpg">
<AREA SHAPE=RECT COORDS="59,0,130,210" HREF="../images/naveenraju.jpg">
</MAP>
<P>
<IMG BORDER="0" SRC="../images/naveenraju.jpg" WIDTH="100" ALT="*" HEIGHT="100" USEMAP="#example"></p></div>
</td>
<td>
<b><center><h1>JavaScript in Gsp Demo </h1></center></b></div>
</td>
</div>
</TR>
<tr>
<td>
</td>
</tr>
<center>
<g:if test="${flash.message}">
<div class="message">
${flash.message}
</div>
</g:if>
</td>
</tr>
</header>
</Table>
<div data-role="content">
<script type="text/javascript">
function pwd(theForm)
{
var passwd12 = theForm.password.value;
var passwd22 = theForm.reEnterPassword.value;
if (passwd12 != passwd22)
{
alert("passwords are Not Equal please edit the password")
return false;
}
else
{
return true
}
}
</script>
<center>
<g:form onsubmit="pwd(this)" >
<table >
<a href="#" data-icon="home">Home</a>
<div style="width:220px" align="left">
<tr>
<td>
UserName:</td>
<td><input type="text" name="userName" value="" class="input" /> </td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" value="" class="input" /></td>
</tr>
<tr>
<td>ReEnter Password:</td>
<td><input type="password" name="reEnterPassword" value="" class="input" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Register" class="styled-button-5" /></td>
</tr>
<tr>
<td><g:link controller='CreateAccount' action='create' > Create Account</g:link></td>
</tr>
</g:form></div>
</center>
</div>
</table>
</div>
</body>
</html>
step10: Run the Application
grails run-app
and browse to folloing link
step11:click on folloing link
step12: fill the registration form with diff paswds in two pswd fields
step13: from above slide if two pswds are not equal it will generate alert messege
this is coded in java script. And Animating photo is also in javascript
ie in naveen.js if u whant to animate ur photo then go to naveen.js
line no:9 then give ur image path to animate
Note: Till now i was not discussed GSP tags in Part 9 i Will discuss breaf Detail with progrms as well as small project (AuthorBook) gsp pages explination With respect to controller
No comments:
Post a Comment