diff options
author | Ilia Motornyi <elmot@vaadin.com> | 2015-12-03 14:59:05 +0000 |
---|---|---|
committer | Vaadin Code Review <review@vaadin.com> | 2015-12-03 14:59:12 +0000 |
commit | 2af72ba9636bec70046394c41744f89ce4572e35 (patch) | |
tree | ccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/components/components-customcomponent.asciidoc | |
parent | 8aa5fabe89f2967e966a64842a608eceaf80d08f (diff) | |
download | vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip |
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00.
Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/components/components-customcomponent.asciidoc')
-rw-r--r-- | documentation/components/components-customcomponent.asciidoc | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/documentation/components/components-customcomponent.asciidoc b/documentation/components/components-customcomponent.asciidoc deleted file mode 100644 index cce897daa9..0000000000 --- a/documentation/components/components-customcomponent.asciidoc +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Composition with CustomComponent -order: 31 -layout: page ---- - -[[components.customcomponent]] -= Composition with [classname]#CustomComponent# - -The ease of making new user interface components is one of the core features of -Vaadin. Typically, you simply combine existing built-in components to produce -composite components. In many applications, such composite components make up -the majority of the user interface. - -As described earlier in -<<dummy/../../../framework/application/application-architecture#application.architecture.composition,"Compositing -Components">>, you have two basic ways to create a composite - either by -extending a layout component or the [classname]#CustomComponent#, which -typically wraps around a layout component. The benefit of wrapping a layout -composite in [classname]#CustomComponent# is mainly encapsulation - hiding the -implementation details of the composition. Otherwise, a user of the composite -could rely on implementation details, which would create an unwanted dependency. - -To create a composite, you need to inherit the [classname]#CustomComponent# and -set the __composition root__ component in the constructor. The composition root -is typically a layout component that contains other components. - -For example: - - -[source, java] ----- -class MyComposite extends CustomComponent { - public MyComposite(String message) { - // A layout structure used for composition - Panel panel = new Panel("My Custom Component"); - VerticalLayout panelContent = new VerticalLayout(); - panelContent.setMargin(true); // Very useful - panel.setContent(panelContent); - - // Compose from multiple components - Label label = new Label(message); - label.setSizeUndefined(); // Shrink - panelContent.addComponent(label); - panelContent.addComponent(new Button("Ok")); - - // Set the size as undefined at all levels - panelContent.setSizeUndefined(); - panel.setSizeUndefined(); - setSizeUndefined(); - - // The composition root MUST be set - setCompositionRoot(panel); - } -} ----- - -Take note of the sizing when trying to make a customcomponent that shrinks to -fit the contained components. You have to set the size as undefined at all -levels; the sizing of the composite component and the composition root are -separate. - -You can use the component as follows: - - -[source, java] ----- -MyComposite mycomposite = new MyComposite("Hello"); ----- - -The rendered component is shown in <<figure.components.customcomponent>>. - -[[figure.components.customcomponent]] -.A Custom Composite Component -image::img/customcomponent-example1.png[] - -You can also inherit any other components, such as layouts, to attain similar -composition. ((("Google Web -Toolkit"))) -Even further, you can create entirely new low-level components, by integrating -pure client-side components or by extending the client-side functionality of -built-in components. Development of new components is covered in -<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating -with the Server-Side">>. - - - |