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 ...
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 ...
01/04/2026
January 4 2026, 18:00 (PST) DOLBY AND DOUYIN EMPOWER THE NEXT GENERATON OF CREATORS WITH DOLBY VISION
Douyin Users Can Now Create And Share Videos With Stun...
02/03/2026
NBC Sports selected Imaginary Forces to create the main title sequence for the M...
02/03/2026
The NFL announces the launch of the NFL Draft Innovation Challenge, a new crowds...
02/03/2026
The World Teleport Association (WTA) has named Skyline Communications' DataMiner SatOps solution as a finalist for the 2026 Teleport Technology of the Year ...
02/03/2026
Ventum Tech announces a strategic partnership with Pixotope, a real-time graphic...
02/03/2026
Victory , a free, ad-supported sports streaming service, announces the launch of...
02/03/2026
Global powerhouse Delta Goodrem to represent Australia at this year's Eurovi...
02/03/2026
SBS brings together prominent voices to discuss rising social division and seek ...
02/03/2026
NITV Unveils Wednesday Night Sport Night
Media releases
A Midweek Hub for Blak Sport
Flagship NRL program Over The Black Dot moves to Wednesdays at 9:30pm
...
02/03/2026
Rohde & Schwarz demonstrates FR1-FR3 carrier aggregation, advancing 6G readiness Rohde & Schwarz and Qualcomm Technologies, Inc. have reached another pivotal ...
02/03/2026
MELBOURNE, Fla., March 2, 2026 - L3Harris Technologies (NYSE: LHX) today announc...
02/03/2026
Harvey Norman tops New Zealand's biggest ad spenders as retail leads and telcos and beverages sure Auckland March 3, 2026 - Nielsen's New Zealand'...
02/03/2026
aconnic AG (ISIN: DE000A0LBKW6), Munich, and Arqit Quantum Inc. (Nasdaq: ARQQ, A...
02/03/2026
Advanced Systems Group, LLC (ASG), a technology and services provider for media creatives and content owners, has appointed Jody Boatwright as Chief Strategy Of...
02/03/2026
Lightware, an industry leader in signal management, is reinforcing its commitment to simplifying complex AV environments with the continued evolution of its TPN...
02/03/2026
ZEISS Cinema opens its doors to an exclusive screening, filmmakers Q&A and hands-on showcase of the new ZEISS Aatma lens family on Tuesday, March 10, 6:00-9:00 ...
02/03/2026
To expand the creative potential of the compact Astera QuikBeam, DoPchoice introduces the SNAPBAG Round. The new light-shaping accessory transforms the powerfu...
02/03/2026
Douglas Dubler
On a rooftop in New York City, veteran photographer Douglas Dubler watched the sun's angle shift across the urban landscape, his internal cl...
02/03/2026
ZEISS is expanding its Otus ML lens family with the introduction of the new ZEISS Otus ML 1.4/35. This manual-focus lens is designed for photographers who live ...
02/03/2026
Matthews Studio Equipment now offers the new Dinkum Systems White FlexiMount and Phone Mount Kit, a compact, highly adaptable setup for mobile content creation...
02/03/2026
Luxembourg, February 26, 2026 - SES and Africa Mobile Network (AMN) have expande...
02/03/2026
02 03 2026 - Media release Ausfilm and Screen Australia launch joint UK market initiative
Ausfilm and Screen Australia have announced Partner with Australia (...
02/03/2026
Monday 2 March 2026
Saturday Night Live UK announces writing team
L-R: Jonno Johnson; Charlie Skelton; Celya AB; Omar Badawy; Gr inne Maguire; Laura Claxton; ...
02/03/2026
Back to All News
Netflix Unveils the Trailer for 53 Sundays, the New Film by Cesc Gay
Entertainment
02 March 2026
GlobalSpain
Link copied to clipboard
Dis...
28/02/2026
With two features seen in Formula 1 coverage, the broadcaster aims to bring view...
28/02/2026
Secretary of War Pete Hegseth addresses a crowd of approximately 1,500 L3Harris employees in Camden, Arkansas, as part of his Arsenal of Freedom tour....
28/02/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/02/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/02/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/02/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/02/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/02/2026
Berklee Presents Mambo Mania: Eguie Castrillo and the Berklee All-Stars Big Band...
28/02/2026
Berklee Announces Two New Summer Programs in Los Angeles The Berklee Music Business Program and Electronic Music Production and Sound Design Workshop bring imme...
28/02/2026
AI-RAN is moving from lab to field, showing that a software-defined approach is ...
28/02/2026
Autonomous networks - intelligent, self-managing telecommunications operations -...
28/02/2026
Back to All News
Final Trailer for BEASTARS Final Season Part 2' Roars Tow...
28/02/2026
New way to intentionally discover molecular glues could expand drug discovery Scripps Research scientists and colleagues show how drugs that eliminate certain d...
27/02/2026
The E.W. Scripps Company names Oliver Gray as Vice President, Network Sports and...
27/02/2026
The Gotham Sports App, the exclusive direct-to-consumer streaming home of MSG Networks and the YES Network, is now available for purchase through Prime Video fo...
27/02/2026
ESPN and the Horizon League announce a new multi-year, multi-platform media rights agreement, continuing a 38-year collaboration that began with the 1988 Midwes...
27/02/2026
At the 2026 NAB Show in Las Vegas, NETGEAR will highlight its new switch models and major updates to its Engage Controller software. The company's network d...
27/02/2026
Riedel Communications announces that Fondazione Teatro alla Scala has deployed a...
27/02/2026
Lyuno specializes in media localization, including translation, dubbing, subtitling, and voice-over services for a wide array of entertainment content. The comp...
27/02/2026
Chyron Weather 2.3, the latest edition of Chyron's weather visualization suite for broadcasters and meteorologists, recently launched.
The release includes...
27/02/2026
Telestream, which concentrates in media workflow technologies, announces expanded practical AI enhancements across its Vantage, Vantage Cloud, EDC, Stanza, and ...
25 May, 2022
