KEMBAR78
Desingning reusable web components | PDF
Designing Reusable Web
Components
Joonas Lehtinen / Vaadin


                           @joonaslehtinen
12-5-17
Agenda

Goal                                  Q&A
• Test app




                      Designing Web Component
Technology            Step-by-step
•HTML5 / Canvas
•Google Web Toolkit
•Vaadin Framework
1
Goal
http://jole.virtuallypreinstalled.com/spreadsheet
Technology
2
Technology
<!doctype html>
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

<gcaption>   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
“new shiny”
Cross-document          CSS3
   messaging                          Document
                                       editing
Multimedia
                                     Microdata
 WebGL

   Offline storage
                                       Canvas
   Markup
improvements                          History
                                    management
          Forms

Geolocation         Drag-and-drop     File API
Canvas



  state

  state

  state
http://vj.jole./
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 specication
                                                                                                                                                  itself.

                                                        You can visit the evolving specication 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 difcult 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 llRect 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
Google Web Toolkit
Subset of                       IE6
java.lang, java.util

                         Java to     IE7
    Widgetset          JavaScript
                        Compiler
                                    Firefox

Your Application UI                 Safari
simpler
• 100% Java
• Static typing
• Object oriented
• Excellent tooling
less bugs
• Stop debugging
  JavaScript spaghetti
• Ignore most
  browser differences
client-side
• UI in client
• Asyncronous RPC
• Services (for UI)
Vaadin is a
UI framework
 for rich web
 applications
java   html
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
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
How does it
work, really?
•   Initial HTML
•   CSS (theme)
•   Images
•   JavaScript

120k total
• name=”Joonas”
• button clicked
150 bytes
• name=”Joonas”
• button clicked
150 bytes



• Add
  notification
466 bytes
https://vaadin.com/demo
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
brought to you by...
#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
 .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
Designing
Step-by-step
3
Designing
Step-by-step
Need
 We can not get
the UX we need
with the existing
         widgets
Goals
• List of
• real
• quantifiable
• requirements
• for UX
Example goals
  • Load and view data in XLS files
  • Show visual overview for numeric cols
  • Must support 1000 cell tables
  • Supports the latest Firefox & Chrome
Nail down
the minimum viable
  set of supported
 browser versions
 with the customer
Idea
=
UX [how it is used]
+
Tech [how it works]
Always start from
  dened goals -
never let idea to
 rule your design
Works with
target browsers?
Interactions
work with target
browsers?
Performance is
good enough for
target data?
Proto DOD
• Includes main use-cases
• Works in target browsers
• Handles enough data
Never start design
or implementation before
   prototyping browser
      compatibility
    and performance
Design UX and API rst.
 Never continue from
     the prototype
   implementation
Drawing detailed
wireframes and mockups
 and testing them with
     users will save
       time later
Shamelessly copy UX.
Then your users already
  know how to use it.
Aim for multilayered
design that lets your
 users (developers)
 change behavior of
  your component
DOM classes and
  CSS restrictions
must be documented
to make styling easy
Keep component
 project separate
  from your real
application project
Demo application
must include all features
 and serve as example
     for your users
Invest in project
    setup with a rapid
 save-to-see cycle and a
robust build script. These
 might not be the same
          thing.
https://vaadin.com/wiki/-/wiki/Main/
Component+Add-on+Project+Setup+HOWTO
There is no substitute
for manual testing and
user experience testing
Skip test driven
development, but invest
 in regression testing
Pixel level regression
tests take time to set
up, but will be worth it
Never trust that
your changes would not
 break other browsers
and skip cross-browser
        testing
It is impossible to use
    too much time in
   polishing UX for a
 reusable component.
35
                       Search…                               Explore Gist Blog Help                                                   jojule



  jojule / spreadsheet                                                                       Admin        Unwatch          Fork       Pull Request         1     1




           Code                       Network                 Pull Requests   0            Issues    0              Wiki     0                 Stats & Graphs


 Simple spreadsheet component for Vaadin — Read more
 https://vaadin.com/addon/spreadsheet


   Clone in Mac          ZIP         SSH    HTTP     Git Read-Only   git@github.com:jojule/spreadsheet.git                       Read+Write access



  branch: master             Files          Commits       Branches     1                                                                Tags          Downloads


 Latest commit to the master branch



            https://github.com/jojule/spreadsheet
 Update README.markdown

    jojule authored 4 hours ago                                                                                                                commit 7453f467b1



spreadsheet /
     name                                              age                        message                                                                  history

     design                                            a day ago                  Developing [Joonas Lehtinen]

     src                                               19 hours ago               Version 0.1 [Joonas Lehtinen]

     README.markdown                                   4 hours ago                Update README.markdown [jojule]

     licensing.txt                                     19 hours ago               Version 0.1 [Joonas Lehtinen]

     pom.xml                                           18 hours ago               Fixed add-on name [Joonas Lehtinen]




     README.markdown
