From a5a65c885f77639131fa0343f34aa340482e5d87 Mon Sep 17 00:00:00 2001 From: Marko Gronroos Date: Fri, 22 Jul 2016 16:57:02 +0300 Subject: Revised toolchain, architecture, events, button, and textfield diagrams, etc. #19897 Change-Id: I6a1ff2264ee17f8b16c99494b855b619e9984a19 --- .../components/components-button.asciidoc | 31 +- .../components/components-textfield.asciidoc | 7 +- documentation/components/img/button-example1.png | Bin 47905 -> 6873 bytes .../components/img/button-valo-styles.png | Bin 0 -> 47905 bytes .../components/img/textfield-diagram-hi.png | Bin 55555 -> 60739 bytes .../components/original-drawings/Makefile | 4 +- .../original-drawings/textfield-diagram.svg | 1821 ++++++++++---------- 7 files changed, 975 insertions(+), 888 deletions(-) create mode 100644 documentation/components/img/button-valo-styles.png (limited to 'documentation/components') diff --git a/documentation/components/components-button.asciidoc b/documentation/components/components-button.asciidoc index fdd6cf594f..65b991404b 100644 --- a/documentation/components/components-button.asciidoc +++ b/documentation/components/components-button.asciidoc @@ -18,8 +18,11 @@ such as finalizing input in forms. When the user clicks a button, a [classname]#Button.ClickEvent# is fired, which can be handled by adding a __click listener__ using either the [methodname]#onClick()# or the [methodname]#addClickListener()# method. -You can handle button clicks with an anonymous class as follows: +[[figure.component.button.basic]] +.A [classname]#Button# +image::img/button-example1.png[width=35%, scaledwidth=60%] +You can handle button clicks most easily with an anonymous class or a lambda expression, as follows: [source, java] ---- @@ -32,17 +35,14 @@ See the http://demo.vaadin.com/book-examples-vaadin7/book#component.button.basic The listener can also be given in the constructor, which is often perhaps simpler. -The button component can be styled in many ways, as illustrated in <>. - -[[figure.component.button.basic]] -.Button in Different Styles of Valo Theme -image::img/button-example1.png[width=70%, scaledwidth=100%] - -If you handle several buttons in the same listener, you can differentiate between -them by comparing the [classname]#Button# object reference returned by the [methodname]#getButton()# -method of [classname]#Button.ClickEvent# to a kept reference. For a detailed description -of these patterns together with some examples, please see +//// +If you handle several buttons in the same listener, you can differentiate +between them either by comparing the [classname]#Button# object reference +returned by the [methodname]#getButton()# method of +[classname]#Button.ClickEvent# to a kept reference. For a detailed description +of these patterns together with some examples, please see <>. +//// == CSS Style Rules @@ -58,6 +58,9 @@ A button has an overall [literal]#++v-button++# style. The caption has [literal]#++v-button-caption++# style. There is also an intermediate wrap element, which may help in styling in some cases. -Some built-in themes contain a small style, which you can enable by adding -[parameter]#Reindeer.BUTTON_SMALL#, etc. The [classname]#BaseTheme# also has a -[parameter]#BUTTON_LINK# style, which makes the button look like a hyperlink. +The button component has many style variants in the Valo theme, as illustrated in <>. +The styles are defined in the [classname]#ValoTheme# class. + +[[figure.component.button.basic]] +.Button in different styles of the Valo theme +image::img/button-valo-styles.png[width=70%, scaledwidth=100%] diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc index 33fc7033fb..5ecd2dc70d 100644 --- a/documentation/components/components-textfield.asciidoc +++ b/documentation/components/components-textfield.asciidoc @@ -56,12 +56,11 @@ Between Property Type and Representation">>. Much of the API of [classname]#TextField# is defined in [classname]#AbstractTextField#, which allows different kinds of text input -fields, such as rich text editors, which do not share all the features of the -single-line text fields. +fields, which do not share all the features of the single-line text fields. [[figure.components.textfield.api]] -.Text Field Class Relationships -image::img/textfield-diagram-hi.png[width=40%, scaledwidth=70%] +.Text field class relationships +image::img/textfield-diagram-hi.png[width=80%, scaledwidth=100%] [[components.textfield.length]] == String Length diff --git a/documentation/components/img/button-example1.png b/documentation/components/img/button-example1.png index e17d315f61..2cf0477c7f 100644 Binary files a/documentation/components/img/button-example1.png and b/documentation/components/img/button-example1.png differ diff --git a/documentation/components/img/button-valo-styles.png b/documentation/components/img/button-valo-styles.png new file mode 100644 index 0000000000..e17d315f61 Binary files /dev/null and b/documentation/components/img/button-valo-styles.png differ diff --git a/documentation/components/img/textfield-diagram-hi.png b/documentation/components/img/textfield-diagram-hi.png index f7f160e212..aaf1a8cf2a 100644 Binary files a/documentation/components/img/textfield-diagram-hi.png and b/documentation/components/img/textfield-diagram-hi.png differ diff --git a/documentation/components/original-drawings/Makefile b/documentation/components/original-drawings/Makefile index a351918743..8a0ad3da30 100644 --- a/documentation/components/original-drawings/Makefile +++ b/documentation/components/original-drawings/Makefile @@ -1,8 +1,8 @@ -IMAGES = slider-example1 field-interface-v8 field-diagram +IMAGES = slider-example1 field-interface-v8 field-diagram \ + textfield-diagram 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) diff --git a/documentation/components/original-drawings/textfield-diagram.svg b/documentation/components/original-drawings/textfield-diagram.svg index f732bcb7de..b3898452a9 100644 --- a/documentation/components/original-drawings/textfield-diagram.svg +++ b/documentation/components/original-drawings/textfield-diagram.svg @@ -1,868 +1,953 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - AbstractField - - - TextField v-textfield - - - - TextArea - v-textarea - - - - - - - AbstractTextField - - - PasswordField - v-textfield - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + RichTextArea v-richtextarea + + + + + + + + + AbstractField<String> AbstractTextField + + TextField v-textfield + + TextArea v-textarea + + PasswordField v-textfield + + + + + + -- cgit v1.2.3