Update change(s) to:

0. General: Remove all hardcoded strings in Harp templates and place them in _data.json file. 1.1 Steps template: Make actions on Create Tabs non-hardcoded and multiple. This means: a. Modifying the HarpJs template code in the Steps.ejs template b. Adding further fields to the _data.json file.
ot4i · Mar 13, 2015 · 7b38da3 · 7b38da3
1 parent bfd361a
commit 7b38da3
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 44 deletions.
diff --git a/src/_data.json b/src/_data.json
@@ -16,6 +16,43 @@
 	"managerVersion": "1.0",
 	"downloadableForLocalInstall":"https://github.com/ot4i/tutorials/releases/download/localInstall.zip",
 "separatorFrameworkListJSON":{},
+	"_comments":
+	{
+"separator-ot4i":"",
+		"repoUrlProtocol":"http://",
+		"repoUrlSite":"ot4i.github.io",
+
+		"repoUrlFilepathCss":"/ot4i.tutorials/dist/css/main.css",
+		"repoUrlFilepathCssApp":"/ot4i.tutorials/dist/css/app.css",
+		"repoUrlFilepathJs":"/ot4i.tutorials/dist/js/main.js",
+
+		"repoUrlFilepathFoundationModernizr":"/ot4i.tutorials/dist/js/vendor/modernizr.js",
+		"repoUrlFilepathFoundationJquery":"ot4i.tutorials/dist/js/vendor/jquery.js",
+		"repoUrlFilepathFoundationJs":"/ot4i.tutorials/dist/js/vendor/foundation.min.js",
+
+		"repoUrlFilepathJson2":"/ot4i.tutorials/dist/js/json2.js",
+		"repoUrlFilepathJs2java":"/ot4i.tutorials/dist/js/js2java.js",
+		"repoUrlFilepathJs2javaSteps":"/ot4i.tutorials/dist/js/js2java_steps.js",
+		"repoUrlFilepathActionIcon":"/ot4i.tutorials/dist/images/icons/ibmdesign/back-right-previous_128-orange.png",
+
+"separator-Local":"",
+		"repoUrlProtocol":"http://",
+		"repoUrlSite":"localhost:3000",
+
+		"repoUrlFilepathCss":"/css/main.css",
+		"repoUrlFilepathCssApp":"/css/app.css",
+		"repoUrlFilepathJs":"/js/main.js",
+
+		"repoUrlFilepathFoundationModernizr":"/js/vendor/modernizr.js",
+		"repoUrlFilepathFoundationJquery":"/js/vendor/jquery.js",
+		"repoUrlFilepathFoundationJs":"/js/vendor/foundation.min.js",
+
+		"repoUrlFilepathJson2":"/js/json2.js",
+		"repoUrlFilepathJs2java":"/js/js2java.js",
+		"repoUrlFilepathJs2javaSteps":"/js/js2java_steps.js",
+
+		"repoUrlFilepathActionIcon":"/images/icons/ibmdesign/back-right-previous_128-orange.png"
+	},
 	"header":
 	  {
 	    "lang":"en-us",
@@ -25,12 +62,22 @@
 	    "keywords":"keywords",
 	    "robots":"index,follow",
 	    "source":"IBM Integration Bus V10 Tutorial",
+
 		"repoUrlProtocol":"http://",
-		"repoUrlSite":"ot4i.github.io",
-		"repoUrlFilepathCss":"/ot4i.tutorials/dist/css/main.css",
-		"repoUrlFilepathJson2":"/ot4i.tutorials/dist/js/json2.js",
-		"repoUrlFilepathJs2java":"/ot4i.tutorials/dist/js/js2java.js",
-		"repoUrlFilepathJs2javaSteps":"ot4i.tutorials/dist/js/js2java_steps.js",
-		"repoUrlFilepathFoundationModernizr":"ot4i.tutorials/dist/js/vendor/modernizr.js"
+		"repoUrlSite":"localhost:3000",
+
+		"repoUrlFilepathCss":"/css/main.css",
+		"repoUrlFilepathCssApp":"/css/app.css",
+		"repoUrlFilepathJs":"/js/main.js",
+
+		"repoUrlFilepathFoundationModernizr":"/js/vendor/modernizr.js",
+		"repoUrlFilepathFoundationJquery":"/js/vendor/jquery.js",
+		"repoUrlFilepathFoundationJs":"/js/vendor/foundation.min.js",
+
+		"repoUrlFilepathJson2":"/js/json2.js",
+		"repoUrlFilepathJs2java":"/js/js2java.js",
+		"repoUrlFilepathJs2javaSteps":"/js/js2java_steps.js",
+
+		"repoUrlFilepathActionIcon":"/images/icons/ibmdesign/back-right-previous_128-orange.png"
 	  }
 } 
