Download as PDF, PPTX
![brought to you by...
#151
Get More Refcardz! Visit refcardz.com
CONTENTS INCLUDE:
Introduction to Canvas
HTML 5 Canvas
A Comparison with SVG
Canvas Performance
Creating a Canvas and More! By Simon Sarris
INTRODUCTION TO CANVAS
The HTML <canvas> element allows for on-the-fly creation of graphs, Canvas SVG
diagrams, games, and other visual elements and interactive media. It also
Support -
allows for the rendering of 2D and 3D shapes and images, typically via
Safari, Firefox, and Opera have at ers. Almost all modern smart phones.
JavaScript.
least some support. Internet Explorer
9+ has support. Almost all modern
<canvas id=”canvas1” width=”500” height=”500”></canvas> smart phones.
<script type=”text/javascript”>
var can = document.getElementById(‘canvas1’); limited support through the excanvas
var ctx = can.getContext(‘2d’);
library.
“Hello World!”, 50, 50);
</script>
Stateful-
ness surface surface
Canvas is perhaps the most visible part of the new HTML5 feature set,
with new demos, projects, and proofs of concept appearing daily. remembered about their state.
Canvas is a very low-level drawing surface with commands for making Other
Consider- 10,000 objects.
lines, curves, rectangles, gradients and clipping regions built in. There is ations
very little else in the way of graphics drawing, which allows programmers must be programmed yourself.
to create their own methods for several basic drawing functions such objects, statefulness is built in and
as blurring, tweening, and animation. Even drawing a dotted line is (rendering nothing) if scripting is event handling is much easier.
something that must be done by the programmer from scratch. disabled.
many programs such as Illustrator can
Canvas is an immediate drawing surface and has no scene graph. This output SVG
means that once an image or shape is drawn to it, neither the Canvas nor
its drawing context have any knowledge of what was just drawn. animation.
Accessi-
For instance, to draw a line and have it move around, you need to do bility DOM objects objects.
much more than simply change the points of the line. You must clear
the Canvas (or part of it) and redraw the line with the new points. This - and web crawlers.
contrasts greatly with SVG, where you would simply give the line a new ment functionality is strongly advised
position and be done with it. against, even in the specification
itself.
You can visit the evolving specification for Canvas at the WHATWG site:
Hot http://www.whatwg.org/specs/web-apps/current-work/multipage/
disabled.
Tip the-canvas-element.html.
Browser Support and Hardware Acceleration
Canvas is supported by Firefox 1.5 and later; Opera 9 and later; and
newer versions of Safari, Chrome, and Internet Explorer 9 and 10.
The latest versions of these browsers support nearly all abilities of the
Canvas element. A notable exception is drawFocusRing, which no
browser supports effects.
Hardware acceleration is supported in some variation by all current
browsers, though the performance gains differ. It is difficult to benchmark
between the modern browsers because they are changing frequently, but
so far IE9 seems to consistently get the most out of having a good GPU.
HTML5 Canvas
On a machine with a good video card it is almost always the fastest at
rendering massive amounts of images or canvas-to-canvas draws.
Accelerated IE9 also renders fillRect more than twice as fast as the other
major browsers, allowing for impressive 2D particle effects [1]. Chrome
often has the fastest path rendering but can be inconsistent between
releases. All browsers render images and rects much faster than paths or
text, so it is best to use images and rects if you can regardless of which
browsers you are targeting.
DZone, Inc. | www.dzone.com
24. maaliskuuta 12](https://image.slidesharecdn.com/html5-with-vaadin-and-scala-120324054857-phpapp02/85/Html5-with-Vaadin-and-Scala-9-320.jpg)
![brought to you by...
#151
Get More Refcardz! Visit refcardz.com
CONTENTS INCLUDE:
Introduction to Canvas
HTML 5 Canvas
A Comparison with SVG
Canvas Performance
Creating a Canvas and More! By Simon Sarris
INTRODUCTION TO CANVAS
The HTML <canvas> element allows for on-the-fly creation of graphs, Canvas SVG
diagrams, games, and other visual elements and interactive media. It also
Support -
allows for the rendering of 2D and 3D shapes and images, typically via
Safari, Firefox, and Opera have at ers. Almost all modern smart phones.
JavaScript.
least some support. Internet Explorer
9+ has support. Almost all modern
<canvas id=”canvas1” width=”500” height=”500”></canvas> smart phones.
<script type=”text/javascript”>
var can = document.getElementById(‘canvas1’); limited support through the excanvas
var ctx = can.getContext(‘2d’);
library.
“Hello World!”, 50, 50);
</script>
Stateful-
ness surface surface
Canvas is perhaps the most visible part of the new HTML5 feature set,
with new demos, projects, and proofs of concept appearing daily. remembered about their state.
Canvas is a very low-level drawing surface with commands for making Other
Consider- 10,000 objects.
lines, curves, rectangles, gradients and clipping regions built in. There is ations
very little else in the way of graphics drawing, which allows programmers must be programmed yourself.
to create their own methods for several basic drawing functions such objects, statefulness is built in and
as blurring, tweening, and animation. Even drawing a dotted line is (rendering nothing) if scripting is event handling is much easier.
something that must be done by the programmer from scratch. disabled.
many programs such as Illustrator can
Canvas is an immediate drawing surface and has no scene graph. This output SVG
means that once an image or shape is drawn to it, neither the Canvas nor
its drawing context have any knowledge of what was just drawn. animation.
Accessi-
For instance, to draw a line and have it move around, you need to do bility DOM objects objects.
much more than simply change the points of the line. You must clear
the Canvas (or part of it) and redraw the line with the new points. This - and web crawlers.
contrasts greatly with SVG, where you would simply give the line a new ment functionality is strongly advised
position and be done with it. against, even in the specification
itself.
You can visit the evolving specification for Canvas at the WHATWG site:
Hot http://www.whatwg.org/specs/web-apps/current-work/multipage/
disabled.
Tip the-canvas-element.html.
Browser Support and Hardware Acceleration
Canvas is supported by Firefox 1.5 and later; Opera 9 and later; and
newer versions of Safari, Chrome, and Internet Explorer 9 and 10.
The latest versions of these browsers support nearly all abilities of the
Canvas element. A notable exception is drawFocusRing, which no
browser supports effects.
Hardware acceleration is supported in some variation by all current
browsers, though the performance gains differ. It is difficult to benchmark
between the modern browsers because they are changing frequently, but
so far IE9 seems to consistently get the most out of having a good GPU.
HTML5 Canvas
On a machine with a good video card it is almost always the fastest at
rendering massive amounts of images or canvas-to-canvas draws.
Accelerated IE9 also renders fillRect more than twice as fast as the other
major browsers, allowing for impressive 2D particle effects [1]. Chrome
often has the fastest path rendering but can be inconsistent between
releases. All browsers render images and rects much faster than paths or
text, so it is best to use images and rects if you can regardless of which
browsers you are targeting.
DZone, Inc. | www.dzone.com
24. maaliskuuta 12](https://image.slidesharecdn.com/html5-with-vaadin-and-scala-120324054857-phpapp02/75/Html5-with-Vaadin-and-Scala-9-2048.jpg)
Uploaded byJoonas Lehtinen
Html5 with Vaadin and Scala
The document discusses HTML5 features and the Vaadin framework for developing web applications using Scala and Java. It covers topics such as the HTML <canvas> element for dynamic graphics rendering, the architecture of Vaadin, and its server-side AJAX capabilities. Additionally, it highlights the benefits of using Scala as a multiparadigm programming language integrated with Java tools.
More Related Content
Html5 with Vaadin and Scala
- 1. HTML5 with Vaadin and Scala Joonas Lehtinen, PhD Vaadin Ltd - CEO vaadin.com/vaadin @joonaslehtinen 24. maaliskuuta 12
- 2. Contents HTML5 Building the app • Canvas Vaadin • How does it work? Scala 24. maaliskuuta 12
- 3.
- 4.
- 5. Element Description <article> An independent piece of content for a document e.g. blog entry, forum entry <aside> A piece of content that is somehow related to the rest of the page <audio> Audio media content <canvas> A component for rendering dynamic bitmap graphics on the fly. e.g games <command> A command that the user can invoke: a button, radio button or checkbox <datalist> Together with the new list attribute for the <input> element can be used to make combo boxes <details> Additional information or controls that the user can obtain on demand, to provide details on the document, or parts of it <embed> Used for plug-in content <figure> A piece of self-contained flow content referenced as a single unit from the main flow of the document <figcaption> Caption for a <footer> Footer for a section; may contain information about author, copyright information, etc. <header> A group of introductory or navigation aids <hgroup> Header of a section <keygen> A key pair generation control for user authentication in forms <mark> A run of text in one document marker or highlighted for reference purposes 24. maaliskuuta 12
- 6. Cross-document CSS3 messaging Document editing Multimedia Microdata WebGL Offline storage Canvas Markup improvements History management Forms Geolocation Drag-and-drop File API 24. maaliskuuta 12
- 7. Canvas state 24. maaliskuuta 12
- 8.
- 9. brought to youby... #151 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: Introduction to Canvas HTML 5 Canvas A Comparison with SVG Canvas Performance Creating a Canvas and More! By Simon Sarris INTRODUCTION TO CANVAS The HTML <canvas> element allows for on-the-fly creation of graphs, Canvas SVG diagrams, games, and other visual elements and interactive media. It also Support - allows for the rendering of 2D and 3D shapes and images, typically via Safari, Firefox, and Opera have at ers. Almost all modern smart phones. JavaScript. least some support. Internet Explorer 9+ has support. Almost all modern <canvas id=”canvas1” width=”500” height=”500”></canvas> smart phones. <script type=”text/javascript”> var can = document.getElementById(‘canvas1’); limited support through the excanvas var ctx = can.getContext(‘2d’); library. “Hello World!”, 50, 50); </script> Stateful- ness surface surface Canvas is perhaps the most visible part of the new HTML5 feature set, with new demos, projects, and proofs of concept appearing daily. remembered about their state. Canvas is a very low-level drawing surface with commands for making Other Consider- 10,000 objects. lines, curves, rectangles, gradients and clipping regions built in. There is ations very little else in the way of graphics drawing, which allows programmers must be programmed yourself. to create their own methods for several basic drawing functions such objects, statefulness is built in and as blurring, tweening, and animation. Even drawing a dotted line is (rendering nothing) if scripting is event handling is much easier. something that must be done by the programmer from scratch. disabled. many programs such as Illustrator can Canvas is an immediate drawing surface and has no scene graph. This output SVG means that once an image or shape is drawn to it, neither the Canvas nor its drawing context have any knowledge of what was just drawn. animation. Accessi- For instance, to draw a line and have it move around, you need to do bility DOM objects objects. much more than simply change the points of the line. You must clear the Canvas (or part of it) and redraw the line with the new points. This - and web crawlers. contrasts greatly with SVG, where you would simply give the line a new ment functionality is strongly advised position and be done with it. against, even in the specification itself. You can visit the evolving specification for Canvas at the WHATWG site: Hot http://www.whatwg.org/specs/web-apps/current-work/multipage/ disabled. Tip the-canvas-element.html. Browser Support and Hardware Acceleration Canvas is supported by Firefox 1.5 and later; Opera 9 and later; and newer versions of Safari, Chrome, and Internet Explorer 9 and 10. The latest versions of these browsers support nearly all abilities of the Canvas element. A notable exception is drawFocusRing, which no browser supports effects. Hardware acceleration is supported in some variation by all current browsers, though the performance gains differ. It is difficult to benchmark between the modern browsers because they are changing frequently, but so far IE9 seems to consistently get the most out of having a good GPU. HTML5 Canvas On a machine with a good video card it is almost always the fastest at rendering massive amounts of images or canvas-to-canvas draws. Accelerated IE9 also renders fillRect more than twice as fast as the other major browsers, allowing for impressive 2D particle effects [1]. Chrome often has the fastest path rendering but can be inconsistent between releases. All browsers render images and rects much faster than paths or text, so it is best to use images and rects if you can regardless of which browsers you are targeting. DZone, Inc. | www.dzone.com 24. maaliskuuta 12
- 10.
- 11. Scala is ... A multiparadigm language created by Martin Odersky from Typesafe Object-oriented: every value is an object Functional: every function is a value Java compatible: Runs on the JVM and integrates with Java tools and technologies 24. maaliskuuta 12
- 12.
- 13.
- 14. Concise Java: 349 lines Scala: 130 lines 24. maaliskuuta 12
- 15. Statically typed with amazing type inference 24. maaliskuuta 12
- 16.
- 17.
- 18.
- 19. Vaadin is a UI framework for rich web applications 24. maaliskuuta 12
- 20. java html 24. maaliskuuta 12
- 21. Layers of abstraction backend frontend RPC browser browser server server any language any language json / xml java ➠ javascript ExtJS GWT Vaadin required required optional optional optional required required required required optional required required required X required 24. maaliskuuta 12
- 22. Vaadin UI component architecture HTTP(S) Server UI comp. Client UI comp. • Button, Table, Tree, ... • Rendering • API you program with • Event handling • State • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit 24. maaliskuuta 12
- 23. Vaadin UI component architecture HTTP(S) Server UI comp. Client UI comp. • Button, Table, Tree, ... • Rendering • API you program with • Event handling • State • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit 24. maaliskuuta 12
- 24. How does it work, really? 24. maaliskuuta 12
- 25.
- 26. • Initial HTML • CSS (theme) • Images • JavaScript 120k total 24. maaliskuuta 12
- 27. • name=”Joonas” • button clicked 150 bytes 24. maaliskuuta 12
- 28.
- 29. • name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes 24. maaliskuuta 12
- 30.
- 31.
- 32.
- 33. Download for Free vaadin.com/book Vaadin is a for build n open source ing mod J look gre ern web ava framework at, applicat your use perform well a ion rs happ nd make s that y. you and http://va adin.com / SBN 978 -9 52-92-67 53-8 90000 9 7 8 95 2 9 267538 $29.95 4th Editio n 674 pages 24. maaliskuuta 12
- 34. brought to youby... #85 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: About Vaadin Getting Started with Vaadin Creating An Application Components Layout Components Themes Data Binding and more... By Marko Grönroos ABOUT VAADIN Web Browser External Client-Side Resources Vaadin is a server-side Ajax web application development Engine framework that allows you to build web applications just like AJAX Requests with traditional desktop frameworks, such as AWT or Swing. An Servlet Container Java File application is built from user interface components contained Servlet Resources hierarchically in layout components. Data In the server-driven model, the application code runs on Application UI Binding Default Class Component Theme a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server Inherits Events Changes Inherits communications and any client-side technologies, such as User Event Data Application Application HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache Database License 2.0. Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications Browser Web UI Java Service Client-Side Server Components Application You can get a reference to the application object w.dzone.com Engine EJB Hot Tip from any component attached to the application with DB Event Listeners Figure 1: Vaadin Client-Server Architecture In the event-driven model, user interaction with user interface If the built-in selection of components is not enough, you can components triggers server-side events, which you can handle 24. maaliskuuta 12 develop new components with the Google Web Toolkit (GWT)
- 35.
- 36. https://github.com/ jojule/Stocks 24. maaliskuuta 12
- 37. Questions? Comments? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen #vaadin Expert services Better Online support Results 15.50 Training Aula N13 Faster Vaadin intro Tools • More about Vaadin • In Java vaadin.com/pro 24. maaliskuuta 12