Coder Social home page Coder Social logo

feathersui / feathersui-openfl-js Goto Github PK

View Code? Open in Web Editor NEW
5.0 3.0 0.0 956 KB

Wrapper that allows JavaScript developers to use Feathers UI for OpenFL

Home Page: https://feathersui.com/

License: Other

Haxe 62.94% JavaScript 37.06%
feathers-ui

feathersui-openfl-js's Introduction

Feathers UI (npm version) 1.3.0

Feathers UI is a framework of graphical user interface (GUI) components for creative, cross-platform, frontend projects. It is especially well-suited for games, interactive data visualizations, and other rich, multimedia experiences.

โš ๏ธ This version of Feathers UI is intended for JavaScript developers. It's not as actively tested as the Haxe version of the same library, and some bugs should be expected.

Get started

The following instructions describe how to use Feathers UI with JavaScript.

Installation (npm)

Open a terminal, and then install Feathers UI using the following command:

npm install feathersui-openfl

This command will also automatically install any additional required dependencies, like OpenFL and Actuate, if necessary.

Installation (CDN)

Alternatively, Feathers UI may be added to any HTML file using a few <script> tags:

<script src="https://unpkg.com/[email protected]/dist/openfl.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/actuate.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/feathersui-openfl.min.js"></script>

Choose an editor or IDE

Visual Studio Code is recommended, but any editor or IDE that supports JavaScript should work with Feathers UI.

Sample code

class HelloWorld extends feathers.controls.Application {
  constructor() {
    super();

    this.layout = new feathers.layout.AnchorLayout();

    this.button = new feathers.controls.Button();
    this.button.layoutData = feathers.layout.AnchorLayoutData.center();
    this.button.text = "Click Me";
    this.button.addEventListener(
      feathers.events.TriggerEvent.TRIGGER,
      this.button_triggerHandler
    );
    this.addChild(this.button);
  }

  button_triggerHandler = (event) => {
    feathers.controls.TextCallout.show("Hello World", this.button);
  };
}

var stage = new openfl.display.Stage(0, 0, null, null, {
  allowHighDPI: true,
});
document.body.appendChild(stage.element);
stage.addChild(new HelloWorld());

Help & Support

News & Updates

feathersui-openfl-js's People

Contributors

joshtynjala avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

feathersui-openfl-js's Issues

Any plans to generate TypeScript types definitions?

I love Feathers since early Starling versions. Using openfl haxe version for some pet-projects.
Currently looking forward to do some frontend stuff with TypeScript and it would be cool if there is a TS version of Feathers (I see, that there is a repo with JS version)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.