README.markdown



Spreadsheet for Vaadin
The widget shows a spreadsheet - either from XLS file or by setting the cell contents programmatically.

This version is very limited and should be considered to be an early alpha -version. Try out the demo to see if it would be useful for you. I
mainly built it for an upcoming presentation.

SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel by
yourself.


Dependencies

     Apache POI 3.8 - http://poi.apache.org/

     Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/


Release notes
Initial release with severe limitations:

     All columns and rows have fixed sizes

     No cell styling is supported

     No graphs are supported

     No merged cells are supported

     Performance for larger spreadsheets is really bad

     Only one spreadsheet widget is supported on screen at once


License & Author
PaperStack notes = new PaperStack();
!
! @Override
! public void init() {

        // === Layout ========================================================
!   !   HorizontalLayout lo= new HorizontalLayout();
!   !   Window mainWindow = new Window("Postitnotes Application", lo);
!   !   lo.setSizeFull();
!   !   lo.addComponent(notes);
!   !   lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);
!   !   setMainWindow(mainWindow);!!
!   !   notes.setWidth("350px");
!   !   notes.setHeight("350px");
!   !
        // === Note 1 ========================================================
! !     notes.addComponent(new Label("<h1>TODO / Today</h1><div style='font-size: 24px'>” +
           “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c");

        // === Note 2 ========================================================
! !     notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style='font-size: 24px'>” +
           “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1");

        // === Note 3 ========================================================
! !     notes.addComponent(new Label("<div style='font-size: 60px'><center><br/><br/><br/>” +
           “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1");

        // === Note 4 ========================================================
!   !   com.vaadin.ui.RichTextArea rta = new RichTextArea();
!   !   rta.setSizeFull();
!   !   notes.addComponent(rta);
!   !   rta.setValue("<span style='font-size: 35pt; color: green;'>You can use any “ +
           “Vaadin components here...</span>");
! }
T out my Spreadsheet!
 ry
 vaadin.com/addon/spreadsheet
https://github.com/jojule/
   spreadsheet/issues
Support HOWTO
               Ignore. wont-x in best case.
               (the usual open source way)

Issue
reported by    Fix after 6 months,
actual user!   maybe...


               Fix immediately and thank
               the user who reported it
Q&A
4
Q&A
Expert services
                          Better
          Online support
                          Results
                 Training
                          Faster
                   Tools
                 vaadin.com/pro




Questions?

                                    joonas@vaadin.com
                                      vaadin.com/joonas
12-5-17                                 @joonaslehtinen

Desingning reusable web components

  • 1.
    Designing Reusable Web Components JoonasLehtinen / Vaadin @joonaslehtinen 12-5-17
  • 2.
    Agenda Goal Q&A • Test app Designing Web Component Technology Step-by-step •HTML5 / Canvas •Google Web Toolkit •Vaadin Framework
  • 3.
  • 4.
  • 6.
  • 7.
  • 9.
  • 10.
    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
  • 11.
  • 12.
    Cross-document CSS3 messaging Document editing Multimedia Microdata WebGL Offline storage Canvas Markup improvements History management Forms Geolocation Drag-and-drop File API
  • 13.
    Canvas state state state
  • 14.
  • 15.
    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
  • 16.
  • 17.
    Subset of IE6 java.lang, java.util Java to IE7 Widgetset JavaScript Compiler Firefox Your Application UI Safari
  • 18.
    simpler • 100% Java •Static typing • Object oriented • Excellent tooling
  • 19.
    less bugs • Stopdebugging JavaScript spaghetti • Ignore most browser differences
  • 20.
    client-side • UI inclient • Asyncronous RPC • Services (for UI)
  • 23.
    Vaadin is a UIframework for rich web applications
  • 24.
    java html
  • 25.
    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
  • 26.
    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
  • 27.
  • 29.
    • Initial HTML • CSS (theme) • Images • JavaScript 120k total
  • 30.
  • 32.
    • name=”Joonas” • buttonclicked 150 bytes • Add notification 466 bytes
  • 33.
  • 36.
    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
  • 37.
    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 .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
  • 38.
  • 39.
  • 42.
    Need We cannot get the UX we need with the existing widgets
  • 43.
    Goals • List of •real • quantifiable • requirements • for UX
  • 44.
    Example goals • Load and view data in XLS files • Show visual overview for numeric cols • Must support 1000 cell tables • Supports the latest Firefox & Chrome
  • 45.
    Nail down the minimumviable set of supported browser versions with the customer
  • 46.
    Idea = UX [how itis used] + Tech [how it works]
  • 49.
    Always start from dened goals - never let idea to rule your design
  • 51.
  • 52.
  • 53.
    Proto DOD • Includesmain use-cases • Works in target browsers • Handles enough data
  • 54.
    Never start design orimplementation before prototyping browser compatibility and performance
  • 56.
    Design UX andAPI rst. Never continue from the prototype implementation
  • 57.
    Drawing detailed wireframes andmockups and testing them with users will save time later
  • 59.
    Shamelessly copy UX. Thenyour users already know how to use it.
  • 61.
    Aim for multilayered designthat lets your users (developers) change behavior of your component
  • 63.
    DOM classes and CSS restrictions must be documented to make styling easy
  • 65.
    Keep component projectseparate from your real application project
  • 66.
    Demo application must includeall features and serve as example for your users
  • 68.
    Invest in project setup with a rapid save-to-see cycle and a robust build script. These might not be the same thing.
  • 69.
  • 71.
    There is nosubstitute for manual testing and user experience testing
  • 72.
    Skip test driven development,but invest in regression testing
  • 73.
    Pixel level regression teststake time to set up, but will be worth it
  • 74.
    Never trust that yourchanges would not break other browsers and skip cross-browser testing
  • 75.
    It is impossibleto use too much time in polishing UX for a reusable component.
  • 77.
    35 Search… Explore Gist Blog Help jojule jojule / spreadsheet Admin Unwatch Fork Pull Request 1 1 Code Network Pull Requests 0 Issues 0 Wiki 0 Stats & Graphs Simple spreadsheet component for Vaadin — Read more https://vaadin.com/addon/spreadsheet  Clone in Mac ZIP SSH HTTP Git Read-Only git@github.com:jojule/spreadsheet.git Read+Write access branch: master Files Commits Branches 1 Tags Downloads Latest commit to the master branch https://github.com/jojule/spreadsheet Update README.markdown jojule authored 4 hours ago commit 7453f467b1 spreadsheet / name age message history design a day ago Developing [Joonas Lehtinen] src 19 hours ago Version 0.1 [Joonas Lehtinen] README.markdown 4 hours ago Update README.markdown [jojule] licensing.txt 19 hours ago Version 0.1 [Joonas Lehtinen] pom.xml 18 hours ago Fixed add-on name [Joonas Lehtinen] README.markdown
  • 78.
    README.markdown Spreadsheet for Vaadin Thewidget shows a spreadsheet - either from XLS file or by setting the cell contents programmatically. This version is very limited and should be considered to be an early alpha -version. Try out the demo to see if it would be useful for you. I mainly built it for an upcoming presentation. SpreadsheetView class should be also usable in GWT without Vaadin Framework, but then you must implement SpreadsheetModel by yourself. Dependencies Apache POI 3.8 - http://poi.apache.org/ Apache Commons Codec 1.5 - Required by POI - http://commons.apache.org/codec/ Release notes Initial release with severe limitations: All columns and rows have fixed sizes No cell styling is supported No graphs are supported No merged cells are supported Performance for larger spreadsheets is really bad Only one spreadsheet widget is supported on screen at once License & Author
  • 84.
    PaperStack notes =new PaperStack(); ! ! @Override ! public void init() { // === Layout ======================================================== ! ! HorizontalLayout lo= new HorizontalLayout(); ! ! Window mainWindow = new Window("Postitnotes Application", lo); ! ! lo.setSizeFull(); ! ! lo.addComponent(notes); ! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER); ! ! setMainWindow(mainWindow);!! ! ! notes.setWidth("350px"); ! ! notes.setHeight("350px"); ! ! // === Note 1 ======================================================== ! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style='font-size: 24px'>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ======================================================== ! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style='font-size: 24px'>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ======================================================== ! ! notes.addComponent(new Label("<div style='font-size: 60px'><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ======================================================== ! ! com.vaadin.ui.RichTextArea rta = new RichTextArea(); ! ! rta.setSizeFull(); ! ! notes.addComponent(rta); ! ! rta.setValue("<span style='font-size: 35pt; color: green;'>You can use any “ + “Vaadin components here...</span>"); ! }
  • 85.
    T out mySpreadsheet! ry vaadin.com/addon/spreadsheet
  • 86.
    https://github.com/jojule/ spreadsheet/issues
  • 89.
    Support HOWTO Ignore. wont-x in best case. (the usual open source way) Issue reported by Fix after 6 months, actual user! maybe... Fix immediately and thank the user who reported it
  • 90.
  • 91.
  • 92.
    Expert services Better Online support Results Training Faster Tools vaadin.com/pro Questions? joonas@vaadin.com vaadin.com/joonas 12-5-17 @joonaslehtinen