Office 2007 Ribbon UI

199 posts, 0 answers
  1. Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 13 Mar 2007 Link to this post

    Requirements (version for ASP.NET AJAX)

    RadControls version

    Telerik.Web.UI 2008.2.826.20

    (RadControls for ASP.NET AJAX

    Q2 2008 SP1)

    .NET version

    2.0

    Visual Studio version

    2005

    programming language

    C# / JavaScript

    browser support

    Only specifically tested with:
    IE6,IE7,FireFox 2


    Requirements (version 1.2)

    r.a.d.controls version

    RadAjax - 1.7.1
    RadMenu - 4.3.1
    RadTabStrip - 3.5.1

    For examples:
    RadToolbar - 1.5.1
    RadComboBox - 2.7.1
    RadGrid - 4.6.1
    RadWindow - 1.8.1.0

    .NET version

    2.0

    Visual Studio version

    2005

    programming language

    C# / JavaScript

    browser support

    Only specifically tested with:
    IE7 (7.0.6000.16448)
    FireFox 2 (2.0.0.3)


     
  2. PROJECT DESCRIPTION
    This project contains a set of controls that provide a basic Office 2007 Ribbon UI.

    It utilizes some of the Telerik asp.net controls and adds some others to give an application menu, quick access buttons, quick access customization, ribbon tabs, groups, and large and small buttons with drop down menus. You can also minimize the ribbon.

    Please read the document in the download for full details.

    Live Demo using RadControls for ASP.NET AJAX

    Live Demo using RadControls for ASP.NET

  • Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 15 Mar 2007 Link to this post

    Hello Russell,

    Thank you very much for the time you dedicated to assemble this marvelous example with six of our RadControls. The contribution you made to the telerik community here is surely appraised by us and everyone else who is interested in building Office 2007 Ribbon UI for web with our ASP.NET controls. The demo site you have uploaded provides the basis for further development - no doubt it will be quite beneficial for other developers. We are also grateful for the doc file outlining the main points covered in the sample application.

    30 000 telerik points goes to your account as a token of gratitude. Thank you once again for the involvement and keep posting!

    Best regards,
    Stephen Rahnev,
    Technical Support Director, telerik

  • Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 17 Apr 2007 Link to this post

    Hello guys,

    Thanks to Mr. Russell Mason I am glad to bring in public an updated version of the Office 2007 Ribbon UI project attached to this code library thread.

    The following is a brief description of the update:

    Updated to include the following main features:

    Added hover effect to Tabs
    Added hover effect to RibbonGroup
    Added Dialog Launcher to RibbonGroup
    Added LargeSplitRibbonButton
    Added SmallSplitRibbonButton
    Simplified and clarified examples

    You will find several screenshots below:









    Best regards,
    Stephen Rahnev,
    Technical Support Director, Telerik

    Instantly find answers to your questions at the new telerik Support Center
  • buddy
    buddy avatar
    23 posts
    Member since:
    Jun 2006

    Posted 19 Apr 2007 Link to this post

    hi russell, hi stephen.

    thanks for the framework. i've done something similar. but i think i will replace it by your framework!

    the note in die document about "microsoft office ui licensing" made me a little nervous. i know you are not microsoft but maybe you have an answer for me before contacting ms.

    first of all i like the idea that my app is confirmed with this license. but on the other hand what happens if not?

    what if i ignore this license and use parts of the office ui like in rad-editor if i enable the ribbon style menue. after i read the evaluation license - it seems that this menue style doesn't match the license requirements. 

    hope you can give me some more answers than i found at the msdn.
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 19 Apr 2007 Link to this post

    Hi Buddy

    You are right to be nervous regarding the 2007 UI guidelines. The Ribbon UI I have created is NOT fully conformant with the guidelines as set out by Microsoft ... yet.

    The key areas that are not conformant are:
    1) The application menu (which needs 2 vertical sections)
    2) The resizing of Ribbon content (groups should be collapsed/expanded as the window gets smaller/larger)
    3) Keyboard Access

    I am currently working towards these requirements (although none of them are simple so it will be a little while off yet).

    There are other issues e.g. ensuring text in a Ribbon Group does not cause the group to be wider than the buttons within the group. However these can be avoided by taking preventative measures such as shortening the text or adding more buttons. Other rules are entirely up to the implementer to ensure they comply, e.g. ensuring that clicking a Dialog Launcher does not alter document text etc.

    As to what would happen if you violated the guidelines? I have no idea. I guess because web applications are not the same as desktop applications Microsoft would allow some flexibility here. The point of the guidelines is to protect Microsoft's investment in an innovative UI. If you abuse the guidelines and start creating something that would be seen as making the UI look ridiculous I'm sure Microsoft would take action to prevent you from doing so. I think what I have done is in keeping with the spirit of the 2007 UI, but then I would say that wouldn't I.

    Thanks
    Russell Mason

  • NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 20 Apr 2007 Link to this post

    Hello,
    Thank you for this framework. I have a question about validation. On my webform that uses the framework, I have a couple of data validation groups. (with requiredfieldvalidators)
    When I click something from the applicationgroup or the ribbon, the validationgroup kicks in.
    Is there a solution to set enablevalidation=false on the tabstrip and menu ?
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 20 Apr 2007 Link to this post

    Hi

    To be honest I know absolutely nothing about validators (I have always had my own methods for performing validation). I will investigate this as I think it's an important question. It may take me while but I will get back to you.

    Thanks
    Russell Mason

  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 22 Apr 2007 Link to this post

    Hi

    The Ribbon Button controls I have added do not cause validation. I will try and add CausesValidation and ValidationGroup properties soon as they are an obviously omission.

    I've had a look into validation as it can be used currently, and I can't see any difference between the normal behaviour provided by Telerik's controls and when they are used in the Ribbon scenario. The RadTabTrip and RadMenu can both have validation disabled by setting the CausesValidation to false, or you can use a different ValidationGroup from other controls. I did have a question about the RadMenu's default behaviour and you can see Telerik's rely here: http://www.telerik.com/community/forums/thread/b311D-thdet.aspx

    If this doesn't resolve your issues please send me an email (ribboncontrols@russellmason.com) with more specific details outlining exactly what is happening and how it is different from the normal Telerik behaviour.

    Thanks
    Russell Mason

  • NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 23 Apr 2007 Link to this post

    hello,
    My problem is indeed solved by setting causesvalidation=true on the tabstrip and radmenu.
    I should have solved this myself, but I had some weird intellisense problems last week so the causesvalidation property didn't show on the tabstrip and menu ...

    Anyway, thanks again for the ribbon. This is so great for developing intranet solutions.
  • ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 06 May 2007 Link to this post

    This ribbonbar is AWESUM!!! well done I definetly intend to make good use of it :)

    I wondered how I would go about extending it, at the moment I am converting menus from a standard menu to the ribbonbar, and all my standard menu use the NavigateUrl and Target properties, e.g.:

    NavigateUrl="Dynamic.aspx?mode=ShowAnimals" Target="radContent"

    I could not find these properties in the LargeRibbonButton property, and they would be very useful.
    <orb:LargeRibbonButton ID="Button1" runat="server" Text="Home" EnabledImageUrl="Home.gif" ClientMemberName="_Button1" />

    I suspect if I used the ajax manager I could have a server side event that loaded the output of my dynamic.aspx (that page dynamically loads user controls) into the radContent pane (a splitter bar in placement mode), thus avoiding the refresh?    I'm not positive that would work, but I suspect there is a better way anyway..

    ..Perhaps some javascript to load the page into my radContent pane?  would apreciate anyones ideas on the best way forward?    Ideally if I could add the properties then everyone could benefit, I imagine a lot of people use those properties in their menus, avoiding the postpage, and will want to continue with that approach with the ribbonbar.

    keep up the good work!!!!

    regards
    ewart

  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 07 May 2007 Link to this post

    Hi Ewart

    Thanks for the possitive feedback.

    I'm not sure what you mean by radContent, but my understanding of a RadMenu is that it uses a standard A tag. The NavigateUrl and Target properties just output the A tag's href and target.

    Given that, could you not just use the client-side OnClientClick of a LargeRibbonButton (or other button) to invoke a navigation, such as...

    OnClientClick="window.open('http://www.telerik.com', '_self);"
    or
    OnClientClick="window.open('http://www.telerik.com', 'myContent');"

    Because this is being done in my spare time I have tried to get the basics in first. You are right that navigation such as this is going to be a very common requirement. I may try to add properties that simplify this in the future.

    Thanks
    Russell Mason

  • ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 07 May 2007 Link to this post

    I can, and the Javascript works well thankyou.  I will do this for now, but if I have a chance after this project ends I'll look at extending the framework to output javascript for those tags.

    regards
    ewart
  • Bill O'Neil
    Bill O'Neil avatar
    111 posts
    Member since:
    Nov 2004

    Posted 12 May 2007 Link to this post

    This is truly a great project - I look forward to contributing (once me current project is done.)

    Have you thought about providing source images as well - making life easier for those that might want to alter the colors of the Ribbon Bar?
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 12 May 2007 Link to this post

    Hi Bill

    All the images used by the Ribbon are already in the project under the 'ApplicationFramework\RussellMason.Web.Application\Web\UI\Office2007\Office2007Client\Images' folder. Note that these are copied into the example project's 'ApplicationFramework\TestClient\Office2007Client\Images' folder.

    Images used in the mockup are in the  'ApplicationFramework\TestClient\Images' folder.

    Other images used by Telerik's Rad controls are in their usual location.

    Hope that answers the question, if not please provide additional details.

    Thanks
    Russell Mason
  • Bill O'Neil
    Bill O'Neil avatar
    111 posts
    Member since:
    Nov 2004

    Posted 13 May 2007 Link to this post

    Thanks Russell - I saw the .gif images.

    I was actually referring to some sort of source image(s) (like a photoshop .psd) that would make it easier to "skin" the Ribbon control.

    Might be a useful addition - but given time and attention I'm sure we could properly edit the individual images.

    Bill
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 14 May 2007 Link to this post

    Hi Bill

    Believe it not I don't have any 'source' images. For each component I have taken a screen shot of Word and split out the elements that make up each button/control and saved those directly to gifs. I have made minor adjustments as I originally only had Telerik’s Office 2007 example and a Beta to work from. The official release had some visual changes especially the Quick Access Toolbar, so I have tried to get as close as possible but I didn’t what to have to go through every image/style, so there are some minor differences.

    Sorry I can't help further.

    Thanks
    Russell Mason
  • rgf21
    rgf21 avatar
    100 posts
    Member since:
    May 2007

    Posted 17 May 2007 Link to this post

    After using your controls, if I add to my pages other rad controls I get error like this one:

    Could not load file or assembly 'RadAjax.Net2, Version=1.6.2.0, Culture=neutralPublicKeyToken=3f7b438d1c762d0b' or one of its dependencies. 
    The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040) 


    Can you help me?

    Thanks
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 18 May 2007 Link to this post

    Hi

    Are you using Q1 2007 Telerik controls? I think this can happen if libraries/pages have been build against an old version (as is the case with this version of the Ribbon). Try deleting the bin folders under the 'RussellMason.Web.Application' project and 'TestClient' project so that Visual Studio has to rebuild using the new 1.7 version of RadAjax (make sure yopu copy the latest RadControls folder too).

    Thanks
    Russell Mason

  • Sean Clifford
    Sean Clifford avatar
    22 posts
    Member since:
    Mar 2005

    Posted 21 May 2007 Link to this post

    Bill, to make fast work of a project rather than hunt down icons, I purchased the X-Mac package from IconShock. I'd rather spend my time coding. :D

    Russell, thank you very much for an excellent framework. I'm in full swing on three projects thanks to your groundwork and telerik r.a.d.Controls. Shoulders of giants and all that jazz.
  • ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 21 May 2007 Link to this post

    I'd like the users to know which menu item is currently selected, as a visual cue.

    So, anyone know an easy way to make the only the currently selected LargeRibbonButton retain higlighted status in the menu?

    I was thinking perhaps some sort of function like I've sketched out below could trigger hilighting the current item and dehilight the previous item?  I'm not a JavaScript expert however so have no idea how to make this work assuming it's even possible.

    <orb:LargeRibbonButton ID="lrbButton1" OnClientClick="SetHilightMenu( _thing1 ); window.open('Dynamic.aspx?mode=thing1', 'radContent');" runat="server" Text="thing 1" Width="50px" EnabledImageUrl="1.gif" ClientMemberName="_thing1" /> 
    <orb:LargeRibbonButton ID="lrbButton2" OnClientClick="SetHilightMenu( _thing2 ); window.open('Dynamic.aspx?mode=thing2', 'radContent');" runat="server" Text="thing 2" Width="50px" EnabledImageUrl="2.gif" ClientMemberName="_thing2" /> 


        function SetHilightMenu( currentMenu )  
            {  
               // Hilight current menu  
               currentMenu.setChecked(true);  
     
               if prevMenu != '' {   
                 
               // Remove hilight on previously selected menu  
               prevMenu.setChecked( false );  
                 
                  // Update which item is previous menu  
                  prevMenu = currentMenu;  
               }  
            }  
     

    oh, and prevMenu would be declared somewhere at the top I guess.
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 22 May 2007 Link to this post

    Hi Ewart

    I hope I understand correctly in that you want to implement toggle buttons. For the moment the approach you suggest would work although you would need to do this for each group as each would have a different 'previous' button. You would probably need an array based version of your function to handle this.

    For those interested in the next release the main focus is on collapsing groups when the browser window changes width. However, I have also added NavigationUrl and Target (thanks for the suggestion) and CausesValidation and ValidationGroup (thanks NS). If I get time I will also try and add a ButtonGroup property to make toggle buttons simpler.

    Thanks
    Russell Mason

  • Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 22 May 2007 Link to this post

    Thanks for your application frameworks! Verry good job!

    I just whant to well understant the GenerateClientMember property of a ApplicationBar. If I set it to true, another instance of javascript are created. In this new instance I can use the ShareState.
    My question is (i am not a javasrcipt expert) If I need to trigger a client function when the TabStrip a selected, I add a OnClientTabSelected string in the RadTabStrip that point to a JavaScript Function. If I let the GenerateClientMember to true the function are never called because I think the call are made in another JS instance? How Can I put my JS function in the correct instance? For now I put the GenerateClientMembers to false and all work good.

    Thanks
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 23 May 2007 Link to this post

    Hi Pierre

    This was a mistake on my part. I just assigned the events to singlecast handlers. In the next release I have changed these to be multicast so you can still associate your own handlers.

    If you set GenerateClientMember to false things won't work properly, e.g. minimizing the ribbon (they may appear to work most of the time but you will get subtle errors introduced). In fact the next release requires all Ribbon controls to have this set to true and you won't be able to turn it off.
    However, short term this may be suficient, and I am not far away from the next release where you can reset it to true again.

    Thanks
    Russell Mason

  • Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 23 May 2007 Link to this post

    Thanks for reply. Your next release are aleready scheduled?

    Can you provide more information or code example to explain how you can interact with the shared value?
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 23 May 2007 Link to this post

    Hi Pierre

    Do you mean interact with Shared State generally or in the case you outlined?

    If this is the case you outlined it is nothing to do with Shared State but with client side objects that represent the server-side controls and the way events are assigned to those objects. A simple example is when the ribbon is minimized, when you click a tab the ribbon pops-up but I need to know when you click away from the ribbon so I can hide it again. I do this by listening to events on the document object.

    If you mean shared State generally, when you create a control (such as the ApplicationBar or RibbonButton) there is a server-side contol and a reduced fuctionality client-side version. The client-side version is written in JavaScript to allow you to do basic operations without doing a PostBack, an example may be setting minimized state of the application bar or the checked state of a button. In addition, some operation, such as the way hover effects work, can't be done simply with CSS, as there are 3 elements that need to change (left, centre, right) so the client object is a good way of allowing this to be implemented. When values change on the client and you do a PostBack the server would have no way of knowing that you made the change. SharedState is similar to ViewState except it allows you to change the values stored on the client via JavaScript. When you call setChecked() against a RibbonButton the checked state (true) is set against the Shared State. This is stored in a hidden field and when it arrives at the server the server can tell what was changed and 'synchronize' the values against the server control. Text boxes, and hidden fields (or controls derived from them) handle this sort of synchronization for you, but when you create your own controls you have to handle it yourself. If you have no client-side interaction then this too is not an issue. However, when you have controls that interact both on the client and server you need this type of mechanism. Telerik and other control providers use this type of mechanism in one way or another, I have just given it the name 'Shared State' and allow you to add it to controls if you so wish.

    In the client-side JavaScript this is just held in an array and the get/set methods just access specific indexed items within the array. This makes it more intuitive and 'object' looking. What goes in SharedState is dictated by the server-side controls. You will notice that each control adds a set of items (the key can be used on the server to make it more readable) but again this is just a collection that can be easily written to a string than can be converted to the array when it gets to the client (the JavaScript eval methods does this for you). Shared State can be accessed and changed on the client but it cannot be created or added to.

    The idea behind the client-side member is to automatically create an instance of the client-side object. You can use this simply in JavaScript by using the client member variable name, such as _myRibbonButton.setChecked(true); i.e. you do not have to create this yourself. This is not the 'norm', for example to use a client-side version of a Telerik RadTabStrip you would need to manually insert an bit of JavaScript such as

    <script type="text/javascript">var tabStrip = <%= RadTabStrip1.ClientID %>;</script> 

    All I am doing is creating this for you, but more importantly it allows me to know what the client-side object will be called so that I can call methods against this object for hover effects etc.

    Why do I do this differently than others? I like this idea, think it is simpler, and requires less code. More importantly they know what they are doing and I don't :-)

    Hope that helps.

    Thanks
    Russell Mason

  • ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 23 May 2007 Link to this post

    Hi Russell, yes you did understand correctly - I want to check the toggle button so that it is hilighted when the user clicks.  This way the user will always know what menu they are in.  The check/hilight part is easy to do in the OnClientClick menu.

    Re the uncheck though - do I really need an array based function for this or anything special per group?  From OnClientClick can't I just store the name of the current item in a global variable, which I will know, then on the next OnClientClick event use that global variable to uncheck/unhilight the menu item - regardless of what group it was in? (because I won't care which group per se as long as I can uncheck)

    your can see my java pseudocode attempt for this in the last post.

    I may have just demonstrated just how little I know about JavaScript!  If thats the case feel free to say say "no it doesn't work like that buddy, so shutup!"

    regards
    ewart
  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 24 May 2007 Link to this post

    Hi Ewart

    The reason why I was suggesting some kind of array is if you want more than one toggle button active at a time. Examples:

    Button1 - Checked
    Button2 - Not Checked
    Button3 - Not Checked

    If you click Button2 you can use the single global value you suggested, set Checked to false against that value (Button1) and true against Button2. Button2 now becomes the globally set button. This works fine.

    However, if you have more than 1 set:

    Button1 - Checked
    Button2 - Not Checked
    Button3 - Not Checked

    Button4 - Checked
    Button5 - Not Checked
    Button6 - Not Checked

    These are 2 independent sets so you would need 2 global variables. When you click Button2 you change the first global variable to Button2, If you click Button5 you need to set the second global value to Button5 and reset Button4 not Button2. The more independant sets you have the more global values you need, thus the idea of an array.

    I'm not sure if you only need 1 set or not so if you do I apologise for confusing the issue.

    Thanks
    Russell Mason

  • ewart
    ewart avatar
    221 posts
    Member since:
    Jan 2007

    Posted 24 May 2007 Link to this post

    Yup just one menu item will be selected at once - essentially - when I click the menu item I want to hilight (check) it and then load the content for that menu option.

    Only trouble is I have no idea how to pass the client menu id from the OnClientClick.  event.  You can see i tried this in my code sample already included before, but it doesn't seem to work.  I am hoping my error in that code will be obvious to someone.

    regards
    ewart

  • Russell Mason
    Russell Mason avatar
    87 posts
    Member since:
    Oct 2006

    Posted 24 May 2007 Link to this post

    Hi Ewart

    I can't see anything wrong with the idea, you are correct in passing _thing1 to the SetHilightMenu method. The only obvious thing I can see in your example is 'prevMenu = currentMenu;' should be outside the 'if' statement or it would never get set (as prevMenu would start and always be null). I would also check for null rather than '' as this is an object not an ID, and set prevMenu to null on start.

    Thanks
    Russell Mason
  • NS
    NS avatar
    179 posts
    Member since:
    Jan 2007

    Posted 25 May 2007 Link to this post

    I have a following question:
    I use the office2007 ribbon as a masterpage in a project.

    Let's say that I want to create a portal with the office 2007 ribbon. EG. the buttonbar contains a link to subapplication1, a link to subapplication2 etc ...

    What would be the best practice to do this ? and could rad.dock help with this ?
  • Back to Top