Frequently asked questions

Archive filtered by UI Elements

To remove filter keyword, click on it's name above.

GENERALQ: What are UI Elements?

A: User Interface Elements are independent elements like check boxes, buttons, popups and such. We extracted some of those elements, which we call "UI Elements", can be found in several sample application filed in the IDE's chapters. Of course, there are also examples of how to assemble them.

 

M30Q: How do I combine a navigation and a video canvas?

A: Chapter V - Part 5 will show you how to combine the navigation and the video canvas, in order to get a simple app that plays videos from a list.

Filter: ABOX42 Showcases M30

M30Q: How do I create a navigation bar using the grid?

A: You can find a simple instruction on how to create a navigation bar using the grid in Chapter V - Part 4.

Filter: ABOX42 Showcases M30

M30Q: How do I show a player control bar when switching to fullscreen mode?

A: In case you need the player control bar to show up in fullscreen mode as well, take a look at Chapter V - Part 3 to see how this can be accomplished.

Filter: ABOX42 Showcases M30

M30Q: How do I add a player control bar to the video canvas?

A: How to add a player control bar to your video canvas is explained in Chapter V - Part 2 of the Developer IDE.

Please note that there is a hands-on video tutorial available in the IDE or on YouTube for this part - simply click on the link above.

Filter: ABOX42 Showcases M30

M30Q: How do I create a rectangular video canvas and play a video in it?

A: Take a look at Chapter IV - Part 4 or Chapter V - Part 1 to see how a video canvas gets created, so you can play a video in it.

Please note that there is a hands-on video tutorial available in the IDE or on YouTube for these parts - simply click on one of the links above.

Filter: ABOX42 Showcases M30

M30Q: How do I copy a checkbox to the middle of the page?

A: There is an instruction on how to copy the checkboxes from the "UI Elements" in Chapter VI - Part 5. Take a look at it now.

Filter: ABOX42 Showcases M30

M30Q: How do I copy a radio button to the middle of the page?

A: See Chapter VI - Part 4 to learn how to copy radio buttons form the "UI Elements".

Filter: ABOX42 Showcases M30

M30Q: How do I create an input field with keyboard?

A: Take a look at Chapter VI - Part 1 in the Developer IDE to see how to create an input field with keyboard.

Filter: ABOX42 Showcases M30

M30Q: How can I enable the navigation on a grid?

A: Please take a look at Chapter 4 - Part 3 to learn how to enable the navigation on a grid.

Please note that there is a hands-on video tutorial available in the IDE or on YouTube for this part - simply click on the link above.

Filter: ABOX42 Showcases M30

M30Q: How do I change the page content when selecting a menu item?

A: For each item in the menu bar you can specifically show content. Learn how to do that in Chapter VIII - Part 4.

Filter: ABOX42 Showcases M30

M30Q: How can I combine a navigation bar and a player bar?

A: We show you how to combine the 2 elements "navigation bar" and "player control bar" in Chapter 8 - Part 10 of the Developer IDE.

Filter: ABOX42 Showcases M30

M30Q: How does the player control bar in the “VOD Library” example work?

A: How the player control bar like in the "VOD Library" works is explained in Chapter VIII - Part 6.

Filter: ABOX42 Showcases M30

M30Q: How do I hide the upper lines of the grid when scrolling?

A: When scrolling down in the "UI Elements: Grid (without hiding)", the upper line is displayed half way. This can be changed by adding the "hiding" attribute for the upper line. See how it works in the Developer IDE.

Filter: ABOX42 Showcases M30

M30Q: How do I create a navigation bar like in the “VOD Library” example?

A: Please take a look at Chapter VIII - Part 3 where we explain how to create a navigation bar like in the "VOD Library" example.

Filter: ABOX42 Showcases M30

M30Q: How can I create a grid to display content?

A: We have 2 different grids you might want to take a closer look at:

1. Chapter VIII - Part 1:  The default grid: none of the elements in grid are hidden when scrolling.

