Difference between revisions of "My First App"

Difference between revisions of "My First App"

From BeamNG
(Structure)
(Moved css section to Advanced Tutorial since CSS is not _required_ for a basic app)
Line 3: Line 3:
 
= My First App =
 
= My First App =
  
The general idea is that this page will be a basic introduction to getting a basic app up and running. This will not be a from scratch tutorial - at least some knowledge of HTML and JavaScript will be needed, or if you have experience in some JS-like language you should be able to pick up what is happening just fine. If you do not have a basic understanding of HTML and JavaScript, there are some excellent resources on the WWW that can help you out.  
+
The general idea is that this page will be a quick introduction to getting a basic app up and running. This will not be a from scratch tutorial - at least some knowledge of HTML and JavaScript will be needed, or if you have experience in some JS-like language you should be able to pick up what is happening just fine. If you do not have a basic understanding of HTML and JavaScript, there are some excellent resources on the WWW that can help you out.  
  
 
Notes:  
 
Notes:  
Line 64: Line 64:
 
     $("<h1>Hello World!</h1>").appendTo(this.rootElement);
 
     $("<h1>Hello World!</h1>").appendTo(this.rootElement);
 
};
 
};
</source>
 
 
== app.css ==
 
[http://www.w3schools.com/css/| More info on W3Schools]
 
 
The app.css file used for describing the look and formatting of a document.
 
 
Example:
 
<source lang="css">
 
p {
 
    font-family: Verdana, Arial, Helvetica, sans-serif;
 
    font-size: 11pt;
 
}
 
 
</source>
 
</source>
  
Line 83: Line 70:
 
After saving those files you are now ready to test in game.
 
After saving those files you are now ready to test in game.
 
If you are already ingame and have the -cefdev argument on you can just click the ReloadUI button, otherwise restart the game. When opening the appstore you should see your app in there, and after clicking on it it should display "Hello World!" in large text. Congratulations!
 
If you are already ingame and have the -cefdev argument on you can just click the ReloadUI button, otherwise restart the game. When opening the appstore you should see your app in there, and after clicking on it it should display "Hello World!" in large text. Congratulations!
 +
 +
The [[Advanced Tutorial]] includes more information on formatting and making your app more useful.

Revision as of 16:09, 25 June 2014

My First App

The general idea is that this page will be a quick introduction to getting a basic app up and running. This will not be a from scratch tutorial - at least some knowledge of HTML and JavaScript will be needed, or if you have experience in some JS-like language you should be able to pick up what is happening just fine. If you do not have a basic understanding of HTML and JavaScript, there are some excellent resources on the WWW that can help you out.

Notes:

  • BeamNG's UI system makes extensive use of the jQuery, jQuery UI and jQuery Mobile JavaScript libraries, if you know these, or at least have the documentation open when building apps, this can save you a lot of time working out how to complete certain tasks.
  • Running BeamNG with the -cefdev argument will give you a window similar to Chrome's dev tools panel, enabling you to play around with the html/css and view console messages from the ingame HTML framework, and will enable a "ReloadUI" button when ingame so you dont have to reload the game to reload the UI and apps.

Required Files

At a minimum, an app requires 2 files and one folder.

Structure

To create an app from scratch, you need to have the following files under [BeamNG Root Directory]/html/apps/:

apps/
    AppNameHere/
        app.js
        app.json

For the rest of this tutorial, the app name will be "MyFirstApp," therefore, the folder under apps in this case would be called "MyFirstApp."

app.json

Full article on app.json

The app.json file describes general information about the app, and what it requires from the game and how it should be displayed. See the full article for more detailed information on what can be described in this file. The example file below will get you started with a basic app that will appear in the appstore and have an initial size of 500x200px;

Example:

{
    "info": {
        "name" : "MyFirstApp",
        "author": "AuthorNameHere",
        "version": "0.1",
        "description": "This will be displayed in the appstore."
    },

    "appearance": {
        "background" : "opaque",
        "size" : {
            "initial" : [500,200]
        }
    },

    "data": {
        "streams" : []
    }
}

app.js

Full article on app.js

The app.js file is the main JavaScript source code for the app. There are two required parts of the file that are 100% required: the first line which names the class of the app and the initialize function which is called on app load. The names must match the name of the app's folder. In this example, an HTML heading element is created with contents "Hello World!" ($("<h1>Hello World!</h1>")) and appended to the root element of the app (.appendTo(this.rootElement)). If this syntax doesn't seem familiar to you, reading the jQuery library documentation may useful.

Example:

function MyFirstApp() {}

MyFirstApp.prototype.initialize = function () {
    $("<h1>Hello World!</h1>").appendTo(this.rootElement);
};

Testing

The described MyFirstApp ingame.

After saving those files you are now ready to test in game. If you are already ingame and have the -cefdev argument on you can just click the ReloadUI button, otherwise restart the game. When opening the appstore you should see your app in there, and after clicking on it it should display "Hello World!" in large text. Congratulations!

The Advanced Tutorial includes more information on formatting and making your app more useful.