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...
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...
28/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Bluesky
Email...
28/01/2026
28 01 2026 - Media release Screen Australia refreshes Market & Audience approach...
28/01/2026
Boston Conservatory Orchestra Premieres a New Piano Concerto by Peter and Leonar...
27/01/2026
Click for Japanese version
Tokyo, Japan - January 27, 2026 - Akamai Technolo...
27/01/2026
L-R: Jonathan Cuchacovich, Sonia Kennebeck, Alan Fischer, Daeil Kim, Andrew Sta...
27/01/2026
Today, Spotify is proud to support our partner Backline, an industry-leading men...
27/01/2026
With nearly 29 million monthly listeners and clear momentum on Spotify, Net n Ve...
27/01/2026
January 14, 2026
We are proud to share that 25 Ontario, First Gulf's commercial project located just two minutes from our head office, has been recognized ...
27/01/2026
January 22, 2026
First Gulf is excited to share that a full-building lease has been secured at 625 Bronte Rd in Oakville, part of Bronte Station Business Park,...
27/01/2026
January 23, 2026
First Gulf continues to demonstrate its commitment to high-performance, sustainable real estate with 351 King Street East achieving BOMA BEST ...
27/01/2026
eds3_5_jq(document).ready(function($) { $(#eds_sliderM519).chameleonSlider_2_1({ content_source:......
27/01/2026
Nielsen will continue to drive growth and provide local audience measurement
in...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
Amagi Media Labs Limited, the only cloud-native SaaS provider offering end-to-end solutions across live production, content preparation, distribution, and monet...
27/01/2026
Miri Technologies Inc. today unveiled its V410 live 4K video encoder/decoder for streaming, IP-based production workflows and AV-over-IP distribution. Designed ...
27/01/2026
The Paul E. Tsongas Center at UMass Lowell in Massachusetts has chosen Ikegami cameras for incorporation into its broadcast-quality television production facili...
27/01/2026
SipRadius, specialists in secure, low latency media transport, will show the pro AV community its end-to-end solution for high quality content distribution and ...
27/01/2026
Hiltron will highlight the fruits of its 45-plus years of experience in satellite communications system integration and product development at the annual GovSat...
27/01/2026
Klvr will demonstrate how its Charger Pro solution is delivering cost reduction and performance benefits for live entertainment and pro AV markets at ISE 2026 (...
27/01/2026
Amino, a global media technology leader in enterprise video and digital signage, today announced that its Integrated Systems Europe (ISE) 2026 booth (4N700) wil...
27/01/2026
ANI, India's leading news agency and a major content provider across the Asia Pacific region, today announced a significant expansion of its long standing p...
27/01/2026
Independent analysis confirms faster encoding, lower CPU usage, and improved perceptual quality compared to CBR and CRF
VisualOn, a leader in multimedia playba...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
27/01/2026
New agreement for uninterrupted UHF connectivity for Australian Defence Force through 2033, With Options Extending to 2041
Luxembourg, January 13, 2026 - Satel...
27/01/2026
Tuesday 27 January 2026
SNL UK creative team expands as Pauli Lovejoy, Annie Ha...
27/01/2026
Back to All News
When It Feels Real, Is It Still a Lie? The Art of Sarah' ...
27/01/2026
Back to All News
That Night premiering on Netflix March 13
Entertainment
27 January 2026
GlobalSpain
Link copied to clipboard
DOWNLOAD THE KEY ART
DOWNLO...
27/01/2026
Back to All News
Netflix Revealed the Future of Mexican Stories Coming in 2026
Entertainment
27 January 2026
GlobalMexico
Link copied to clipboard
Among t...
27/01/2026
Back to All News
Four New Japan Titles Announced for 2026: Viral Hit', On...
27/01/2026
Back to All News
What's Next on Netflix from Japan: Expanding the Possibili...
27/01/2026
AI, graphics and virtual software power new production capabilities...
27/01/2026
RT Supporting the Arts is delighted to support a dynamic programme of cultural events taking place across Ireland this February. From visual art, film, music, ...
26/01/2026
Music videos play a huge part in how fans connect with their favorite songs, but...
26/01/2026
NAIDOC launches 2026 theme 50 Years of Deadly , marks major milestone
25 January, 2026
Media releases
The National NAIDOC Committee has today unveiled its...
26/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
26/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
26/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
26/01/2026
Share Share by:
Copy link
Facebook
X
Linkedin
Pinterest
Bluesky
Email...
25 May, 2022
