{"id":3857,"date":"2020-03-26T13:32:43","date_gmt":"2020-03-26T13:32:43","guid":{"rendered":"https:\/\/sandbox.weareadaptive.com\/?p=3857\/"},"modified":"2020-11-18T14:51:18","modified_gmt":"2020-11-18T14:51:18","slug":"showcasing-new-openfin-platform-api-reactive-trader","status":"publish","type":"post","link":"https:\/\/sandbox.weareadaptive.com\/fr\/2020\/03\/26\/showcasing-new-openfin-platform-api-reactive-trader\/","title":{"rendered":"Showcasing the new OpenFin Platform API with Reactive Trader\u00ae<\/sup>"},"content":{"rendered":"

Reactive Trader\u00ae<\/sup><\/span><\/a>\u00a0is our real-time, fully open-source showcase FX trading platform. We recently integrated it with <\/span>OpenFin Desktop<\/span><\/a> (formerly OpenFin Cloud Services – you can take a look at our blog post <\/span>here<\/span><\/a> to learn more). We\u2019re now excited to announce that Reactive Trader\u00ae<\/sup> has implemented the new <\/span>OpenFin Platform API<\/span><\/a>!\u00a0<\/span><\/p>\n

\"\"<\/p>\n

 <\/p>\n

What\u2019s New?<\/span><\/h4>\n

The OpenFin Platform API is now available in OpenFin runtime 14+, and represents a significant upgrade to the Layouts 1.0 Service. In this article, we\u2019ll describe what features are available in this new release, and then give you an overview of how we upgraded our showcase application, Reactive Trader\u00ae<\/sup>, to take advantage of them.<\/p>\n

Snapshots in the Platform API<\/span><\/h3>\n

With the new Platform API, the layouts service is completely integrated into the runtime, and available under the platform namespace. It now supports tabbed views, grid views, and even separate window configurations for greater UI flexibility. Since the layout service was an integral part of the OpenFin ecosystem, having it integrated directly into the API will accelerate development and ensure greater compatibility and stability in your OpenFin applications.<\/p>\n

To replace workspaces, the Platform API introduces a new concept called snapshots<\/span><\/strong>. Each time you save a snapshot, you\u2019re saving your desktop state with child window information, layout and view positioning, and custom application state. For layouts, the Platform API offers similar functionality, but it now composes the desktop experience into views.<\/p>\n

As you can see below, the Platform API now allows you to easily preconfigure a set of snapshots which you can then apply to desktops across your organization at the click of a button.<\/p>\n

\"\"<\/p>\n

You can think of a view as a micro-frontend inside a container window; it allows you to have several views enclosed within a single window, and each view can store its relevant app state in the saved snapshot. If you\u2019re used to the previous Layouts 1.0 service, you could also think of the platform as a replacement for startup_app<\/span><\/span>.\u00a0<\/span><\/p>\n

Our platform configuration for Reactive Trader\u00ae<\/sup>, for example, looks like this:<\/span><\/p>\n

"platform": {\r\n\u00a0 \u00a0 "uuid": "reactive-trader-cloud-platform-demo",\r\n\u00a0 \u00a0 "applicationIcon": "https:\/\/web-openfin.adaptivecluster.com\/static\/media\/icon.ico",\r\n\u00a0 \u00a0 "url": "https:\/\/web-openfin.adaptivecluster.com",\r\n\u00a0 \u00a0 "defaultWindowOptions": {\r\n\u00a0 \u00a0 \u00a0 \u00a0 "contextMenu": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "frame": false,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "url": "https:\/\/web-openfin.adaptivecluster.com\/openfin-window-frame"\r\n\u00a0 \u00a0 }\r\n}<\/pre>\n
 <\/p>\n
Custom Stylesheets and Window Frames<\/span><\/h3>\n
Another exciting change is the ability to add custom stylesheets, and even to customize your entire window frame. While the layouts 1.0 service gave you the ability to customize the tab strip, having the ability to customize the window frame was always a top-rated feature request. Now, each view that you move out of the main platform window can be customized with your own styles and functionality.<\/p>\n
\"\"<\/p>\n
Before the Platform API, developing a custom window frame was achievable, but difficult. Now, you can include your own window frame customization with great ease, allowing you to build in the specific functionality you need. For Reactive Trader\u00ae<\/sup>, we used a React component to build our own window frame – but you could use plain HTML, JavaScript, or the frontend framework of your choice. You can also include your own styles, icons, and added logic to give your OpenFin applications the desktop experience your users have come to expect.<\/p>\n
 <\/p>\n
Platform Configuration<\/span><\/h4>\n
If you\u2019re already familiar with the OpenFin manifest file, you\u2019ll find many of the same options available in the Platform configuration. You can still configure window options, but now you can configure view options as well. The window options have been moved into the snapshot configuration found under the Platform settings. As an example, you can find our window options for Reactive Trader\u00ae<\/sup> views below.<\/p>\n
\u00a0 "snapshot": {\r\n\u00a0 \u00a0 "windows": [\r\n\u00a0 \u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 "autoShow": true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"defaultCentered": false,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "defaultHeight": 893,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "defaultLeft": 4,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"defaultTop": 10,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "defaultWidth": 801,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "minHeight": 600,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "defaultCentered": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "resizable": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "maximizable": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "minimizable": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "saveWindowState": false,\r\n\u00a0 \u00a0 \u00a0 \u00a0 "frame": false,\r\n\u00a0 \u00a0 \u00a0 \u00a0 ...\r\n\u00a0 \u00a0 \u00a0 \u00a0 "layout": {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 "content": [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"height": 801,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"isClosable": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 "reorderEnabled": true,\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 "type": "stack",\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 ...<\/pre>\n
One last bonus – while you can of course hand-roll the configuration needed for the Platform API, OpenFin provides a <\/span>handy configuration tool<\/span><\/a> to generate a template Platform configuration. This is particularly useful if you want to migrate to or experiment with the new Platform API.<\/span><\/p>\n
 <\/p>\n
What\u2019s coming next?<\/span><\/h4>\n
We\u2019re looking forward to even more exciting changes to the new Platform API from the OpenFin team, and we\u2019ll be integrating them into Reactive Trader\u00ae<\/sup> as and when they\u2019re released. The roadmap currently includes platform events, hotkey support, platform-defined dialogs and menus, as well as improved <\/span>FDC3<\/span><\/a> support.<\/span><\/p>\n
 <\/p>\n
Want to know more?<\/span><\/h4>\n
You can learn more about the OpenFin Platform API in this <\/span>45 minute video<\/span><\/a>, featuring our Head of Desktop Strategy, <\/span>Riko Eksteen<\/span><\/a>. In the video, Riko demonstrates the new features in action using Reactive Trader\u00ae<\/sup>. There\u2019s an extensive Q & A included, but please feel free to reach out to <\/span>Riko<\/span><\/a> or myself with any other questions you might have.<\/span><\/p>\n
 <\/p>\n
Keep in touch<\/span><\/h4>\n
Thanks for taking the time to learn about Reactive Trader\u00ae<\/sup>, and the new OpenFin Platform API. To try out Reactive Trader\u00ae<\/sup> yourself, navigate to our installer <\/span>here<\/span><\/a> (for those of you using a Mac, you can use <\/span>this link<\/span><\/a>). You can also check out the code – and even contribute yourself – at our <\/span>Github repository<\/span><\/a>.\u00a0<\/span><\/p>\n
At Adaptive we\u2019re always keen to keep Reactive Trader\u00ae<\/sup> Cloud updated with the latest desktop platform technologies, and we\u2019d love to hear your comments and ideas. Feel free to get in touch at <\/span>info@weareadaptive.com<\/span><\/a>.<\/span>
\n<\/span><\/p>\n
 <\/p>\n
Author:<\/strong><\/h2>\n
\"Profile<\/h3>\n
Ben Spencer<\/strong><\/h2>\n
Senior Web Applications Developer, Adaptive Financial Consulting Ltd<\/p>\n
Contact us<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Reactive Trader\u00ae\u00a0is our real-time, fully open-source showcase FX trading platform. We recently integrated it with OpenFin Desktop (formerly OpenFin Cloud …<\/p>\n","protected":false},"author":24,"featured_media":3861,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,242,135,245,139],"tags":[221,244],"class_list":["post-3857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-desktop-strategy","category-reactive-web-development","category-showcase","category-software-development-management-processes","tag-adaptive-reactive-trader","tag-showcase"],"_links":{"self":[{"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/posts\/3857"}],"collection":[{"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/comments?post=3857"}],"version-history":[{"count":3,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/posts\/3857\/revisions"}],"predecessor-version":[{"id":5503,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/posts\/3857\/revisions\/5503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/media\/3861"}],"wp:attachment":[{"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/media?parent=3857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/categories?post=3857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandbox.weareadaptive.com\/fr\/wp-json\/wp\/v2\/tags?post=3857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}