Migration Guide to CoralUI 3-based¶
New Location¶
- A new set of Sling components of Granite UI Foundation is created for Coral3 under /libs/granite/ui/components/coral/foundation
- A new clientlib of Granite UI Foundation, named granite.ui.coral.foundation is also created
- So basically there is one set for CoralUI 2-based components and one set for CoralUI 3-based components
- The new set will not be just a copy-paste of the old set, rather it will be cleaned up (e.g. streamlining, removing deprecated feature)
- It is recommended that a page only use either CoralUI 3-based or CoralUI 2-based set (i.e. not mixed)
Layout Concept¶
The new set will not use the layout concept anymore. This is to increase the simplicity of the understanding of Granite UI. Each layout component thus becomes a standard component.
The layout mechanic itself is still there for other to use if needed.
Before:
+ mytabs
- sling:resourceType = "granite/ui/components/foundation/container"
+ layout
- sling:resourceType = "granite/ui/components/foundation/layouts/tabs"
+ items
+ tab1
- jcr:title = "Tab 1"
- sling:resourceType = "granite/ui/components/foundation/container"
+ tab2
- jcr:title = "Tab 2"
- sling:resourceType = "granite/ui/components/foundation/container"
+ layoutConfig
- active = true
After:
+ mytabs
- sling:resourceType = "granite/ui/components/coral/foundation/tabs"
+ items
+ tab1
- jcr:title = "Tab 1"
- sling:resourceType = "granite/ui/components/coral/foundation/container"
+ tab2
- jcr:title = "Tab 2"
- sling:resourceType = "granite/ui/components/coral/foundation/container"
+ parentConfig
- active = true
Streamlining the API¶
Since we have to create a new set of RT and clientlib, we have an opportunity to revisit the API.
- The common attributes, such as
granite:class
are strictly implemented to replace existing properties, such asclass
. - Unnecessary or similar component is removed.
- foundation-validation in the client-side replaces $.validator (deprecated).
Component Mapping¶
If not specify, by default the equivalence of an existing component can be found at the same relative path to /libs/granite/ui/components/coral/foundation.
Removed Components¶
The following is the list of components that are removed in the new set.
Path | Replacement | Remarks |
---|---|---|
navigation | container |
|
section | container |
|
form/colorpicker | No Coral’s ColorPicker at this point | |
form/decoratedtextfield | Too low level | |
form/inputgroup | Too low level | |
form/layouts/actionfield | actionfield |
|
form/option | Obsolete | |
form/radio | form/radiogroup |
Cannot have standalone radio anymore |
form/reset | button |
|
form/searchfield | form/textfield |
|
form/selector | form/buttongroup |
|
form/submit | button |
|
form/taglist | Too low level | |
form/wizard/* | wizard |
|
admin/layouts/* | Obsolete | |
admin/layouttoggle | Obsolete | |
admin/page | Obsolete | |
admin/toolbar | Obsolete | |
layouts/cardview | masonry |
|
layouts/container | Obsolete | |
layouts/content | Tied to Shell implementation | |
layouts/dialog | wizard |
|
layouts/collapsible | accordion |
|
layouts/columnview | columnview |
|
layouts/fit | Each container-like component may support maximized feature |
|
layouts/fixedcolumns | fixedcolumns |
|
layouts/list | list |
|
layouts/listview | table |
|
layouts/modal | dialog |
|
layouts/mode | mode/switcher |
|
layouts/form | form |
form only supports vertical/aligned styling. For default/edit mode use mode/form </libs/granite/ui/components/coral/foundation/mode/form>. |
layouts/popover | popover |
|
layouts/tabs | tabs |
|
layouts/well | well |