Introduction

Author:

Stefan Eletzhofer

Date:

Feb 27, 2024

Introducing nexiles|elements apps

Prerequisites

OSX

http://cdn.sencha.com/cmd/6.0.0.202/jre/SenchaCmd-6.0.0.202-osx.app.zip https://www.sencha.com/legal/gpl/ -> check mail, click download link

Win

http://cdn.sencha.com/cmd/6.0.0.202/jre/SenchaCmd-6.0.0.202-windows-64bit.zip https://www.sencha.com/legal/gpl/ -> check mail, click download link

App Directory Structure

To create a app, we first need to create a app directory structure. The proposed standard structure looks like so:

.
├── docs
├── src
├── static
│   ├── css
│   ├── images
│   ├── js
│   └── resources
└── vendor

The directories have the following roles:

docs

The documentation for the application.

src

The source files of the application.

static

The application runtime directory. This directory will contain all runtime resources and dependencies needed to run the application. This directory will be packed and upload to the Windchill server.

vendor

This directory contains all external resources, frameworks etc. The build system will copy the dependencies to the runtime directory.

Build System

To build apps in an consistent and save manner, we have choosen to use CoffeeScript – see http://coffeescript.org. The build system uses a Cakefile to compile and assemble the app.

Quickstart

Prerequisites:

nexiles.tools.api and its prerequisites

Let’s assume that we want to create a new web application using nexiles.tools called ‘finder’. To do so, we first instantiate a template from the server using the ‘app-create’ command:

$ nxtools app-create --name finder
Created `finder` application form template `template`.

This created a folder in the current working directory called ‘finder’ and populated it with the contents of the template web application from the server.

Note

the server side application template contains a fully functional web application which may e.g. be styled according to some CI rules.

We now have some template code locally to work with. We now can get started to develop the application.

An example of an application structure might be:

.
├── app
│   ├── controller
│   │   └── APPController.js
│   ├── model
│   │   └── APPModel.js
│   ├── store
│   │   └── APPStore.js
│   └── view
│       ├── APPGridPanel.js
│       └── Viewport.js
├── app.html
├── app.js
├── bom.json
├── build
│   └── template-app.zip
├── img
│   └── gruenerpunkt.png
├── meta.json
└── vendor
    ├── ext-all-debug.js
    └── ext-all.css

8 directories, 13 files

The net effect is that we have a fully functional base example to work with.

For now, let’s imagine we altered the code – we now want to upload the new app. To do so, we issue the app-upload command and specify the finder directory – the directory whioch contains our application code:

$ nxtools app-upload finder
Created new iteration of `finder`: -.1

The command packaged the application and uploaded it to the server, creating a new iteration of it. We’re now able to preview it:

$ nxtools app-open finder

This will open a new web browser serving the application finder in it’s newest iteration.