Applying Styles
While setting style properties directly on components certainly will work, there’s no semantic connection between the style and the purpose of the component. What’s more, if we decide later to change the style of the two Text components for the trip dates, we’ll have to apply identical changes to both.
APL documents support separation of style from the components that styles apply to. This is analogous to how Cascading Style Sheets (CSS) are used to separate style from HTML components in a webpage design. Unlike CSS, which can be defined in a completely separate file from the HTML it is applied to, APL styles are defined in the same APL document, but in a separate styles property.
We’ll apply styles in the “enjoy your trip” template by extracting properties that are explicitly set on the title and date Text components into a “titleText” style and a “datesText” style. These styles will be declared in the APL document under a styles property that is a peer of the mainTemplate property:
| | { "type": "APL", "version": "1.2", "theme": "dark", "mainTemplate": { ... }, "styles": { "titleText": { "values": [ { "fontWeight": "heavy", "fontSize": "48dp", "color": "yellow" } ] }, "datesText": { "values": [ { "color": "lightblue", "fontSize": "24dp" } ] } } } |
Now that the styles are defined, we just need to edit each component, removing the explicit properties and setting a style property that references one of the styles we’ve defined. The changes to the title and date Text components will look like this:
| | { "type": "Text", |
| » | "style": "titleText", |
| | "text": "Enjoy your trip to Jupiter" }, { "type": "Container", "width": "100vw", "height": "100%", "direction": "row", "items": [ { "type": "Container", "width": "60vw", "height": "100%", "items": [ { "type": "Text", "paddingTop": "12dp", |
| » | "style": "datesText", |
| | "text": "<b>Departing</b>: 2020-06-09" }, { "type": "Text", "paddingTop": "12dp", |
| » | "style": "datesText", |
| | "text": "<b>Returning</b>: 2020-06-12" } ] }, ... ] } |
The style property tells each of these components to adopt the properties defined by the corresponding entry we defined in styles. It’s important to notice, however, that not all properties are considered style properties, which is why paddingTop is still explicitly specified on the two Text components for the trip’s starting and ending dates.
Even so, it is unfortunate that we couldn’t capture the paddingTop property in the styles. It would be nice if there were some way to collect the values for those places in one place, separate from the components themselves, so that they can be easily found and edited in the APL document. Let’s have a look at how to define resources in an APL document to carry reusable values.