I am building a container with nested sliding sub-containers - which themselves will have their own set of nested containers.
Basically it will behave very similar to how iOS handles settings (see attached image).
I need some advice on how to go about this. What ARIA properties would you use? And how would you structure keyboard navigation?
.. is there an existing W3C recommended pattern I can lean against? Or do I need to re-invent the wheel on this one?
The WAI-ARIA Authoring Practices Guide is intended to provide an understanding of how to use WAI-ARIA to create an accessible Rich Internet Application. It describes recommended WAI-ARIA usage patterns and provides an introduction to the concepts behind them.
Source: - https://www.w3.org/TR/wai-aria-practices-1.1/#intro
From this spec it looks like this is the most relevant:
Menu or Menu bar
A menu is a widget that offers a list of choices to the user, such as a set of actions or functions. A menu is usually opened, or made visible, by activating a menu button, choosing an item in a menu that opens a sub menu, or by invoking a command, such as Shift + F10 in Windows, that opens a context specific menu. When a user activates a choice in a menu, the menu usually closes unless the choice opened a submenu.
Although it seems this may be in reference to a 'context menu' that you usually get by right clicking. But I don't see how this could be used for your use case.
The spec also has advice and guidelines for Keyboard Interaction.
You may also want to look at the Web Content Accessibility Guidelines Working Group wiki, which has an article on 'Using ARIA menus'
Related
Im my application I want to implement the feature of when a user click on a button show a Panel which will consist of some user controls. I know In Java I can easily use Jpanel and use setVisible() method to get this done easily. But this is an MFC application. I couldn't find any built or customized component that I can use for my purpose.
I also tried GroupBox. But it is not grouping the components logically.
What would be the best approach for this?
As user1793036 says, start by creating a dialog resource and CDialog derived class for the panel. In the dialog resource properties turn off the Title Bar style. In the code call Create for the dialog and then SetWindowPos to place it where you want it to appear.
MFC is nothing but a thin wrapper over Win32 API for windows and controls. The core Win32 API doesn't provide any feature to group controls in a group-box or panel. One way is to have a window and make that window parent of all required controls. Unfortunately, this isn't easy to do.
I suggest you, since you are learning, to drop the idea. Instead, learn what you can achieve with existing set of features provided by MFC/Win32. With MFC/Win32, you would, mostly need to derive/subclass a class/window to get something fancy (such as colored list-control).
The Joomla! 3 administrative console in my installed version (Joomla! 3.1.5 Stable) plus at least a Joomla! demo web site showcase menus that don't switch to an article if you press them, but present only the drop-down menu at first. The rendered article (i.e. the content below the menu) only changes once a menu-item is selected/clicked.
For instance, visit demo.joomla.org. The content below the menu reads "Joomla! is a free, open source content management system ..." Now if you press e.g. "Joomla!" inside the menu, a drop-down list appears, but the cited text does not change yet. Only if you press a particular menu item it changes (currently e.g. to "Joomla! 2.5.16 Released ...").
I would like to accomplish the same behavior in a Joomla! 3-powered web site but haven't yet been able to do so. On my site (sorry, not yet available to the public) clicking a menu of this kind brings up the article, and so far I have found no way to prevent that. I'm referring to articles because my menus are of type "Single Article". I've looked at other menu item types too but they did not seem to offer a solution either.
So can the behavior the demo site's menus be accomplished (without installing further extensions), and if so how? After all, the demos are surely hosted on Jooma! servers :) Perhaps this is a matter of choosing an appropriate template? But then, the solution does not seem obvious and googling reveals different opinions as to whether this is/was possible at all.
UPDATE The following is a depiction of what I get when changing the menu item type for "Open Source" from "Articles | Single Article" to "System Links | Text Separator": it now looks odd and no longer seems to function as a menu (no drop-down effect). In the HTML source the CSS classes assigned to the three menu items are "item-x current active", "item-y divider parent", and "item-z parent" respectively. (Why isn't "Open Source" marked active?)
UPDATE I am using the protostar template (marked as Default for Site under Extensions | Type Manager).
Create the top-level menus as System - Separator; this means they have no link attached, but only serve the purpose of organizing (sub)menu links.
Then when you click them, based on the setup of your menu module, they will show the sub-items. Beware, the most common behaviour is not to wait until clicked, but simply show the submenu items when hovered (when you bring the mouse over them). But the event they respond to depends on the module (mod_menu), its template override, and other scripts your template may load.
Update:
If you're using mod_menu, in the module list it will be listed as Menu; if you were using another menu module, I guess you would remember installing it :-)
I am not a protostar / twitter bootstrap fan so I can't help you much on it, but dropdown menus are definitely supported, I just tried putting the menu in the position navigation, with
"Menu Class Suffix" = " nav-pills nav-dropdown"
and it worked correctly with dropdowns on hover. As per having dropdowns on click instead of hover, look at this guide
I want to a html page inside a dynamically created silverlight child window without telerik control.
The telerik control isn't doing anything you can't do yourself with enough effort - it's all just transparent user code.
So, you could create <div> and position it carefully just like the telerik control does - but of course this can be a lot of work (that's why folks would want to pay for their control).
This also only works when the plugin is windowless, which has lots of trade-offs (see MSDN - for example, accessibility support is greatly reduced or gone entirely, I can't recall which).
In out-of-browser mode, you can use the WebBrowser control, in case that helps should you wish to make your app available OOB later.
try one of these links:
1. http://forums.silverlight.net/forums/t/51784.aspx or
2. http://weblogs.asp.net/dwahlin/archive/2010/05/10/integrating-html-into-silverlight-applications.aspx
It can help
I was looking at the Firefox Add-ons Manager UI (pictured below) and really liked the expandable list used to show settings or properties for each add-on.
Firefox Add-ons Manager http://uploads.tech-buzz.net/Firefox3Beta3ComingonMonday_859/get_addons.png
I liked it enough to want to include something similar in one of my applications. The problem is, I don't know, exactly what the control is called (it doesn't seem to be "expandable list"), nor do I know if there is an implementation available for use in my own application (so I wouldn't have to reinvent the wheel.)
This isn't the first time that I've seen some cool piece of UI and wanted to incorporate it into something I'm working on, but have had no idea if I would have to design it from scratch. So I generally end up reworking my UI to use standard UI widgets to save time.
This got me thinking, is there some place that has a catalog of a bunch of UI widgets with names and what platforms/languages they are implemented for/in?
UPDATE
Turns out this control is called a Rich List Box, and it seems to only be implemented in XUL.
To answer your question, no, there isn't a universal catalog anywhere, though MSDN is as good a place as any to find definitions of most common UI elements.
The specific widget you ask about is generally called an accordian (wikipedia)
So I have a PRISM v2 (M-V-VM) application up and running. It's 4 modules that load into a tab control. Great.
Now my question is - where to go from here? Most tutorials seem to stop at this point.
Maybe I'm overthinking this, but it almost seems like I'd need each module to be its own PRISM application, but that can't be right.
Please help a PRISM n00b figure out where to go from here.
What I'm looking to do next: Each tab (module) has its own toolbar with buttons, etc. Clicking a button should change the content (view) below the toolbar.
How to achieve this (correctly) with PRISM? Each module (tab) should have control over its content, however, clicking cetain buttons in one tab may trigger an event in another tab (hence the use of PRISM).
So what's the correct-PRISM way to change views within a module?
I think you are thinking about this a bit hard. I'll explain.
What is commonly referred to as the "Shell" should contain all of your navigation controls. For example, if I wanted a tabbed UI, my Shell would contain a tab control (usually you'd decorate that TabControl with a RegionName, like "ShellTabs").
Your Modules will contribute views to these shell elements. So let's say you have the email module, it will contribute an inbox view to your collection of tabs. It could contribute these views by registering them with the RegionManager for the app (like registering your view with the Region called "ShellTabs").
Modules don't have to contribute anything visual. I have one module in our app that takes care of logging and other background processes.
Hopefully this clears up some of the nomenclature and helps you know what the responsibility of each part is.