The purpose of this feature, is to allow the user to create and use his own set of stylized cells using the "Cell Style Builder" and plugins of type
cell_builder, in the layout level. This plugin type is comprised of two parts:
- The configuration in the manifest, which exposes the configurable parts of the cell.
- The implementation in the client side for drawing the cell (in react-native / react-native-web).
- [x] tvOS
- [x] Samsung TV / DOM
- [ ] Android TV
- There is a plan to extend the support also to mobile platforms
UI Builder Configuration
1) Add Layout: Select "TV" target and "Cell Style Builder" framework.
2) Organize UI Components: This stage is indentical to the "Cell Styles Family" framework - create screens and fill them with UI components.
3) Cell Styles Tab: Click on the "CELL STYLES" tab, and click on "New Cell Style" button at the bottom-left corner
4) Add Cell Builder Plugin: Select the default cell builder plugin, or any other plugin of type
cell_builder which is available for this app. The plugin will be added to all the relevant app versions in the respective platforms
Note: The created cell styles are scoped to a particular layout, and are not interchangeable between layouts
5) Edit Created Cell Style: Each cell style created in this tab can be configured via the configuration panel on the right. The capabilities of each
cell_builder plugin will be reflected in the fields that can be manipulated.
Here is a basic example:
- A cell with fixed, pre-determined design in terms of ratio, text & and image positioning, and a configurable background color for two states - "default" and "focused":
6) Edit Name & Description: It is recommended to give each cell style a proper name and description, via the "EDIT INFO" dropdown. This will help a great deal when assigning a cell style to a UI component in the next step.
7) Assign Cell Style to UI Component: Switch to the "SCREENS" tab select a UI component.A "Cell Styles" button will appear in under the "STYLES" section in the configuration panel. Click on it and the select the desired cell style that was created in the previous steps. As you can see, having proper name and description for each cell style is quite helpful here. Clicking on the "Manage My Cell Styles" section in the modal will redirect you back to the "CELL STYLES" tab.
8) Save & Build: Don't forget to save frequently. Each change in the cell styles builder, including creation or assignment, requires re-triggering a build of the app version using this particular layout.