diff --git a/src/_includes/details.ejs b/src/_includes/details.ejs
@@ -13,7 +13,7 @@
       <h4><%= tutorialCommon.name %></h4>
     </div>
     <div class="small-3 medium-3 large-3 columns"> 
-      <a href="javascript:;" onclick="openHelpSystem('/com.ibm.etools.msgbroker.helphome.doc/help_home_msgbroker.htm');" class="small right helplink">IBM Knowledge Center</a>
+      <a href="javascript:;" onclick="openHelpSystem('<%= tutorialCommon.helpLink.link %>');" class="small right helplink"><%= tutorialCommon.helpLink.text %></a>
     </div>
   </div> 
   <hr />

diff --git a/src/_includes/steps.ejs b/src/_includes/steps.ejs
@@ -1,3 +1,4 @@
+<% var header = public._data.header %>
 <% var content = thisTutorial.pageContent.navItems %>
 <% var tutorialCommon = thisTutorial.tutorial._common %>
 <% var tutorialSteps = thisTutorial.tutorial.pageSteps %>
@@ -14,19 +15,21 @@
 	  </div>
 	  <div class="small-3 medium-3 large-3 columns">
 	  	<div class="row">
-	    	<a href="javascript:;" onclick="openHelpSystem('/com.ibm.etools.msgbroker.helphome.doc/help_home_msgbroker.htm');" class="small right helplink">IBM Knowledge Center</a> 
+			<a href="javascript:;" onclick="openHelpSystem('<%= tutorialCommon.helpLink.link %>');" class="small right helplink"><%= tutorialCommon.helpLink.text %></a> 
+		</div>
+		<div class="row"><p></p></div>
+		<div class="row">
+			<div class="small radius button right" id="backToGallery" onclick="backToGallery()"> <%= content._common.buttonBackToGallery.text %>
+			</div>
 		</div>
 	  </div>
 	</div> 
 	<hr />
 	<div class="row">
-	  <div class="small-9 medium-10 large-10 columns">
+	  <div class="small-12 medium-12 large-12 columns">
 	    <h5> <%= tutorialCommon.shortDescription %> </h5>
 	  </div>
-			<div class="small radius button right" id="backToGallery" onclick="backToGallery()"> <%= content._common.buttonBackToGallery.text %>
-			</div>
 	</div>
-
 	<div class="row">          
 		  <div class="small-12 medium-12 large-12 columns">
 			<ul class="tabs vertical"> 
@@ -89,16 +92,21 @@
 								<% if ((link.type) && (link.type == "web")) { %>
 								<li> <a href="<%= link.link %>" title="<%= link.title %> <%= link.description %>"><%= link.description %></a> </li>
 								<% } else { %>								
-								<li> <a href="javascript:;" onclick="openHelpSystem('/<%= link.link %>')" title="<%= link.title %><%= link.description %>"><%= link.description %></a> </li>
+								<li> <a href="javascript:;" onclick="openHelpSystem('/<%= link.link %>');" title="<%= link.title %><%= link.description %>"><%= link.description %></a> </li>
 							   <% } %>	
 							<% } %>
 							</ul>
 						</div>
 						<% } %>
 					</div>
+					<% if (tutorialSteps.create.actions) { %>
 					<div class="small-2 medium-2 large-2 columns">
-					<h4 class="tkaction"><a href="javascript:;" onclick="importArtifacts(); openResource('<%= tutorialCommon.resourceToOpen %>');"> <%= tutorialSteps.create.actionName %> <img class="icon-image" src="http://ot4i.github.io/ot4i.tutorials/dist/images/icons/ibmdesign/back-right-previous_128-orange.png" /></a></h4>						
+					<% for (var i in tutorialSteps.create.actions.details) { %>
+					<% var link = tutorialSteps.create.actions.details[i] %>
+					<h4 class="tkaction"><a href="javascript:;" onclick="<%= link.method %>; openResource('<%= tutorialCommon.resourceToOpen %>');"> <%= link.name %> <img class="icon-image" src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathActionIcon %>" /></a></h4>						
 				    </div>
+					<% } %>
+					<% } %>
 		    	</div>
 		    	<div class="content" id="panel31">
 		    		<div class="small-10 medium-10 large-10 columns divider">

