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 ...
04/08/2026
Dalet, a leading technology and service provider for media-rich organizations, t...
04/07/2026
April 7 2026, 19:00 (PDT) Detective Conan: Fallen Angel of the Highway Opens in...
01/06/2026
January 6 2026, 05:30 (PST) Dolby Sets the New Standard for Premium Entertainment at CES 2026
Throughout the week, Dolby brings to life the latest innovatio...
02/05/2026
Dalet, a leading technology and service provider for media-rich organizations, t...
01/05/2026
January 5 2026, 18:30 (PST) NBCUniversal's Peacock to Be First Streamer to ...
21/04/2026
Cloud-based production isnt going anywhere, and BitFire is doubling down by prov...
21/04/2026
The topic of artificial intelligence has a stranglehold on the sports-video-prod...
21/04/2026
5G is still a hot topic in live event production, and this workflow continues to...
21/04/2026
At the 2026 NAB Show, Ed McGivern, GM and President of Appear US, discusses the ...
21/04/2026
Studio Network Solutions (SNS) has announced an on-premise AI suite designed for...
21/04/2026
Suite Studios has integrated its file-streaming technology into the newly announced Frame.io Drive, a desktop application from Adobe company Frame.io. The colla...
21/04/2026
Net Insight has integrated InSync Technology's FrameFormer into the Nimbra E...
21/04/2026
Fox Sports has selected Appear as a technology partner to support the next phase...
21/04/2026
Diversified has appointed Tyler Affolter as Chief Revenue Officer (CRO) to lead the company's commercial organisation. The appointment follows the firm'...
21/04/2026
Layercake has formalised the integration of Bitmovin's video streaming infra...
21/04/2026
The International Judo Federation (IJF) has extended its distribution partnershi...
21/04/2026
Glookast has launched the Cinnafilm Tachyon plugin for its Media Producer and Me...
21/04/2026
Eutelsat has entered into an agreement with Cadena Tres, a division of Grupo Ima...
21/04/2026
Dolby Laboratories and TV Azteca have partnered to introduce Dolby Atmos immersive audio to free-to-air television broadcasts. The implementation utilises the A...
21/04/2026
FOX Entertainment partnered with Verizon to overcome significant production hurd...
21/04/2026
Osprey Video has announced its technology showcase for the NAB Show 2026, highli...
21/04/2026
Riedel Communications (Booth C4908) introduced a range of new solutions at NAB S...
21/04/2026
The NAB Show is in full swing, and the SVG and SVG Europe editorial teams are chasing down the hottest stories from all over the Las Vegas Convention Center. He...
21/04/2026
Blackmagic Design has announced the URSA Cine Immersive 100G, an immersive cinem...
21/04/2026
Clark Wire & Cable is continuing its evolution from cable supplier to full-scale solutions partner for broadcast and live production. At the 2026 NAB Show, we s...
21/04/2026
Rashad Frett attends the 2025 Sundance Film Festival premiere of Ricky at Eccles Theatre on January 24, 2025, in Park City, UT. (Photo by George Pimentel/Shut...
21/04/2026
Five years ago, Spotify arrived in Pakistan, opening a new chapter in the country's music scene. Since then, local listeners have explored across genres, ge...
21/04/2026
Since its launch in 2020, RADAR has been our program for spotlighting emerging artists around the world. This year marks the sixth edition of RADAR Spain, our o...
21/04/2026
Offers compact wireless solution for pedalboards
Taiwanese audio brand Cloudvocal have announced the availability of a new pedalboard-friendly wireless syst...
21/04/2026
Latest hybrid sampling/synthesis instrument arrives
Arturia's Augmented series offerings rely on a mixture of sampling and synthesis, allowing users to ...
21/04/2026
Rohde & Schwarz to host Power Electronics Online Conference From Design to Vali...
21/04/2026
MAS and Lockheed Martin partner to establish an F-35 depot in Canada, enabling in-country sustainment and creating high-skilled aerospace jobs....
21/04/2026
Advertising strategies shift as competition grows for a large, active and qualit...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
21/04/2026
Layercake Deepens Bitmovin Integration to Power End-to-End Media Orchestration w...
21/04/2026
Cobalt Digital Announces Launch of blueCORE at NAB Show 2026: Compact Powerhouse...
21/04/2026
On-Premise AI Suite from Studio Network Solutions Debuts at NAB Show 2026
Melanie Ciotti April 21, 2026
0 Comments
Unlimited processing, no cloud depe...
21/04/2026
London, 21 April 2026 IBC today announced the appointment of Tim Banham as its first Chief Commercial Officer (CCO), a newly created role that reflects the or...
21/04/2026
Motion Design Tools - April 2026
Roland Kahlenberg April 21, 2026
0 Comments
Within 2 days, Maxon and Canva announced pro-level motion design apps - A...
21/04/2026
Chaos and Zero Density to Showcase Real-Time Ray Tracing for Virtual Studios and...
21/04/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
25 May, 2022