2. Chapter VIII - Part 2: Elements are hidden when leaving the grid while scrolling - Grid with attribute: hiding.

Filter: ABOX42 Showcases M30

M30Q: How do the select boxes in the “UI Examples” work?

A: Please find a detailed instruction on how to work with the select boxes of the "UI Elements" in Chapter IV - Part 7. There is also a screencast available now.

Filter: ABOX42 Showcases M30

M30Q: How do I implement a multi-page description?

A: There is an instruction for this question, which can be found in Chapter VIII - Part 8.

Filter: ABOX42 Showcases M30 OTT

M30Q: Is there an example for a Video-On-Demand (VOD) application?

A: Yes, we have an example of a VOD application in the Developer IDE, which is located here: Chapter VIII - Media Player for Experts There is also a direct link filed under "Market Proven" in the Developer IDE: Smart Solutions - Web Browser runtime.

Filter: ABOX42 Showcases M30 OTT Web Browser runtime

M30Q: How does the table in the “UI Elements” example work?

A: This is an advanced table that also provides a fluent and enhanced navigation. Take a look at the description of this example in Chapter IV - Part 12

Filter: ABOX42 Showcases M20

M30Q: How does the light box in the “UI Elements” example work?

A: The light box is a stylish enhancement in case you are working with images. We prepared a description on how to use it inChapter IV - Part 11.

Filter: ABOX42 Showcases M30

M30Q: Are there any standard guidelines for TV Applications?

A: There are no strict regulations, but there are some things that could be seen as common practice. Take a look at our Style Guide where we state some general considerations.

Filter: IPTV M30 OTT Smart Solutions Web Technology

M30Q: What is the key event handler and how do I use it?

A: The key event handler is explained Chapter IV - Part 1. Take a look at the tab called "handleKeyCode" to understand how to use it.

Filter: ABOX42 Showcases M30

M30Q: How do the radio and normal check boxes in the “UI Elements” examples work?

A: We prepared a description on how to handle the check boxes. You can find it in "Chapter 4 - Part 8".

Filter: ABOX42 Showcases M30

M30Q: What is the key event handler and how do I use it?

A: The key event handler is explained Chapter IV - Part 1. Take a look at the tab called "handleKeyCode" to understand how to use it.

Filter: ABOX42 Showcases M30

M30Q: How do the popups in the “UI Elements” examples work?

A: Go ahead and take a look at Chapter 4 - Part 9 and you will find sufficient information on how the popups work.

Filter: ABOX42 Showcases M30

M30Q: How can I enhance the UI of my application?

A: We prepared some examples, called "UI Examples" with different button sets, menu items and so forth in the Developer IDE. Take a look at "Chapter IV - UI Elements" now.

Note: These examples are best viewed directly on the box. To do so, go to each part and start the application by pressing on "View on Box".

Filter: ABOX42 Showcases JS-API M30

M30Q: Where can I find an overview of the UI Elements?

A: Here is an overview of the UI Elements and other templates used in our examples and "Smart Solutions": UI Elements Index

Filter: ABOX42 Showcases HTML/CSS HTML5/CSS3 JS-API M30 Web Technology

M30Q: How do I initialize ul elements with $.fn.grid.element when using gridJS?

A: You will find an introduction including a screencast (video tutorial) that shows you how to initialize ul elements with $.fn.grid.element in Chapter IV - Part 2.

Filter: ABOX42 Showcases M30 Web Technology

M30Q: How do I copy a select box to the top of the page?

A: In Chapter VI - Part 2 you can find an instruction on how to copy select boxes. Go ahead and take a look at the tutorial video now.

Filter: ABOX42 Showcases M30

M30Q: How do I copy a button to the middle of the page?

In Chapter VI - Part 3 we show you how to copy a button to the middle of the page when working with UI Elements. There is a screencast available on YouTube for this part now. Go check it out.

Filter: ABOX42 Showcases HTML/CSS M30