Butterfly Web UI - Introduction
Butterfly Web UI is a component oriented web framework for Java, like Wicket or Tapestry.
The main advantage compared to these frameworks is that Butterfly Web UI integrates naturally
with Butterfly DI Container, giving you a state-of-the-art dependency injection container to
help you structure and decouple the internal components of your web applications.
Butterfly Web UI is also moving towards being a service oriented web interface
for web applications - meaning it can serve both HTML or raw XML data to AJAX frontends, or RIA front ends
like Adobe Flex, JavaFX and Silverlight. RIA frontends are really the future
of web application GUI's, so don't get stuck with a framework that doesn't properly
Component Based = More Flexibility
Component based web frameworks like Butterfly Web UI, Wicket and Tapestry are typically
more flexible than their older "Model 2" alternatives like Struts and SpringMVC.
Modern web applications are typically built using a single (or a few) general page
templates into which different components are included. For instance, the left
menu of a web site may be one component, and the main pages of all the different
pages each their own component. Components can typically have subcomponents and
do typically split business logic into controllers, and page rendering logic into
views (JSP's etc.).
The main difference between the older Model 2 web app architecture and the newer
component based web app architectures is how the two architectures handle the composition
of pages and components. This is further described below.
Model 2 Architecture
Model 2 architectures usually have a single page controller, and
a single view page for that controller. It is possible to tweak most model 2 architectures
to get around this, but the result is typically not all that pretty. This makes dividing
the page composition into subcomponents and subviews confusing and sometimes cumbersome.
Component Based Architecture
Component based architectures natively compose pages from components and subcomponents.
In other words, a parent component is fully aware of its child components, can disable
or hide them, remove them, add new children etc. at runtime!! This is typically very hard to
do with a Model 2 architecture web framework.
Typically the request processing is split into two steps, instead of Model 2's one step:
- Process Request
- Generate Response
First, all components in the component graph / tree for the particular page are asked
to process the request. Each component can at this time throw an exception, or send a
redirect to the client browser, since no response has been generated at this time.
This is usually a problem with a Model 2 architecture. If a child component fails
in a model 2 architecture, the parent component is typically already done processing,
and have started generating the response (typically subcomponents in a Model 2 architecture
are included from the view components of their parent components).
During request processing a parent component may also choose to disable subcomponents,
or add new ones, if the parent component finds it suitable. In other words, the component
graph can be manipulated during request processing (actually, this is also possible during
response generation, but this is less often used).
Second, all components in the component graph / tree for the particular page are asked
to generate their part of the total response. Components may output HTML etc. directly
from the Java code, or delegate this to a JSP page, JSF Component, Servlet, or other
view generating mechanism.
The Extreme Flexibility Can Be a Bit Confusing
Butterfly Web UI is extremely flexible. There are almost always more than one way to do
the same thing. For instance, a component can generate its own HTML, have a JSP page generate it
or have a child component generate it. This can be a bit confusing in the beginning.
Little by little though, you will gain preference for one of the many ways to do what
you need to do, and use that method repeatedly.
The extreme flexibility is your guarantee that you will never get locked up in a corner,
with no suitable way of achieving what you need to do.
To get started it is recommendable to download either the demo web app, or the blank
web app available from the download page.
The demo web app contains examples of how to do various things with Butterfly Web UI.
The blank web app is a minimal web application containing all the basic necessary
wiring and configuration, so you don't have to mess around with that.
These apps will also make it easier to understand the documentation.
If the documentation has any holes, you may be able to fill them in by looking at one of
these web applications.
The documentation is under continuous development, so if there are sections you do not understand,
or things you need to know how to do, write me an email and I'll see if I can update the documentation.
You can find my contact details here: About Jenkov.com.