{ "translations": {
"Fetching request tokens failed. Verify that your Dropbox app key and secret are correct." : "Fallou a obtención de marcas de petición. Comprobe que a chave e o código secreto da súa aplicación Dropbox son correctas.",
"Fetching access tokens failed. Verify that your Dropbox app key and secret are correct." : "Fallou a obtención de marcas de acceso. Comprobe que a chave e o código secreto da súa aplicación Dropbox son correctas.",
"Please provide a valid Dropbox app key and secret." : "Forneza unha chave correcta e segreda do Dropbox.",
"Step 1 failed. Exception: %s" : "Fallou o paso 1. Excepción: %s",
"Step 2 failed. Exception: %s" : "Fallou o paso 2. Excepción: %s",
"External storage" : "Almacenamento externo",
"Local" : "Local",
"Location" : "Localización",
"Amazon S3" : "Amazon S3",
"Key" : "Clave",
"Secret" : "Secreto",
"Bucket" : "Bucket",
"Amazon S3 and compliant" : "Amazon S3 e compatíbeis",
"Access Key" : "Clave de acceso",
"Secret Key" : "Clave secreta",
"Hostname" : "Nome de máquina",
"Port" : "Porto",
"Region" : "Rexión",
"Enable SSL" : "Activar SSL",
"Enable Path Style" : "Activar o estilo de ruta",
"App key" : "Clave da API",
"App secret" : "Secreto da aplicación",
"Host" : "Servidor",
"Username" : "Nome de usuario",
"Password" : "Contrasinal",
"Remote subfolder" : "Subcartafol remoto",
"Secure ftps://" : "ftps:// seguro",
"Client ID" : "ID do cliente",
"Client secret" : "Secreto do cliente",
"OpenStack Object Storage" : "OpenStack Object Storage",
"Region (optional for OpenStack Object Storage)" : "Rexión (opcional para OpenStack Object Storage)",
"API Key (required for Rackspace Cloud Files)" : "Clave da API (obrigatoria para Rackspace Cloud Files)",
"Tenantname (required for OpenStack Object Storage)" : "Nome do inquilino (obrigatorio para OpenStack Object Storage)",
"Password (required for OpenStack Object Storage)" : "Contrasinal (obrigatorio para OpenStack Object Storage)",
"Service Name (required for OpenStack Object Storage)" : "Nome do servizo (obrigatorio para OpenStack Object Storage)",
"URL of identity endpoint (required for OpenStack Object Storage)" : "URL do punto final da identidade (obrigatorio para OpenStack Object Storage)",
"Timeout of HTTP requests in seconds" : "Caducidade, en segundos, das peticións HTTP",
"Share" : "Compartir",
"SMB / CIFS using OC login" : "SMB / CIFS usando acceso OC",
"Username as share" : "Nome de usuario como compartición",
"URL" : "URL",
"Secure https://" : "https:// seguro",
"Access granted" : "Concedeuse acceso",
"Error configuring Dropbox storage" : "Produciuse un erro ao configurar o almacenamento en Dropbox",
"Grant access" : "Permitir o acceso",
"Error configuring Google Drive storage" : "Produciuse un erro ao configurar o almacenamento en Google Drive",
"Personal" : "Persoal",
"System" : "Sistema",
"All users. Type to select user or group." : "Todos os usuarios. Escriba para selecionar usuario ou grupo.",
"(group)" : "(grupo)",
"Saved" : "Gardado",
"Note: " : "Nota: ",
"and" : "e",
"Note: The cURL support in PHP is not enabled or installed. Mounting of %s is not possible. Please ask your system administrator to install it." : "Nota: A compatibilidade de cURL en PHP non está activada, ou non está instalado. Non é posíbel a montaxe de %s. Consulte co administrador do sistema como instalalo.",
"Note: The FTP support in PHP is not enabled or installed. Mounting of %s is not possible. Please ask your system administrator to install it." : "Nota: A compatibilidade de FTP en PHP non está activada, ou non está instalado. Non é posíbel a montaxe de %s. Consulte co administrador do sistema como instalalo.",
"Note: \"%s\" is not installed. Mounting of %s is not possible. Please ask your system administrator to install it." : "Nota: «%s» non está instalado. Non é posíbel a montaxe de %s. Consulte co administrador do sistema como instalalo.",
"You can configure external storages in the personal settings" : "Ten que configurar o almacenamento externo nos axustes persoais",
"Name" : "Nome",
"Storage type" : "Tipo de almacenamento",
"Scope" : "Ámbito",
"External Storage" : "Almacenamento externo",
"Folder name" : "Nome do cartafol",
"Configuration" : "Configuración",
"Available for" : "Dispoñíbel para",
"Add storage" : "Engadir almacenamento",
"Delete" : "Eliminar",
"Enable User External Storage" : "Activar o almacenamento externo do usuario",
"Allow users to mount the following external storage" : "Permitirlle aos usuarios montar o seguinte almacenamento externo"
},"pluralForm" :"nplurals=2; plural=(n != 1);"
}tion>
Vaadin 6, 7, 8 is a Java framework for modern Java web applications: https://github.com/vaadin/framework
---
title: MVC Basics In IT Mill Toolkit
order: 24
layout: page
---
[[mvc-basics-in-itmill-toolkit]]
MVC Basics in IT Mill Toolkit
-----------------------------
The Goal
^^^^^^^^
image:img/moduleDesign.jpg[1]
We want to create a simple UI following the MVC pattern using the IT Mill Toolkit. The project components need to have low coupling and follow an enterprise design. In our example we also want to retrieve information from a database and display it in the view. The different parts of the UI need also to be able to communicate with each other.
We have divided the project in two layers; A UI layer, which purpose is to display information to the user, and a Data layer which has no knowledge of the Toolkit and which is only responsible for retrieving and storing data. The reason for dividing the project up in these layers is so that, if we choose, we can easily use multiple servers.
The Data layer
^^^^^^^^^^^^^^
For the example we have created a ''Database.java'' class which will function as our database. We will never call upon this database directly from the UI. To access the data we will have the UI controllers contact the ''Authentication.java'' or ''Channel.java'' which will retrieve it for us.
image:img/view.jpg[1]
image:img/ActivityUML.jpg[1]
The UI layer
^^^^^^^^^^^^
First off lets discuss what we mean with ''View''. The Toolkit is such an flexible tool that the term needs to be defined on pretty much a case by case basis. In this example we have decided to let the center portion of the UI be the View.
In our example the UI consists of the Header, Menu and View. When the user chooses a item from the menu we need to easily update the View or in our case, switch View completely. We want to do this in such a way that we don't couple the different UI components together so that we can easily add extra components if needed. To achieve this we use the Observer pattern which is easily implemented in the Toolkit using ''Events''.
== The Controller ==
We started off by creating the ''UiHandler.java'' class where we define which components we want to add to our UI. This class will also work as the mediator for the different components by adding ''Listeners'' and monitoring for events in the components.
[source,java]
....
public class UiHandler extends VerticalLayout {
// Portions of the application that exist at all times.
private Header header;
private WelcomeView defaultView;
// The views that are shown to logged users.
private UserView userView;
private ChannelView itmillView;
private ChannelView ubuntuView;
private Menu menu;
private SplitPanel menusplit;
// Used to keep track of the current main view.
private HashMap<String, AbstractView> viewList = new HashMap<String, AbstractView>();
...
}
....
We want to listen for changes in the menu which indicates that the user has chosen a new item and wants to change view. The menu consists of a Tree component which generates a ''ValueChangeEvent'' when a new item is selected from the tree. We catch these types of events in the UiHandler by adding a UserChangeListener in the ExampleApplication.java init() method.
[source,java]
....
public class ExampleApplication extends Application implements TransactionListener {
public UiHandler ui;
@Override
public void init() {
// sets the current application to ThreadLocal.
setProject(this);
// Creates the Main Window and then hands over all UI work to the
// UiHandler
setMainWindow(new Window("MVC Example Application"));
setTheme("MVCExampleDefault");
ui = new UiHandler(getMainWindow());
// Adds a TransactionListener for this class.
getContext().addTransactionListener(this);
// Register user change listener for UiHandler.
addListener(ui);
}
}
....
[source,java]
....
public class UiHandler extends VerticalLayout implements UserChangeListener {
public void applicationUserChanged(UserChangeEvent event) {
// The value is null if the user logs out.
if (event.getNewUser() == null) {
userLoggedOut();
} else {
userLoggedIn();
}
}
}
....
The menu is now isolated with no knowledge about other components. This gives us great flexibility with adding new instances of the menu if needed.
The View
^^^^^^^^
Following the MVC-pattern we have removed all control logic from the Views and transferred it to the controllers. The Views now consist only of the elements needed to display the data while the controllers handle the retrieving and manipulating of said data. The separation between control logic and View is done so that, if needed, we may have many different views displaying the same data without having to copy code. We can now simply add a controller to each new View to gain the same data functionality as any other View.
[source,java]
....
public class ChannelView extends AbstractView {
protected Window confirm;
private ChannelController controller;
public void sendMessage() {
// Let the controller modify the current text on the inputline and
// insert it into the channel text table.
controller.writeToChannel(inputLine.getValue(), textTable);
...
}
}
....
When creating a project you may want to have different views displayed at different times sosetting the view is an easy task. We are using the SplitPanel component to create two sections in the UI. Adding components to the ''SplitPanel'' is achieved with ''setFirstComponent(c)'' to add on the left side and ''setSecondComponent(c)'' to add on the right side of the split. By our definition, our view is the area on the right side of the split. Had we been using the Layout component we could have achieved the same result using ''replaceComponent(oldComponent, newComponent)''.
[source,java]
....
// Set the menu on the left side of the split.
menusplit.setFirstComponent(menu);
// Set the user welcome View on the right side.
setMainView(userView);
...
public void setMainView(AbstractView c) {
menusplit.setSecondComponent(c);
}
....
Setting/Switching the View is now as easy as simply replacing the second component in the the SplitPanel using ''setMainView''.
The source code for this project can be found in the MVCBasicsProject.zip file where we've added the .project and .classpath for your convinience, in case you are a Eclipse user. Remove these files if you use some other IDE.