"view and edit" link now displays both view and controller in a tabbe…

…d codemirror editor.

"save" redirects to the view and controller you where coming from.

grails-app/conf/org/grails/samples/ViewSourceFilters.groovy

@@ -35,7 +35,6 @@ class ViewSourceFilters {
 				// being used for the current page.
 				model["controllerClass"] = controllerClass.clazz.name
 				model["viewPath"] = "$controllerName:${model['viewName'] ?: actionName}"
-
 				// Return the model for use by the view.
 				return model
 			}

grails-app/controllers/org/grails/samples/ViewSourceController.groovy

@@ -2,66 +2,80 @@ package org.grails.samples
 
 class ViewSourceController {
 
-	def grailsApplication
+    def grailsApplication
 
-	def controller(String id) {
-		renderFile id, "controllers", "groovy"
-	}
+    def controllerAndView(String controllerClass, String viewPath) {
+        renderFiles ([
+            [id:controllerClass, path:"controllers", ext:"groovy"],
+            [id:viewPath, path:"views", ext:"gsp"]
+        ])
+    }
 
-	def view(String id) {
-		// Get the GSP file for the given path.
-		renderFile id, "views", "gsp"
-	}
+    def domain(String id) {
+        renderFile id, "domain", "groovy"
+    }
 
-	def domain(String id) {
-		renderFile id, "domain", "groovy"
-	}
+    def service(String id) {
+        renderFile id, "service", "groovy"
+    }
 
-	def service(String id) {
-		renderFile id, "service", "groovy"
-	}
+    def filter(String id) {
+        renderFile id, "conf", "groovy"
+    }
 
-	def filter(String id) {
-		renderFile id, "conf", "groovy"
-	}
+    def mappings() {
+        renderFile "UrlMappings", "conf", "groovy"
+    }
 
-	def mappings() {
-		renderFile "UrlMappings", "conf", "groovy"
-	}
+    def dataSource() {
+        renderFile "DataSource", "conf", "groovy"
+    }
 
-	def dataSource() {
-		renderFile "DataSource", "conf", "groovy"
-	}
+    def config() {
+        renderFile "Config", "conf", "groovy"
+    }
 
-	def config() {
-		renderFile "Config", "conf", "groovy"
-	}
+    def save(String sourceCode, String filePath, String controllerName, String actionName, String id) {
+        new File(filePath).text = sourceCode
+        redirect controller: controllerName, action: actionName, id: id
+    }
+
+    def renderFiles(args) {
+        def model = []
+        args.each { fileArgs ->
+            model << createModel(fileArgs.id,fileArgs.path,fileArgs.ext)
+        }
+        render view:'show', model: [files:model]
+    }
+    /**
+     *  method to fetch the source and render it with codemirror
+     *  in a text editor
+     *  
+     **/
+    private createModel(String id, String folder, String ext) {
+        boolean isView = ext == "gsp"
+        char separatorChar = isView ? ':' : '.'
 
-	def save(String sourceCode, String filePath, String controllerName, String actionName, String id) {
-		new File(filePath).text = sourceCode
-		redirect controller: controllerName, action: actionName, id: id
-	}
+        def idAsPath = id.replace(separatorChar, '/' as char)
+        def path = "grails-app/${folder}/${idAsPath}.${ext}"
+        def content = getFileContent(path, isView ? 2 : 4)
+
+          [
+                sourceCode: content,
+                lang: isView ? "text/html" : "groovy",
+                elementId: isView ? "viewEdit" : "controllerEdit",
+                viewName: "show",
+                path: path,
+                controller: params.controllerName,
+                action: params.viewName,
+                id: id
+            ]
+
+    }
 
-	private renderFile(String id, String folder, String ext) {
-		boolean isView = ext == "gsp"
-		char separatorChar = isView ? ':' : '.'
-
-		def idAsPath = id.replace(separatorChar, '/' as char)
-		def path = "grails-app/${folder}/${idAsPath}.${ext}"
-		def content = getFileContent(path, isView ? 2 : 4)
-
-		render view: "show", model: [
-				sourceCode: content,
-				lang: isView ? "text/html" : "groovy",
-				viewName: "show",
-				path: path,
-				controller: controllerName,
-				action: actionName,
-				id: id]
-	}
-
-	private getFileContent(String path, int spacesForIndent) {
-		def content = new File(path).getText("UTF-8")
-		return content.replace('\t', ' ' * spacesForIndent)
-	}
+    private getFileContent(String path, int spacesForIndent) {
+        println path
+        def content = new File(path).getText("UTF-8")
+        return content.replace('\t', ' ' * spacesForIndent)
+    }
 }

