> rAppid.js is a declarative JavaScript web application for rapid web application development. It uses XML to define the structure of applications, modules, components and views and JavaScript for the business logic of the application. The XML (xaml) gets translated to javascript components during runtime which will render itself as HTML5 DOM elements. This enables a rapid development of applications.
This example app demonstrates the features and abilities of [rAppid.js](http://www.rappidjs.com)
This example app demonstrates the features and abilities of rAppid.js
## Documentation
## Documentation
### The index.html
### index.html
In the index.html the app is bootstrapped by defining our main app file (in this case Todo.xml). Because rAppid.js is a RIA framework, the whole rendering is done by JavaScript.
In the index.html the application is bootStrapped by defining our main application file
If you are now thinking "yeah fine, but what about SEO", don't worry, rAppid.js also support Node-Rendering, which can be used for things like SEO.
(in this case Todo.xml). Because rAppid.js is a RIA framework, the whole rendering is done by javascript.
If you are now thinking 'yeah fine, but what about SEO ', don't worry, rAppid.js also support Node-Rendering, which can be used for things like SEO.
### The application file Todo.xml
### Todo.xml
The main view of the application is declarated in Todo.xml. The first tag of the Todo.xml defines the super class of our application and the namespaces used inside the application description.
The main view of the app is declarated in Todo.xml. The first tag of the Todo.xml defines the super class of our app and the namespaces used inside the app description.
As you can see, the default namespace is `"http://www.w3.org/1999/xhtml"` which allows us to use plain HTML elements to describe our view.
The other namespaces are used for custom components.
As you can see, the default namespace is `"http://www.w3.org/1999/xhtml"` which allows us to use plain HTML elements to describe our view. The other namespaces are used for custom components.
One example of a custom component is the Router configuration.
One example of a custom component is the Router configuration.
Inside this declaration all routes of the application are defined. The **route** attribute expects a regular expression, which matches the route.
The **onexec** attribute defines the function which will be called, if the route is triggered.
The rest of the markup defines the UI of our application.
All routes of the app are defined inside this declaration. The **route** attribute expects a regular expression, which matches the route. The **onexec** attribute defines the function which will be called, if the route is triggered.
To connect the view with our application model we use bindings. For example the header:
The rest of the markup defines the UI of our app. To connect the view with our app model we use bindings. For example the header:
The bindings tell the application to hold view and model in sync. If you're interested in more details, checkout the rAppid.js wiki.
The bindings tell the app to hold view and model in sync. If you're interested in more details, checkout the [rAppid.js wiki](http://www.rappidjs.com/#/wiki/Home).
### TodoClass.js
### The code behind file TodoClass.js
TodoClass.js is the code behind Todo.xml. It initializes the attributes used in this app and it defines the event handlers for routing and UI events. So there is a clean seperation between app code and UI declaration.
The TodoClass.js is the code behind file for Todo.xml. It initializes the attributes used in this application and it defines the event handlers for routing and ui events.
So there is a clean seperation between application code and ui declaration.
In the initialize method inside TodoClass all binded models are created and set as attributes of the application. This is important for resolving the bindings used in the view declaration.
In the initialize method inside TodoClass all bound models are created and set as attributes of the app. This is important for resolving the bindings used in the view declaration.
### The Todo Model (app/model/Todo.js)
### Todo Model (app/model/Todo.js)
The default attributes for an instance and some methods used inside the app are defined in this model.
In this model, the default attributes for an instance and some methods used inside the application are defined.
It also marks the functions `hasTitle` and `status` as bindable.
It also marks the functions `hasTitle` and `status` as bindable.
```javascript
```javascript
status:function(){
status:function(){
returnthis.$.completed?"done":'';
returnthis.$.completed?'completed':'';
}.onChange("completed"),
}.onChange('completed'),
```
```
Calling the `onChange(...)` function tells the application that the binding value of this methods has to be refreshed everytime the attributes change.
Calling the `onChange()` function tells the app that the binding value of this methods has to be refreshed every time the attributes change. See app/view/TodoView.xml for usage.
See app/view/TodoView.xml for usage.
### Todo List (app/collection/TodoList.js)
### The Todo List (app/collection/TodoList.js)
The Todo List is a bindable List which encapsulates some app logic for manipulating the todo instances. It also declares bindable functions, which are used inside the view.
The Todo List is a bindable List which encapsulates some application logic for manipulating the todo instances.
It also declares bindable functions, which are used inside the view ...
### Todo View (app/view/TodoView.xml)
### The Todo View (app/view/TodoView.xml)
The Todo view is a custom view for displaying and editing Todo instances.
The Todo view is a custom view for displaying and editing Todo instances. Here we define view logic and view declaration in one file.
Here we define view logic and view declaration in one file.
