7.0.3 • Published 5 years ago

websemble v7.0.3

Weekly downloads
6
License
Apache-2.0
Repository
github
Last release
5 years ago

websemble

Desktop application MVC framework

it offers the following features:

  • Based on web technology. Built on top of Electron
  • File system storage service with a REST API
  • Web component support
  • i18n support with i18next
  • View template support with Handlebars

Installation

cd myproject
npm install websemble

Getting started

First let's create a view to display, the Index view.

mkdir -p frontend/component/view/Index

In the index folder create a Controller.js file and a View.html file. The content should be:

function IndexController( view, scope ){
 this.super( view, scope );
}

module.exports = IndexController;
<template class="main">
 <h1>Hello World!</h1>
</template>

<script>
   (function(window, document, undefined) {
     require( "websemble" ).frontend.createComponent( 'view-index' );
   })(window, document);
</script>

Next we will create the App component.

mkdir -p frontend/component/core/App

As with the view component, we have to create a Controller and a View file for the App.

function AppController( view, scope ){
  this.super( view, scope );
  scope.resolveAppReady();
}

module.exports = AppController;

The resoleveAppReady funtion call lets the other components know that the app has finished initializing. You may want to call this method after assets are loaded, for example.

<template class="main">
  <view-index></view-index>
</template>

<script>
    (function(window, document, undefined) {
      require( "websemble" ).frontend.createComponent( 'core-app' );
    })(window, document);
</script>

Next create the app.js file in the root with the following content:

var Websemble = require('websemble');
var app = new Websemble.backend.App();

Make sure that the value for the main attribute in the package.json configuration file is "app.js".

The last file we need to create is the index.html in the root.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>websemble</title>
    <link rel="import" href="frontend/component/core/App/View.html" />
    <link rel="import" href="frontend/component/view/Index/View.html" />
    <style>
      core-app {
        display:block;
      }
    </style>
  </head>
  <body>
    <core-app></core-app>
  </body>
</html>

You will need electron to run your application:

npm install electron-prebuilt

To run your application, just type:

./node_modules/.bin/electron .

Dig deeper

We have developed a very handy tool to generate boiler plate code for your websemble application. Checkout the Yeoman websemble generator.

For information about the motivation and architecture behind websemble, have a look at the project's wiki.

To learn about making desktop applications with html5, head to the Electron website. This is the framework on top of which websemble is built.

7.0.3

5 years ago

7.0.2

5 years ago

7.0.1

6 years ago

7.0.0

6 years ago

6.2.0

6 years ago

6.1.0

6 years ago

6.0.3

6 years ago

6.0.2

6 years ago

6.0.1

6 years ago

6.0.0

6 years ago

5.6.1

6 years ago

5.6.0

6 years ago

5.5.5

7 years ago

5.5.4

7 years ago

5.5.3

7 years ago

5.5.2

7 years ago

5.5.1

7 years ago

5.5.0

7 years ago

5.4.0

7 years ago

5.3.0

7 years ago

5.2.2

7 years ago

5.2.1

7 years ago

5.2.0

7 years ago

5.1.0

7 years ago

5.0.0

7 years ago

4.1.0

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.1.0

7 years ago

3.0.0

7 years ago

2.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago

0.5.5

7 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.4.1

8 years ago

0.4.0

8 years ago

0.3.5

8 years ago

0.3.4

8 years ago

0.3.3

8 years ago

0.3.2

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago