25 May, 2022
Blog
By Anders Svensson
In our previous article Par1 of this series, we presented the Agama AWE SDK, the requirements needed to create a simple application to provide real use for Agama customers and the configuration of the project.
In the second part of the series, we're diving into how to create the layout and styling, and also elaborate on the application logic.
We have created a boilerplate application and defined the configuration parameters that shall be possible for the users to adapt. It is now time to start creating the actual functionality of the application. An important part of that is the actual layout and structure of the presentation, which for these applications is controlled by standard HTML, CSS, and JavaScript. In the application index.html below, we have modified the boilerplate HTML structure and instead defined a set of div:s used as placeholders for the configured test name and a div for the status indicator.
The ADE will automatically update the UI while editing and saving HTML so the structural changes will be shown immediately. The result is not interesting right now as we have not yet populated the div:s with any content and styling, so the result is still just an empty screen.
The Application logic To start populating the application with the configured content, test logic and the test status results, we need to start adding JavaScript code.
The main application entry point that is called by the Agama application framework is the onUpdate function. This function has two parameters, state and reason. The state parameter is an object that contains the configuration of the application. So, all the parameters that we defined in the JSON returned in the onConfiguration function, will be available in this object. The reason parameter is an integer stating why the function is being called; it allows us to implement different handling and behavior depending on this. In our application we must handle the create and configuration change reason. In the code above one can see how easily and obviously we can access and use the different configuration parameters that we have defined.
The program logic needed to implement the functionality is quite simple. When the application is created, we set up a timer that ensures that our test function update() is called at the user configured interval. The update() function in turn calls the defined REST API and checks the result codes against the configured, and depending on the result adding either a fail or ok CSS class to the status div.
The current result is now as above. We can now see the defined test name, in this case VoD system (which is the name we configured) but we do not see any status symbol. That is correct and it is because we have not yet added the styling for the status div.
Styling Adding CSS styling for the application is the last step in getting the applications appearance and functionality in-place. We use the automatically created file css/style.css and add the following.
It is here where we define the fail to indicate with an orange background, and ok to indicate with a green background.
Yes, now it looks more promising!
Most recent headlines
05/01/2027
Worlds first 802.15.4ab-UWB chip verified by Calterah and Rohde & Schwarz to be ...
07/10/2026
Dalet, a leading technology and service provider for media-rich organizations, today announced the latest Long-Term Supported (LTS) release of Dalet Flex. Build...
06/09/2026
June 9 2026, 23:00 (PDT) Dolby and MagentaTV Bring Fans Closer to the FIFA Worl...
19/08/2026
World Cup Games Generate 84 Billion Minutes Across FOX, Fox Sports 1 and NBCU...
19/08/2026
July brought typical peak-holiday drops in viewership, driven primarily by viewers stepping away from screens and a visible decline in reach across both traditi...
19/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
19/08/2026
Henry joins BCE as the company accelerates its commercial strategy and expands its international presence across the media, broadcast and technology markets. He...
19/08/2026
iWedia, a leading provider of software solutions for connected TV devices, today announced a major milestone in Android platform optimization with the successfu...
19/08/2026
NTP Technology announces that ST 2110-30 audio-over-IP connectivity with AES67 and RAVENNA capabilities is now available for the brand's world-class audio i...
19/08/2026
Net Insight has been selected to provide its Nimbra platform by the service provider Big Blue Marble, formerly ORS Group, as the core media transport solution f...
19/08/2026
LiveU has supported Coventry City FC and several other top-flight UK football clubs through one of their most demanding live production challenges of the year, ...
19/08/2026
Nature Seekers Documentary Shot with Blackmagic URSA Cine 12K LF
Brie Clayton August 18, 2026
0 Comments
Filming endangered turtles required camera...
19/08/2026
Neyrinck Brings D-Control Consoles Back to Life on Apple Silicon with D-Control ...
19/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
19/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
19/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
19/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
19/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
19/08/2026
Riedel Communications today announced that Edith Cowan University (ECU) in Perth, Australia, implemented a comprehensive communications infrastructure that brin...
19/08/2026
QuickLink, a leading provider of award-winning video production and remote guest contribution solutions, will spotlight a major leap forward in remote guest con...
19/08/2026
Integrated platform melds media asset management, playout automation and newsroom workflows
EMAM, PlayBox Neo and SNEWS have officially launched Nuvex, a conne...
19/08/2026
Screen Australia releases the Private Investment Toolkit to strengthen screen in...
19/08/2026
Do Aussies truly value local content? Unpacking Screen Currency 2026 with Deirdr...
19/08/2026
On Saturday September 5 Katie Taylor will step into the ring for the fight of her life against Flora Pili in front of 80,000 fans in Croke Park. A legendary fig...
18/08/2026
SportStream 2026, a free three-day virtual event, will take place September 15-17. One registration provides access to all three days of live programming and on...
18/08/2026
BeckTV will introduce BeckFlow to the European market at IBC2026, demonstrated on the Providius stand (10.F53).
BeckFlow is a web-based schematic documentation...
18/08/2026
Boland Communications will introduce a SMPTE ST 2110 input option for its 4K monitors at IBC2026, along with a new 55-inch super-narrow bezel display for video ...
18/08/2026
Dolby Laboratories and the Seattle Seahawks have announced a partnership integrating Dolby OptiView into the Seahawks' live streaming coverage, making the S...
18/08/2026
For BMG Executive Producer of Sports Production, Graham Taylor, producing live s...
18/08/2026
TMRW Sports has appointed Rufus Hack as President of Golf, a newly created role in which he will lead the company's golf businesses including TGL presented ...
18/08/2026
SMT will provide race technology for FOX Sports' coverage of the Freedom 250 Grand Prix of Washington, D.C. on August 23, when the NTT INDYCAR SERIES races ...
18/08/2026
The live, YouTube-native roundtables combine fan voices, credentialed reporters,...
18/08/2026
Behind The Mic provides a roundup of recent news regarding on-air talent, includ...
18/08/2026
The industry legend sounds off on replacing the Heat's iconic Medusa score...
18/08/2026
William F. Rasmussen, the sports fan-turned broadcaster and entrepreneur whose out-of-the-box idea of a 24-hour cable sports network, ESPN, changed forever the ...
18/08/2026
DAZN Group has completed its acquisition of ViewLift, a provider of streaming and digital solutions for sports content owners. The acquisition was first announc...
18/08/2026
The American Association of Professional Baseball (AAPB) has added SI TV, Sports Illustrated's 24/7 streaming channel, as a broadcast partner for the remain...
18/08/2026
The Esports Foundation has announced that the inaugural Esports Nations Cup (ENC), originally scheduled for November 2026 in Riyadh, will be postponed to Novemb...
18/08/2026
Diversified has announced a new Global Managed Services Practice, consolidating the company's managed services capabilities into one organization. Rob Mello...
18/08/2026
Appear has completed a proof of concept with Thoroughbred Racing Productions (TRP), demonstrating multi-camera remote live production over bonded 5G cellular an...
18/08/2026
Riedel Communications has announced that Edith Cowan University (ECU) in Perth, ...
18/08/2026
Company launch with stereo-imaging tool
Panoramic is the debut release from Panorama Labs, a new company formed by mastering engineer Nicholas Di Lorenzo. C...
18/08/2026
Control software now available for older interfaces
Focusrite have just announced the launch of an update that extends Control 2 software support their Scar...
18/08/2026
The National Film and Video Foundation (NFVF), an agency of the Department of Sp...
18/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
18/08/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
18/08/2026
Lightware announces an integration with SpectralBot that helps system integrators and AV operators troubleshoot faster using augmented reality (AR), AI-assisted...
18/08/2026
Command Frame for After Effects
Scott Black August 18, 2026
0 Comments
Free download, demonstrations, hands-on tests, and creator resources
Want to t...
18/08/2026
At Stand 14.A57, the data company will demonstrate GreenDot and IBM Aspera together, giving media and entertainment businesses real-time visibility of what thei...
25 May, 2022
