Monterey User Manual
  • Introduction
  • What is Monterey
  • Quick guide through the User manual
  • Monterey and module loaders
  • Monterey future plans
  • Installing Monterey
  • Help system
    • Live tour
    • Tooltip based help
  • Features
    • App launcher
    • Aurelia-CLI
    • Dotnet
    • GistRun
    • Error logger
    • Gulp
    • JSPM manager
    • NPM manager
    • Preferences
    • Project info
    • Run
    • Support
    • Task manager
    • Terminal
    • Typings
    • Webpack
    • Workflow manager
  • Creating new applications
    • Aurelia-CLI
      • Default-ESNext
      • Default-TypeScript
      • Custom
    • skeleton-esnext-aspnetcore
    • skeleton-esnext-webpack
    • skeleton-esnext
    • skeleton-typescript-aspnetcore
    • skeleton-typescript-webpack
    • skeleton-typescript
    • GitHub
      • Contact manager tutorial
      • CM tutorial - KendoUI edition
        • Differences from the original version
      • CM tutorial - Materialize edition
        • Differences from the original version
  • Managing existing applications
  • Reaching support
Powered by GitBook
On this page
  1. Creating new applications
  2. GitHub

CM tutorial - Materialize edition

PreviousDifferences from the original versionNextDifferences from the original version

Last updated 7 years ago

Creating new application | GitHub

CM tutorial - Materialize edition

This application is the full implementation of Aurelia's used as the teaching tool for a new , further augmented by rendering its User interface using based Aurelia Visual Components.

The process starts with the definition of the location where the application will be persisted (Image 1). Note the red "number-markers" which indicate the sequence of mouse click needed to invoke the Files Explorer, select the folder and move to the wizard's next step.

Image 1

This template is persisted in GitHub (note that this approach can result with a huge number of templates) with very easy access as the next screen-shot (Image 2) shows: you simply copy the repository URL () into clipboard and then paste it in the GitHub URL field as shown on Image 3.

Image 2

Observe that Monterey "understands" the structure of the repository with the template we want to use and offers you to select a folder where the template "lives" (kendoui in this case), as shown on Image 3, marker 2.

image

Image 3

Click on the Next button on Image 3, marker 3, Monterey prompts for the name of the application to be created (Image 4), using the chosen folder name as the placeholder. In this situation, we should accept this name.

Image 4

Click on the Next button results with the project's configuration view (Image 5)

We are at the very important point in the "conversation" with the Monterey wizard, because the click on the Next button (marker 1 on Image 5) will result with Monterey's workflow form (Image 6). While at this time, this form is a simple listview enumerating the steps needed to build this app, this will eventually become a real, user programmable workflow - one of Monterey's most attractive features.

Another important point: Monterey is fully capable to detect the "type" of each project - in this case, it recognized that this project is created by Aurelia-CLI and will automatically create the content of this workflow form.

In this specific case, please accept all options, ensuring that the build process will start as soon as you click on the Next button (marker 1 on Image 6)

The build process started and invoked Monterey Task Manager which will show the progress of this build (note that the subsequent tasks fetch tasks and au run --watch are scheduled for the execution next (Image 7, down-facing arrow).

Note also the enabled check-box regulating the behavior of the embedded console, which provides the detailed information of the build process.

At this point, the reasonable next step would be to close Task manager view (Image 7) resulting with the "main view" (Image 8)

Monterey is also able to find out the running application's URL - meaning that you just have to click on the Chrome tile (Image 8, marker 1) in order to see the application running (Image 9)

Image 9

Finally, open the Task Manager view again (Image 11) and use the context menu based End task command to terminate the au run --watch process.

image

Image 5

Image 6

Image 7

Image 8

image

Image 11

Contact Manager Tutorial
web or SPA developer
Aurelia Materialize bridge
https://github.com/aurelia-ui-toolkits/cm-bridges