Download as PDF, PPTX
![Presentation title here
Data
How can I pass data from Controller?
context[“data”][“title”]
|_____ ______|
/
shortcut](https://image.slidesharecdn.com/orowebinarusinglayouts-160720155248/85/Using-Oro-layouts-46-320.jpg)
![Presentation title here
Data
U can’t use context[“data”] in layout updates
because
Layout tree can't depend on data(basic principle)
Use data instead](https://image.slidesharecdn.com/orowebinarusinglayouts-160720155248/85/Using-Oro-layouts-47-320.jpg)
Uploaded byAndrew Yatsenko
Using Oro layouts
This document discusses layouts in presentations. It describes layout as defining the visual structure of the UI as a tree hierarchy of page blocks. It covers block types, layout builders, themes, contexts, data providers, and other topics for working with layouts.
More Related Content
Using Oro layouts
- 1.
- 2. Presentation title here Layouts Inthis presentation ● Block Types ● Layout Builder ● Block Themes ● Context ● Controllers and Context Configurators ● Data and Data Providers ● Theme specific configurations and assets
- 3. Presentation title here Layouts Whatis layout? ● Layout defines the visual structure of the UI ● Layout is the tree hierarchy of page blocks ● Layout tree shouldn’t depend on data
- 4. Presentation title here Layouts Treestructure ❏ root ❏ header ❏ body ❏ sidebar ❏ main content ❏ footer Each of these blocks have children in the final structure
- 5. Presentation title here LayoutComponent Provides tools for defining layout elements, managing structure and themes
- 6. Presentation title here LayoutComponent Block ❏ id ❏ parent id ❏ block type ❏ options Block Types ● Container - have children ● Final Block - doesn’t have children
- 7. Presentation title here LayoutComponent Default block types: ● root <html> ● head <head> ● title <title> ● meta <meta> ● style <style> ● script <script> ● body <body> ● form <form> ● fieldset <fieldset> ● link <a> ● list <ul> ● ordered_list <ol> ● text simple text ● input <input> ● etc.
- 8. Presentation title here BlockTypeInterface Blocktypes implements BlockTypeInterface
- 9. Presentation title here BlockType example
- 10. Presentation title here DI Blocktypes should be registered in container
- 11. Presentation title here DI Blocktypes can be defined in DI only
- 12. Presentation title here LayoutTree ❏ Difines block structure of the page ❏ Can be build using LayoutBuilder
- 13.
- 14. Presentation title here LayoutBuilder Buildtree using Layout Builder Tree: ❏ root ❏ header ❏ body ❏ sidebar ❏ main content ❏ footer
- 15. Presentation title here LayoutBuilder Wecan use Yaml to configure LayoutBuilder PHP: Yaml:
- 16. Presentation title here LayoutBuilder Wecan use Yaml to configure LayoutBuilder Yaml: Yaml (alternate syntax):
- 17. Presentation title here Updatetree We can update tree using a lot of actions from different places ❏ add ❏ remove ❏ move ❏ addAlias ❏ removeAlias ❏ setOption ❏ appendOption ❏ substractOption ❏ replaceOption ❏ removeOption ❏ addTree
- 18.
- 19.
- 20. Presentation title here Theming Twigtemplates for blocks:
- 21. Presentation title here Theming Twigblocks naming conventions Block type template name: ❏ {block_type_name}_widget ❏ For text block type - text_widget Block template name: ❏ _{block_id}_widget ❏ For page_title block - _page_title_widget
- 22. Presentation title here Theming Toapply templates to layout blocks use actions: @setBlockTheme: themes: “theme.html.twig”
- 23. Presentation title here Theming Treeof blocks + Twig template = HTML
- 24. Presentation title here Glossary ❏Block ❏ contains id, type, parent id and options ❏ Block Type ❏ block, container etc. ❏ Layout Update ❏ php or yml, uses LayoutBuilder to build tree ❏ Actions ❏ @add, @move, @remove, @setBlockThemes etc.
- 25. Presentation title here LayoutBundle Integrate Layout with Symfony
- 26. Presentation title here Layoutthemes placement ❏ DemoBundle ❏ Resources ❏ views ❏ layouts ❏ theme_name ❏ second_theme_name
- 27. Presentation title here Context Identifypage layout
- 28. Presentation title here SameContext = Same Tree Structure
- 29. Presentation title here InContext we have ❏ Theme name ❏ Route name ❏ etc. We can pass extra vars to Context from Controller
- 30. Presentation title here @Layoutcontroller example
- 31. Presentation title here Context Wegather layout updates (aka YAML files) based on Context vars
- 32. Presentation title here Context ❏DemoBundle ❏ Resources ❏ views ❏ layouts ❏ theme_name ❏ update1.yml ❏ update2.yml ❏ update2.yml Context::theme
- 33. Presentation title here Context ❏DemoBundle ❏ Resources ❏ views ❏ layouts ❏ theme_name ❏ ... ❏ route_name ❏ update1.yml ❏ update2.yml Context::route_name
- 34. Presentation title here Context ❏DemoBundle ❏ Resources ❏ views ❏ layouts ❏ theme_name ❏ ... ❏ route_name ❏ widget_container ❏ update1.yml Context::widget_container
- 35. Presentation title here Contextconditions We can execute specific updates based on context using layout update conditions
- 36.
- 37. Presentation title here ExtendingContext We can add vars to context globally using ContextConfigurators ❏ global ❏ controller independent
- 38. Presentation title here ContextConfigurator example
- 39. Presentation title here DI Ditags for context configurators example
- 40. Presentation title here UseContext in Layout updates We can use Context vars in layout updates
- 41. Presentation title here UseContext in Layout updates We can use Context vars in layout updates But title is the data
- 42. Presentation title here LayoutBundle Structure can't rely on data - basic principle We need something new
- 43.
- 44.
- 45. Presentation title here Data Howcan I pass data from Controller?
- 46. Presentation title here Data Howcan I pass data from Controller? context[“data”][“title”] |_____ ______| / shortcut
- 47. Presentation title here Data Ucan’t use context[“data”] in layout updates because Layout tree can't depend on data(basic principle) Use data instead
- 48. Presentation title here Data conditionsaffects tree, block options - no (even visible option)
- 49. Presentation title here Data conditionsaffects tree, block options - no (even visible option) so context accessible in conditions and options, but data accessible only in options
- 50. Presentation title here Data Ok,I can pass data from Controller, but I have request independent data For example Category list
- 51. Presentation title here DataProviders
- 52.
- 53.
- 54.
- 55.
- 56. Presentation title here Nameconventions All layout related classes should be placed in Layout directory (similar to Forms), for example: ❏ data provider ❏ in Layout/DataProvider directory: Layout/DataProvider/MyCustomProvider.php ❏ block type ❏ in Layout/Block/Type directory: Layout/Block/Type/MyCustomType.php ❏ context configurator ❏ in Layout/ContextConfigurator/ directory: Layout/ContextConfigurator/MyCustomContextConfigurator.php ❏ block extensions ❏ in Layout/Block/Extension/ directory: Layout/Block/Extension/MyCustomBlockExtension.php
- 57. Presentation title here Thememetadata theme.yml
- 58. Presentation title here Thememetadata ❏ DemoBundle ❏ Resources ❏ views ❏ layouts ❏ theme_name ❏ theme.yml
- 59. Presentation title here Themespecific configs Can be stored in theme.yml and in separate files ❏ Imagine config ❏ Assetic config ❏ RequireJS config ❏ Datagrid.yml - in progress ❏ etc.
- 60. Presentation title here Links LayoutBundledocumentation ● https://github. com/laboro/dev/tree/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc Layout component documentation ● https://github. com/laboro/dev/blob/master/package/platform/src/Oro/Component/Layout/README.md Working with Forms ● https://github. com/laboro/dev/blob/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc/e xample.md#working-with-forms Iteration over data ● https://github. com/laboro/dev/blob/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc/e xample.md#iteration-over-data
- 61.