Code Monkey home page Code Monkey logo

bender's Introduction

Bender; or, a Declarative Language for Web Applications.

Copyright © 2011-2014 IGEL Co., Ltd.

Bender is an experimental, declarative language for Web application authoring. It is built on top of HTML5, Javascript and XML and focuses on rich graphical user interfaces. It is free software and is released under the Apache License v2.0.

Bender builds on the idea of declarative languages like HTML, SVG and CSS to describe not only the layout of an application, but also its structure and its behavior. The building block of a Bender application is the component, and an application is described as a hierarchical structure of components, how they are laid out in relation to each other, and how they interact with each other. These component descriptions can be built through a Javascript API, or read and saved in XML. A Bender application is run by loading building its main component in the Bender runtime, and running in a host application; typically, a Web browser. The runtime is written in pure Javascript and has no dependency.

Learn more about Bender at http://bender.igel.co.jp/.

bender's People

Contributors

bendr avatar susami avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

susami gijs

bender's Issues

Invisible properties

The properties are not visible/ initialized for the root component.

Example:

<component xmlns="http://bender.igel.co.jp" href="../lib/ui/Application.xml"
  id="buttons"  layout="absolute_layout">
....

</component>

Within the function "did_render" of Application component, the property layout is not visible.
See the Nibbler demo Buttons.html, nibbler.js:202, "instance.properties.layout" is null whereas it should contain the string "absolute_layout".

Using SVG gradients and filters

Hi!

I've just found Bender, and it is almost exactly the same framework I wanted to create. Well, actually, better than that :)

A question: I'd like to use gradients and filters in SVG, but I need to use id attributes to refer to them. However, it seems to me that all id attributes are removed. How can I use gradients then?

Another question: is there a way to include external svg files, without copy-pasting them into the component xml files?

Thx!

Bernát

Invisible instances

Instances of second generation of children are not visible within did_render function.
For instance if you have this tree:

<c id="c1">
  <c id="c2">
    <c id="c3" />
  </c>
</c>

c1.did_render has access to c2 but not to c3 (this.instances.c2 is OK but this.instances.c3 is NULL)
And this.instances.c2.instances.c3 is also NULL.

The bug is visible in Nibbler, Widgets demos, function "bender.$.Widgets.did_render" Widgets.js:5

During inheritance, child components are not copied

Let use this specification:

<c id=c1 href=c2 />
<c id=c2>
  <c href=Button />
</c>

When this spec is rendered you have the following DOM witch is what you want:

<c1>
  <c2>
    <button />

But if you add a component into c1, ex:

<c id=c1 href=c2>
  <c href=List />
</c>
<c id=c2>
  <c href=Button />
</c>

You obtain this DOM that is not what you expect, because the button disappear:

<c1>
  <c2>
    <list />

The right DOM should be some thing like:

<c1>
  <c2>
    <button />
    <list />

Ordering call bug with did_render

The did_render of the parent is called before the did_render of children, that is wrong.
=> parent.did_render can not manipulate his children.

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.