This week at Oracle Cloud World one of the key announcement was the release of the Redwood Design System resources to developers. You can now leverage the same templates, components, and patterns that we've been using internally at Oracle in your own applications.
Redwood is based on years of user research and implements a new design philosophy – you can learn more about the concepts guiding redwood at the new redwood.oracle.com site (which by the way is a Visual Builder based app). In this blog we focus on the basic steps you can take to leverage the Redwood resources we are offering when you develop your own applications.
Redwood in the Components Exchange
You'll find the Redwood templates and components in the Visual Builder component exchange. To learn more about each one of the components, simply click it and a full description and documentation for the components will appear on the right side. If you decide that you want to add this component to your app, simply click install.
The component then appears in the component palette in Visual Builder – ready to be dragged and added into your pages.
Building Steps
You usually start development by picking up a template for your page. Redwood offers several page templates. Pick the one matching your use case and drop it on your empty page. Then, set the template attributes to refine the way it looks and behaves. Ideally the person who is designing your user interface will already be familiar with the Redwood patterns, and might even use the Redwood toolkit for Figma to help them generate the designs. We have a special design for Redwood area on our site for the UI designers.
Some template are also available as complete patterns. A pattern will add additional variables, actions, and event listeners to your page to deliver a more complete solution that goes beyond the UI and extend to actions in your page. This would further accelerate the completion of the page since most of the underlying work is already done for you – just plug in your data objects and variable values.
Beyond full page templates, redwood also offers a wide range of lower level components that can be added into your application. Search the component exchange for "sp-" components and you'll see the likes of an input currency, rich text editor, metric cards, and many others.
In the demo video below we show you the basics of using a template (welcome page), a component (collection container) and and a pattern (create/edit template pattern). We hope this will serve as a good introduction to the way these and other components are used, and will help you accelerate the adoption of Redwood in your apps.
Got questions about developing with Redwood? We have dedicated forums for Redwood development and design where our expert can help – join us there.
You can also catch a replay of our office hours seminar about Redwood development with Visual Builder.