Menu

The Finished Tutorial Code

Here's what your app.js file should look like after you've finished the Astro Tutorial (it works on both iOS and Android):

window.AstroMessages = []; // For debugging messages

// Astro
import Application from 'astro/application';
import AnchoredLayoutPlugin from 'astro/plugins/anchoredLayoutPlugin';
import NavigationPlugin from 'astro/plugins/navigationPlugin';
import HeaderBarPlugin from 'astro/plugins/headerBarPlugin';
import DrawerPlugin from 'astro/plugins/drawerPlugin';
import WebViewPlugin from 'astro/plugins/webViewPlugin';

import Promise from 'bluebird';

window.run = async function() {

    // Enter your site url here
    const baseUrl = 'http://localhost:5000';

    // Initialize plugins
    const mainNavigationPromise = NavigationPlugin.init();
    const layoutPromise = AnchoredLayoutPlugin.init();
    const headerPromise = HeaderBarPlugin.init();
    const drawerPromise = DrawerPlugin.init();
    const cartWebViewPromise = WebViewPlugin.init();

    const [
        layout,
        mainNavigationView,
        headerBar,
        drawer,
        cartWebView
    ] = await Promise.all([
        layoutPromise,
        mainNavigationPromise,
        headerPromise,
        drawerPromise,
        cartWebViewPromise
    ]);

    mainNavigationView.setHeaderBar(headerBar);

    mainNavigationView.navigateToUrl(baseUrl, {
        header: {
            leftIcon: {
                id: 'account',
                imageUrl: 'file:///account.png'
            },
            centerIcon: {
                id: 'logo',
                imageUrl: 'file:///velo.png'
            },
            rightIcon: {
                id: 'cart',
                imageUrl: 'file:///cart.png'
            }
        }
    });

    // When the back button is pressed navigate back
    headerBar.on('click:back', () => {
        mainNavigationView.back();
    });

    // When the (Android hardware) back button is pressed navigate backwards
    Application.on('backButtonPressed', () => {
        mainNavigationView.back();
    });

    // Use the mainNavigationView as the main content view for our layout
    layout.setContentView(mainNavigationView);

    // Set up the header bar
    headerBar.setBackgroundColor(`#FFFFFF`);
    headerBar.setTextColor(`#333333`);

    layout.addTopView(headerBar);

    Application.dismissLaunchImage();

    // Set our layout as the main view of the app
    Application.setMainViewPlugin(drawer);
    drawer.setContentView(layout);

    cartWebView.navigate(`${baseUrl}/cart`);
    cartWebView.setBackgroundColor(`#FFFFFF`);
    // Don't navigate when links are pressed
    cartWebView.disableDefaultNavigationHandler();

    // Set the right drawer view to the cart web view instance once the promises have been fulfilled.
    const rightDrawer = drawer.initRightMenu(cartWebView);

    headerBar.on('click:cart', () => {
        rightDrawer.toggle();
    });

    mainNavigationView.on('addToCartClicked', () => {
        // Open the right drawer
        rightDrawer.open();
        // Let the cart view know that something has been added
        cartWebView.trigger('cartUpdated');
    });
};
// Comment out next line for JS debugging
window.run();