grails-app/views/layouts/main.gsp

@@ -19,10 +19,9 @@
 	<body>
 		<header><g:img dir="images" file="banner-graphic.png"/></header>
 		<aside>
-			<h2>View source for</h2>
+			<h2>View &amp; edit source for</h2>
 			<ul>
-				<li><g:link controller="viewSource" action="controller" id="${controllerClass}">Controller</g:link></li>
-				<li><g:link controller="viewSource" action="view" id="${viewPath}">View</g:link></li>
+				<li><g:link controller="viewSource" action="controllerAndView" params="${[viewPath:viewPath,controllerClass:controllerClass,viewName:(viewName ?: actionName),controllerName:controllerName]}">View & Controller</g:link></li>
 			</ul>
 		</aside>
 		<div id="main">

grails-app/views/viewSource/show.gsp

@@ -1,33 +1,69 @@
 <head>
-	<meta name="layout" content="main">
-	<title>View Source Code</title>
-	<r:require modules="codemirror"/>
-	<r:script>
-    $(function () {
-        var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('sourceCode'), {
-            lineNumbers: true,
-            wordWrap: true,
-            lineWrapping: true,
-            gutter: true,
-            fixedGutter: true,
-            autofocus: true,
-			mode: '${lang}'
-        });
+  <meta name="layout" content="main">
+  <title>View Source Code</title>
+<r:require modules="codemirror"/>
+<r:script>
+  $(function () {
+    $('.sourceCode').each(function(index,element) {
+      var myCodeMirror = CodeMirror.fromTextArea(element, {
+        lineNumbers: true,
+        wordWrap: true,
+        lineWrapping: true,
+        gutter: true,
+        fixedGutter: true,
+        autofocus: true,
+        mode: $(element).data('lang')
+      });
     });
-	</r:script>
-	<style>
-	div.CodeMirror div {
-		font-family: inherit;
-	}
-	</style>
+    $('#viewBtn').click(function(){
+      $('#controllerEdit').hide();
+      $('#viewEdit').show();
+      $('#viewBtn').css('font-weight','bold');
+      $('#controllerBtn').css('font-weight','normal');
+    });
+    $('#controllerBtn').click(function(){
+      $('#viewEdit').hide();
+      $('#controllerEdit').show();
+      $('#controllerBtn').css('font-weight','bold');
+      $('#viewBtn').css('font-weight','normal');
+    });
+    $('#viewBtn').click();
+  });
+</r:script>
+<style>
+  div.CodeMirror div {
+    font-family: inherit;
+  }
+  .CodeMirror {
+    width:580px;
+  }
+  .tab {
+    padding: 3px 15px;
+    margin-right: 10px;
+    border: 1px solid black;
+    background-color: #bbb;
+    font-size: 14px;
+  }
+  .submitBtn {
+    margin-top: 5px;
+    float: right;
+  }
+</style>
 </head>
 <body>
-	<g:form action="save">
-		<g:hiddenField name="filePath" value="${path}"/>
-		<g:hiddenField name="controllerName" value="${controller}"/>
-		<g:hiddenField name="actionName" value="${action}"/>
-		<g:hiddenField name="id" value="${id}"/>
-		<textarea id="sourceCode" name="sourceCode">${sourceCode}</textarea>
-		<g:submitButton name="save" value="Save"/>
-	</g:form>
+  <span class="tab" id="viewBtn">View</span><span class="tab" id="controllerBtn">Controller</span><br />
+  <div style="position: relative; top:10px;height: 300px; width: 580px; border: 1px solid #000; margin-bottom:50px;" >
+    <g:each in="${files}" var="file">
+      <div style="position:absolute; top: 0;" id="${file.elementId}">
+        <g:form action="save">
+          <g:hiddenField name="filePath" value="${file.path}"/>
+          <g:hiddenField name="controllerName" value="${file.controller}"/>
+          <g:hiddenField name="actionName" value="${file.action}"/>
+          <g:hiddenField name="id" value="${file.id}"/>
+          <textarea class="sourceCode" name="sourceCode" data-lang="${file.lang}">${file.sourceCode}</textarea>
+          <g:submitButton name="save" value="Save" class="submitBtn"/>
+        </g:form>
+      </div>
+    </g:each>
+  </div>
 </body>