diff --git a/src/_layout.ejs b/src/_layout.ejs
@@ -1,5 +1,4 @@
 <!DOCTYPE html><% /* DNA-Comment: This DOCTYPE means this is an HTML5 document - http://www.w3.org/html/wg/drafts/html/master/single-page.html  */ %>
-<% /* See http://foundation.zurb.com/forum/posts/2849-purpose-of-ie9-comment-with-lt-ie10-class, http://zurb.com/article/1204/getting-foundation-and-ie8-to-play-nice, http://foundation.zurb.com/forum/posts/3330-ie9-and-foundation-5 */ %>
 <html class="no-js" lang="en">
 <% if (public._data) { %> <% /* DNA-Comment: Make sure we have header data  */ %>
 	<% var header = public._data.header %>
@@ -8,6 +7,7 @@
 		<!-- Use Internet Explorer 9 Standards mode for Eclipse Browser Control - https://www.eclipse.org/swt/faq.php#browsernativeie and https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx -->
   		<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 		
+		<!-- Next 2 http=equiv headers required to disable caching the Eclipse Browser Widget -->
 		<meta http-equiv="Pragma" content="no-cache">
   		<meta http-equiv="Expires" content="-1">
 
@@ -24,23 +24,23 @@
 		
 		<title><%= header.source %></title>
 
-    	<link rel="stylesheet" href="<%= header.githubUrlProtocol %><%= header.githubUrlSite %><%= header.githubUrlFilepathCss %>" /><% /* DNA-Comment: Foundation5 5.4.7 CSS and overrides  */ %>
+    	<link rel="stylesheet" href="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathCss %>" /><% /* DNA-Comment: Foundation5 5.4.7 CSS */ %>
+		<link rel="stylesheet" href="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathCssApp %>" /><% /* DNA-Comment: Foundation5 5.4.7 overrides */ %>
     	
-    	<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/json2.js"></script><% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %>
 		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathJson2 %>"></script><% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %>
-    	<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/js2java.js"></script><% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %>
 		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathJs2java %>"></script><% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %>
-		<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/js2java_steps.js"></script><% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %>
 		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathJs2javaSteps %>"></script><% /* DNA-Comment: IIB eclipse JavaScript to call Java APIs */ %>
-  		<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/vendor/modernizr.js"></script><% /* DNA-Comment: Foundation5 5.4.7 modernizr */ %>
 		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathFoundationModernizr %>"></script><% /* DNA-Comment: Foundation5 5.4.7 modernizr */ %>
 	</head>
 <!-- header::End -->
 <!-- body::Start -->
 		<%- yield %><% /* DNA-Comment: Insert content here. */ %>
 		<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/vendor/jquery.js"></script><% /* DNA-Comment: Foundation5 5.4.7 jquery */ %>
+		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathFoundationJquery %>"></script><% /* DNA-Comment: Foundation5 5.4.7 jquery */ %>
 		<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/vendor/foundation.min.js"></script><% /* DNA-Comment: Foundation5 5.4.7 JavaScript */ %>
+		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathFoundationJs %>"></script><% /* DNA-Comment: Foundation5 5.4.7 JavaScript */ %>
 		<script src="http://ot4i.github.io/ot4i.tutorials/dist/js/main.js"></script><% /* DNA-Comment: Custom JavaScript */ %>
+		<script src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathJs %>"></script><% /* DNA-Comment: Custom JavaScript */ %>
 	</body>
 <!-- body::End -->
 <% } %>

diff --git a/src/css/_custom.scss b/src/css/_custom.scss
@@ -270,4 +270,9 @@ p
 .content-details
 {
   padding: 0rem 0.5rem;
+}
+
+#backToGallery
+{
+	margin:0px;
 }
