How to include JavaScript Framework within AppBuilder?

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Take a look at some frequently asked questions about us and our products!

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Eduardo Alfaro

Hello to anyone…

I am wondering about if we can include a JavaScript framework (or more than one) into our APP with AppBuilder.

I mean, there are a lot of JS (JavaScript) frameworks that gives you a lot of new functionalities and powerful features so you can include all of them into your own projects, websites and hybrid-apps.

I have tried to include, for example, “paper.js” JS frameworkb, but I really do not know to proceed or complete the process.

Please, if you have time, take a look to its website for more information: http://paperjs.org/about/

I know how to include the JavaScript “.js” file with the AppBuilder APP File Manager... but I do not know how to call it and then create the canvas.

First of all you need to call the “.js” file:

<script type="text/javascript" src="../../dist/paper-full.js"></script>

Then next, create the script code for the canvas:

    <script type="text/paperscript" canvas="canvas">
    // The amount of symbol we want to place;<br>    var count = 150;</p>
<p>    // Create a symbol, which we will use to place instances of later:<br>    var path = new Path.Circle({<br>        center: new Point(0, 0),<br>        radius: 5,<br>        fillColor: 'white',<br>        strokeColor: 'black'<br>    });</p>
<p>    var symbol = new SymbolDefinition(path);</p>
<p>    // Place the instances of the symbol:<br>    for (var i = 0; i < count; i++) {<br>        // The center position is a random point in the view:<br>        var center = Point.random() * view.size;<br>        var placed = symbol.place(center);<br>        var scale = (i + 1) / count;<br>        placed.scale(scale);<br>        placed.data.vector = new Point({<br>            angle: Math.random() * 360,<br>            length : scale * Math.random() / 5<br>        });<br>    }</p>
<p>    var vector = new Point({<br>        angle: 45,<br>        length: 0<br>    });</p>
<p>    var mouseVector = vector.clone();</p>
<p>    function onMouseMove(event) {<br>        mouseVector = view.center - event.point;<br>    }</p>
<p>    // The onFrame function is called up to 60 times a second:<br>    function onFrame(event) {<br>        vector = vector + (mouseVector - vector) / 30;</p>
<p>        // Run through the active layer's children list and change<br>        // the position of the placed symbols:<br>        for (var i = 0; i < count; i++) {<br>            var item = project.activeLayer.children<em>;<br>            var size = item.bounds.size;<br>            var length = vector.length / 10 * size.width / 10;<br>            item.position += vector.normalize(length) + item.data.vector;<br>            keepInView(item);<br>        }<br>    }</p>
<p>    function keepInView(item) {<br>        var position = item.position;<br>        var itemBounds = item.bounds;<br>        var bounds = view.bounds;<br>        if (itemBounds.left > bounds.width) {<br>            position.x = -item.bounds.width;<br>        }</p>
<p>        if (position.x < -itemBounds.width) {<br>            position.x = bounds.width + itemBounds.width;<br>        }</p>
<p>        if (itemBounds.top > view.size.height) {<br>            position.y = -itemBounds.height;<br>        }</p>
<p>        if (position.y < -itemBounds.height) {<br>            position.y = bounds.height  + itemBounds.height / 2;<br>        }<br>    }<br>    </script>

And finally, call the canvas:

<canvas id="canvas" resize hidpi="off" style="background:black"></canvas>

Do you have any idea how to include this and other JS Framework whintin AppBuilder?

I think this kind of feature will be..... gorgeous!!! ;-D

Thank you so much!!!

Eduardo.

DecSoft

Hello Eduardo,

Certainly its possible to use thirdparty Javascript in our DecSoft's App Builder applications. As you know, basically we must to include the appropriate Javascript file(s) using the Files Manager, and, in the proper order. Most of times we need to prepare an HTML Content control that contain the elements for our Javascript code, for example, a "canvas" HTML element like in the case of Paper.js.

After that we need to deal with the Javascript code in the proper way, for example, I am not sure about your above code, because they don't initialize any canvas element. Basically, after add the appropriate Javascript files, we must use the right Javascript code in the right place in our application: you know that we can use Javascript code in any place, just placing it between the "StartJS" and "EndJS" actions.

I prepare a "PaperJs" sample for you that shown how we can use the jQuery the Paper.js Javascript libraries in our applications. This sample is included now in the current DecSoft's App Builder release, but I also upload it here for your convenience: PaperJs.zip.

Purchase one or more licenses of our products if they are useful to you!

Eduardo Alfaro

Hello David,

Really!!! YOU ARE INCREDIBLE!!!

This JS library gives to AppBuilder lots of new features!!!
THANK YOU so much for your knowledge

Eduardo

DecSoft

Hello to all,

Hello David,

Really!!! YOU ARE INCREDIBLE!!!

This JS library gives to AppBuilder lots of new features!!!
THANK YOU so much for your knowledge

Eduardo

You're welcome Eduardo! Please, let me know if you have any further questions. :)

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.