Development of Apps for CrypTool Online (CTO) with the Vue Framework

Development of Apps for CrypTool-Online (CTO) with the Vue Framework

We assume that you develop the algorithm of the cipher and want it to be shown on the CTO website. After finishing the algorithm, please deliver the files index.html, build.css, and build.js, and the src directory (source code). Further (technical) prerequisites are listed below.

Start (NPM)

1. A prerequisite for the development is: having installed NPM https://www.npmjs.com/
2. It contains the file package.json which specifies all required packages:

• In the console under the app directory the packages are installed with 'npm install'
  • For example, it should contain: vue, watchify, http-server, cross-env, npm-run-all
  • It is recommended to view the package.json from the maS (monoalphabetic substitution) or from the ADFGVX app
• With 'npm run commandName', services configured under scripts can be started

3. An index.html, in which the compressed files (by cross-env & browserify) are integrated, must also exist in the app directory

Language Basics (ES2015/16 - ES6)

1. ECMAScript (ES) is a standardized specification of JavaScript and ES2016 is the current version
2. Object oriented programming
3. Explicit export of an object via export default Object;

Vue Framework Basics

1. Lifehooks

• beforeCreate() describes the state of an object before it is created
• created() describes the state of an object after it was created

2. Variables and attributes are defined under data() { return { } }
3. Functions are defined in a script under methods: { }
4. Components must be imported in the parent object and defined under components: { }
5. Observers are defined under watch: { }

• Caution that no 'chains' are created!

6. Mixins can be functions or data, which are used several times by other components/objects

• these are injected and instantiated under mixins: [ ]
• if mixins/components contain the same variables or identically named functions, they are combined into an object. Exception: created

Vue Framework Templating

1. Possible design in .vue file or (partial) paging in files .vue, .html, .css, .js

• Best practise: Minimum allocation in .vue und .js

2. Template within the tag <template></template>

• Placeholders for components can be specified either with tag names e.g. or as id
• The .js file is granted to access an item by Vue.component('ComponentTagName', {...})
• If there are several sections, a surrounding div should always exist
• Simple data binding by two braces {{ attribute }}

3. Translation is carried out, for example, by the VueI18n-Plugin from the locale.json file

• To be specified in the Template via {{ $t('linkedWord') }}

4. Directives

• v-if => The element is rendered by a true expression; combinations/cases with v-else, v-else-if
• v-show => Almost identical to v-if; intended to toggle an element through a truth value (this is based on CSS toggling)
• v-model => Creates a two-way binding for a variable for input or output. Sample: v-model='inputTextArea'
• v-bind: => Binds an item from a html element to an expression. Shorthand: :value='myVariable'
• v-on: => Listens to DOM events, for example, a mouse click. Shorthand: @click='toDo'

Explaining Vue Framework Templating with the Monoalphabetic Substitution (maS) sample

For an overview of the components for this app, see the Diagram: Development of maS ... or for the ADFG(V)X, see Diagram: Development of ADFG(V)X ...

1. main.js is the major object and includes plugin configurations like VueI18n for multilingual support

• Reference to the app object to be rendered

2. The app object Prime is the top and consists of 3 files:

• prime.vue for the template/source instructions (references: .html, .css, .js)
• prime.html for the template
• prime.js inherits from Vue and
  • can be seen as a mediator (design pattern)
  • under mixins required modules are injected
  • components that occur in the template must be imported (instruction under components)
  • first creates a new Vue instance, which serves as an event bus
    • Vue instance and event listener are created in beforeCreated()
    • Listens to according events and then calls up the corresponding functions of the model (algorithm)
  • under watch, it observes changes to variables/attributes and sends appropriate events

3. The object EventBus contains an algorithm which searches for the created bus object of the top class (Prime) and returns this

• Each component that injects the EventBus receives the communication channel for the app
• A constant object EventNames was created to unify the event names

4. AppData from the directory config,

• has the variables/data (so they do't have to be specified several times in individual components)
• in addition, all components have the same prerequisites for the start => thus starting configuration at a central location

5. AppConfig contains additional information on which components or parts should be activated/deactivated
   => this is useful for algorithms that are similar and use almost the same components without making major changes to components/templates
   => e.g. maS uses keywords (KeywordBox), which are not intended for Caesar
6. Components are "on the same level" or are in a so-called parent-child relationship, see the Diagram: Development of maS ...

• The parent component imports the child component (example: KeyBox & Rot13) and the AppConfig
• Event listener are defined in created()

Styling CSS (Suggestion)

1. Splitting the CSS information

• basic.style.css contains CSS information which applies across framework
• basic.cto.css contains CSS information from basic.style.css but adapted for CTO
• prime.css contains the general styling instructions for Vue apps
• appName.css for adjustments/deviations of the individual app
• effectName.css information that applies only to a component, e.g. for the popup, accordion, or tabs [//]: # ( Bitte ergänzen, was wann Vorrang hat.)

Deploy for CTO

1. Use cross-env to create a build for the production
2. The packed build.css from the dist directory (default template) should be placed in the cto.config.json under 'styles'. Similarly, the build.js should be placed under 'body'. In addition, three scripts are required in this order:

• "../../vendor/jquery-3.1.1.min.js",
• {"file": "env.js", "type": "text/javascript"},
• {"file": "../../loaders/jQueryAppLoader.js", "type": "text/javascript"}

3. env.js must contain a path as follows: var appDir = '_ctoApps/vue/appDirName/';

References:
- https://vuejs.org/v2/guide/
- https://vuejs.org/v2/api/
- https://babeljs.io/learn-es2015/