diff --git a/src/css/app.css b/src/css/app.css
@@ -0,0 +1,4 @@
+html, body {font-size: 85%; margin: 0 5px; }
+.icon-image {display: inline;}
+h5.tabdescription { margin: 10px 0; } 
+h4.tkaction { margin-top: 10px; text-align: center; }
diff --git a/src/css/main.scss b/src/css/main.scss
@@ -2,9 +2,4 @@
 @import "_foundation547/foundation";
 @import "_foundation547/normalize";
 @import "_ibmSettings";
-@import "_custom";
- html, body {font-size: 85%; margin: 0 5px; }
- div.manager-container { width: 80%; max-width:1200px; margin:auto; }
- .icon-image {display: inline;}
- h5.tabdescription { margin: 10px 0; } 
- h4.tkaction { margin-top: 10px; text-align: center; }
+@import "_custom";
diff --git a/src/tutorialExample/en/_data.json b/src/tutorialExample/en/_data.json
@@ -22,12 +22,17 @@
   {
     "_common":
 	{
-      "name":"HTTP Input to drive a message flow",
-      "shortDescription":"Learn how to use an HTTPInput node to parse JSON data in an IBM Integration Bus message flow by exploring this simple example.",
-      "durationText":"This tutorial takes approximately",
-      "durationTime":"5 minutes",
-      "_resourceToOpenComment":"The ID of the first resource to open when the user imports the tutorial. Resource IDs are defined in the repo_metadata.json Tutorials listing on ot4i.",
-      "resourceToOpen":"MainFlow"
+		"name":"HTTP Input to drive a message flow",
+		"shortDescription":"Learn how to use an HTTPInput node to parse JSON data in an IBM Integration Bus message flow by exploring this simple example.",
+		"durationText":"This tutorial takes approximately",
+		"durationTime":"5 minutes",
+		"_resourceToOpenComment":"The ID of the first resource to open when the user imports the tutorial. Resource IDs are defined in the repo_metadata.json Tutorials listing on ot4i.",
+		"resourceToOpen":"MainFlow",
+		"helpLink":
+		{
+		  "text":"IBM Knowledge Center",
+		  "link":"/com.ibm.etools.msgbroker.helphome.doc/help_home_msgbroker.htm"
+		}
     },
     "pageDetails":
 	{
@@ -66,13 +71,17 @@
         ]
       }
     },
-    "pageSteps":{
-      "concept":{
-        "overview":{
+    "pageSteps":
+	{
+      "concept":
+	  {
+        "overview":
+		{
           "name":"Overview",
           "heading":"Overview",
           "_overviewComment":"A short description of what this tutorial does, and what the user will do to run the tutorial.",
-          "sections":[
+          "sections":
+		  [
             {
               "section":"This tutorial demonstrates a simple message flow that receives JSON data over HTTP. The flow transforms the input JSON structure into a different output JSON structure using a graphical data mapping node and sends this back to the HTTP request."
             },
@@ -100,28 +109,44 @@
           ]
         }
       },
-      "create":{
-        "overview":{
+      "create":
+	  {
+        "overview":
+		{
           "name":"Create",
           "heading":"Import projects",
           "_createComment":"A description of what will happen when the user clicks Import.",
-          "sections":[
+          "sections":
+		  [
             {
               "section":"The HTTPInputApplication application includes one project that is imported into your workspace."
             }
           ]
         },
-        "helpLinks":{
+        "helpLinks":
+		{
           "title":"Find out more",
-          "details":[
+          "details":
+		  [
             {
               "title":"Knowledge Center link to ",
               "description":"Developing integration solutions by using applications",
               "link":"com.ibm.etools.mft.doc/bi12002_.htm"
             }
           ]
         },
-        "actionName":"Import"
+		"actionName":"Import",
+		"actions":
+		{
+			"title":"Create Actions",
+			"details":
+			[
+				{
+					"name":"Import",
+					"method":"importArtifacts()"
+				}
+			]
+		}
       },
       "prepare":{
         "overview":{
@@ -140,9 +165,11 @@
             }
           ]
         },
-        "helpLinks":{
+        "helpLinks":
+		{
           "title":"Find out more",
-          "details":[
+          "details":
+		  [
             {
               "title":"Knowledge Center link to ",
               "description":"Developing integration solutions by using integration services",