locked
Web Application Model RRS feed

  • Question

  • User1882154125 posted

    Is it possible to use the CSS Control Adapters in a project that is based on the Web Application as opposed to the Web Site. It seems like the only real problem would be the "App_Browsers\CSSFriendlyAdapters.browser" file since App_Browsers is a special folder in the web site along with the .browser file.  Both don't seem to be supported in the Web Application.

     Is it possible yet to use these in a web application project? And ultimately in a custom server control?

    Thanks

    Tuesday, February 6, 2007 4:26 PM

Answers

  • User-534056067 posted

    I agree with the starting point for your investigation that you proposed. It's where I would start, too.

    I'm not familiar with that chunk of JS from the unadapted framework. I've simply never studied it in detail. So, unfortunatley, I can't say right now if it will be OK or problematic to use in the adapters. However, fundamentally, modifying the adapters to handle client-side key events should not be hard.  The files that you probably want to look at first (from the kit) are:

    App_Code\Adapters\MenuAdapter.cs (or vb) go to the BuildItem method. It is what has all the logic to actually write out the <li> and <a> or <span> tags.  You probably want to add an attribute onto one of these tags to handle the client-side key events.

    JavaScript\MenuAdapter.js where other JS functions have been put. (Don't freak out when you see the JS. It doesn't use the best style, like JS objects, etc. It's just simple JS functions.) To prove the feasibility of tabbed menus (via JS) I'd recommend that you start by just building some client-side key event handlers and sticking them in this JS file.

    If the canned JS functions that come with the unadapted framework don't suit your needs you probably can think up a good heuristic yourself or search the web. And, of course, you can seek help via this thread any time you like.

    Good luck. This sounds like a great opportunity to contribute something to the community that will be well appreciated. I hope you find time to look at it and post your progress.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 12, 2007 2:21 PM

All replies

  • User1882154125 posted

    Nevermind. I just noticed that you can have App_Browsers in a web application project.  However, I just realized that the adapters are not 508 compliant so I'm going to have to throw out the idea of using them anyway since I don't have time at the moment to try and make them compliant myself. 

    Hope to see compliancy soon :)

    Thursday, February 8, 2007 9:57 AM
  • User-534056067 posted

    Where exactly are you seeing a 508 compliance problem? To my knowledge the adapters render 100% 508 compliant markup to at least level 1 and typically to a much higher level. If you have found a compliance problem it is almost certainly an oversight on my part and I'd like to fix it for the next rev.

    Friday, February 9, 2007 5:05 PM
  • User1882154125 posted

    Thanks for the response. 

    There is no automatic "Skip Navigation Links" link, granted that could be an easy manual work around.  It does seem that level 1 is compliant, but the main problem is I was not able to use only the keyboard to navigate to any of the 2nd level popout menus as there is no javascript on them like there was in the original Menu control.

     Is that correct or am I totally missing something?

    Thanks,

    Aaron

    Monday, February 12, 2007 9:44 AM
  • User1068910218 posted

    Seriously, are you comparing the adapters to the original controls?

    That's so backward. The original menu control was the result of the chief developer's late night out... Every night of the project. ^^

    Working with the rendered code of original controls are like working through a haze...

    Just my 5 cents.
     

    Monday, February 12, 2007 10:29 AM
  • User1882154125 posted
    I'm definitely not comparing the table output of the old versus the much nicer CSS friendly lists of the adapters.  Obviously the adapters are much cleaner and I want to use them.  Just pointing out that the original menu was able to be completly navigated using only the keyboard, popping out the submenus and all. And I don't see that with the current adapters, which is a requirement for any sites I build.
    Monday, February 12, 2007 11:56 AM
  • User-534056067 posted

    I'm impressed with the constructive and helpful nature of this discussion.  So often, unfortunately, these sorts of threads are too vague to be of use. Or, they get folks so upset and emotional that they degrade into virtual shouting matches with no real purpose. In constrast, the discussion here has been detailed and fair.

    I clearly recognize the importance of enhancing the adapters to include skip-links and tabbed menu (or treeview) navigation. I very much hope that one or both of these will be included in the next rev of the kit.

    I also recognize that there are folks who see these missing things as so fundamentally important that they can't use the adapters as-is right now. Certainly, I have only sympathy for the plight of such folks.  It's a tough choice they now face. Of course, I wish that the adapters were completely perfect and completely robust in every aspect... but software, as we all know, evolves and becomes better over time.  There is always a point (like now) where things are good... but could be made far better. I guess that gives me something to look forward to working on!

    Final notes... As was mentioned in an earlier posting in this thread, the lack of auto-gen'ed skip-links can be overcome by simply adding the manually to your page(s). I doubt that that would be terribly hard for most authors to do as a workaround.  Still, I understand that it should be built into the adaptes (part of what they render). The lack of tabbing in menus is a tougher problem and I'll have to give it more thought. If other readers have ideas about how to fix (implement) the tabbing solution (within menus and tree) please share your ideas.  As always, I love to learn from smarter people how I ought to get things done!

    Again, my sincere thanks go to the participants in this discussion for keeping the comments constructive and civil. Very cool, very cool indeed.

    Monday, February 12, 2007 1:18 PM
  • User1882154125 posted

    Again, thanks for the response, and I understand everyone has different required fundamentals, which is why I'm not mad or anything. I would guess most people don't have to worry about these issues (granted I'm sure there are plenty that still do, like me), so it makes sense to get something out there that gets the actual core functionality implemented. 

    I was actually drawn to the adapters initially because I needed the ability to indicate a Selected-Parent style that was cleaner. I had previously done a nasty javascript hack using the original menu control, but this looked so much nicer so it was just sad when I realized the lack of tab-ability. However, if I have time I have taken my code home and may try some after hours on my own work if the time presents itself.

    I haven't really looked into it too much, but what is wrong or bad with taking the javascript from the original menu control's onkeyup event that gets attached to <TD> of items that have pop outs and using it as a starting point to add to the adapter, or is it so different that there wouldn't be any point?

    Monday, February 12, 2007 1:32 PM
  • User-534056067 posted

    I agree with the starting point for your investigation that you proposed. It's where I would start, too.

    I'm not familiar with that chunk of JS from the unadapted framework. I've simply never studied it in detail. So, unfortunatley, I can't say right now if it will be OK or problematic to use in the adapters. However, fundamentally, modifying the adapters to handle client-side key events should not be hard.  The files that you probably want to look at first (from the kit) are:

    App_Code\Adapters\MenuAdapter.cs (or vb) go to the BuildItem method. It is what has all the logic to actually write out the <li> and <a> or <span> tags.  You probably want to add an attribute onto one of these tags to handle the client-side key events.

    JavaScript\MenuAdapter.js where other JS functions have been put. (Don't freak out when you see the JS. It doesn't use the best style, like JS objects, etc. It's just simple JS functions.) To prove the feasibility of tabbed menus (via JS) I'd recommend that you start by just building some client-side key event handlers and sticking them in this JS file.

    If the canned JS functions that come with the unadapted framework don't suit your needs you probably can think up a good heuristic yourself or search the web. And, of course, you can seek help via this thread any time you like.

    Good luck. This sounds like a great opportunity to contribute something to the community that will be well appreciated. I hope you find time to look at it and post your progress.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 12, 2007 2:21 PM
  • User1882154125 posted
    Sounds good. Many thanks. If I do work at it, I'll definitely try and post
    Monday, February 12, 2007 2:33 PM
  • User1068910218 posted

    A quick input, since I've already posted:

    You could use :focus on the links to check whether the tab is currently at the link. So for example

    a:focus {	background-color: black !important; color: white; }
    ul { list-style: none; margin: 0; padding: 0; }
    ul#nav li ul li
    {
    	display: none;
    }
    ul#nav li:hover ul li
    {
    	display: block;
    	width: auto;
    	height: auto;
    }
    ul#nav li a:focus + ul li
    {
    	display: block;
    }

    For this code:

    <ul id="nav">
    	<li>
    		<a href="CreateUsers.aspx">Create users</a>
    	</li>
    	<li>
    		<a href="CreateUsers.aspx">Create users</a>
    	</li>
    	<li>
    		<a href="CreateUsers.aspx">Create users</a>
    		<ul>
    		<li><a href="Default.aspx">Default</a></li>
    		</ul>
    	</li>
    	<li>
    		<a href="install.aspx">Install</a>
    		<ul>
    		<li><a href="Default.aspx">Default</a></li>
    		</ul> 
    	</li>
    </ul>
    Then just use javascript to add a class to the list item that you're currently having a child hyperlink selected within. (grammar, eh?) 
    Monday, February 12, 2007 5:17 PM
  • User1882154125 posted

    Hey thanks for the idea. Unfortunately I'm not that knowledgeable in CSS so I'm not sure totally how that works so I threw it into a document and opened it up. Unfortunately again, the only browser we are permitted to use here is IE6 and from what I was able to find, a:focus is not supported by IE6.  So it looks like things will probably have to be separated out at least by IE6 and IE7

    What is the following doing, particularly the + sign?

    ul#nav li a:focus + ul li
    {
    display: block;
    }

     

    Thanks

    Tuesday, February 13, 2007 9:22 AM
  • User1068910218 posted

    Hi,

    Well, yes, ie sux, but we already know that :p.

    The +-selector is the adjacent sibling selector.

    It meas that it should select the list which is the adjacent sibling to the a element which has focus. In that case, the only sibling to the a-element is the actual list and hence the list item gets upgraded to "display:block".

    Np ;) Glad I could help.
     

    Tuesday, February 13, 2007 9:35 AM
  • User1882154125 posted

    Thanks again. I hate having to search the web for symbols like +

    Looks like something that could be very useful....if we ever get off ie6

    Tuesday, February 13, 2007 9:56 AM
  • User-534056067 posted

    I think, initially, you can put aside the question of how to visually indicate the selected menu item.  I like the idea of using something like the focus pseudo class but first you need to get focus into that menu item and get it to be shown, etc. That is where my notes above come in. I think you'll need to modify the adapter and the JS code per my earlier suggestions. I admit, though, that I was pretty vague so if you get stuck, let me know and I'll try to get you unstuck!  Good luck.

    Wednesday, February 14, 2007 3:22 PM
  • User-2051459559 posted

    I've recently been through the process of using CSS Friendly Control Adapters to implement a 2-level tabbed navigation menu based on the "sliding doors" method. You can see some of my musings here. My task would have been a lot easier if there was a way to "cascade link" several menu layers together (similar to Atlas Cascading Dropdowns). A simple .Parent property would be what I'd look for.

    Just my 2p worth...

    Thursday, September 13, 2007 7:24 AM