redView

riena emf dynamic views

example from scratch

Tutorial: create a View with Databinding

The most convenient way to create a View is to generate the View EMF Model (.redview) itself and then to design the UI. You’ll find examples how to do this at red-open project. This Tutorial describes HowTo do this from scratch – this will explain the basics of redView.

the data model

We’ll use a very simple model – here it’s as an UML Class Diagram:

In this example we’ll demonstrate how easy it is to create a SWT View “CustomerView” with Properties “Name” and “City” and also a Collection of Vacations.

the mockup view

The Goal is to create a View like this one:

We need two Labeled Entries (redView element: RLabeledEntry), where each Labeled Entry contains a Label (redView element: RLabel) and a Text Entry Field (redView element: RText). Below this we define a Group (RGroup), which contains a List (RList) displaying the Destinations. We not only want to design the View – we also want to add Databinding.

the project

Let’s seen how easy and fast this can be done using redView.

If you want to follow the example -please create a Plug-in Project with following structure:

  • /src/scratch – please create the POJO’s there (or copy from code below)
  • /icons -if your View should have an Icon, please put a “customer.png” into /icons
  • /viewstore – an empty folder, where we’ll create our redView View Model “Customer.redview”

the POJO’s

We start the example only with these two POJOs:

Customer.java:
public class Customer {

	public Customer() {
		setName("ekke");
		setCity("Rosenheim");
		Vacation crete = new Vacation("Lentas (Crete)");
		Vacation sfo = new Vacation("San Francisco");
		vacation.add(crete);
		vacation.add(sfo);
	}

	private String name;
	private String city;
	private List<Vacation> vacation= new ArrayList<Vacation>();

	public void setCity(String city) {
		this.city = city;
	}
	public String getCity() {
		return city;
	}
	public void setVacation(List<Vacation> vacation) {
		this.vacation = vacation;
	}
	public List<Vacation> getVacation() {
		return vacation;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getName() {
		return name;
	}
Vacation.java:
public class Vacation {

	public Vacation() {
	}
	public Vacation(String destination) {
		setDestination(destination);
	}
	private String destination;

	public void setDestination(String destination) {
		this.destination = destination;
	}
	public String getDestination() {
		return destination;
	}
}

the screencast video (10 minutes)

At first imagine what you would do normaly to create the SWT UI Elements and add Eclipse Databinding for the Text Fields and the Collection displayed as a List. Now lets start the redView example.

  • Create the Extensions for a SWT View and a corresponding EMF RedView model
  • Add the UI Elements, Styles, Grid and Databinding
  • Write the code to display the dynamically rendered UI from redView
  • Finally open the View from an Eclipse Application and test if it works as expected

How easy it is to do this even from scratch watch the Video:

(for best results please switch HD = ON, Scaling = OFF, Fullscreen)

the extensions (plugin.xml)

We’re using three ExtensionPoints:

  • org.eclipse.ui.views (as usual for SWT Views to define a Category and a View with Icon)
  • org.eclipse.riena.ui.swt.imagePaths (Riena needs to know where the icons and images are)
  • org.redview.datasource.xmi.viewStore (redView looks into all viewStores to get the ressource)
<?xml version="1.0" encoding="UTF-8"?>
<?eclipse version="3.4"?>
<plugin>
   <extension
         point="org.eclipse.ui.views">
      <category
            id="scratch"
            name="scratch">
      </category>
      <view
            category="scratch"
            class="scratch.CustomerView"
            icon="icons/customer.png"
            id="scratch.customer"
            name="Customer"
            restorable="true">
      </view>
   </extension>
   <extension
         point="org.eclipse.riena.ui.swt.imagePaths">
      <path
            path="icons">
      </path>
   </extension>
   <extension
         point="org.redview.datasource.xmi.viewStore">
      <viewStore
            folder="viewstore">
      </viewStore>
   </extension>

</plugin>

the redView elements

we’re using two Labeled Entries, each containing a Label and a Text Entry Field and a Group containing the List:

the ViewPart Java code

now the easy part – you only need three lines of code to get the dynamically rendered SWT View from redView:

import org.redview.ui.riena.binding.bean.common.IBeanManager;
import org.redview.ui.riena.common.IRedviewContext;
import org.redview.ui.riena.configuration.common.RedviewViewFactory;
.....
	@Override
	public void createPartControl(Composite parent) {
		IRedviewContext context = RedviewViewFactory
			.createDynamicByViewname(parent, "Customer.redview", null);
		IBeanManager mgr = context.getBeanManager();
		mgr.setBaseBean(new Customer());
	}
.....

the SWT View dynamically created

and here’s our SWT View with Eclipse Databinding under the hood: Name and City from Customer together with a collection of Vacation displayed in a List:

the red-open Software Manufactory (2 seconds)

This tutorial explained how to use redView stand-alone and how to design a View from scratch. Much better and more comfortable is using the red-open software manufactory:

  • define your model (UML2, EMF, Xtext, XSD, …)
  • generate the redView with elements, styles, layout, databinding
  • generate the extensions, java code
  • and more …

Hint: please do it one time from scratch as demonstrated – it helps to understand how it works.

Then use the red-open software manufactory. From the 10 – minutes – screencast above we spent around 4 minutes to create the “Customer.redview” manually. Using a generator – workflow from red-open you’ll get two Views: “Customer.redview” and “Vacation.redview” generated from the UML2 model we started with.

And you’ll get the View models in less then 2 seconds 🙂

It depends from your project requirements and use-cases what should (or can) be generated: only the View models or more. This will be explained in detail in the projects “red-open“(the software manufactory) and “open-erp-ware” (framework for enterprise business applications).

Advertisements

1 Comment


%d bloggers like this: