How to create a customized webview in Appgyver Steroids

Question

I intend to create the following design:

• The main view should show a webpage
• It should have a drawer on the left side
• The drawer should be triggered by a 'hamburger' icon in the app header

I have the following app structure now:

Main view:

<div class="padding" ng-controller="IndexController">
    <super-navbar>
        <super-navbar-title>
            My first app!
        </super-navbar-title>
    </super-navbar>    
</div>

Controller:

angular
  .module('example')
  .controller('IndexController', function($scope, $document, supersonic) {
      $scope.navbarTitle = "Index";         
      addEventListener('load', load, false);
      steroids.view.displayLoading();
      var googleLayer = null;
      googleLayer = new steroids.views.WebView({ location: "http://example.com/page1" });;
      googleLayer.preload({}, {
          onSuccess: replaceLayer
      });

      function load() {        

          var options = {
              side: "left",
              width: 150
          }
          supersonic.ui.views.find("leftDrawer").then(function (leftDrawer) {
              supersonic.ui.drawers.init(leftDrawer);
              supersonic.ui.drawers.open("leftDrawer")
          });

      }
      function replaceLayer() {          
          steroids.layers.replace({
              view: googleLayer,
          }, {
              onSuccess: function () {
                  //alert("The layer stack has been replaced.");
              },
              onFailure: function (error) {
                  //alert("Could not replace the layer stack: " + error.errorDescription);
              }
          });
      }      
  });

Structure.coffee:

# Read more about app structure at http://docs.appgyver.com

module.exports =

  # See styling options for tabs and other native components in app/common/native-styles/ios.css or app/common/native-styles/android.css
#tabs
    rootView:
     location: "example#getting-started"

  preloads: [
    {
      id: "learn-more"
      location: "example#learn-more"
    }
    {
      id: "using-the-scanner"
      location: "example#using-the-scanner"
    }
  ]

  drawers:
    left:
      id: "leftDrawer"
      location: "example#drawer"
      showOnAppLoad: true
     options:
      animation: "swingingDoor"

 # initialView:
  #   id: "initialView"
   #  location: "example#initial-view"

The behavior so far:

• The application starts and displays a loading circle (because of steroids.view.displayLoading(); )
• The loading circle disappears and the webpage loads (as the googleLayer is replacing the initial view)
• No drawer is shown

I think, these modifications should be made:

• The initial view should already load the page (how? it is just a div)
• The drawer should be working
• There should be a clickable 'hamburger' icon

What should I modify to achieve the desired behavior? I can't find any proper tutorial or sufficient documentation.

Answer 1

Your initialview is commented. Remove the "#"

Answer 2

Regarding the first view you want to lunch:

You've to use either Tabs or InitialView and the way tabs work, is using the first tab content as pre-selected and display it. therefore, InitialView won't make any sense if you comment it or leave it open.

In Structure.coffee

tabs: [
    {
      title: "Index"
      id: "index"
      location: "home#index" # Supersonic module#view type navigation
    }
    {
      title: "About"
      id: "geolocation"
      location: "home#drawer"
    }
    {
      title: "Internet"
      id: "internet"
      location: "http://google.com" # URLs are supported!
    }
  ]

And in your case to use InitialView only, comment the lines above and uncomment the down one, this:

  rootView:
    location: "example#getting-started"

Regarding the drawer, first of all, make sure that you intent this array so it will be part of module.exports =

For clickable hamburger, you can't display it right now as icon in navbar (I guess this limitation because of supersonic directives are being rendered as native UIs).

To solve this issue , you may replace this entirely (which I don't recommend, performance of your application might be affected).

Or simply add this code to inner content of <super-navbar> where you want to display it, in your case getting-started.html

<super-navbar-button onclick="supersonic.ui.drawers.open('left')" >
    &equiv;
</super-navbar-button>