com.asayama.gwt.angular.site.examples.public.GwtWidgetsExampleDocumentation.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of GwtWidgets Show documentation

An example GWT Angular module demonstrating the use of GWT widgets.

The newest version!


  GWT Angular's one of primary objectives is to bring AngularJS's MVC 
  framework to Java developers, in a way that is natural for Java developers.
  Most Java developers may not be familiar with building the user interface
  in HTML, where GWT can fill the gap by providing a number of basic but 
  useful UI widgets, ready to use in Java code. GWT Angular strives to 
  support the use of GWT UI widgets inside of Angular powered HTML, so that
  the users can start developing the user interface with minimal HTML 
  knowledge and Angular directives.

  In this paradigm, HTML is seen more as a way to declare the layout of the
  pages, while the GWT is seen as a way to provide the basic building blocks
  of user interfaces. AngularJS is used to assemble these pages (or "screens")
  in to a coherent application via GWT Angular.

  The below example shows a couple of GWT UI widgets shown in their 
  
  gallery.


  


View

  GWT Button example demonstrates how GWT's Button object can be
  inserted into the view HTML via data-gwt-widget directive
  provided by GWT Angular. Similarly, GWT's DatePicker object
  is inserted into the same HTML using the same directive. In this example,
  we do not use GWT's layout mechanism, but we use HTML to control the
  layout.



Controller

  The HTML view obtain the reference to the GWT UI widgets via 
  getButton() and getDatePicker() methods defined in its
  controller. The underlying widget objects are contructed by the Contrller
  via createButton() and createDatePicker()
  methods upon controller load time.

  As you can see, unlike other, more Angular centric examples where event
  callbacks from the UI is sent to the controller, the handler of these events
  are directly attached to the GWT UI widgets.

  In this example, when the user takes any actions on the GWT Button or the
  Date Picker, the events are delegated to the controller's shout()
  method, which displays GWT DialogBox object. The definition
  of the object is shown as GwtWidgetDemoDialogBox.



Configuration

  The following modules are required in the gwt.xml.




  The following Maven dependencies are required in the pom.xml.

<dependency>
  <groupId>com.asayama.gwt</groupId>
  <artifactId>gwt-angular-user</artifactId>
  <version>{{ GWT_ANGULAR_VERSION }}</version>
</dependency>


  You can also browse the full source code on Github.

  
  {{ GITHUB_GWT_ANGULAR_EXAMPLES_URL }}/blob/master/gwt-angular-examples/GwtWidgets