Change-Id: Id7db526d07a14ac259cbb50415bbafd2a7c2ab94tags/7.7.0.alpha1
</init-param> | </init-param> | ||||
<async-supported>true</async-supported> | <async-supported>true</async-supported> | ||||
</servlet> | </servlet> | ||||
<servlet> | |||||
<servlet-name>RPCLogger</servlet-name> | |||||
<servlet-class>com.vaadin.tests.rpclogger.RPCLoggerServlet</servlet-class> | |||||
<init-param> | |||||
<param-name>ui</param-name> | |||||
<param-value>com.vaadin.tests.rpclogger.RPCLoggerUI</param-value> | |||||
</init-param> | |||||
<async-supported>true</async-supported> | |||||
</servlet> | |||||
<servlet> | <servlet> | ||||
<!-- This servlet is a separate instance for the sole purpose of | <!-- This servlet is a separate instance for the sole purpose of | ||||
<url-pattern>/commerror/*</url-pattern> | <url-pattern>/commerror/*</url-pattern> | ||||
</servlet-mapping> | </servlet-mapping> | ||||
<servlet-mapping> | |||||
<servlet-name>RPCLogger</servlet-name> | |||||
<url-pattern>/rpclogger/*</url-pattern> | |||||
</servlet-mapping> | |||||
<servlet-mapping> | <servlet-mapping> | ||||
<servlet-name>VaadinStaticFiles</servlet-name> | <servlet-name>VaadinStaticFiles</servlet-name> | ||||
<url-pattern>/VAADIN/*</url-pattern> | <url-pattern>/VAADIN/*</url-pattern> |
Copyright (c) 2002 JSON.org | |||||
Permission is hereby granted, free of charge, to any person obtaining a copy of | |||||
this software and associated documentation files (the "Software"), to deal in | |||||
the Software without restriction, including without limitation the rights to | |||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of | |||||
the Software, and to permit persons to whom the Software is furnished to do so, | |||||
subject to the following conditions: | |||||
The above copyright notice and this permission notice shall be included in all | |||||
copies or substantial portions of the Software. | |||||
The Software shall be used for Good, not Evil. | |||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS | |||||
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR | |||||
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER | |||||
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN | |||||
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
cause problems with external libraries compiled against said versions.</li> | cause problems with external libraries compiled against said versions.</li> | ||||
<li>Declarative format is now using "vaadin-" as a default prefix instead of the "v-" prefix used in 7.5. | <li>Declarative format is now using "vaadin-" as a default prefix instead of the "v-" prefix used in 7.5. | ||||
This default can be changed in deployment configuration.</li> | This default can be changed in deployment configuration.</li> | ||||
<li>The annotations @PreserveOnRefresh, @Push, @Theme, @Title, @VaadinServletConfiguration and @Widgetset now use | |||||
@Inherited. The annotation is also looked up in extended interfaces for backwards compatibility.</li> | |||||
<li>Server-side timings of request processing are only sent to the client when not in production mode. Using the | |||||
timings in TestBench tests requires the server not to be in production mode.</li> | |||||
</ul> | </ul> | ||||
<h3 id="knownissues">Known Issues and Limitations</h3> | <h3 id="knownissues">Known Issues and Limitations</h3> | ||||
<ul> | <ul> |
import com.google.gwt.core.ext.typeinfo.JMethod; | import com.google.gwt.core.ext.typeinfo.JMethod; | ||||
import com.google.gwt.core.ext.typeinfo.JParameterizedType; | import com.google.gwt.core.ext.typeinfo.JParameterizedType; | ||||
import com.google.gwt.core.ext.typeinfo.JType; | import com.google.gwt.core.ext.typeinfo.JType; | ||||
import com.google.gwt.core.ext.typeinfo.NotFoundException; | |||||
import com.vaadin.client.connectors.AbstractRendererConnector; | import com.vaadin.client.connectors.AbstractRendererConnector; | ||||
import elemental.json.JsonValue; | |||||
/** | /** | ||||
* Generates type data for renderer connectors. | * Generates type data for renderer connectors. | ||||
* <ul> | * <ul> | ||||
JType presentationType = getPresentationType(type, logger); | JType presentationType = getPresentationType(type, logger); | ||||
bundle.setPresentationType(type, presentationType); | bundle.setPresentationType(type, presentationType); | ||||
bundle.setNeedsSerialize(presentationType); | |||||
if (!hasCustomDecodeMethod(type, logger)) { | |||||
bundle.setNeedsSerialize(presentationType); | |||||
} | |||||
logger.log(Type.DEBUG, "Presentation type of " + type + " is " | logger.log(Type.DEBUG, "Presentation type of " + type + " is " | ||||
+ presentationType); | + presentationType); | ||||
} | } | ||||
private static boolean hasCustomDecodeMethod(JClassType type, | |||||
TreeLogger logger) throws UnableToCompleteException { | |||||
try { | |||||
JMethod decodeMethod = ConnectorBundle.findInheritedMethod(type, | |||||
"decode", | |||||
type.getOracle().getType(JsonValue.class.getName())); | |||||
if (decodeMethod == null) { | |||||
throw new NotFoundException(); | |||||
} | |||||
return !decodeMethod.getEnclosingType().getQualifiedSourceName() | |||||
.equals(AbstractRendererConnector.class.getName()); | |||||
} catch (NotFoundException e) { | |||||
logger.log(Type.ERROR, "Can't find decode method for renderer " | |||||
+ type, e); | |||||
throw new UnableToCompleteException(); | |||||
} | |||||
} | |||||
private static JType getPresentationType(JClassType type, TreeLogger logger) | private static JType getPresentationType(JClassType type, TreeLogger logger) | ||||
throws UnableToCompleteException { | throws UnableToCompleteException { | ||||
JClassType originalType = type; | JClassType originalType = type; |
import com.google.gwt.user.client.ui.HasWidgets; | import com.google.gwt.user.client.ui.HasWidgets; | ||||
import com.google.gwt.user.client.ui.Widget; | import com.google.gwt.user.client.ui.Widget; | ||||
import com.vaadin.client.ApplicationConfiguration.ErrorMessage; | import com.vaadin.client.ApplicationConfiguration.ErrorMessage; | ||||
import com.vaadin.client.ApplicationConnection.ApplicationStoppedEvent; | |||||
import com.vaadin.client.ResourceLoader.ResourceLoadEvent; | import com.vaadin.client.ResourceLoader.ResourceLoadEvent; | ||||
import com.vaadin.client.ResourceLoader.ResourceLoadListener; | import com.vaadin.client.ResourceLoader.ResourceLoadListener; | ||||
import com.vaadin.client.communication.ConnectionStateHandler; | import com.vaadin.client.communication.ConnectionStateHandler; | ||||
} | } | ||||
client.getProfilingData = $entry(function() { | client.getProfilingData = $entry(function() { | ||||
var smh = ap.@com.vaadin.client.ApplicationConnection::getMessageHandler(); | |||||
var smh = ap.@com.vaadin.client.ApplicationConnection::getMessageHandler()(); | |||||
var pd = [ | var pd = [ | ||||
smh.@com.vaadin.client.communication.MessageHandler::lastProcessingTime, | smh.@com.vaadin.client.communication.MessageHandler::lastProcessingTime, | ||||
smh.@com.vaadin.client.communication.MessageHandler::totalProcessingTime | smh.@com.vaadin.client.communication.MessageHandler::totalProcessingTime | ||||
]; | ]; | ||||
pd = pd.concat(smh.@com.vaadin.client.communication.MessageHandler::serverTimingInfo); | |||||
if (null != smh.@com.vaadin.client.communication.MessageHandler::serverTimingInfo) { | |||||
pd = pd.concat(smh.@com.vaadin.client.communication.MessageHandler::serverTimingInfo); | |||||
} else { | |||||
pd = pd.concat(-1, -1); | |||||
} | |||||
pd[pd.length] = smh.@com.vaadin.client.communication.MessageHandler::bootstrapTime; | pd[pd.length] = smh.@com.vaadin.client.communication.MessageHandler::bootstrapTime; | ||||
return pd; | return pd; | ||||
}); | }); |
* @since 7.4 | * @since 7.4 | ||||
* @author Vaadin Ltd | * @author Vaadin Ltd | ||||
*/ | */ | ||||
// This is really typed to <JsonValue>, but because of the way native strings | |||||
// are not always instanceof JsonValue, we need to accept Object | |||||
@Connect(AbstractJavaScriptRenderer.class) | @Connect(AbstractJavaScriptRenderer.class) | ||||
public class JavaScriptRendererConnector extends | public class JavaScriptRendererConnector extends | ||||
AbstractRendererConnector<JsonValue> implements | |||||
AbstractRendererConnector<Object> implements | |||||
HasJavaScriptConnectorHelper { | HasJavaScriptConnectorHelper { | ||||
private final JavaScriptConnectorHelper helper = new JavaScriptConnectorHelper( | private final JavaScriptConnectorHelper helper = new JavaScriptConnectorHelper( | ||||
this); | this); | ||||
}-*/; | }-*/; | ||||
@Override | @Override | ||||
protected Renderer<JsonValue> createRenderer() { | |||||
protected Renderer<Object> createRenderer() { | |||||
helper.ensureJavascriptInited(); | helper.ensureJavascriptInited(); | ||||
if (!hasFunction("render")) { | if (!hasFunction("render")) { | ||||
final boolean hasGetConsumedEvents = hasFunction("getConsumedEvents"); | final boolean hasGetConsumedEvents = hasFunction("getConsumedEvents"); | ||||
final boolean hasOnBrowserEvent = hasFunction("onBrowserEvent"); | final boolean hasOnBrowserEvent = hasFunction("onBrowserEvent"); | ||||
return new ComplexRenderer<JsonValue>() { | |||||
return new ComplexRenderer<Object>() { | |||||
@Override | @Override | ||||
public void render(RendererCellReference cell, JsonValue data) { | |||||
render(helper.getConnectorWrapper(), getJsCell(cell), | |||||
Util.json2jso(data)); | |||||
public void render(RendererCellReference cell, Object data) { | |||||
if (data instanceof JsonValue) { | |||||
data = Util.json2jso((JsonValue) data); | |||||
} | |||||
render(helper.getConnectorWrapper(), getJsCell(cell), data); | |||||
} | } | ||||
private JavaScriptObject getJsCell(CellReference<?> cell) { | private JavaScriptObject getJsCell(CellReference<?> cell) { | ||||
} | } | ||||
public native void render(JavaScriptObject wrapper, | public native void render(JavaScriptObject wrapper, | ||||
JavaScriptObject cell, JavaScriptObject data) | |||||
JavaScriptObject cell, Object data) | |||||
/*-{ | /*-{ | ||||
wrapper.render(cell, data); | wrapper.render(cell, data); | ||||
}-*/; | }-*/; | ||||
} | } | ||||
@Override | @Override | ||||
public JsonValue decode(JsonValue value) { | |||||
public Object decode(JsonValue value) { | |||||
// Let the js logic decode the raw json that the server sent | // Let the js logic decode the raw json that the server sent | ||||
return value; | return value; | ||||
} | } |
import com.vaadin.client.Util; | import com.vaadin.client.Util; | ||||
import com.vaadin.client.VConsole; | import com.vaadin.client.VConsole; | ||||
import com.vaadin.client.ValueMap; | import com.vaadin.client.ValueMap; | ||||
import com.vaadin.client.WidgetUtil; | |||||
import com.vaadin.client.ui.dd.DDUtil; | import com.vaadin.client.ui.dd.DDUtil; | ||||
import com.vaadin.client.ui.dd.VAbstractDropHandler; | import com.vaadin.client.ui.dd.VAbstractDropHandler; | ||||
import com.vaadin.client.ui.dd.VAcceptCallback; | import com.vaadin.client.ui.dd.VAcceptCallback; | ||||
final int deltaX = Math.abs(event.getClientX() - startX); | final int deltaX = Math.abs(event.getClientX() - startX); | ||||
final int deltaY = Math.abs(event.getClientY() - startY); | final int deltaY = Math.abs(event.getClientY() - startY); | ||||
if ((deltaX + deltaY) < MIN_PX_DELTA) { | if ((deltaX + deltaY) < MIN_PX_DELTA) { | ||||
setFocusOnLastElement(event); | |||||
Element clickedElement = WidgetUtil.getElementFromPoint( | |||||
event.getClientX(), event.getClientY()); | |||||
clickedElement.focus(); | |||||
} | } | ||||
} | } | ||||
private void setFocusOnLastElement(final MouseUpEvent event) { | |||||
Element el = event.getRelativeElement(); | |||||
getLastChildElement(el).focus(); | |||||
} | |||||
private Element getLastChildElement(Element el) { | |||||
do { | |||||
if (el == null) { | |||||
break; | |||||
} | |||||
el = el.getFirstChildElement(); | |||||
} while (el.getFirstChildElement() != null); | |||||
return el; | |||||
} | |||||
}, MouseUpEvent.getType()); | }, MouseUpEvent.getType()); | ||||
addDomHandler(new TouchStartHandler() { | addDomHandler(new TouchStartHandler() { | ||||
/** For internal use only. May be removed or replaced in the future. */ | /** For internal use only. May be removed or replaced in the future. */ | ||||
public VAbstractDropHandler dropHandler; | public VAbstractDropHandler dropHandler; | ||||
/** For internal use only. May be removed or replaced in the future. */ | |||||
public UploadHandler uploadHandler; | |||||
private VDragEvent vaadinDragEvent; | private VDragEvent vaadinDragEvent; | ||||
int filecounter = 0; | int filecounter = 0; | ||||
@Override | @Override | ||||
public void onReadyStateChange(XMLHttpRequest xhr) { | public void onReadyStateChange(XMLHttpRequest xhr) { | ||||
if (xhr.getReadyState() == XMLHttpRequest.DONE) { | if (xhr.getReadyState() == XMLHttpRequest.DONE) { | ||||
// visit server for possible | |||||
// variable changes | |||||
client.sendPendingVariableChanges(); | |||||
// #19616 Notify the upload handler that the request is complete | |||||
// and let it poll the server for changes. | |||||
uploadHandler.uploadDone(); | |||||
uploading = false; | uploading = false; | ||||
startNextUpload(); | startNextUpload(); | ||||
xhr.clearOnReadyStateChange(); | xhr.clearOnReadyStateChange(); | ||||
return dragImageWidget; | return dragImageWidget; | ||||
} | } | ||||
/** | |||||
* Internal client side interface used by the connector and the widget for | |||||
* the drag and drop wrapper to signal the completion of an HTML5 file | |||||
* upload. | |||||
* | |||||
* @since 7.6.4 | |||||
*/ | |||||
public interface UploadHandler { | |||||
public void uploadDone(); | |||||
} | |||||
} | } |
*/ | */ | ||||
public class FilterSelectTextBox extends TextBox { | public class FilterSelectTextBox extends TextBox { | ||||
/** | |||||
* Creates a new filter select text box. | |||||
* | |||||
* @since 7.6.4 | |||||
*/ | |||||
public FilterSelectTextBox() { | |||||
/*- | |||||
* Stop the browser from showing its own suggestion popup. | |||||
* | |||||
* Using an invalid value instead of "off" as suggested by | |||||
* https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion | |||||
* | |||||
* Leaving the non-standard Safari options autocapitalize and | |||||
* autocorrect untouched since those do not interfere in the same | |||||
* way, and they might be useful in a combo box where new items are | |||||
* allowed. | |||||
*/ | |||||
getElement().setAttribute("autocomplete", "nope"); | |||||
} | |||||
/** | /** | ||||
* Overridden to avoid selecting text when text input is disabled | * Overridden to avoid selecting text when text input is disabled | ||||
*/ | */ |
import com.vaadin.client.ui.customcomponent.CustomComponentConnector; | import com.vaadin.client.ui.customcomponent.CustomComponentConnector; | ||||
import com.vaadin.shared.ui.Connect; | import com.vaadin.shared.ui.Connect; | ||||
import com.vaadin.shared.ui.draganddropwrapper.DragAndDropWrapperConstants; | import com.vaadin.shared.ui.draganddropwrapper.DragAndDropWrapperConstants; | ||||
import com.vaadin.shared.ui.draganddropwrapper.DragAndDropWrapperServerRpc; | |||||
import com.vaadin.ui.DragAndDropWrapper; | import com.vaadin.ui.DragAndDropWrapper; | ||||
@Connect(DragAndDropWrapper.class) | @Connect(DragAndDropWrapper.class) | ||||
public class DragAndDropWrapperConnector extends CustomComponentConnector | public class DragAndDropWrapperConnector extends CustomComponentConnector | ||||
implements Paintable { | |||||
implements Paintable, VDragAndDropWrapper.UploadHandler { | |||||
@Override | |||||
protected void init() { | |||||
super.init(); | |||||
getWidget().uploadHandler = this; | |||||
} | |||||
@Override | @Override | ||||
public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { | public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { | ||||
private static Logger getLogger() { | private static Logger getLogger() { | ||||
return Logger.getLogger(DragAndDropWrapperConnector.class.getName()); | return Logger.getLogger(DragAndDropWrapperConnector.class.getName()); | ||||
} | } | ||||
@Override | |||||
public void uploadDone() { | |||||
// #19616 RPC to poll the server for changes | |||||
getRpcProxy(DragAndDropWrapperServerRpc.class).poll(); | |||||
} | |||||
} | } |
return; | return; | ||||
} | } | ||||
getWidget().enabled = isEnabled(); | |||||
if (BrowserInfo.get().isIE8() && !getWidget().enabled) { | |||||
/* | |||||
* The disabled shim will not cover the table body if it is relative | |||||
* in IE8. See #7324 | |||||
*/ | |||||
getWidget().scrollBodyPanel.getElement().getStyle() | |||||
.setPosition(Position.STATIC); | |||||
} else if (BrowserInfo.get().isIE8()) { | |||||
getWidget().scrollBodyPanel.getElement().getStyle() | |||||
.setPosition(Position.RELATIVE); | |||||
} | |||||
getWidget().paintableId = uidl.getStringAttribute("id"); | getWidget().paintableId = uidl.getStringAttribute("id"); | ||||
getWidget().immediate = getState().immediate; | getWidget().immediate = getState().immediate; | ||||
getWidget().collapsibleMenuContent = getState().collapseMenuContent; | getWidget().collapsibleMenuContent = getState().collapseMenuContent; | ||||
} | } | ||||
@Override | |||||
public void updateEnabledState(boolean enabledState) { | |||||
super.updateEnabledState(enabledState); | |||||
getWidget().enabled = isEnabled(); | |||||
if (BrowserInfo.get().isIE8() && !getWidget().enabled) { | |||||
/* | |||||
* The disabled shim will not cover the table body if it is relative | |||||
* in IE8. See #7324 | |||||
*/ | |||||
getWidget().scrollBodyPanel.getElement().getStyle() | |||||
.setPosition(Position.STATIC); | |||||
} else if (BrowserInfo.get().isIE8()) { | |||||
getWidget().scrollBodyPanel.getElement().getStyle() | |||||
.setPosition(Position.RELATIVE); | |||||
} | |||||
} | |||||
@Override | @Override | ||||
public VScrollTable getWidget() { | public VScrollTable getWidget() { | ||||
return (VScrollTable) super.getWidget(); | return (VScrollTable) super.getWidget(); |
*/ | */ | ||||
public final double getScrollPos() { | public final double getScrollPos() { | ||||
assert internalGetScrollPos() == toInt32(scrollPos) : "calculated scroll position (" | assert internalGetScrollPos() == toInt32(scrollPos) : "calculated scroll position (" | ||||
+ toInt32(scrollPos) | |||||
+ scrollPos | |||||
+ ") did not match the DOM element scroll position (" | + ") did not match the DOM element scroll position (" | ||||
+ internalGetScrollPos() + ")"; | + internalGetScrollPos() + ")"; | ||||
return scrollPos; | return scrollPos; | ||||
*/ | */ | ||||
private static native int toInt32(double val) | private static native int toInt32(double val) | ||||
/*-{ | /*-{ | ||||
return val | 0; | |||||
return Math.round(val) | 0; | |||||
}-*/; | }-*/; | ||||
/** | /** |
moveAndUpdateEscalatorRows(allEscalatorRows, 0, | moveAndUpdateEscalatorRows(allEscalatorRows, 0, | ||||
logicalTargetIndex); | logicalTargetIndex); | ||||
/* | |||||
* moveAndUpdateEscalatorRows recalculates the rows, but | |||||
* logical top row index bookkeeping is handled in this | |||||
* method. | |||||
* | |||||
* TODO: Redesign how to keep it easy to track this. | |||||
*/ | |||||
updateTopRowLogicalIndex(-removedLogicalInside.length()); | |||||
/* | /* | ||||
* Scrolling the body to the correct location will be | * Scrolling the body to the correct location will be | ||||
* fixed automatically. Because the amount of rows is | * fixed automatically. Because the amount of rows is |
if (rowIndex == rowWithFocus | if (rowIndex == rowWithFocus | ||||
&& cellFocusRange.contains(columnIndexDOM) | && cellFocusRange.contains(columnIndexDOM) | ||||
&& container == this.containerWithFocus) { | && container == this.containerWithFocus) { | ||||
refreshRow(rowWithFocus); | |||||
return; | return; | ||||
} | } | ||||
if (isEditorActive()) { | if (isEditorActive()) { | ||||
editor.updateVerticalScrollPosition(); | editor.updateVerticalScrollPosition(); | ||||
} | } | ||||
// if there is a resize, we need to refresh the body to avoid an | |||||
// off-by-one error which occurs when the user scrolls all the | |||||
// way to the bottom. | |||||
refreshBody(); | |||||
} | } | ||||
}); | }); | ||||
} | } |
A user interface is built on top of the domain model, in our context with the | A user interface is built on top of the domain model, in our context with the | ||||
Vaadin Framework. The Vaadin user interface could be bound directly to the data | Vaadin Framework. The Vaadin user interface could be bound directly to the data | ||||
model through the Vaadin Data Model, described in | model through the Vaadin Data Model, described in | ||||
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding | |||||
Components to Data">>. Beneath the domain model lies a data store, such as a | |||||
relational database. The dependencies between the layers are restricted so that | |||||
a higher layer may depend on a lower one, but never the other way around. | |||||
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding Components to Data">>. | |||||
Beneath the domain model lies a data store, such as a relational database. | |||||
The dependencies between the layers are restricted so that a higher layer may depend on a lower one, but never the other way around. | |||||
[[figure.advanced.architecture.layering]] | [[figure.advanced.architecture.layering]] | ||||
.Three-Layer Architecture | |||||
image::img/three-layer-architecture-hi.png[] | |||||
.Three-layer architecture | |||||
image::img/three-layer-architecture-hi.png[width=80%] | |||||
An __application layer__ (or __service layer__) is often distinguished from the | An __application layer__ (or __service layer__) is often distinguished from the | ||||
domain layer, offering the domain logic as a service, which can be used by the | domain layer, offering the domain logic as a service, which can be used by the | ||||
presenter and model. | presenter and model. | ||||
[[figure.advanced.architecture.mvp]] | [[figure.advanced.architecture.mvp]] | ||||
.Model-View-Presenter Pattern | |||||
image::img/mvp-pattern-hi.png[] | |||||
.Model-View-Presenter pattern | |||||
image::img/mvp-pattern-hi.png[width=60%] | |||||
<<figure.advanced.architecture.mvp>> illustrates the MVP pattern with a simple | <<figure.advanced.architecture.mvp>> illustrates the MVP pattern with a simple | ||||
calculator. The domain model is realized in the [classname]#Calculator# class, | calculator. The domain model is realized in the [classname]#Calculator# class, | ||||
// Create the model and the Vaadin view implementation | // Create the model and the Vaadin view implementation | ||||
CalculatorModel model = new CalculatorModel(); | CalculatorModel model = new CalculatorModel(); | ||||
CalculatorViewImpl view = new CalculatorViewImpl(); | CalculatorViewImpl view = new CalculatorViewImpl(); | ||||
// The presenter binds the model and view together | // The presenter binds the model and view together | ||||
new CalculatorPresenter(model, view); | new CalculatorPresenter(model, view); | ||||
// The view implementation is a Vaadin component | // The view implementation is a Vaadin component | ||||
layout.addComponent(view); | layout.addComponent(view); | ||||
---- | ---- | ||||
/** The model **/ | /** The model **/ | ||||
class CalculatorModel { | class CalculatorModel { | ||||
private double value = 0.0; | private double value = 0.0; | ||||
public void clear() { | public void clear() { | ||||
value = 0.0; | value = 0.0; | ||||
} | } | ||||
if (arg != 0.0) | if (arg != 0.0) | ||||
value /= arg; | value /= arg; | ||||
} | } | ||||
public double getValue() { | public double getValue() { | ||||
return value; | return value; | ||||
} | } | ||||
public void setValue(double value) { | public void setValue(double value) { | ||||
this.value = value; | this.value = value; | ||||
} | } | ||||
// Create a result label that spans over all | // Create a result label that spans over all | ||||
// the 4 columns in the first row | // the 4 columns in the first row | ||||
layout.addComponent(display, 0, 0, 3, 0); | layout.addComponent(display, 0, 0, 3, 0); | ||||
// The operations for the calculator in the order | // The operations for the calculator in the order | ||||
// they appear on the screen (left to right, top | // they appear on the screen (left to right, top | ||||
// to bottom) | // to bottom) | ||||
setCompositionRoot(layout); | setCompositionRoot(layout); | ||||
} | } | ||||
public void setDisplay(double value) { | public void setDisplay(double value) { | ||||
display.setValue(Double.toString(value)); | display.setValue(Double.toString(value)); | ||||
} | } | ||||
private double current = 0.0; | private double current = 0.0; | ||||
private char lastOperationRequested = 'C'; | private char lastOperationRequested = 'C'; | ||||
public CalculatorPresenter(CalculatorModel model, | public CalculatorPresenter(CalculatorModel model, | ||||
CalculatorView view) { | CalculatorView view) { | ||||
this.model = model; | this.model = model; | ||||
this.view = view; | this.view = view; | ||||
view.setDisplay(current); | |||||
view.setDisplay(current); | |||||
view.addListener(this); | view.addListener(this); | ||||
} | } | ||||
In the above example, we held some state information in the presenter. | In the above example, we held some state information in the presenter. | ||||
Alternatively, we could have had an intermediate controller between the | Alternatively, we could have had an intermediate controller between the | ||||
presenter and the model to handle the low-level button logic. | presenter and the model to handle the low-level button logic. | ||||
* Debug Window | * Debug Window | ||||
* Display debug information in the Debug Window and server console | * Display debug information in the Debug Window and server console | ||||
* On-the-fly compilation of Sass themes | * On-the-fly compilation of Sass themes | ||||
* Timings of server calls for Vaadin TestBench | |||||
It is recommended to always deploy production applications in production mode | |||||
for security reasons. | |||||
[[advanced.debug.mode]] | [[advanced.debug.mode]] | ||||
== Enabling the Debug Mode | == Enabling the Debug Mode | ||||
The debug mode is enabled and production mode disabled by default in the UI | The debug mode is enabled and production mode disabled by default in the UI | ||||
templates created with the Eclipse plugin or the Maven archetypes. The debug | |||||
mode can be enabled by giving a [parameter]#productionMode=false# parameter to | |||||
the Vaadin servlet configuration: | |||||
templates created with the Eclipse plugin or the Maven archetypes. Some | |||||
archetypes have a separate module and profile for producing a production mode | |||||
application. The debug mode can be enabled by giving a | |||||
[parameter]#productionMode=false# parameter to the Vaadin servlet | |||||
configuration: | |||||
[subs="normal"] | [subs="normal"] | ||||
---- | ---- | ||||
To view the HTML structure and CSS styles in more detail, you can use Firebug in | To view the HTML structure and CSS styles in more detail, you can use Firebug in | ||||
Firefox, or the Developer Tools in Chrome, as described in | Firefox, or the Developer Tools in Chrome, as described in | ||||
<<dummy/../../../framework/getting-started/getting-started-environment#getting-started.environment.firefox,"Firefox | |||||
and Firebug">>. Firefox also has a built-in feature for inspecting HTML and CSS. | |||||
<<dummy/../../../framework/installing/installing-other#installing.other.firefox,"Firefox and Firebug">>. Firefox also has a built-in feature for inspecting HTML and CSS. | |||||
[[advanced.debug.hierarchy.analyze]] | [[advanced.debug.hierarchy.analyze]] | ||||
detected layout problems are displayed in the log and also printed to the | detected layout problems are displayed in the log and also printed to the | ||||
console. | console. | ||||
[[]] | |||||
.Debug Window Showing the Result of Layout Analysis. | |||||
[[figure.advanced.debug.hierarchy.analyze]] | |||||
.Debug window showing the result of layout analysis. | |||||
image::img/debug-window-analyze-layouts.png[] | image::img/debug-window-analyze-layouts.png[] | ||||
Clicking on a reported problem highlights the component with the problem in the | Clicking on a reported problem highlights the component with the problem in the | ||||
particular direction (height or width). For example, adding a | particular direction (height or width). For example, adding a | ||||
[classname]#Button# with 100% width inside a [classname]#VerticalLayout# with | [classname]#Button# with 100% width inside a [classname]#VerticalLayout# with | ||||
undefined width. In such a case, the error would look as shown in | undefined width. In such a case, the error would look as shown in | ||||
<<dummy/../../../framework//-overview.asciidoc#figure.advanced.debug.hierarchy.analyze,"">>. | |||||
<<figure.advanced.debug.hierarchy.analyze>>. | |||||
[classname]#CustomLayout# components can not be analyzed in the same way as | [classname]#CustomLayout# components can not be analyzed in the same way as | ||||
other layouts. For custom layouts, the button analyzes all contained | other layouts. For custom layouts, the button analyzes all contained | ||||
settings. Here you can also launch the GWT SuperDevMode, as described in | settings. Here you can also launch the GWT SuperDevMode, as described in | ||||
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging | <<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging | ||||
Client-Side Code">>. | Client-Side Code">>. | ||||
IMAGES = three-layer-architecture | |||||
SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg) | |||||
TRGIMAGES_HI := $(foreach file, $(IMAGES), ../img/$(file)-hi.png) | |||||
TRGIMAGES_LO := $(foreach file, $(IMAGES), ../img/$(file)-lo.png) | |||||
images: $(TRGIMAGES_HI) FORCE | |||||
# Just do low now $(TRGIMAGES_LO) | |||||
$(TRGIMAGES_HI): ../img/%-hi.png: %.svg | |||||
inkscape --export-png $@ --export-dpi=150 --export-area-drawing $< | |||||
FORCE: |
You could define it declaractively with the following equivalent design: | You could define it declaractively with the following equivalent design: | ||||
[source, html] | [source, html] | ||||
---- | ---- | ||||
<vaadin-vertical-layout> | <vaadin-vertical-layout> | ||||
<vaadin-text-field caption="Postal code"/> | <vaadin-text-field caption="Postal code"/> | ||||
</vaadin-vertical-layout> | </vaadin-vertical-layout> | ||||
---- | ---- | ||||
ifdef::web[] | |||||
See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"]. | See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"]. | ||||
endif::web[] | |||||
Declarative designs can be crafted by hand, but are most conveniently created | Declarative designs can be crafted by hand, but are most conveniently created | ||||
with the Vaadin Designer. | with the Vaadin Designer. | ||||
A design is an HTML document with custom elements for representing components | A design is an HTML document with custom elements for representing components | ||||
and their configuration. A design has a single root component inside the HTML | and their configuration. A design has a single root component inside the HTML | ||||
body element. Enclosing [literal]#++<html>++#, [literal]#++<head>++#, | |||||
body element. Enclosing [literal]#++<html>++#, [literal]#++<head>++#, and | |||||
[literal]#++<body>++# are optional, but necessary if you need to make namespace | [literal]#++<body>++# are optional, but necessary if you need to make namespace | ||||
definitions for custom components. Other regular HTML elements may not be used | definitions for custom components. Other regular HTML elements may not be used | ||||
in the file, except inside components that specifically accept HTML content. | in the file, except inside components that specifically accept HTML content. | ||||
component tree. Components can have explicitly given IDs to enable binding them | component tree. Components can have explicitly given IDs to enable binding them | ||||
to variables in the Java code, as well as optional attributes. | to variables in the Java code, as well as optional attributes. | ||||
[source, html] | [source, html] | ||||
---- | ---- | ||||
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<body> | <body> | ||||
<vaadin-vertical-layout size-full> | <vaadin-vertical-layout size-full> | ||||
<!-- Label with HTML content --> | <!-- Label with HTML content --> | ||||
<vaadin-label><b>Hello!</b> - How are you?</vaadin-label> | |||||
<vaadin-label><b>Hello!</b> - | |||||
How are you?</vaadin-label> | |||||
<vaadin-horizontal-layout size-full :expand> | <vaadin-horizontal-layout size-full :expand> | ||||
<vaadin-tree _id="mytree" caption="My Tree" | |||||
width-auto height-full/> | |||||
<vaadin-table _id="mytable" caption="My Table" | |||||
size-full :expand/> | |||||
<vaadin-tree _id="mytree" caption="My Tree" | |||||
width-auto height-full/> | |||||
<vaadin-table _id="mytable" caption="My Table" | |||||
size-full :expand/> | |||||
</vaadin-horizontal-layout> | </vaadin-horizontal-layout> | ||||
</vaadin-vertical-layout> | </vaadin-vertical-layout> | ||||
</body> | </body> | ||||
[[application.declarative.elements]] | [[application.declarative.elements]] | ||||
== Component Elements | == Component Elements | ||||
HTML elements of the declarative syntax are directly mapped to Vaadin components | |||||
according to their Java class names. The tag of a component element has a | |||||
namespace prefix separated by a dash. Vaadin core components, which are defined | |||||
in the [package]#com.vaadin.ui# package, have [literal]#++vaadin-++# prefix. The rest | |||||
of an element tag is determined from the Java class name of the component, by | |||||
making it lower-case, while adding a dash ( [literal]#++-++#) before every | |||||
previously upper-case letter as a word separator. For example, | |||||
[classname]#ComboBox# component has declarative element tag | |||||
[literal]#++<vaadin-combo-box>++#. | |||||
HTML elements of the declarative syntax are directly mapped to Vaadin components according to their Java class names. | |||||
The tag of a component element has a namespace prefix separated by a dash. | |||||
Vaadin core components, which are defined in the [package]#com.vaadin.ui# package, have [literal]#++vaadin-++# prefix. | |||||
The rest of an element tag is determined from the Java class name of the component, by making it lower-case, while adding a dash (`-`) before every previously upper-case letter as a word separator. | |||||
For example, [classname]#ComboBox# component has declarative element tag [vaadinelement]#vaadin-combo-box#. | |||||
[[application.declarative.elements.prefix]] | [[application.declarative.elements.prefix]] | ||||
=== Component Prefix to Package Mapping | === Component Prefix to Package Mapping | ||||
mapping from an element prefix to the Java package of the component. The prefix | mapping from an element prefix to the Java package of the component. The prefix | ||||
is used as a sort of a namespace. | is used as a sort of a namespace. | ||||
The mappings are defined in [literal]#++<meta name="package-mapping" ...>++# | |||||
The mappings are defined in `<meta name="package-mapping" ...>` | |||||
elements in the HTML head. A [parameter]#content# attribute defines a mapping, | elements in the HTML head. A [parameter]#content# attribute defines a mapping, | ||||
in notation with a prefix separated from the corresponding Java package name | in notation with a prefix separated from the corresponding Java package name | ||||
with a colon, such as " [literal]#++my:com.example.myapp++#". | |||||
with a colon, such as `my:com.example.myapp`. | |||||
For example, consider that you have the following composite class | For example, consider that you have the following composite class | ||||
[classname]#com.example.myapp.ExampleComponent#: | [classname]#com.example.myapp.ExampleComponent#: | ||||
[source, java] | [source, java] | ||||
---- | ---- | ||||
package com.example.myapp; | package com.example.myapp; | ||||
<!DOCTYPE html> | <!DOCTYPE html> | ||||
<html> | <html> | ||||
<head> | <head> | ||||
**<meta name="package-mapping" content="my:com.example.myapp" />** | |||||
**<meta name="package-mapping" | |||||
content="my:com.example.myapp" />** | |||||
</head> | </head> | ||||
<body> | <body> | ||||
<vaadin-vertical-layout> | <vaadin-vertical-layout> | ||||
<vaadin-label><b>Hello!</b> - How are you?</vaadin-label> | |||||
<vaadin-label><b>Hello!</b> - | |||||
How are you?</vaadin-label> | |||||
<!-- Use it here --> | <!-- Use it here --> | ||||
**<my-example-component/>** | **<my-example-component/>** | ||||
you would set with [methodname]#setAlternateText()#, is given as the | you would set with [methodname]#setAlternateText()#, is given as the | ||||
[literal]#++alt++# attribute. | [literal]#++alt++# attribute. | ||||
Boolean values must be either " [literal]#++true++#" or " [literal]#++false++#". | |||||
The value can be omitted, in which case [literal]#++true++# is assumed. For | |||||
example, the [literal]#++enabled++# attribute is boolean and has default value " | |||||
[literal]#++true++#", so [literal]#++enabled="true"++# and | |||||
[literal]#++enabled++# and equivalent. | |||||
Boolean values must be either `true` or `false`. | |||||
The value can be omitted, in which case `true` is assumed. | |||||
For example, the [literal]#++enabled++# attribute is boolean and has default value "`true`", so `enabled="true"` and `enabled` and equivalent. | |||||
[source, html] | [source, html] | ||||
---- | ---- | ||||
public class MyViewDesign extends VerticalLayout { | public class MyViewDesign extends VerticalLayout { | ||||
Tree mytree; | Tree mytree; | ||||
Table mytable; | Table mytable; | ||||
public MyViewDesign() { | public MyViewDesign() { | ||||
Design.read("MyDeclarativeUI.html", this); | Design.read("MyDeclarativeUI.html", this); | ||||
TreeExample.createTreeContent()); | TreeExample.createTreeContent()); | ||||
mytable.setContainerDataSource( | mytable.setContainerDataSource( | ||||
TableExample.generateContent()); | TableExample.generateContent()); | ||||
// Some interaction | // Some interaction | ||||
mytree.addItemClickListener(event -> // Java 8 | mytree.addItemClickListener(event -> // Java 8 | ||||
Notification.show("Selected " + | Notification.show("Selected " + | ||||
See | See | ||||
<<dummy/../../../framework/advanced/advanced-navigator#advanced.navigator.urifragment,"Handling | <<dummy/../../../framework/advanced/advanced-navigator#advanced.navigator.urifragment,"Handling | ||||
URI Fragment Path">> for a complete example. | URI Fragment Path">> for a complete example. | ||||
WAR package for deployment. Server-side Vaadin UIs run as servlets within such a | WAR package for deployment. Server-side Vaadin UIs run as servlets within such a | ||||
Java web application. There exists also other kinds of web applications. To | Java web application. There exists also other kinds of web applications. To | ||||
avoid confusion with the general meaning of "web application", we often refer to | avoid confusion with the general meaning of "web application", we often refer to | ||||
Java web applications with the slight misnomer "WAR" in this book.//TODO Vaadin | |||||
7: What is the relationship between servlet and | |||||
application? | |||||
Java web applications with the slight misnomer "WAR" in this book. | |||||
// TODO Vaadin 7: What is the relationship between servlet and application? | |||||
[[application.environment.war-eclipse]] | [[application.environment.war-eclipse]] | ||||
== Creating Deployable WAR in Eclipse | == Creating Deployable WAR in Eclipse | ||||
To deploy an application to a web server, you need to create a WAR package. Here | To deploy an application to a web server, you need to create a WAR package. Here | ||||
we give the instructions for Eclipse. | we give the instructions for Eclipse. | ||||
. Select "File > Export" and then "Web > WAR File". Or, right-click the project in | |||||
the Project Explorer and select "Web > WAR File". | |||||
. Select "File > Export" and then "Web > WAR File". Or, right-click the project in the Project Explorer and select "Web > WAR File". | |||||
. Select the [guilabel]#Web project# to export. Enter [guilabel]#Destination# file | |||||
name ( [filename]#.war#). | |||||
. Select the [guilabel]#Web project# to export. Enter [guilabel]#Destination# file name ([filename]#.war#). | |||||
. Make any other settings in the dialog, and click [guibutton]#Finish#. | . Make any other settings in the dialog, and click [guibutton]#Finish#. | ||||
[[application.environment.war]] | [[application.environment.war]] | ||||
== Web Application Contents | == Web Application Contents | ||||
The following files are required in a web application in order to run it. | The following files are required in a web application in order to run it. | ||||
[filename]#WEB-INF/web.xml# (optional with Servlet 3.0):: This is the web application descriptor that defines how the application is | |||||
organized, that is, what servlets and such it has. You can refer to any Java | |||||
book about the contents of this file. It is not needed if you define the Vaadin | |||||
servlet with the [literal]#++@WebServlet++# annotation in Servlet API 3.0. | |||||
[filename]#WEB-INF/lib/*.jar# :: These are the Vaadin libraries and their dependencies. They can be found in the | |||||
installation package or as loaded by a dependency management system such as | |||||
Maven or Ivy. | |||||
Your UI classes:: You must include your UI classes either in a JAR file in [filename]#WEB-INF/lib# | |||||
or as classes in [filename]#WEB-INF/classes# | |||||
Your own theme files (OPTIONAL):: If your application uses a special theme (look and feel), you must include it in | |||||
[filename]#VAADIN/themes/themename# directory. | |||||
[filename]#WEB-INF/web.xml# (optional with Servlet 3.0):: | |||||
his is the web application descriptor that defines how the application is rganized, that is, what servlets and such it has. | |||||
You can refer to any Java book about the contents of this file. | |||||
It is not needed if you define the Vaadin servlet with the [classname]#@WebServlet# annotation in Servlet API 3.0. | |||||
Widget sets (OPTIONAL):: If your application uses a project-specific widget set, it must be compiled in | |||||
the [filename]#VAADIN/widgetset/# directory. | |||||
[filename]#WEB-INF/lib/*.jar# :: | |||||
These are the Vaadin libraries and their dependencies. | |||||
They can be found in the installation package or as loaded by a dependency management system such as Maven or Ivy. | |||||
Your UI classes:: | |||||
You must include your UI classes either in a JAR file in [filename]#WEB-INF/lib# or as classes in [filename]#WEB-INF/classes# | |||||
Your own theme files (OPTIONAL):: | |||||
If your application uses a special theme (look and feel), you must include it in [filename]#VAADIN/themes/themename# directory. | |||||
Widget sets (OPTIONAL):: | |||||
If your application uses a project-specific widget set, it must be compiled in the [filename]#VAADIN/widgetset/# directory. | |||||
[[application.environment.webservlet]] | [[application.environment.webservlet]] | ||||
== Web Servlet Class | == Web Servlet Class |
((("field"))) | ((("field"))) | ||||
The user interface of a Vaadin application consists of components that are | The user interface of a Vaadin application consists of components that are | ||||
created and laid out by the application. Each server-side component has a | created and laid out by the application. Each server-side component has a | ||||
client-side counterpart, a " __widget__", by which it is rendered in the browser | |||||
client-side counterpart, a __widget__, by which it is rendered in the browser | |||||
and with which the user interacts. The client-side widgets can also be used by | and with which the user interacts. The client-side widgets can also be used by | ||||
client-side applications. The server-side components relay these events to the | client-side applications. The server-side components relay these events to the | ||||
application logic. Field components that have a value, which the user can view | application logic. Field components that have a value, which the user can view | ||||
API, possibly as EJBs, or distributed to a remote back-end service. The data | API, possibly as EJBs, or distributed to a remote back-end service. The data | ||||
storage is usually distributed to a database management system, and is typically | storage is usually distributed to a database management system, and is typically | ||||
accessed through a persistence solution, such as JPA. | accessed through a persistence solution, such as JPA. | ||||
API documentation for a complete description of the widget classes. | API documentation for a complete description of the widget classes. | ||||
[[figure.clientside.widgets]] | [[figure.clientside.widgets]] | ||||
.GWT Widget Base Class Hierarchy | |||||
.GWT widget base class hierarchy | |||||
image::img/gwt-widgets-hi.png[] | image::img/gwt-widgets-hi.png[] | ||||
For example, we could extend the [classname]#Label# widget to display some | For example, we could extend the [classname]#Label# widget to display some | ||||
custom text. | custom text. | ||||
---- | ---- | ||||
package com.example.myapp.client; | package com.example.myapp.client; | ||||
} | } | ||||
} | } | ||||
---- | ---- | ||||
IMAGES = gwt-widgets | |||||
SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg) | |||||
TRGIMAGES_HI := $(foreach file, $(IMAGES), ../img/$(file)-hi.png) | |||||
TRGIMAGES_LO := $(foreach file, $(IMAGES), ../img/$(file)-lo.png) | |||||
images: $(TRGIMAGES_HI) FORCE | |||||
# Just do low now $(TRGIMAGES_LO) | |||||
$(TRGIMAGES_HI): ../img/%-hi.png: %.svg | |||||
inkscape --export-png $@ --export-dpi=150 --export-area-drawing $< | |||||
FORCE: |
(columns) as was done above, while some others determine them otherwise. The | (columns) as was done above, while some others determine them otherwise. The | ||||
definition of a property with [methodname]#addContainerProperty()# requires a | definition of a property with [methodname]#addContainerProperty()# requires a | ||||
unique property ID, type, and a default value. You can also give | unique property ID, type, and a default value. You can also give | ||||
[parameter]#null#. | |||||
[parameter]#null#. If the container of a component is replaced and the new container | |||||
contains a different set of columns, such as a property with the same ID but a | |||||
different data type, the component should be reinitialized. For a table or grid, | |||||
it means redefining their columns. | |||||
Vaadin has a several built-in in-memory container implementations, such as | Vaadin has a several built-in in-memory container implementations, such as | ||||
[classname]#IndexedContainer# and [classname]#BeanItemContainer#, which are easy | [classname]#IndexedContainer# and [classname]#BeanItemContainer#, which are easy |
[[getting-started]] | [[getting-started]] | ||||
== Getting Started with Vaadin | |||||
== Creating a Vaadin Application | |||||
This chapter gives practical instructions for installing the recommended | |||||
toolchain, the Vaadin libraries and its dependencies, and creating a new Vaadin | |||||
project. | |||||
This chapter gives practical instructions for creating a Vaadin application project and deploying it to a server to run it. We also consider topics such as debugging. | |||||
The instructions are given separately for the Eclipse IDE, NetBeans, and IntelliJ IDEA. | |||||
include::getting-started-overview.asciidoc[leveloffset=+2] | |||||
include::getting-started-environment.asciidoc[leveloffset=+2] | |||||
include::getting-started-overview.adoc[leveloffset=+2] | |||||
include::getting-started-libraries.asciidoc[leveloffset=+2] | include::getting-started-libraries.asciidoc[leveloffset=+2] | ||||
include::getting-started-eclipse.asciidoc[leveloffset=+2] | |||||
include::getting-started-archetypes.asciidoc[leveloffset=+2] | |||||
include::getting-started-first-project.asciidoc[leveloffset=+2] | include::getting-started-first-project.asciidoc[leveloffset=+2] | ||||
--- | |||||
title: Maven Archetypes | |||||
order: 30 | |||||
layout: page | |||||
--- | |||||
[[getting-started.archetypes]] | |||||
= Overview of Maven Archetypes | |||||
Vaadin currently offers the following Maven archetypes for different kinds of projects: | |||||
`vaadin-archetype-application`:: | |||||
This is a single-module project for simple applications. | |||||
It is good for quick demos and trying out Vaadin. | |||||
It is also useful when you are experienced with Vaadin and want to build all the aspects of the application yourself. | |||||
`vaadin-archetype-application-multimodule`:: | |||||
A complete Vaadin application development setup. | |||||
It features separate production and development profiles. | |||||
`vaadin-archetype-application-example`:: | |||||
An example CRUD web application using multi-module project setup. | |||||
`vaadin-archetype-widget`:: | |||||
A multi-module project for a new Vaadin add-on. | |||||
It has two modules: one for the add-on and another for a demo application. | |||||
`vaadin-archetype-touchkit`:: | |||||
A mobile development starter project using Vaadin TouchKit. | |||||
See <<dummy/../../../touchkit/mobile-overview#mobile.overview,"Vaadin TouchKit">>. | |||||
Notice that this archetype uses the AGPL-licensed version of TouchKit, which requires that your project must also be licensed under the AGPL license. | |||||
`vaadin-archetype-liferay-portlet`:: | |||||
A portlet development setup for the open-source Liferay portal. |
--- | |||||
title: Vaadin Plugin for Eclipse | |||||
order: 4 | |||||
layout: page | |||||
--- | |||||
[[getting-started.eclipse]] | |||||
= Vaadin Plugin for Eclipse | |||||
If you are using the Eclipse IDE, using the Vaadin Plugin for Eclipse helps | |||||
greatly. The plugin includes wizards for creating new Vaadin-based projects, | |||||
themes, and client-side widgets and widget sets. Notice that you can also create | |||||
Vaadin projects as Maven projects in Eclipse. | |||||
[[getting-started.eclipse.vaadin-plugin]] | |||||
== Installing the Vaadin Plugin | |||||
You can install the plugin as follows: | |||||
. Select "Help > Install New Software...". | |||||
. Add the Vaadin plugin update site by clicking [guibutton]#Add...# button. | |||||
+ | |||||
image::img/plugin-install-addsite.png[] | |||||
+ | |||||
Enter a name such as "Vaadin Update Site" and the URL of the update site: | |||||
http://vaadin.com/eclipse. If you want or need to use the latest unstable | |||||
plugin, which is usually more compatible with development and beta releases of | |||||
Vaadin, you can use http://vaadin.com/eclipse/experimental and give it a | |||||
distinctive name such as "Vaadin Experimental Site". Then click [guibutton]#OK#. | |||||
The Vaadin site should now appear in the [guilabel]#Available Software# window. | |||||
. Currently, if using the stable plugin, the [guilabel]#Group items by category# should be enabled. If using the experimental plugin, it should be disabled. This may change in future. | |||||
. Select all the Vaadin plugins in the tree. | |||||
+ | |||||
image::img/plugin-install-available.png[] | |||||
+ | |||||
Then, click [guibutton]#Next#. | |||||
. Review the installation details and click [guibutton]#Next#. | |||||
. Accept or unaccept the license. Finally, click [guibutton]#Finish#. | |||||
. After the plugin is installed, Eclipse will ask to restart itself. Click | |||||
[guibutton]#Restart#. | |||||
More installation instructions for the Eclipse plugin can be found at | |||||
http://vaadin.com/eclipse. | |||||
[[getting-started.eclipse.update]] | |||||
== Updating the Plugins | |||||
If you have automatic updates enabled in Eclipse (see "Window > Preferences > | |||||
Install/Update > Automatic Updates"), the Vaadin plugin will be updated | |||||
automatically along with other plugins. Otherwise, you can update the Vaadin | |||||
plugin manually as follows: | |||||
. Select "Help > Check for Updates". Eclipse will contact the update sites of the | |||||
installed software. | |||||
. After the updates are installed, Eclipse will ask to restart itself. Click | |||||
[guibutton]#Restart#. | |||||
Notice that updating the Vaadin plugin updates only the plugin and __not__ the | |||||
Vaadin libraries, which are project specific. See below for instructions for | |||||
updating the libraries. | |||||
[[getting-started.eclipse.libraryupdate]] | |||||
== Updating the Vaadin Libraries | |||||
Updating the Vaadin plugin does not update Vaadin libraries. The libraries are | |||||
project specific, as a different version might be required for different | |||||
projects, so you have to update them separately for each project. | |||||
. Open the [filename]#ivy.xml# in an editor in Eclipse. | |||||
. Edit the entity definition at the beginning of the file to set the Vaadin | |||||
version. | |||||
+ | |||||
[subs="normal"] | |||||
---- | |||||
<!ENTITY vaadin.version "**7.x.x**"> | |||||
---- | |||||
+ | |||||
You can specify either a fixed version number, as shown in the above example, or | |||||
a dynamic revision tag such as [literal]#++latest.release++#. You can find more | |||||
information about the dependency declarations in Ivy documentation. | |||||
. Right-click the project and select "Ivy > Resolve". | |||||
+ | |||||
Updating the libraries can take several minutes. You can see the progress in the | |||||
Eclipse status bar. You can get more details about the progress by clicking the | |||||
indicator. | |||||
. If you have compiled the widget set for your project, recompile it by clicking | |||||
the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar. | |||||
. Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by | |||||
right-clicking the server and selecting Clean as well as Clean Tomcat Work | |||||
Directory, and restart it. | |||||
If you experience problems after updating the libraries, you can try clearing | |||||
the Ivy resolution caches by right-clicking the project and selecting "Ivy > | |||||
Clean all caches". Then, do the "Ivy > Resolve" and other tasks again. | |||||
--- | |||||
title: Setting up the Development Environment | |||||
order: 2 | |||||
layout: page | |||||
--- | |||||
[[getting-started.environment]] | |||||
= Setting up the Development Environment | |||||
This section guides you step-by-step in setting up a reference development | |||||
environment. Vaadin supports a wide variety of tools, so you can use any IDE for | |||||
writing the code, almost any Java web server for deploying the application, most | |||||
web browsers for using it, and any operating system platform supported by Java. | |||||
In this example, we use the following toolchain: | |||||
* Windows, Linux, or Mac OS X | |||||
* link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[Oracle Java SE 8] (Java 6 or newer is required) | |||||
* link:http://www.eclipse.org/downloads/[Eclipse IDE for Java EE Developers] | |||||
* link:http://tomcat.apache.org/[Apache Tomcat 8.0 (Core)] | |||||
* link:http://www.getfirefox.com/[Mozilla Firefox] browser | |||||
* link:http://www.getfirebug.com/[Firebug] debug tool (optional) | |||||
* link:http://vaadin.com/download/[Vaadin Framework] | |||||
The above reference toolchain is a good choice of tools, but you can use almost | |||||
any tools you are comfortable with. | |||||
We recommend using Java 8 for Vaadin development, but you need to make sure that | |||||
your entire toolchain supports it. A server supporting Servlet 3.0 is | |||||
recommended. It is required for using Vaadin CDI, for which also a CDI container | |||||
is required, a standard feature in Java EE 6 or newer servers. It is also | |||||
required by the Vaadin Spring add-on. Server push can benefit from using | |||||
communication modes, such as WebSocket, enabled by features in some latest | |||||
servers. For Java EE containers, at least Wildfly, Glassfish, and Apache TomEE | |||||
Web Profile are recommended. | |||||
[[figure.toolchain]] | |||||
.Development Toolchain and Process | |||||
image::img/toolchain-hi.png[] | |||||
<<figure.toolchain>> illustrates the development toolchain. You develop your | |||||
application as an Eclipse project. The project must include, in addition to your | |||||
source code, the Vaadin libraries. It can also include project-specific themes. | |||||
You need to compile and deploy a project to a web container before you can use | |||||
it. You can deploy a project through the Web Tools Platform (WTP) for Eclipse | |||||
(included in the Eclipse EE package), which allows automatic deployment of web | |||||
applications from Eclipse. You can also deploy a project manually, by creating a | |||||
web application archive (WAR) and deploying it to the web container. | |||||
[[getting-started.environment.java]] | |||||
== Installing Java SDK | |||||
Java SDK is required by Vaadin and also by the Eclipse IDE. Vaadin is compatible | |||||
with Java 1.6 and later editions. Java EE 7 is required for proper server push | |||||
support with WebSockets. | |||||
[[getting-started.environment.java.windows]] | |||||
=== Windows | |||||
. Download Oracle Java SE 8.0 from | |||||
link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[http://www.oracle.com/technetwork/java/javase/downloads/index.html] | |||||
. Install the Java SDK by running the installer. The default options are fine. | |||||
[[getting-started.environment.linux]] | |||||
=== Linux / UNIX | |||||
Most Linux systems either have JDK preinstalled or allow installing it through a | |||||
package management system. Notice however that they have OpenJDK as the default | |||||
Java implementation. While it is known to have worked with Vaadin and possibly | |||||
also with the development toolchain, we do not especially support it. | |||||
Regarding OS X, notice that JDK 1.6 or newer is included in OS X 10.6 and newer. | |||||
Otherwise: | |||||
. Download Oracle Java SE 8.0 from | |||||
link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[http://www.oracle.com/technetwork/java/javase/downloads/] | |||||
. Decompress it under a suitable base directory, such as [filename]#/opt#. For | |||||
example, for Java SDK, enter (either as root or with [command]#sudo# in Linux): | |||||
+ | |||||
[subs="normal"] | |||||
---- | |||||
[prompt]#+++#+++# [command]#cd# [replaceable]#/opt# | |||||
[prompt]#+++#+++# [command]#sh# [replaceable]#(path-to-installation-package)/jdk-8u20-linux-x64.bin# | |||||
---- | |||||
+ | |||||
and follow the instructions in the installer. | |||||
. Set up the [literal]#++JAVA_HOME++# environment variable to point to the Java | |||||
installation directory. Also, include the [literal]#++$JAVA_HOME/bin++# in the | |||||
[literal]#++PATH++#. How you do that varies by the UNIX variant. For example, in | |||||
Linux and using the Bash shell, you would add lines such as the following to the | |||||
[filename]#.bashrc# or [filename]#.profile# script in your home directory: | |||||
+ | |||||
---- | |||||
export JAVA_HOME=/opt/jdk1.8.0_20 | |||||
export PATH=$PATH:$HOME/bin:$JAVA_HOME/bin | |||||
---- | |||||
+ | |||||
You could also make the setting system-wide in a file such as | |||||
[filename]#/etc/bash.bashrc#, [filename]#/etc/profile#, or an equivalent file. | |||||
If you install Apache Ant or Maven, you may also want to set up those in the | |||||
path. | |||||
+ | |||||
Settings done in a [filename]#bashrc# file require that you open a new shell | |||||
window. Settings done in a [filename]#profile# file require that you log in into | |||||
the system. You can, of course, also give the commands in the current shell. | |||||
[[getting-started.environment.eclipse]] | |||||
== Installing Eclipse IDE | |||||
=== Windows | |||||
. Download the Eclipse IDE for Java EE Developers from | |||||
link:http://www.eclipse.org/downloads/[http://www.eclipse.org/downloads/] | |||||
. Decompress the Eclipse IDE package to a suitable directory. You are free to | |||||
select any directory and to use any ZIP decompressor, but in this example we | |||||
decompress the ZIP file by just double-clicking it and selecting "Extract all | |||||
files" task from Windows compressed folder task. In our installation example, we | |||||
use [filename]#C:\dev# as the target directory. | |||||
Eclipse is now installed in [filename]#C:\dev\eclipse# and can be started from | |||||
there (by double clicking eclipse.exe). | |||||
=== Linux / OS X / UNIX | |||||
We recommend that you install Eclipse manually in Linux and other UNIX variants | |||||
as follows. | |||||
. Download Eclipse IDE for Java EE Developers from | |||||
link:http://www.eclipse.org/downloads/[http://www.eclipse.org/downloads/] | |||||
. Decompress the Eclipse package into a suitable base directory. It is important | |||||
to make sure that there is no old Eclipse installation in the target directory. | |||||
Installing a new version on top of an old one probably renders Eclipse unusable. | |||||
. Eclipse should normally be installed as a regular user, as this makes | |||||
installation of plugins easier. Eclipse also stores some user settings in the | |||||
installation directory. To install the package, enter: | |||||
+ | |||||
[subs="normal"] | |||||
---- | |||||
[prompt]#$# [command]#tar# zxf [replaceable]#(path-to-installation-package)/eclipse-jee-ganymede-SR2-linux-gtk.tar.gz# | |||||
---- | |||||
+ | |||||
This will extract the package to a subdirectory with the name | |||||
[filename]#eclipse#. | |||||
. If you wish to enable starting Eclipse from command-line, you need to add the | |||||
Eclipse installation directory to your system or user PATH, or make a symbolic | |||||
link or script to point to the executable. | |||||
An alternative to the above procedure would be to use an Eclipse version | |||||
available through the package management system of your operating system. It is, | |||||
however, __not recommended__, because you will need write access to the Eclipse | |||||
installation directory to install Eclipse plugins, and you may face | |||||
incompatibility issues with Eclipse plugins installed by the package management | |||||
of the operating system. | |||||
[[getting-started.environment.tomcat]] | |||||
== Installing Apache Tomcat | |||||
Apache Tomcat is a lightweight Java web server suitable for both development and | |||||
production. There are many ways to install it, but here we simply decompress the | |||||
installation package. | |||||
__Apache Tomcat should be installed with user permissions.__ During development, | |||||
you will be running Eclipse or some other IDE with user permissions, but | |||||
deploying web applications to a Tomcat server that is installed system-wide | |||||
requires administrator or root permissions. | |||||
. Download the installation package: | |||||
+ | |||||
Apache Tomcat 8.0 (Core Binary Distribution) from http://tomcat.apache.org/ | |||||
. Decompress Apache Tomcat package to a suitable target directory, such as | |||||
[filename]#C:\dev# (Windows) or [filename]#/opt# (Linux or Mac OS X). The Apache | |||||
Tomcat home directory will be [filename]#C:\dev\apache-tomcat-8.0.x# or | |||||
[filename]#/opt/apache-tomcat-8.0.x#, respectively. | |||||
[[getting-started.environment.firefox]] | |||||
== Firefox and Firebug | |||||
Vaadin supports many web browsers and you can use any of them for development. | |||||
If you plan to create a custom theme, customized layouts, or create new | |||||
components, we recommend that you use either Firefox together with Firebug or | |||||
Google Chrome, which has built-in developer tools similar to Firebug. | |||||
[[getting-started.environment.firefox.firebug]] | |||||
=== Using Firebug with Vaadin | |||||
After installing Firefox, use it to open | |||||
link:http://www.getfirebug.com/[http://www.getfirebug.com/]. Follow the | |||||
instructions on the site to install the latest stable version of Firebug | |||||
available for the browser. You may need to allow Firefox to install the plugin | |||||
by clicking the yellow warning bar at the top of the browser window. | |||||
After Firebug is installed, it can be enabled at any time from the Firefox | |||||
toolbar. <<figure.firebug.calc>> shows Firebug in action. | |||||
[[figure.firebug.calc]] | |||||
.Firebug Debugger for Firefox | |||||
image::img/firebug.png[] | |||||
The most important feature in Firebug is inspecting HTML elements. Right-click | |||||
on an element and select [guilabel]#Inspect Element with Firebug# to inspect it. | |||||
In addition to HTML tree, it also shows the CSS rules matching the element, | |||||
which you can use for building themes. You can even edit the CSS styles live, to | |||||
experiment with styling. | |||||
--- | --- | ||||
title: Creating and Running a Project with Eclipse | |||||
order: 5 | |||||
title: Creating a Project in Eclipse | |||||
order: 100 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
[[getting-started.first-project]] | [[getting-started.first-project]] | ||||
= Creating and Running a Project with Eclipse | |||||
= Creating and Running a Project in Eclipse | |||||
This section gives instructions for creating a new Eclipse project using the | This section gives instructions for creating a new Eclipse project using the | ||||
Vaadin Plugin. The task will include the following steps: | Vaadin Plugin. The task will include the following steps: | ||||
We also show how you can debug the application in the debug mode in Eclipse. | We also show how you can debug the application in the debug mode in Eclipse. | ||||
This walkthrough assumes that you have already installed the Vaadin Plugin for | |||||
Eclipse and set up your development environment, as instructed in | |||||
<<dummy/../../../framework/getting-started/getting-started-environment#getting-started.environment,"Setting | |||||
up the Development Environment">>. | |||||
This walkthrough assumes that you have already installed the Eclipse IDE, the Vaadin Plugin, and a development server, as instructed in | |||||
<<dummy/../../../framework/installing/installing-eclipse#installing.eclipse, "Installing the Eclipse IDE and Plugin">>. | |||||
[[getting-started.first-project.creation]] | |||||
ifdef::web[] | |||||
[[getting-started.first-project.ivy]] | |||||
== Creating the Project | == Creating the Project | ||||
endif::web[] | |||||
ifdef::web[] | |||||
_The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <<getting-started.first-project.creation>>._ | |||||
endif::web[] | |||||
ifdef::web[] | |||||
Let us create the first application project with the tools installed in the | Let us create the first application project with the tools installed in the | ||||
previous section. First, launch Eclipse and follow the following steps: | previous section. First, launch Eclipse and follow the following steps: | ||||
. Start creating a new project by selecting from the menu "File > New > Project...". | . Start creating a new project by selecting from the menu "File > New > Project...". | ||||
. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7 | . In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7 | ||||
Project" and click [guibutton]#Next#. | Project" and click [guibutton]#Next#. | ||||
+ | + | ||||
image::img/myproject-new-vaadin.png[] | |||||
image::img/myproject-ivy-new-vaadin.png[width=70%] | |||||
. In the [guilabel]#Vaadin Project# step, you need to set the basic web project | . In the [guilabel]#Vaadin Project# step, you need to set the basic web project | ||||
settings. You need to give at least the __project name__ and the runtime; the | settings. You need to give at least the __project name__ and the runtime; the | ||||
default values should be good for the other settings. | default values should be good for the other settings. | ||||
+ | + | ||||
image::img/myproject-settings.png[] | |||||
image::img/myproject-ivy-settings.png[width=70%] | |||||
[guilabel]#Project name#:: Give the project a name. The name should be a valid identifier usable | [guilabel]#Project name#:: Give the project a name. The name should be a valid identifier usable | ||||
cross-platform as a filename and inside a URL, so using only lower-case | cross-platform as a filename and inside a URL, so using only lower-case | ||||
configuration. | configuration. | ||||
ifdef::web[] | ifdef::web[] | ||||
See <<dummy/../../../framework/advanced/advanced-gae#advanced.gae,"Google App | See <<dummy/../../../framework/advanced/advanced-gae#advanced.gae,"Google App | ||||
Engine Integration">> and | |||||
<<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal | |||||
Integration">> for instructions regarding the use of Vaadin in the alternative | |||||
Engine Integration">> and <<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal Integration">> for instructions regarding the use of Vaadin in the alternative | |||||
environments. | environments. | ||||
endif::web[] | endif::web[] | ||||
[guilabel]#Create TestBench test#:: When enabled, the application stub will include a test case for testing the UI | [guilabel]#Create TestBench test#:: When enabled, the application stub will include a test case for testing the UI | ||||
with Vaadin TestBench, as described in | with Vaadin TestBench, as described in | ||||
<<dummy/../../../testbench/testbench-overview.asciidoc#testbench.overview,"Vaadin | |||||
TestBench">>. Vaadin TestBench API library will be included in | |||||
[filename]#ivy.xml# as a dependency. Vaadin version 7.3 or later is required to | |||||
create the stub. | |||||
<<dummy/../../../testbench/testbench-overview.asciidoc#testbench.overview,"Vaadin TestBench">>. | |||||
Vaadin TestBench API library will be included in [filename]#ivy.xml# as a dependency. | |||||
Vaadin version 7.3 or later is required to create the stub. | |||||
+ | + | ||||
You can click [guibutton]#Finish# here to use the defaults for the rest of the | You can click [guibutton]#Finish# here to use the defaults for the rest of the | ||||
the settings are pre-filled, and you should normally accept them as they are. | the settings are pre-filled, and you should normally accept them as they are. | ||||
+ | + | ||||
image::img/myproject-web.png[] | |||||
image::img/myproject-ivy-web.png[] | |||||
[guilabel]#Context Root#:: The context root (of the application) identifies the application in the URL used | [guilabel]#Context Root#:: The context root (of the application) identifies the application in the URL used | ||||
for accessing it. For example, if the project has a [literal]#++myproject++# | for accessing it. For example, if the project has a [literal]#++myproject++# | ||||
(WAR) that is deployed to the web server. The directory is relative to the root | (WAR) that is deployed to the web server. The directory is relative to the root | ||||
directory of the project. | directory of the project. | ||||
+ | + | ||||
You can just accept the defaults and click [guibutton]#Next#. | You can just accept the defaults and click [guibutton]#Next#. | ||||
. The [guilabel]#Vaadin project# step page has various Vaadin-specific application | |||||
settings. If you are trying out Vaadin for the first time, you should not need | |||||
. The [guilabel]#Vaadin project# step page has various Vaadin-specific application settings. | |||||
If you are trying out Vaadin for the first time, you should not need | |||||
to change anything. You can set most of the settings afterwards, except the | to change anything. You can set most of the settings afterwards, except the | ||||
creation of the portlet configuration. | creation of the portlet configuration. | ||||
+ | + | ||||
image::img/myproject-vaadin.png[] | image::img/myproject-vaadin.png[] | ||||
<<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal | <<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal | ||||
Integration">> for more information on portlets. | Integration">> for more information on portlets. | ||||
+ | + | ||||
Finally, click [guibutton]#Finish# to create the project. | Finally, click [guibutton]#Finish# to create the project. | ||||
[[getting-started.first-project.exploring]] | [[getting-started.first-project.exploring]] | ||||
== Exploring the Project | == Exploring the Project | ||||
[[figure.getting-started.first-project.exploring]] | [[figure.getting-started.first-project.exploring]] | ||||
.A New Vaadin Project | .A New Vaadin Project | ||||
image::img/myproject-created.png[] | |||||
image::img/myproject-ivy-created.png[scaledwidth=60%] | |||||
The Vaadin libraries and other dependencies are managed by Ivy. Notice that the | The Vaadin libraries and other dependencies are managed by Ivy. Notice that the | ||||
libraries are not stored under the project folder, even though they are listed | libraries are not stored under the project folder, even though they are listed | ||||
The UI class created by the plugin contains the following code: | The UI class created by the plugin contains the following code: | ||||
[source, java] | [source, java] | ||||
---- | ---- | ||||
package com.example.myproject; | package com.example.myproject; | ||||
descriptor. | descriptor. | ||||
For a more detailed treatment of the deployment, see | For a more detailed treatment of the deployment, see | ||||
<<dummy/../../../framework/application/application-environment#application.environment.web-xml,"Using | |||||
a web.xml Deployment Descriptor">>. | |||||
<<dummy/../../../framework/application/application-environment#application.environment.web-xml,"Using a web.xml Deployment Descriptor">>. | |||||
endif::web[] | |||||
[[getting-started.first-project.creation]] | |||||
== Creating a Maven Project | |||||
ifdef::web[] | |||||
_The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects. | |||||
To use it, you must have installed the experimental version of the plug-in._ | |||||
endif::web[] | |||||
Let us create the first application project with the tools installed in the previous section. | |||||
First, launch Eclipse and follow the following steps: | |||||
. Start creating a new project by selecting from the menu "File > New > Project...". | |||||
. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7 | |||||
Project (Maven)" and click [guibutton]#Next#. | |||||
+ | |||||
image::img/myproject-new-vaadin.png[width=70%] | |||||
. In the [guilabel]#Select a Maven archetype# step, you need to select the project type. | |||||
To create a simple test project, select the [guilabel]#Single-module Application Project#. | |||||
+ | |||||
image::img/myproject-archetype-selection.png[width=70%] | |||||
. In the [guilabel]#Specify archetype parameters# step, you need to give at least the [guilabel]#Group Id# and the [guilabel]#Artifact Id#. | |||||
The default values should be good for the other settings. | |||||
+ | |||||
image::img/myproject-settings.png[width=70%] | |||||
[guilabel]#Group Id#:: | |||||
Give the project an organization-level identifier, for example, [packagename]#com.example#. | |||||
It is used as a prefix for your Java package names, and hence must be a valid Java package name itself. | |||||
[guilabel]#Artifact Id#:: Give the project a name, for example, `myproject`. | |||||
The artifact ID must be a valid Java sub-package name. | |||||
[guilabel]#Version#:: Give the project a Maven compatible version number, for example, `1.0-SNAPSHOT`. | |||||
The version number should typically start with two or more integers separated with dots, and | |||||
should not contain spaces. | |||||
[guilabel]#Package#:: Give the base package name for the project, for example, | |||||
[packagename]#com.example.myproject#. | |||||
It is by default generated from the group ID and the artifact ID. | |||||
[guilabel]#Properties#:: Enter values for archetype-specific properties that control naming of various elements in the created project, such as the UI class name. | |||||
+ | |||||
You can change the version later in the [filename]#pom.xml#. | |||||
+ | |||||
Finally, click [guibutton]#Finish# to create the project. | |||||
[[getting-started.first-project.exploring]] | |||||
== Exploring the Project | |||||
After the [guilabel]#New Project# wizard exits, it has done all the work for you: a UI class skeleton has been written to the [filename]#src# directory. | |||||
The project hierarchy shown in the Project Explorer is shown in <<figure.getting-started.first-project.exploring>>. | |||||
[[figure.getting-started.first-project.exploring]] | |||||
.A new Vaadin Project | |||||
image::img/myproject-created-annotated-hi.png[width=80%] | |||||
The Vaadin libraries and other dependencies are managed by Maven. | |||||
Notice that the libraries are not stored under the project folder, even though they are listed in the "Java Resources > Libraries > Maven Dependencies" virtual folder. | |||||
[[getting-started.first-project.exploring.ui]] | |||||
=== The UI Class | |||||
The UI class created by the plug-in contains the following code: | |||||
[source, java] | |||||
---- | |||||
package com.example.myproject; | |||||
import com.vaadin.ui.UI; | |||||
... | |||||
@Theme("mytheme") | |||||
@Widgetset("com.example.myproject.MyAppWidgetset") | |||||
public class MyUI extends UI { | |||||
@Override | |||||
protected void init(VaadinRequest vaadinRequest) { | |||||
final VerticalLayout layout = new VerticalLayout(); | |||||
final TextField name = new TextField(); | |||||
name.setCaption("Type your name here:"); | |||||
Button button = new Button("Click Me"); | |||||
button.addClickListener( e -> { | |||||
layout.addComponent(new Label("Thanks " + name.getValue() | |||||
+ ", it works!")); | |||||
}); | |||||
layout.addComponents(name, button); | |||||
layout.setMargin(true); | |||||
layout.setSpacing(true); | |||||
setContent(layout); | |||||
} | |||||
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) | |||||
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false) | |||||
public static class MyUIServlet extends VaadinServlet { | |||||
} | |||||
} | |||||
---- | |||||
[[getting-started.first-project.widgetset]] | |||||
== Compiling the Widget Set and Theme | |||||
Before running the project for the first time, select [guilabel]#Compile Widgetset and Theme# from the menu shown in <<figure.getting-started.first-project.compilewidgetset>>. | |||||
[[figure.getting-started.first-project.compilewidgetset]] | |||||
.Compile Widgetset and Theme Menu | |||||
image::img/myproject-compilewidgetset.png[width=50%] | |||||
[[getting-started.first-project.coding]] | [[getting-started.first-project.coding]] | ||||
== Coding Tips for Eclipse | == Coding Tips for Eclipse | ||||
[[figure.getting-started.first-project.coding.import]] | [[figure.getting-started.first-project.coding.import]] | ||||
.Importing Classes Automatically | .Importing Classes Automatically | ||||
image::img/codingtips-automaticimports.png[] | |||||
image::img/codingtips-automaticimports.png[scaledwidth=80%] | |||||
[[getting-started.first-project.server]] | [[getting-started.first-project.server]] | ||||
== Setting Up and Starting the Web Server | == Setting Up and Starting the Web Server | ||||
the configuration and deployment directories under the Tomcat installation | the configuration and deployment directories under the Tomcat installation | ||||
directory. | directory. | ||||
Follow the following steps. | |||||
Follow the following steps: | |||||
. Switch to the Servers tab in the lower panel in Eclipse. List of servers should be empty after Eclipse is installed. Right-click on the empty area in the panel and select "New > Server". + | |||||
. Switch to the Servers tab in the lower panel in Eclipse. List of servers should be empty after Eclipse is installed. Right-click on the empty area in the panel and select "New > Server". | |||||
+ | |||||
image::img/tomcat-startserver-1.png[] | image::img/tomcat-startserver-1.png[] | ||||
. Select "Apache > Tomcat v7.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#. + | |||||
. Select "Apache > Tomcat v7.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#. | |||||
+ | |||||
image::img/tomcat-startserver-2.png[] | image::img/tomcat-startserver-2.png[] | ||||
. Add your project to the server by selecting it on the left and clicking [guibutton]#Add# to add it to the configured projects on the right. Click [guibutton]#Finish#. + | |||||
. Add your project to the server by selecting it on the left and clicking [guibutton]#Add# to add it to the configured projects on the right. Click [guibutton]#Finish#. | |||||
+ | |||||
image::img/tomcat-startserver-3.png[] | image::img/tomcat-startserver-3.png[] | ||||
. The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab. To start the server, right-click on the server and select Debug. To start the server in non-debug mode, select Start. + | |||||
. The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab. | |||||
To start the server, right-click on the server and select [guilabel]#Debug#. | |||||
To start the server in non-debug mode, select [guilabel]#Start#. | |||||
+ | |||||
image::img/tomcat-startserver-4.png[] | image::img/tomcat-startserver-4.png[] | ||||
. The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/. + | |||||
. The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/. | |||||
+ | |||||
image::img/tomcat-startserver-5.png[] | image::img/tomcat-startserver-5.png[] | ||||
[[getting-started.first-project.run]] | [[getting-started.first-project.run]] | ||||
== Running and Debugging | == Running and Debugging | ||||
Eclipse then opens the application in built-in web browser. | Eclipse then opens the application in built-in web browser. | ||||
.Running a Vaadin Application | .Running a Vaadin Application | ||||
image::img/runningMyProject.png[] | |||||
image::img/runningMyProject.png[width=60%] | |||||
You can insert break points in the Java code by double-clicking on the left | You can insert break points in the Java code by double-clicking on the left | ||||
margin bar of the source code window. For example, if you insert a breakpoint in | margin bar of the source code window. For example, if you insert a breakpoint in | ||||
the [methodname]#buttonClick()# method and click the [guibutton]#What is the | the [methodname]#buttonClick()# method and click the [guibutton]#What is the | ||||
time?# button, Eclipse will ask to switch to the Debug perspective. Debug | time?# button, Eclipse will ask to switch to the Debug perspective. Debug | ||||
perspective will show where the execution stopped at the breakpoint. You can | perspective will show where the execution stopped at the breakpoint. You can | ||||
examine and change the state of the application. To continue execution, select | |||||
Resume from Run menu. | |||||
examine and change the state of the application. | |||||
To continue execution, select [guilabel]#Resume# from [guilabel]#Run# menu. | |||||
.Debugging a Vaadin Application | .Debugging a Vaadin Application | ||||
image::img/debuggingMyProject.png[] | image::img/debuggingMyProject.png[] | ||||
Above, we described how to debug a server-side application. Debugging | |||||
client-side applications and widgets is described in | |||||
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging | |||||
Client-Side Code">>. | |||||
Above, we described how to debug a server-side application. | |||||
Debugging client-side applications and widgets is described in | |||||
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging Client-Side Code">>. | |||||
[[getting-started.eclipse.mavenlibraryupdate]] | |||||
== Updating the Vaadin Libraries in Maven Projects | |||||
Updating the Vaadin plugin does not update Vaadin libraries. The libraries are | |||||
project specific, as a different version might be required for different | |||||
projects, so you have to update them separately for each project. | |||||
. Open the [filename]#pom.xml# in an editor in Eclipse. | |||||
. Edit the [propertyname]#vaadin.version# property to set the Vaadin version. | |||||
+ | |||||
Updating the libraries can take several minutes. You can see the progress in the | |||||
Eclipse status bar. You can get more details about the progress by clicking the | |||||
indicator. | |||||
. If you have compiled the widget set for your project, recompile it by clicking | |||||
the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar. | |||||
. Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by | |||||
right-clicking the server and selecting [guilabel]#Clean# as well as | |||||
[guilabel]#Clean Tomcat Work Directory#, and restart it. | |||||
If you experience problems after updating the libraries, you can try using | |||||
"Maven > Update Project". | |||||
[[getting-started.eclipse.libraryupdate]] | |||||
== Updating the Vaadin Libraries in Ivy Projects | |||||
Updating the Vaadin plugin does not update Vaadin libraries. | |||||
The libraries are project specific, as a different version might be required for different projects, so you have to update them separately for each project. | |||||
. Open the [filename]#ivy.xml# in an editor in Eclipse. | |||||
. Edit the entity definition at the beginning of the file to set the Vaadin | |||||
version. | |||||
+ | |||||
[subs="normal"] | |||||
---- | |||||
<!ENTITY vaadin.version "**7.x.x**"> | |||||
---- | |||||
+ | |||||
You can specify either a fixed version number, as shown in the above example, or | |||||
a dynamic revision tag such as [literal]#++latest.release++#. | |||||
You can find more information about the dependency declarations in Ivy documentation. | |||||
. Right-click the project and select "Ivy > Resolve". | |||||
+ | |||||
Updating the libraries can take several minutes. You can see the progress in the | |||||
Eclipse status bar. You can get more details about the progress by clicking the | |||||
indicator. | |||||
. If you have compiled the widget set for your project, recompile it by clicking | |||||
the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar. | |||||
. Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by | |||||
right-clicking the server and selecting Clean as well as Clean Tomcat Work | |||||
Directory, and restart it. | |||||
If you experience problems after updating the libraries, you can try clearing | |||||
the Ivy resolution caches by right-clicking the project and selecting "Ivy > | |||||
Clean all caches". | |||||
Then, do the "Ivy > Resolve" and other tasks again. |
--- | --- | ||||
title: Creating a Project with IntelliJ IDEA | |||||
order: 8 | |||||
title: Creating a Project in IntelliJ | |||||
order: 120 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
[[getting-started.idea]] | [[getting-started.idea]] | ||||
= Creating a Project with IntelliJ IDEA | = Creating a Project with IntelliJ IDEA | ||||
The Ultimate Edition of IntelliJ IDEA includes support for creating Vaadin | |||||
applications and running or debugging them in an integrated application server. | |||||
With the Community Edition, you can create a Vaadin application most easily with | |||||
a Maven archetype and deploy it to a server with a Maven run/debug | |||||
configuration. | |||||
The Ultimate Edition of IntelliJ IDEA includes support for creating Vaadin applications and running or debugging them in an integrated application server. | |||||
With the Community Edition, you can create a Vaadin application most easily with a Maven archetype and deploy it to a server with a Maven run/debug configuration. | |||||
ifdef::web[] | ifdef::web[] | ||||
For more information, see the article " | For more information, see the article " | ||||
Encyclopedia wiki. | Encyclopedia wiki. | ||||
endif::web[] | endif::web[] | ||||
[[getting-started.idea.server]] | |||||
== Configuring an Application Server | |||||
To run the application during development in the Ultimate Edition of IntelliJ | |||||
IDEA, you first need to install and configure an application server that is | |||||
integrated with the IDE. The edition includes integration with many commonly | |||||
used application servers. | |||||
In the following, we configure Apache Tomcat: | |||||
. Download and extract Tomcat installation package to a local directory, as | |||||
instructed in | |||||
<<dummy/../../../framework/getting-started/getting-started-environment#getting-started.environment.tomcat,"Installing | |||||
Apache Tomcat">>. | |||||
. Select "Configure > Settings". | |||||
. Select "IDE Settings > Application Servers". | |||||
. Select "+ > Tomcat Server" to add a Tomcat server, or any of the other supported | |||||
servers. A WebSocket-enabled server, such as Glassfish or TomEE, is required for | |||||
server push. | |||||
. In the Tomcat Server dialog, specify the home directory for the server. | |||||
+ | |||||
image::img/idea-server-1.png[] | |||||
+ | |||||
Click [guibutton]#OK#. | |||||
. Review the application server settings page to check that it is OK. | |||||
+ | |||||
image::img/idea-server-2.png[] | |||||
+ | |||||
Then, click [guibutton]#OK#. | |||||
[[getting-started.idea.project]] | [[getting-started.idea.project]] | ||||
== Creating a Vaadin Web Application Project | == Creating a Vaadin Web Application Project | ||||
In the welcome page, do the following: | In the welcome page, do the following: | ||||
. Download and exctract the Vaadin installation package to a local folder, as | |||||
instructed in | |||||
<<dummy/../../../framework/getting-started/getting-started-package#getting-started.package,"Vaadin | |||||
Installation Package">>. | |||||
. Download and extract the Vaadin installation package to a local folder, as | |||||
instructed in <<dummy/../../../framework/getting-started/getting-started-package#getting-started.package,"Vaadin Installation Package">>. | |||||
. Select [menuchoice]#New Project# | . Select [menuchoice]#New Project# | ||||
. In the [guilabel]#New Project# window, select [menuchoice]#Java# | . In the [guilabel]#New Project# window, select [menuchoice]#Java# | ||||
. Enter a [guilabel]#Project name# and [guilabel]#Project location#, and select | . Enter a [guilabel]#Project name# and [guilabel]#Project location#, and select | ||||
the [guilabel]#Java SDK# to be used for the project. Vaadin requires at least | |||||
Java 6. If you have not configured a Java SDK previously, you can configure it | |||||
here. | |||||
the [guilabel]#Java SDK# to be used for the project. | |||||
Vaadin requires at least Java 6. | |||||
If you have not configured a Java SDK previously, you can configure it here. | |||||
+ | + | ||||
image::img/idea-newproject-1.png[] | image::img/idea-newproject-1.png[] | ||||
+ | + | ||||
Click [guibutton]#Next#. | Click [guibutton]#Next#. | ||||
. Select Vaadin [guilabel]#Version# and [guilabel]#Distribution# installation | . Select Vaadin [guilabel]#Version# and [guilabel]#Distribution# installation | ||||
path. You probably also want an application stub, so select [guilabel]#Create | path. You probably also want an application stub, so select [guilabel]#Create | ||||
sample application# and give a name for the generated UI class. | sample application# and give a name for the generated UI class. | ||||
+ | + | ||||
image::img/idea-newproject-2.png[] | image::img/idea-newproject-2.png[] | ||||
+ | + | ||||
Do __not__ click [guibutton]#Finish# yet. | Do __not__ click [guibutton]#Finish# yet. | ||||
. Select [guilabel]#Application Server# in the same window. Set it as an | |||||
integrated server that you have configured in IntelliJ IDEA, as described | |||||
previously in <<getting-started.idea.server>>. | |||||
. Select [guilabel]#Application Server# in the same window. | |||||
Set it as an integrated server that you have configured in IntelliJ IDEA, as described previously in <<DUMMY/../../../framework/installing/installing-idea#installing.idea.ultimate.server, "Configuring an Application Server">>. | |||||
ifdef::web[] | ifdef::web[] | ||||
+ | + | ||||
. Click [guibutton]#Finish#. | . Click [guibutton]#Finish#. | ||||
The project is created with the UI class stub and a [filename]#web.xml# | The project is created with the UI class stub and a [filename]#web.xml# | ||||
deployment descriptor. | deployment descriptor. | ||||
'index.jsp'#. This starts the integrated server, if it was not already running, | 'index.jsp'#. This starts the integrated server, if it was not already running, | ||||
and launches the default browser with the application page. | and launches the default browser with the application page. | ||||
[[getting-started.idea.maven]] | [[getting-started.idea.maven]] | ||||
== Creating a Maven Project | == Creating a Maven Project | ||||
. Select [menuchoice]#New Project# | . Select [menuchoice]#New Project# | ||||
. In the [guilabel]#New Project# window, select [menuchoice]#Maven# | . In the [guilabel]#New Project# window, select [menuchoice]#Maven# | ||||
//<?dbfo-need height="8cm" ?> | //<?dbfo-need height="8cm" ?> | ||||
. Enter a project name, location, and the Java SDK to be used for the project. | |||||
Vaadin requires at least Java 6. Click [guibutton]#Next#. | |||||
. Enter a project name, location, and the Java SDK to be used for the project. | |||||
Vaadin requires at least Java 6. | |||||
+ | + | ||||
image::img/idea-maven-newproject-1.png[] | image::img/idea-maven-newproject-1.png[] | ||||
+ | |||||
Click [guibutton]#Next#. | |||||
//<?dbfo-need height="6cm" ?> | //<?dbfo-need height="6cm" ?> | ||||
. Give a Maven [guilabel]#GroupID#, [guilabel]#ArtifactID#, and a | . Give a Maven [guilabel]#GroupID#, [guilabel]#ArtifactID#, and a | ||||
[guilabel]#Version# for the project, or use the defaults. | [guilabel]#Version# for the project, or use the defaults. | ||||
image::img/idea-maven-newproject-2.png[] | image::img/idea-maven-newproject-2.png[] | ||||
. Check [guilabel]#Create from archetype# | . Check [guilabel]#Create from archetype# | ||||
//<?dbfo-need height="6cm" ?> | //<?dbfo-need height="6cm" ?> | ||||
. If the Vaadin archetype is not in the list, click [guibutton]#Add archetype#, | . If the Vaadin archetype is not in the list, click [guibutton]#Add archetype#, | ||||
enter [guilabel]#GroupId# [literal]#++com.vaadin++#, [guilabel]#ArtifactId# | enter [guilabel]#GroupId# [literal]#++com.vaadin++#, [guilabel]#ArtifactId# | ||||
[literal]#++vaadin-archetype-application++#, and [guilabel]#Version# | [literal]#++vaadin-archetype-application++#, and [guilabel]#Version# | ||||
+ | + | ||||
Click [guibutton]#OK# in the dialog. | Click [guibutton]#OK# in the dialog. | ||||
//<?dbfo-need height="8cm" ?> | //<?dbfo-need height="8cm" ?> | ||||
. Select the [literal]#++com.vaadin:vaadin-archetype-application++#. | . Select the [literal]#++com.vaadin:vaadin-archetype-application++#. | ||||
ifdef::web[] | ifdef::web[] | ||||
+ | + | ||||
Click [guibutton]#Next#. | Click [guibutton]#Next#. | ||||
//<?dbfo-need height="8cm" ?> | //<?dbfo-need height="8cm" ?> | ||||
. Review the general Maven settings and settings for the new project. You may need | |||||
to override the settings, especially if you are creating a Maven project for the | |||||
first time. Click [guibutton]#Finish#. | |||||
. Review the general Maven settings and settings for the new project. | |||||
You may need to override the settings, especially if you are creating a Maven project for the first time. | |||||
ifdef::web[] | ifdef::web[] | ||||
+ | + | ||||
image::img/idea-maven-newproject-5.png[] | image::img/idea-maven-newproject-5.png[] | ||||
endif::web[] | endif::web[] | ||||
+ | |||||
Click [guibutton]#Finish#. | |||||
Creating the Maven project takes some time as Maven fetches the dependencies. | Creating the Maven project takes some time as Maven fetches the dependencies. | ||||
Once done, the project is created and the Maven POM is opened in the editor. | Once done, the project is created and the Maven POM is opened in the editor. | ||||
. Select "Run > Edit Configurations". | . Select "Run > Edit Configurations". | ||||
. Select "+ > Maven" to create a new Maven run/debug configuration. | |||||
. Click [guibutton]#+# and select menu:Maven[] to create a new Maven run/debug configuration. | |||||
. Enter a [guilabel]#Name# for the run configuration. For the [guilabel]#Command | |||||
line#, enter " [literal]#++package jetty:run++# to first compile and package the | |||||
project, and then launch Jetty to run it. | |||||
. Enter a [guilabel]#Name# for the run configuration. | |||||
For the [guilabel]#Command line#, enter "`package jetty:run`# to first compile and package the project, and then launch Jetty to run it. | |||||
ifdef::web[] | ifdef::web[] | ||||
+ | + | ||||
widget set and theme. Once the run console pane informs that Jetty Server has | widget set and theme. Once the run console pane informs that Jetty Server has | ||||
been started, you can open the browser at the default URL | been started, you can open the browser at the default URL | ||||
http://localhost:8080/. | http://localhost:8080/. | ||||
--- | --- | ||||
title: Overview of Vaadin Libraries | |||||
order: 3 | |||||
title: Vaadin Libraries | |||||
order: 20 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
[[getting-started.libraries]] | [[getting-started.libraries]] | ||||
= Overview of Vaadin Libraries | |||||
= Vaadin Libraries | |||||
Vaadin comes as a set of library JARs, of which some are optional or alternative | Vaadin comes as a set of library JARs, of which some are optional or alternative | ||||
ones, depending on whether you are developing server-side or client-side | ones, depending on whether you are developing server-side or client-side | ||||
applications, whether you use add-on components, or use CSS or Sass themes. | applications, whether you use add-on components, or use CSS or Sass themes. | ||||
[filename]#vaadin-server-7.x.x.jar#:: The main library for developing server-side Vaadin applications, as described in | |||||
<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing | |||||
a Server-Side Web Application">>. It requires the [filename]#vaadin-shared# and | |||||
the [filename]#vaadin-themes# libraries. You can use the prebuilt | |||||
[filename]#vaadin-client-compiled# for server-side development, unless you need | |||||
add-on components or custom widgets. | |||||
[filename]#vaadin-shared-7.x.x.jar#:: A shared library for server-side and client-side development. It is always | |||||
needed. | |||||
[filename]#vaadin-client-7.x.x.jar#:: The client-side Vaadin framework, including the basic GWT API and | |||||
Vaadin-specific widgets and other additions. It is required when using the | |||||
[filename]#vaadin-client-compiler# to compile client-side modules. It is not | |||||
needed if you just use the server-side framework with the precompiled | |||||
Client-Side Engine. You should not deploy it with a web application. | |||||
[filename]#vaadin-client-compiler-7.x.x.jar#:: The Vaadin Client Compiler is a Java-to-JavaScript compiler that allows building | |||||
client-side modules, such as the Client-Side Engine (widget set) required for | |||||
server-side applications. The compiler is needed, for example, for compiling | |||||
add-on components to the application widget set, as described in | |||||
<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using | |||||
Vaadin Add-ons">>. | |||||
[filename]#vaadin-server-7.x.x.jar#:: | |||||
The main library for developing server-side Vaadin applications, as described in | |||||
<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing a Server-Side Web Application">>. | |||||
It requires the [filename]#vaadin-shared# and the [filename]#vaadin-themes# libraries. | |||||
You can use the pre-built [filename]#vaadin-client-compiled# for server-side development, unless you need add-on components or custom widgets. | |||||
[filename]#vaadin-shared-7.x.x.jar#:: | |||||
A shared library for server-side and client-side development. | |||||
It is always needed. | |||||
[filename]#vaadin-client-7.x.x.jar#:: | |||||
The client-side Vaadin framework, including the basic GWT API and Vaadin-specific widgets and other additions. | |||||
It is required when using the [filename]#vaadin-client-compiler# to compile client-side modules. | |||||
It is not needed if you just use the server-side framework with the pre-compiled Client-Side Engine. | |||||
You should not deploy it with a web application. | |||||
[filename]#vaadin-client-compiler-7.x.x.jar#:: | |||||
The Vaadin Client Compiler is a Java-to-JavaScript compiler that allows building client-side modules, such as the Client-Side Engine (widget set) required for server-side applications. | |||||
The compiler is needed, for example, for compiling add-on components to the application widget set, as described in <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using Vaadin Add-ons">>. | |||||
+ | + | ||||
//TODO There's a need for such | |||||
section. | |||||
//TODO There's a need for such section. | |||||
For detailed information regarding the compiler, see | For detailed information regarding the compiler, see | ||||
<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling | |||||
a Client-Side Module">>. Note that you should not deploy this library with a web | |||||
application. | |||||
[filename]#vaadin-client-compiled-7.x.x.jar#:: A precompiled Vaadin Client-Side Engine (widget set) that includes all the basic | |||||
built-in widgets in Vaadin. This library is not needed if you compile the | |||||
application widget set with the Vaadin Client Compiler. | |||||
[filename]#vaadin-themes-7.x.x.jar#:: Vaadin built-in themes both as SCSS source files and precompiled CSS files. The | |||||
library is required both for basic use with CSS themes and for compiling custom | |||||
Sass themes. | |||||
[filename]#vaadin-sass-compiler-1.x.x.jar#:: The Vaadin Sass Compiler compiles Sass themes to CSS, as described in | |||||
<<dummy/../../../framework/themes/themes-sass#themes.sass,"Syntactically Awesome | |||||
Stylesheets (Sass)">>. It requires the [filename]#vaadin-themes-7.x.x.jar# | |||||
library, which contains the Sass sources for the built-in themes. The library | |||||
needs to be included in deployment in development mode to allow on-the-fly | |||||
compilation of themes, but it is not needed in production deployment, when the | |||||
themes are compiled before deployment. | |||||
<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling a Client-Side Module">>. | |||||
Note that you should not deploy this library with a web application. | |||||
Some of the libraries depend on each other as well as on the dependency | |||||
libraries provided in the [filename]#lib# folder of the installation package, | |||||
especially the [filename]#lib/vaadin-shared-deps.jar#. | |||||
[filename]#vaadin-client-compiled-7.x.x.jar#:: | |||||
A pre-compiled Vaadin Client-Side Engine (widget set) that includes all the basic built-in widgets in Vaadin. | |||||
This library is not needed if you compile the application widget set with the Vaadin Client Compiler. | |||||
The different ways to install the libraries are described in the subsequent | |||||
sections. | |||||
[filename]#vaadin-themes-7.x.x.jar#:: | |||||
Vaadin built-in themes both as SCSS source files and precompiled CSS files. | |||||
The library is required both for basic use with CSS themes and for compiling custom Sass themes. | |||||
Note that the [filename]#vaadin-client-compiler# and [filename]#vaadin-client# | |||||
JARs should not be deployed with the web application by including them in | |||||
[filename]#WEB-INF/lib#. Some other libraries, such as | |||||
[filename]#vaadin-sass-compiler#, are not needed in production deployment. | |||||
[filename]#vaadin-sass-compiler-1.x.x.jar#:: | |||||
The Vaadin Sass Compiler compiles Sass themes to CSS, as described in <<dummy/../../../framework/themes/themes-sass#themes.sass,"Syntactically Awesome | |||||
Stylesheets (Sass)">>. | |||||
It requires the [filename]#vaadin-themes-7.x.x.jar# library, which contains the Sass sources for the built-in themes. | |||||
The library needs to be included in deployment in development mode to allow on-the-fly compilation of themes, but it is not needed in production deployment, when the themes are compiled before deployment. | |||||
Some of the libraries depend on each other as well as on the dependency libraries provided in the [filename]#lib# folder of the installation package, especially the [filename]#lib/vaadin-shared-deps.jar#. | |||||
The different ways to install the libraries are described in the subsequent sections. | |||||
Note that the [filename]#vaadin-client-compiler# and [filename]#vaadin-client# JARs should not be deployed with the web application by including them in [filename]#WEB-INF/lib#. | |||||
Some other libraries, such as [filename]#vaadin-sass-compiler#, are not needed in production deployment. |
--- | --- | ||||
title: Using Vaadin with Maven | |||||
order: 6 | |||||
title: Creating a Project with Maven | |||||
order: 200 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
[[getting-started.maven]] | [[getting-started.maven]] | ||||
= Using Vaadin with Maven | |||||
= Creating a Project with Maven | |||||
((("Maven", "creating a project", id="term.maven.creating", range="startofrange"))) | ((("Maven", "creating a project", id="term.maven.creating", range="startofrange"))) | ||||
Maven is a commonly used build and dependency management system. The Vaadin core | |||||
library and all Vaadin add-ons are available through Maven. You can use a Maven | |||||
with a front-end from Eclipse or NetBeans, or by using the command-line as | |||||
described in this section. | |||||
In previous sections, we looked into creating a Vaadin Maven project in different IDEs. | |||||
In this section, we look how to create such a project on command-line. | |||||
You can then import such a project to your IDE. | |||||
In addition to regular Maven, you can use any Maven-compatible build or | In addition to regular Maven, you can use any Maven-compatible build or | ||||
dependency management system, such as Ivy or Gradle. For Gradle, see the | dependency management system, such as Ivy or Gradle. For Gradle, see the | ||||
Vaadin Plugin for Eclipse uses Ivy for resolving dependencies in Vaadin | Vaadin Plugin for Eclipse uses Ivy for resolving dependencies in Vaadin | ||||
projects, and it should provide you with the basic Ivy configuration. | projects, and it should provide you with the basic Ivy configuration. | ||||
For an interactive guide, see the instructions at link:https://vaadin.com/maven[vaadin.com/maven]. | |||||
It automatically generates you the command to create a new project based on archetype selection. | |||||
It can also generate dependency declarations for Vaadin dependencies. | |||||
[[getting-started.maven.command-line]] | [[getting-started.maven.command-line]] | ||||
== Working from Command-Line | == Working from Command-Line | ||||
---- | ---- | ||||
[prompt]#$# [command]#mvn# archetype:generate \ | [prompt]#$# [command]#mvn# archetype:generate \ | ||||
-DarchetypeGroupId=com.vaadin \ | -DarchetypeGroupId=com.vaadin \ | ||||
-DarchetypeArtifactId=[parameter]#vaadin-archetype-application# \ | |||||
-DarchetypeArtifactId=[replaceable]#vaadin-archetype-application# \ | |||||
-DarchetypeVersion=[replaceable]#7.x.x# \ | -DarchetypeVersion=[replaceable]#7.x.x# \ | ||||
-DgroupId=[replaceable]#your.company# \ | -DgroupId=[replaceable]#your.company# \ | ||||
-DartifactId=[replaceable]#project-name# \ | -DartifactId=[replaceable]#project-name# \ | ||||
[parameter]#archetypeGroupId#:: The group ID of the archetype is [literal]#++com.vaadin++# for Vaadin | [parameter]#archetypeGroupId#:: The group ID of the archetype is [literal]#++com.vaadin++# for Vaadin | ||||
archetypes. | archetypes. | ||||
[parameter]#archetypeArtifactId#:: The archetype ID. Vaadin 7 currently supports | |||||
[literal]#++vaadin-archetype-application++# archetype for server-side | |||||
applications and [literal]#++vaadin-archetype-widget++# for client-side widget | |||||
development projects. | |||||
+ | |||||
//TODO Vaadin 7: Not all these archetypes are supported | |||||
+ | |||||
//// | |||||
<itemizedlist> <listitem> <literal>vaadin-archetype-clean</literal> is a new project with a barebone skeleton for a regular Vaadin application. The <filename>pom.xml</filename> includes out-commented definitions for additional widgets. </listitem> </itemizedlist> <itemizedlist> <listitem> <literal>vaadin-archetype-widget</literal> is a skeleton for a project with custom widgets. </listitem> </itemizedlist> <itemizedlist> <listitem> <literal>vaadin-archetype-sample</literal> is also for a project with custom widgets, but the skeleton includes the Color Picker example used in <xref linkend="gwt"/>. </listitem> </itemizedlist> <itemizedlist> <listitem> <literal>vaadin-archetype-addon</literal> is for Vaadin add-on projects. It packages the add-on so that it can be published in Vaadin Directory. The archetype is for server-side add-ons and does not include definitions needed for building a widget set. If your add-on includes or requires other than the widgets in the Vaadin core library, you need to copy the required definitions from a POM of a <literal>vaadin-archetype-clean</literal> project. </listitem> </itemizedlist> <itemizedlist> <listitem> <literal>vaadin-archetype-touchkit</literal> is for projects using Vaadin TouchKit, described in <xref linkend="mobile"/>. Notice that this archetype uses the AGPL-licensed version of TouchKit, which requires that your project must also be licensed under the AGPL license. </listitem> </itemizedlist> | |||||
//// | |||||
[parameter]#archetypeVersion#:: Version of the archetype to use. This should be [literal]#++LATEST++# for normal | |||||
Vaadin releases. For prerelease versions it should be the exact version number, | |||||
such as [literal]#++7.5.3++#. | |||||
[parameter]#archetypeArtifactId#:: The archetype ID. | |||||
See the list of available archetypes in <<dummy/../../../framework/getting-started-archetypes#getting-started.archetypes,"Overview of Maven Archetypes">>. | |||||
[parameter]#archetypeVersion#:: | |||||
Version of the archetype to use. | |||||
This should be [literal]#++LATEST++# for normal Vaadin releases. | |||||
For prerelease versions it should be the exact version number, such as [literal]#++7.6.4++#. | |||||
[parameter]#groupId#:: A Maven group ID for your project. It is normally your organization domain name | [parameter]#groupId#:: A Maven group ID for your project. It is normally your organization domain name | ||||
in reverse order, such as com.example. The group ID is also used as a prefix for | in reverse order, such as com.example. The group ID is also used as a prefix for | ||||
[[figure.getting-started.maven.archetype.created]] | [[figure.getting-started.maven.archetype.created]] | ||||
.A New Vaadin Project with Maven | .A New Vaadin Project with Maven | ||||
image::img/maven-project-created.png[] | |||||
image::img/maven-project-created.png[scaledwidth=60%] | |||||
[[getting-started.maven.compiling]] | [[getting-started.maven.compiling]] | ||||
(((range="endofrange", startref="term.maven.addons"))) | (((range="endofrange", startref="term.maven.addons"))) | ||||
(((range="endofrange", startref="term.maven.creating"))) | (((range="endofrange", startref="term.maven.creating"))) | ||||
--- | --- | ||||
title: Creating a Project with NetBeans IDE | |||||
order: 7 | |||||
title: Creating a Project in NetBeans | |||||
order: 110 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
[[getting-started.netbeans]] | [[getting-started.netbeans]] | ||||
= Creating a Project with NetBeans IDE | |||||
= Creating a Project with the NetBeans IDE | |||||
The easiest way to develop Vaadin application with the NetBeans IDE is to use | |||||
the Vaadin Plugin for NetBeans. It allows you to create new Vaadin projects | |||||
easily and provides many features for working on a project. You can download the | |||||
plugin at http://plugins.netbeans.org/plugin/50531/vaadin-plug-in-for-netbeans. | |||||
The download page contains a link to a plugin features overview in NetBeans | |||||
Wiki. | |||||
In the following, we walk you through the creation of a Vaadin project in NetBeans and show how to run it. | |||||
Installation of NetBeans and the Vaadin plugin is covered in <<DUMMY/../../../framework/installing/installing-netbeans#installing.netbeans, "Installing the NetBeans IDE and Plugin">>. | |||||
Without the plugin, you can most easily create a Vaadin project as a Maven | Without the plugin, you can most easily create a Vaadin project as a Maven | ||||
project using a Vaadin archetype. You can also create a Vaadin project as a | project using a Vaadin archetype. You can also create a Vaadin project as a | ||||
all the Vaadin libraries, create the UI class, configure the servlet, create | all the Vaadin libraries, create the UI class, configure the servlet, create | ||||
theme, and so on. | theme, and so on. | ||||
[[getting-started.netbeans.maven]] | |||||
== Maven Project from a Vaadin Archetype | |||||
[[getting-started.netbeans.creating]] | |||||
== Creating a Project | |||||
Creating a Maven project with a Vaadin archetype creates an application skeleton | |||||
with a UI class and project theme, defines the [filename]#web.xml# deployment | |||||
descriptor, and also retrieves the latest Vaadin library automatically. | |||||
. Select "File > Net Project..." from the main menu or press kbd:[Ctrl+Shift+N]. | |||||
. Select "File > New Project". | |||||
. In the [guilabel]#New Project# window that opens, select the [guilabel]#Vaadin# category and one of the Vaadin archetypes from the right. | |||||
+ | |||||
image::img/netbeans-newproject-1.png[] | |||||
+ | |||||
The archetypes are described in more detail in <<getting-started-archetypes#getting-started.archetypes, "Overview of Maven Archetypes">>. | |||||
. Select "Maven > Project from Archetype" and click [guibutton]#Next#. | |||||
. In the [guilabel]#Name and Location# step, enter the project parameters. | |||||
+ | |||||
image::img/netbeans-newproject-2.png[] | |||||
. Find [literal]#++vaadin-archetype-application++#, select it, and click | |||||
[guilabel]#Next#. | |||||
[guilabel]#Project Name#:: A project name. | |||||
The name must be a valid identifier that may only contains alphanumerics, minus, and underscore. | |||||
It is appended to the group ID to obtain the Java package name for the sources. | |||||
. In the [guilabel]#Name and Location# step, enter [guilabel]#Project Name#, which | |||||
is recommended to be only lower-case alphabetics, as it is used also as a | |||||
suggestion for the Java package name of the project. Modify the other parameters | |||||
for your project and click [guibutton]#Finish#. | |||||
[guilabel]#Project Location#:: | |||||
Path to the folder where the project is to be created. | |||||
+ | |||||
[[figure.getting-started.netbeans.maven.new-project]] | |||||
.Adding a New Maven Project in NetBeans | |||||
image::img/netbeans-maven-newproject-name.png[] | |||||
[guilabel]#Group Id#:: A Maven group ID for your project. | |||||
It is normally your organization domain name in reverse order, such as `com.example`. | |||||
The group ID is also used as a prefix for the Java source package, so it should be Java-compatible package name. | |||||
[guilabel]#Version#:: Initial version of your application. | |||||
The number must obey the Maven version numbering format. | |||||
[guilabel]#Package#:: The Java package name to put sources in. | |||||
[guilabel]#Additional Creation Properties#:: | |||||
The properties control various names. | |||||
They are specific to the archetype you chose. | |||||
+ | |||||
Click [guibutton]#Finish#. | |||||
Creating the project can take a while as Maven loads all the needed | Creating the project can take a while as Maven loads all the needed | ||||
dependencies. Once created, you can run it by right-clicking on the project in | |||||
the [guilabel]#Projects# view and selecting [guilabel]#Run#. In the | |||||
[guilabel]#Select deployment server# window that opens, select | |||||
[guilabel]#Glassfish# or [guilabel]#Apache Tomcat#, and click [guibutton]#OK#. | |||||
dependencies. | |||||
[[getting-started.netbeans.exploring]] | |||||
== Exploring the Project | |||||
The project wizard has done all the work for you: a UI class skeleton has been written to the [filename]#src# directory. | |||||
The project hierarchy shown in the Project Explorer is shown in <<figure.getting-started.netbeans.exploring>>. | |||||
[[figure.getting-started.netbeans.exploring]] | |||||
.A new Vaadin project in NetBeans | |||||
image::img/netbeans-created-annotated-hi.png[width=80%] | |||||
[filename]#mytheme#:: | |||||
The theme of the UI. | |||||
See <<DUMMY/../../../framework/themes/themes-overview#themes.overview, "Themes">> for information about themes. | |||||
[filename]#MyUI.java#:: | |||||
The UI class, which is the main entry-point of your application. | |||||
See <<DUMMY/../../../framework/application/application-overview#application.overview, "Server-Side Applications">> for information about the basic structure of Vaadin applications. | |||||
The Vaadin libraries and other dependencies are managed by Maven. | |||||
Notice that the libraries are not stored under the project folder, even though they are listed in the "Java Resources > Libraries > Maven Dependencies" virtual folder. | |||||
[[getting-started.netbeans.running]] | |||||
== Running the Application | |||||
Once created, you can run it in a server as follows. | |||||
. In [guilabel]#Projects# tab, select the project and click in the [guilabel]#Run Project# button in the tool bar (or press kbd:[F6]). | |||||
. In the [guilabel]#Select deployment server# window, select a server from the [guilabel]#Server# list. | |||||
It should show either GlassFish or Apache Tomcat or both, depending on what you chose in NetBeans installation. | |||||
+ | |||||
image::img/netbeans-server.png[width=75%] | |||||
+ | |||||
Also, select [guilabel]#Remember Permanently# if you want to use the same server also in future while developing applications. | |||||
+ | |||||
Click [guibutton]#OK#. | |||||
+ | |||||
The widget set will be compiled at this point, which may take a while. | |||||
If all goes well, NetBeans starts the server in port 8080 and, depending on your | If all goes well, NetBeans starts the server in port 8080 and, depending on your | ||||
system configuration, launches the default browser to display the web | system configuration, launches the default browser to display the web | ||||
application. If not, you can open it manually, for example, at | application. If not, you can open it manually, for example, at | ||||
http://localhost:8080/myproject. The project name is used by default as the | http://localhost:8080/myproject. The project name is used by default as the | ||||
context path of the application. | context path of the application. | ||||
Now when you edit the UI class in the source editor and save it, NetBeans will automatically redeploy the application. After it has finished after a few seconds, you can reload the application in the browser. |
--- | |||||
title: Overview | |||||
order: 1 | |||||
layout: page | |||||
--- | |||||
[[getting-started.overview]] | |||||
= Overview | |||||
Once you have installed a development environment, as described in the previous chapter, creating a Vaadin project proceeds in the IDE that you have chosen. | |||||
The Vaadin core library and all Vaadin add-ons are available through Maven, a commonly used build and dependency management system. | |||||
The recommended way to create a Vaadin application project is to use a Maven archetype. | |||||
The archetypes contain all the needed dependencies, which Maven takes care of. | |||||
The Eclipse IDE plugin currently also supports creating a normal Eclipse web project using the Ivy dependency manager. | |||||
In this chapter, we give: | |||||
. An overview of the Vaadin libraries | |||||
. List the available Maven archetypes | |||||
. Step-by-step instructions for creating a project in the Eclipse IDE, NetBeans IDE, and IntelliJ IDEA, as well as with command-line. |
--- | --- | ||||
title: Vaadin Installation Package | title: Vaadin Installation Package | ||||
order: 9 | |||||
order: 900 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
[[getting-started.package]] | [[getting-started.package]] | ||||
= Vaadin Installation Package | = Vaadin Installation Package | ||||
While the recommended way to install Vaadin is to use the Eclipse plugin, one of | |||||
the other IDE plugins, or a dependency management system, such as Maven, Vaadin | |||||
is also available as a ZIP distribution package. | |||||
While the recommended way to create a Vaadin project and install the libraries is to use an IDE plugin or a dependency management system, such as Maven, Vaadin is also available as a ZIP distribution package. | |||||
You can download the newest Vaadin installation package from the download page | You can download the newest Vaadin installation package from the download page | ||||
at http://vaadin.com/download/. Please use a ZIP decompression utility available | at http://vaadin.com/download/. Please use a ZIP decompression utility available | ||||
[[getting-started.package.contents]] | [[getting-started.package.contents]] | ||||
== Package Contents | == Package Contents | ||||
[filename]#README.TXT#:: This Readme file gives simple instructions for installing Vaadin in your | |||||
project. | |||||
[filename]#README.TXT#:: This README file gives simple instructions for installing Vaadin in your project. | |||||
[filename]#release-notes.html#:: The Release Notes contain information about the new features in the particular | |||||
release, give upgrade instructions, describe compatibility, etc. Please open the | |||||
HTML file with a web browser. | |||||
[filename]#release-notes.html#:: The Release Notes contain information about the new features in the particular release, give upgrade instructions, describe compatibility, etc. | |||||
Please open the HTML file with a web browser. | |||||
[filename]#license.html#:: Apache License version 2.0. Please open the HTML file with a web browser. | |||||
[filename]#lib#folder:: All dependency libraries required by Vaadin are contained within the | |||||
[filename]#lib# folder. | |||||
[filename]#*.jar#:: Vaadin libraries, as described in | |||||
<<dummy/../../../framework/getting-started/getting-started-libraries#getting-started.libraries,"Overview | |||||
of Vaadin Libraries">>. | |||||
[filename]#license.html#:: Apache License version 2.0. | |||||
Please open the HTML file with a web browser. | |||||
[filename]#lib# folder:: All dependency libraries required by Vaadin are contained within the [filename]#lib# folder. | |||||
[filename]#*.jar#:: Vaadin libraries, as described in <<getting-started-libraries#getting-started.libraries,"Overview of Vaadin Libraries">>. | |||||
[[getting-started.package.install]] | [[getting-started.package.install]] | ||||
* In Eclipse Dynamic Web Application projects: [filename]#WebContent/WEB-INF/lib#. | * In Eclipse Dynamic Web Application projects: [filename]#WebContent/WEB-INF/lib#. | ||||
* In Maven projects: [filename]#src/main/webapp/WEB-INF/lib#. | * In Maven projects: [filename]#src/main/webapp/WEB-INF/lib#. | ||||
--- | --- | ||||
title: Using Vaadin with Scala | title: Using Vaadin with Scala | ||||
order: 10 | |||||
order: 1000 | |||||
layout: page | layout: page | ||||
--- | --- | ||||
IMAGES = myproject-created-annotated netbeans-created-annotated | |||||
SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg) | |||||
TRGIMAGES_HI := $(foreach file, $(IMAGES), ../img/$(file)-hi.png) | |||||
TRGIMAGES_LO := $(foreach file, $(IMAGES), ../img/$(file)-lo.png) | |||||
images: $(TRGIMAGES_HI) FORCE | |||||
# Just do low now $(TRGIMAGES_LO) | |||||
$(TRGIMAGES_HI): ../img/%-hi.png: %.svg | |||||
inkscape --export-png $@ --export-dpi=150 --export-area-drawing $< | |||||
FORCE: |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |||||
<!-- Created with Inkscape (http://www.inkscape.org/) --> | |||||
<svg | |||||
xmlns:dc="http://purl.org/dc/elements/1.1/" | |||||
xmlns:cc="http://creativecommons.org/ns#" | |||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |||||
xmlns:svg="http://www.w3.org/2000/svg" | |||||
xmlns="http://www.w3.org/2000/svg" | |||||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
width="1052.3622" | |||||
height="744.09448" | |||||
id="svg1901" | |||||
sodipodi:version="0.32" | |||||
inkscape:version="0.48.4 r9939" | |||||
sodipodi:docname="myproject-created-annotated.svg" | |||||
version="1.1"> | |||||
<defs | |||||
id="defs1903"> | |||||
<marker | |||||
id="marker18095" | |||||
orient="auto" | |||||
markerHeight="5.7450776" | |||||
markerWidth="4.6297302"> | |||||
<g | |||||
id="g11064" | |||||
transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="csccccccsccssssssssssssssccc" | |||||
id="path11050" | |||||
d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z" | |||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="cccscccsssssssscccsccc" | |||||
id="path11035" | |||||
d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0" | |||||
style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
</g> | |||||
</marker> | |||||
<marker | |||||
id="marker18095-5" | |||||
orient="auto" | |||||
markerHeight="5.7450776" | |||||
markerWidth="4.6297302"> | |||||
<g | |||||
id="g11064-9" | |||||
transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="csccccccsccssssssssssssssccc" | |||||
id="path11050-2" | |||||
d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z" | |||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="cccscccsssssssscccsccc" | |||||
id="path11035-6" | |||||
d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0" | |||||
style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
</g> | |||||
</marker> | |||||
</defs> | |||||
<sodipodi:namedview | |||||
id="base" | |||||
pagecolor="#ffffff" | |||||
bordercolor="#666666" | |||||
borderopacity="1.0" | |||||
inkscape:pageopacity="0.0" | |||||
inkscape:pageshadow="2" | |||||
inkscape:zoom="1.4" | |||||
inkscape:cx="191.07987" | |||||
inkscape:cy="356.49384" | |||||
inkscape:document-units="px" | |||||
inkscape:current-layer="layer1" | |||||
inkscape:window-width="1920" | |||||
inkscape:window-height="1060" | |||||
inkscape:window-x="-2" | |||||
inkscape:window-y="-3" | |||||
showgrid="true" | |||||
inkscape:window-maximized="1" | |||||
inkscape:snap-center="true" | |||||
inkscape:snap-grids="true" | |||||
inkscape:snap-bbox="true" | |||||
inkscape:object-paths="true" | |||||
inkscape:object-nodes="true" | |||||
inkscape:snap-object-midpoints="true" | |||||
showguides="true" | |||||
inkscape:guide-bbox="true"> | |||||
<inkscape:grid | |||||
type="xygrid" | |||||
id="grid2982" | |||||
empspacing="5" | |||||
visible="true" | |||||
enabled="true" | |||||
snapvisiblegridlinesonly="true" | |||||
spacingx="5px" | |||||
spacingy="5px" /> | |||||
<sodipodi:guide | |||||
orientation="1,0" | |||||
position="385,100" | |||||
id="guide11876" /> | |||||
</sodipodi:namedview> | |||||
<metadata | |||||
id="metadata1906"> | |||||
<rdf:RDF> | |||||
<cc:Work | |||||
rdf:about=""> | |||||
<dc:format>image/svg+xml</dc:format> | |||||
<dc:type | |||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |||||
<dc:title /> | |||||
</cc:Work> | |||||
</rdf:RDF> | |||||
</metadata> | |||||
<g | |||||
inkscape:label="Taso 1" | |||||
inkscape:groupmode="layer" | |||||
id="layer1" | |||||
transform="translate(0,-308.2677)"> | |||||
<rect | |||||
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="rect29725" | |||||
width="480" | |||||
height="455" | |||||
x="95" | |||||
y="164.09448" | |||||
transform="translate(0,308.2677)" | |||||
ry="3.7880721" /> | |||||
<image | |||||
y="475.67679" | |||||
x="97.162643" | |||||
id="image3215" | |||||
xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/myproject-created.png" | |||||
height="453.37076" | |||||
width="305.67471" /> | |||||
<g | |||||
transform="translate(204.99999,-146.51524)" | |||||
id="g3822-4"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 50,419.09448 125,0" | |||||
id="path3804-2" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" /> | |||||
</g> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="385" | |||||
y="584.474" | |||||
id="text13161" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163" | |||||
x="385" | |||||
y="584.474">The UI class skeleton</tspan></text> | |||||
<g | |||||
transform="translate(204.99999,-66.969547)" | |||||
id="g3822-4-7"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 150.00001,419.09448 24.99999,0" | |||||
id="path3804-2-1" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-1" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,136.36255,498.74687)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-4" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" /> | |||||
</g> | |||||
<g | |||||
transform="translate(270,77.857138)" | |||||
id="g3822-4-8"> | |||||
<path | |||||
sodipodi:nodetypes="cccc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 25,762.36218 10,-5 0,-20 10,-10" | |||||
id="path3804-2-3-46-9" | |||||
inkscape:connector-curvature="0" /> | |||||
<path | |||||
sodipodi:nodetypes="cccc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 25,692.36218 10,5 0,20 10,10" | |||||
id="path3804-2-3-46" | |||||
inkscape:connector-curvature="0" /> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 45,419.09448 60,1e-5" | |||||
id="path3804-2-3" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-8" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-2" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" /> | |||||
</g> | |||||
<g | |||||
transform="translate(270,169.99999)" | |||||
id="g3822-4-8-5"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m -70,419.09449 175,0" | |||||
id="path3804-2-3-4" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-8-2" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-2-3" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" /> | |||||
</g> | |||||
<g | |||||
transform="translate(270,187.3214)" | |||||
id="g3822-4-8-5-4"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m -45,419.09448 150,1e-5" | |||||
id="path3804-2-3-4-5" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-8-2-3" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-2-3-8" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" /> | |||||
</g> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="385" | |||||
y="664.25208" | |||||
id="text13161-0" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0" | |||||
x="385" | |||||
y="664.25208">The widget set</tspan></text> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="385" | |||||
y="808.74548" | |||||
id="text13161-0-4" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0-8" | |||||
x="385" | |||||
y="808.74548">The theme</tspan></text> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="385" | |||||
y="901.34863" | |||||
id="text13161-0-4-1" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0-8-3" | |||||
x="385" | |||||
y="901.34863">Maven project configuration</tspan></text> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="385" | |||||
y="918.85156" | |||||
id="text13161-0-4-4" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0-8-2" | |||||
x="385" | |||||
y="918.85156">Project README skeleton</tspan></text> | |||||
</g> | |||||
</svg> |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |||||
<!-- Created with Inkscape (http://www.inkscape.org/) --> | |||||
<svg | |||||
xmlns:dc="http://purl.org/dc/elements/1.1/" | |||||
xmlns:cc="http://creativecommons.org/ns#" | |||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |||||
xmlns:svg="http://www.w3.org/2000/svg" | |||||
xmlns="http://www.w3.org/2000/svg" | |||||
xmlns:xlink="http://www.w3.org/1999/xlink" | |||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
width="1052.3622" | |||||
height="744.09448" | |||||
id="svg1901" | |||||
sodipodi:version="0.32" | |||||
inkscape:version="0.48.4 r9939" | |||||
sodipodi:docname="netbeans-created-annotated.svg" | |||||
version="1.1"> | |||||
<defs | |||||
id="defs1903"> | |||||
<marker | |||||
id="marker18095" | |||||
orient="auto" | |||||
markerHeight="5.7450776" | |||||
markerWidth="4.6297302"> | |||||
<g | |||||
id="g11064" | |||||
transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="csccccccsccssssssssssssssccc" | |||||
id="path11050" | |||||
d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z" | |||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="cccscccsssssssscccsccc" | |||||
id="path11035" | |||||
d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0" | |||||
style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
</g> | |||||
</marker> | |||||
<marker | |||||
id="marker18095-5" | |||||
orient="auto" | |||||
markerHeight="5.7450776" | |||||
markerWidth="4.6297302"> | |||||
<g | |||||
id="g11064-9" | |||||
transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="csccccccsccssssssssssssssccc" | |||||
id="path11050-2" | |||||
d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z" | |||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
sodipodi:nodetypes="cccscccsssssssscccsccc" | |||||
id="path11035-6" | |||||
d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0" | |||||
style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none" /> | |||||
</g> | |||||
</marker> | |||||
<mask | |||||
maskUnits="userSpaceOnUse" | |||||
id="mask3028"> | |||||
<rect | |||||
style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.13524589;stroke-dasharray:2, 2;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="rect3030" | |||||
width="425" | |||||
height="525" | |||||
x="-25" | |||||
y="477.36218" /> | |||||
</mask> | |||||
</defs> | |||||
<sodipodi:namedview | |||||
id="base" | |||||
pagecolor="#ffffff" | |||||
bordercolor="#666666" | |||||
borderopacity="1.0" | |||||
inkscape:pageopacity="0.0" | |||||
inkscape:pageshadow="2" | |||||
inkscape:zoom="1.4" | |||||
inkscape:cx="325.14306" | |||||
inkscape:cy="308.11666" | |||||
inkscape:document-units="px" | |||||
inkscape:current-layer="layer1" | |||||
inkscape:window-width="1920" | |||||
inkscape:window-height="1060" | |||||
inkscape:window-x="-2" | |||||
inkscape:window-y="-3" | |||||
showgrid="true" | |||||
inkscape:window-maximized="1" | |||||
inkscape:snap-center="true" | |||||
inkscape:snap-grids="true" | |||||
inkscape:snap-bbox="true" | |||||
inkscape:object-paths="true" | |||||
inkscape:object-nodes="true" | |||||
inkscape:snap-object-midpoints="true" | |||||
showguides="true" | |||||
inkscape:guide-bbox="true"> | |||||
<inkscape:grid | |||||
type="xygrid" | |||||
id="grid2982" | |||||
empspacing="5" | |||||
visible="true" | |||||
enabled="true" | |||||
snapvisiblegridlinesonly="true" | |||||
spacingx="5px" | |||||
spacingy="5px" /> | |||||
<sodipodi:guide | |||||
orientation="1,0" | |||||
position="355,465" | |||||
id="guide11876" /> | |||||
</sodipodi:namedview> | |||||
<metadata | |||||
id="metadata1906"> | |||||
<rdf:RDF> | |||||
<cc:Work | |||||
rdf:about=""> | |||||
<dc:format>image/svg+xml</dc:format> | |||||
<dc:type | |||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |||||
<dc:title /> | |||||
</cc:Work> | |||||
</rdf:RDF> | |||||
</metadata> | |||||
<g | |||||
inkscape:label="Taso 1" | |||||
inkscape:groupmode="layer" | |||||
id="layer1" | |||||
transform="translate(0,-308.2677)"> | |||||
<image | |||||
y="489.01947" | |||||
x="-12.462494" | |||||
id="image3215" | |||||
xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/netbeans-newproject-created.png" | |||||
width="587.46252" | |||||
height="487.08057" | |||||
mask="url(#mask3028)" /> | |||||
<g | |||||
transform="translate(164.99999,24.999997)" | |||||
id="g3822-4"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="M 20.00001,419.09449 175,419.09448" | |||||
id="path3804-2" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" /> | |||||
</g> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="354.74399" | |||||
y="756.59644" | |||||
id="text13161" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163" | |||||
x="354.74399" | |||||
y="756.59644">The UI class skeleton</tspan></text> | |||||
<g | |||||
transform="translate(159.99999,107.5254)" | |||||
id="g3822-4-7"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 145.00001,419.09448 29.99999,0" | |||||
id="path3804-2-1" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-1" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,131.36255,498.74687)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-4" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,161.36255,498.74687)" /> | |||||
</g> | |||||
<g | |||||
transform="translate(235,-75.000003)" | |||||
id="g3822-4-8"> | |||||
<path | |||||
sodipodi:nodetypes="cccc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 25,777.36219 10,-10 0,-30.00001 10,-10" | |||||
id="path3804-2-3-46-9" | |||||
inkscape:connector-curvature="0" /> | |||||
<path | |||||
sodipodi:nodetypes="cccc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 25,677.36219 10,10 0,29.99999 10,10" | |||||
id="path3804-2-3-46" | |||||
inkscape:connector-curvature="0" /> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m 45,419.09448 55,1e-5" | |||||
id="path3804-2-3" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-8" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-2" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)" /> | |||||
</g> | |||||
<g | |||||
transform="translate(230,170)" | |||||
id="g3822-4-8-5"> | |||||
<path | |||||
sodipodi:nodetypes="cc" | |||||
style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | |||||
d="m -70,419.09449 175,0" | |||||
id="path3804-2-3-4" | |||||
inkscape:connector-curvature="0" | |||||
transform="translate(0,308.2677)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-8-2" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" /> | |||||
<path | |||||
sodipodi:type="arc" | |||||
style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" | |||||
id="path3005-2-10-5-2-3" | |||||
sodipodi:cx="25" | |||||
sodipodi:cy="419.09448" | |||||
sodipodi:rx="9.1659365" | |||||
sodipodi:ry="9.1659365" | |||||
d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" | |||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" /> | |||||
</g> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="354.74399" | |||||
y="839.23932" | |||||
id="text13161-0" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0" | |||||
x="354.74399" | |||||
y="839.23932">The widget set definition</tspan></text> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="354.74399" | |||||
y="656.86194" | |||||
id="text13161-0-4" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0-8" | |||||
x="354.74399" | |||||
y="656.86194">The theme</tspan></text> | |||||
<text | |||||
xml:space="preserve" | |||||
style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" | |||||
x="353.75201" | |||||
y="901.60632" | |||||
id="text13161-0-4-1" | |||||
sodipodi:linespacing="125%"><tspan | |||||
sodipodi:role="line" | |||||
id="tspan13163-0-8-3" | |||||
x="353.75201" | |||||
y="901.60632">Maven project configuration</tspan></text> | |||||
</g> | |||||
</svg> |
} | } | ||||
---- | ---- | ||||
The above example defines a single [methodname]#clicks()# RPC call, which takes | |||||
a [classname]#MouseEventDetails# object as the parameter. | |||||
The above example defines a single [methodname]#clicked()# RPC call, which takes | |||||
a [classname]#String# object as the parameter. | |||||
You can pass the most common standard Java types, such as primitive and boxed | You can pass the most common standard Java types, such as primitive and boxed | ||||
primitive types, [classname]#String#, and arrays and some collections ( | primitive types, [classname]#String#, and arrays and some collections ( |
[[gwt.shared-state.connector]] | [[gwt.shared-state.connector]] | ||||
== Handing Shared State in a Connector | |||||
== Handling Shared State in a Connector | |||||
A connector can access a shared state with the [methodname]#getState()# method. | A connector can access a shared state with the [methodname]#getState()# method. | ||||
The access should be read-only. It is required that you override the base | The access should be read-only. It is required that you override the base |
[[installing]] | |||||
== Installing the Development Toolchain | |||||
This chapter gives practical instructions for installing the development tools. | |||||
include::installing-overview.adoc[leveloffset=+2] | |||||
include::installing-toolchain.adoc[leveloffset=+2] | |||||
include::installing-java.adoc[leveloffset=+2] | |||||
include::installing-server.adoc[leveloffset=+2] | |||||
include::installing-eclipse.adoc[leveloffset=+2] | |||||
include::installing-netbeans.asciidoc[leveloffset=+2] | |||||
include::installing-idea.asciidoc[leveloffset=+2] | |||||
include::installing-other.adoc[leveloffset=+2] |