example of complex Codenvy Guided Tour

CodenvyComplexGuidedTour

{
  "hasWelcomeStep" : true,
  "steps": [
    {
      "title": "Getting Started with TKP and Codenvy",
      "content": "Apache TomEE (pronounced \"Tommy\") is an all-Apache Java EE 6 Web profile certified stack built on Apache Tomcat. Discover how to get started with TomEE, using our JAX-RS/Angular starter project. This fork-and-go project is a great starting point for your own JAX-RS application.\n\nDiscover Apache TomEE in Codenvy, the world's most advanced cloud IDE. Modify the code for this project, build it, run it and share it from within your browser.\n\nThis tour will guide you through editing and running the JAX-RS sample in Codenvy.\n\nIt will take 3 minutes to complete.\n\nIf you need help contact us on our [http://tomee-openejb.979440.n4.nabble.com/TomEE-Users-f979441.html Users Forum]. This temporary workspace will destroy your work if you become idle.  [https://codenvy.com/site/create-account Sign up for a free account] to save your work.",
      "element": "gwt-debug-MainToolbar/runApp-true",
      "placement": "BOTTOM",
      "xOffset": "200",
      "yOffset": "100",
      "width" : "400",
      "skipButtonLabel": "No thanks",
      "nextButtonLabel": "Start the tour !",
	  "overlays": [
	          {
	            "zIndex": "5",
	            "width": {"value": 100, "unit" : "%"},
	            "height": {"value": 100, "unit" : "%"},
	            "backgroundColor": "rgba(50,50,50,0.72)"
	          },
	          {
	            "url": "https://raw.githubusercontent.com/codenvy/factories/factory-2.0/guided-tour/getting-started/images/build.png",
	            "element": "gwt-debug-MainToolbar/runApp-true",
	            "xOffset": "-32",
	            "yOffset": "-2"
	          },
	          {
	            "url": "https://raw.githubusercontent.com/codenvy/factories/factory-2.0/guided-tour/getting-started/images/help.png",
	            "element": "gwt-debug-MainMenu/helpGroup-true"
	          },
	          {
	            "url": "https://raw.githubusercontent.com/codenvy/factories/factory-2.0/guided-tour/getting-started/images/explorer.png",
	            "element": "gwt-debug-tabButton-Datasource",
	            "xOffset": "18",
	            "yOffset": "-30"
	          },
	          {
	            "url": "https://raw.githubusercontent.com/codenvy/factories/factory-2.0/guided-tour/getting-started/images/builder-runner.png",
	            "element": "gwt-debug-tabButton-Builder",
	            "xOffset": "0",
	            "yOffset": "-1"
	          },
	          {
	            "url": "https://raw.githubusercontent.com/codenvy/factories/factory-2.0/guided-tour/getting-started/images/ram.png",
	            "element": "memory-widget-panel",
	            "xOffset": "-264",
	            "yOffset": "-2"
	          },
	          {
	            "url": "https://raw.githubusercontent.com/codenvy/factories/factory-2.0/guided-tour/getting-started/images/visibility-permission.png",
	            "element": "gwt-debug-permissions-panel-rights",
	            "xOffset": "-263",
	            "yOffset": "-4"
	          }
	        ]
    },
    {
      "title": "Run the app",
      "content": "Let's start by running the app. Codenvy launches TomEE in a Docker container for each run. Your project's code and artifacts are copied into the runner automatically.",
      "element": "gwt-debug-MainToolbar/runApp-true",
      "placement": "BOTTOM",
      "xOffset": "-11",
      "yOffset": "-7",
      "width": "300",
      "actions": [
        {
          "action": "trigger runApp"
        }
      ]
    },
    {
      "title": "Preview the app",
      "content": "When the runner has finished loading, the application preview URL will appear. Clicking the URL will view the application in a new browser tab. Console applications will display output in the console panel.\nClick the URL here to see the application.",
      "element": "gwt-debug-Application",
      "width": "450",
      "placement": "TOP",
      "xOffset": "100",
      "yOffset": "7"
    },
    {
      "title": "Access the Terminal",
      "content": "Every Codenvy runner has a terminal with root access. Try it by typing “top” to get a list of your running processes. The TomEE instance used to run the app is available in /home/user/tomee.",
      "element": "gwt-debug-MainToolbar/shutdownApp-true",
      "placement": "TOP",
      "xOffset": "-40",
      "actions": [
        {
          "action": "openfile src/main/java/org/supertribe/PhoneService.java"
        }
      ]
    },
    {
      "title": "Edit the app",
      "content": "This is the PhoneService class, and is the endpoint for the /phone/list JAX-RS service. As an example, this service returns a hardcoded list of cell phones and some details on their features, but you can change this to add your own logic - maybe calling a database via JPA, for example. Try changing this code and re-running the app to see the changes.\n\nThe Codenvy editor includes key bindings for emacs, vi, and sublime along with syntax highlighting, auto-complete (ctrl + space), error warnings, quick-fix, code folding, and international keyboard support.",
      "element": "gwt-debug-projectExplorerTree-panel",
      "placement": "LEFT",
      "width" : "250",
      "xOffset": "270",
      "yOffset": "70",
      "actions": [
        {
          "action": "openfile src/main/webapp/assets/js/controllers.js"
        }
      ]
    },
    {
      "title": "Edit the app",
      "content": "This is the angular controller for this application. This is making a simple HTTP GET call to the /phones/list endpoint to retrieve the phones to display.",
      "element": "gwt-debug-projectExplorerTree-panel",
      "placement": "LEFT",
      "width" : "250",
      "xOffset": "270",
      "yOffset": "70",
      "actions": [
        {
          "action": "openfile src/main/webapp/index.html"
        }
      ]
    },
    {
      "title": "Edit the app",
      "content": "This is the main index page for the application. Here you can see the ng-repeat directive to loop over the data returned from the service and the {{phone.name}} and {{phone.snippet}} expressions.",
      "element": "gwt-debug-projectExplorerTree-panel",
      "placement": "LEFT",
      "width" : "250",
      "xOffset": "270",
      "yOffset": "70"
    },
    {
      "title": "See your Change",
      "content": "Checking your change is as easy as re-running the app.",
      "element": "gwt-debug-MainToolbar/runApp-false",
      "placement": "BOTTOM",
      "xOffset": "-11",
      "yOffset": "-7"
    },
    {
      "title": "End of the tour",
      "content": "That's the end of the tour. You're now ready to start developing your own JAX-RS based applications with Apache TomEE!\n\nPlease note that this workspace is temporary and will be deleted if you become inactive, or close your browser.\n\nYou can signup for a free Codenvy account to get a named workspace with unlimited private projects, so you can save your changes to this app. You can also import your existing projects quickly and easily. Click signup below to be guided through the simple signup process.",
      "element": "gwt-debug-MainMenu/git-true",
      "placement": "BOTTOM",
      "xOffset": "200",
      "yOffset": "100",
      "width" : "600",
      "hideArrow" : true,
      "hideBubbleNumber" : true,
      "skipButtonLabel": "End tour",
      "nextButtonLabel": "Signup",
      "actions": [
        {
          "action": "openurl https://codenvy.com/site/create-account"
        }
      ]
    }
  ]
}

testing