Creating your User Interface
The user interface of your project is what end users see at forio.com/app/your-user-or-team-id/your-project-id when they play with your model or simulation. The user interface includes both the components on the pages (charts, text, forms, images, etc.), including their layouts and styles; and the connection between those elements and the project's model.
Epicenter provides an Interface Builder, a template-based tool that generates HTML and JavaScript, and several different APIs, at different levels of abstraction. You can choose which options make the most sense for you and your project.
|
Epicenter Interface Builder and APIs
Read more about the elements of the Epicenter development stack:
The Interface Builder allows you to select and populate templates to create the user interface for your project, then fill out simple forms to reference variables and operations from your project's model. The Interface Builder generates HTML files in the Interface section of your project. (You can also edit these files manually if you like.)
- Some older projects may use the now-deprecated UI Builder, a drag-and-drop tool which also generates HTML and JavaScript files in the Interface section of your project.
Flow.js (Data Bindings) provides bindings between HTML elements in your user interface and variables and methods in your project's model. If you are most familiar with writing HTML and basic JavaScript, using Flow.js can save you some development time as compared with the other Epicenter APIs. Using Flow.js is also helpful for larger development teams (in which the UI developers and the modelers are different people) because it most completely separates your project's model from its interface. The Interface Builder generates code that uses Flow.js.
Epicenter.js (API Adapters) abstracts the underlying RESTful APIs into a set of services and utilities, so you can write directly in JavaScript. You can use this library with either callbacks or promises.
The Epicenter REST APIs The Epicenter REST APIs include functionality for working with particular runs and their data, and also for creating and administering users, groups, projects, and multiplayer worlds. In particular:
- The Data API and an aggregate Run API are for end user interactions with particular runs and projects.
- The User Management APIs let you create and look up end users and add them to groups with in your team and project. This section also includes administrative functionality around authentication and resetting passwords.
- The Multiplayer APIs are for creating multiplayer worlds, adding end users to those worlds, and starting runs for those worlds.
- The Other APIs section includes "everything else" — such as account and project information and the set of Model APIs that underly the aggregate Run API, Epicenter.js, and Flow.js.
Options for Rendering your Interface
With Epicenter, you have the option of creating your project's user interface with Interface files, rendered on the client-side, or with Node.js, rendered on the server-side.
Interface
Interface files are all of the resources that make up the user interface for your project: JavaScript files, HTML files, stylesheets, images, etc.
Create or upload these files to the Interface section within your project.
Files added to the Interface section within your project can be accessed (read) through the user interface of your project, or with the exact URI. For additional security, add a new folder in the Interface section and name it "protected". Files added to the "protected" folder are accessible only to end users who are logged in to your authenticated project.
See sample code by creating your interface with the Interface Builder, then look at the files created once you save your work.
Node.js
Node.js is JavaScript coding that you want to perform on the server-side, rather than in your client-side UI. This feature is only available for Enterprise teams.
This component of your project is optional, but in some cases can increase performance and improve the maintainability of your code. For example, you might aggregate API calls, perform validations, or execute other repeated tasks on the server-side.
See a sample of how to use Node.js with your project. Part of the sample includes details on how to enable Node.js for your project.