From bc87c6c1cb0790a78dd607259a2b901f6c879254 Mon Sep 17 00:00:00 2001 From: Marko Gronroos Date: Thu, 21 Jul 2016 15:31:21 +0300 Subject: Updated StreamResource example and screenshot, as well as various diagrams. #19897 Uses slider example png/svg from the vaadin8 branch Change-Id: I8a52ca754262a32487d6c8330d0382635d9fedca --- .../application/application-environment.asciidoc | 3 +- .../application/application-lifecycle.asciidoc | 28 +- .../application/application-resources.asciidoc | 59 +- .../application/img/application_streamresource.png | Bin 2319 -> 3558 bytes .../application/img/resource_classdiagram-hi.png | Bin 90414 -> 33433 bytes .../application/img/view-navigation-hi.png | Bin 101744 -> 103466 bytes .../application/original-drawings/Makefile | 3 +- .../original-drawings/resource_classdiagram.svg | 1667 ++++++++++---------- .../original-drawings/view-navigation.svg | 14 +- 9 files changed, 919 insertions(+), 855 deletions(-) (limited to 'documentation/application') diff --git a/documentation/application/application-environment.asciidoc b/documentation/application/application-environment.asciidoc index f5933afe85..3df4bcb48e 100644 --- a/documentation/application/application-environment.asciidoc +++ b/documentation/application/application-environment.asciidoc @@ -167,7 +167,8 @@ such as Servlet 3.0, you should use: id="WebApp_ID" version="**3.0**" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" - xsi:schemaLocation="**http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd**"> + xsi:schemaLocation="**http://java.sun.com/xml/ns/javaee + http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd**"> ---- Servlet 3.0 support is useful for at least server push. diff --git a/documentation/application/application-lifecycle.asciidoc b/documentation/application/application-lifecycle.asciidoc index 269f3d75b5..219002b414 100644 --- a/documentation/application/application-lifecycle.asciidoc +++ b/documentation/application/application-lifecycle.asciidoc @@ -427,7 +427,7 @@ public class MyUI extends UI { setContent(new Button("Logout", event -> {// Java 8 // Redirect this page immediately getPage().setLocation("/myapp/logout.html"); - + // Close the session getSession().close(); })); @@ -442,27 +442,20 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#application.lifecycle. This is not enough. When a session is closed from one UI, any other UIs attached to it are left hanging. When the client-side engine notices that a UI and the session are gone on the server-side, it displays a "Session Expired" message -and, by default, reloads the UI when the message is clicked. ((("session", -"expiration"))) +and, by default, reloads the UI when the message is clicked. +((("session", "expiration"))) ((("redirection"))) -((("system -messages"))) -You can customize the message and the redirect URL in the system messages +((("system messages"))) +You can customize the message and the redirect URL in the system messages. ifdef::web[] -, as described in -<> +It is described in <>. endif::web[] -. ((("heartbeat"))) -((("UI", -"heartbeat"))) +((("UI", "heartbeat"))) ((("push"))) -((("server -push"))) +((("server push"))) The client-side engine notices the expiration when user interaction causes a server request to be made or when the keep-alive heartbeat occurs. To make the UIs detect the situation faster, you need to make the heart beat faster, as was @@ -471,7 +464,6 @@ immediately, as is done in the following example. Access to the UIs must be synchronized as described in <>. - [source, java] ---- @Push @@ -496,7 +488,3 @@ In the above example, we assume that all UIs in the session have push enabled and that they should be redirected; popups you might want to close instead of redirecting. It is not necessary to call [methodname]#close()# for them individually, as we close the entire session afterwards. - - - - diff --git a/documentation/application/application-resources.asciidoc b/documentation/application/application-resources.asciidoc index ee1a8a7eb9..339d3eb340 100644 --- a/documentation/application/application-resources.asciidoc +++ b/documentation/application/application-resources.asciidoc @@ -46,7 +46,7 @@ The resource classes in Vaadin are grouped under two interfaces: a generic [[figure.resource.classdiagram]] .Resource Interface and Class Diagram -image::img/resource_classdiagram-hi.png[width=70%, scaledwidth=90%] +image::img/resource_classdiagram-hi.png[width=80%, scaledwidth=100%] [[application.resources.file]] == File Resources @@ -162,41 +162,46 @@ the [classname]#StreamResource.StreamSource# interface and its The following example demonstrates the creation of a simple image in PNG image format. - [source, java] ---- import java.awt.image.*; -public class MyImageSource - implements StreamResource.StreamSource { +public class MyImageSource implements StreamSource { ByteArrayOutputStream imagebuffer = null; int reloads = 0; - /* We need to implement this method that returns - * the resource as a stream. */ + // This method generates the stream contents public InputStream getStream () { - /* Create an image and draw something on it. */ - BufferedImage image = new BufferedImage (200, 200, - BufferedImage.TYPE_INT_RGB); - Graphics drawable = image.getGraphics(); - drawable.setColor(Color.lightGray); - drawable.fillRect(0,0,200,200); - drawable.setColor(Color.yellow); - drawable.fillOval(25,25,150,150); - drawable.setColor(Color.blue); - drawable.drawRect(0,0,199,199); - drawable.setColor(Color.black); - drawable.drawString("Reloads="+reloads, 75, 100); + // Create an image + BufferedImage image = new BufferedImage (400, 400, + BufferedImage.TYPE_INT_RGB); + Graphics2D drawable = image.createGraphics(); + + // Draw something static + drawable.setStroke(new BasicStroke(5)); + drawable.setColor(Color.WHITE); + drawable.fillRect(0, 0, 400, 400); + drawable.setColor(Color.BLACK); + drawable.drawOval(50, 50, 300, 300); + + // Draw something dynamic + drawable.setFont(new Font("Montserrat", + Font.PLAIN, 48)); + drawable.drawString("Reloads=" + reloads, 75, 216); reloads++; + drawable.setColor(new Color(0, 165, 235)); + int x= (int) (200-10 + 150*Math.sin(reloads * 0.3)); + int y= (int) (200-10 + 150*Math.cos(reloads * 0.3)); + drawable.fillOval(x, y, 20, 20); try { - /* Write the image to a buffer. */ + // Write the image to a buffer imagebuffer = new ByteArrayOutputStream(); ImageIO.write(image, "png", imagebuffer); - /* Return a stream from the buffer. */ + // Return a stream from the buffer return new ByteArrayInputStream( - imagebuffer.toByteArray()); + imagebuffer.toByteArray()); } catch (IOException e) { return null; } @@ -215,11 +220,11 @@ Below we display the image with the [classname]#Image# component. [source, java] ---- // Create an instance of our stream source. -StreamResource.StreamSource imagesource = new MyImageSource (); +StreamSource imagesource = new MyImageSource(); -// Create a resource that uses the stream source and give it a name. -// The constructor will automatically register the resource in -// the application. +// Create a resource that uses the stream source and give it +// a name. The constructor will automatically register the +// resource in the application. StreamResource resource = new StreamResource(imagesource, "myimage.png"); @@ -231,8 +236,8 @@ layout.addComponent(new Image("Image title", resource)); The resulting image is shown in <>. [[figure.application.resource.stream]] -.A Stream Resource -image::img/application_streamresource.png[] +.A stream resource +image::img/application_streamresource.png[width=25%, scaledwidth=35%] Another way to create dynamic content is a request handler, described in < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - Sizeable - Sizeable - VariableOwner - - ConnectorResource - - - - - Resource - - - - ExternalResource - - - - ThemeResource - - - - - - FileResource - - - - ClassResource - - - - StreamResource - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + Resource + + + ConnectorResource + + + FileResource + + + + ClassResource + + + StreamResource + + + ExternalResource + + + ThemeResource + + + + + + + + diff --git a/documentation/application/original-drawings/view-navigation.svg b/documentation/application/original-drawings/view-navigation.svg index e4acdf1e69..702c11450a 100644 --- a/documentation/application/original-drawings/view-navigation.svg +++ b/documentation/application/original-drawings/view-navigation.svg @@ -1081,10 +1081,10 @@ inkscape:pageopacity="1" inkscape:pageshadow="2" inkscape:zoom="1.8159691" - inkscape:cx="89.180593" - inkscape:cy="156.67691" + inkscape:cx="136.79995" + inkscape:cy="147.93516" inkscape:document-units="mm" - inkscape:current-layer="layer1" + inkscape:current-layer="g5458" gridtolerance="10000" inkscape:window-width="1920" inkscape:window-height="1060" @@ -1144,7 +1144,7 @@ image/svg+xml - + @@ -1242,7 +1242,7 @@ id="tspan7066-3-4-3-7" y="1016.0297" x="20.546753" - sodipodi:role="line">Email + sodipodi:role="line">Password Planet + sodipodi:role="line">Email @@ -1320,7 +1320,7 @@ height="53.149601" width="99.212601" id="rect4408-7-5-2-9-3" - style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffc13f;fill-opacity:1;fill-rule:nonzero;stroke:#33383a;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" /> + style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#33383a;stroke-width:1.0629921;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />