I have a menu with data source as sitemap. Which is working fine. I need to add few option based on contents. First, if external link, add "Target=_blank" and add a second css class, which will show a popup message for warning. So I added MenuItemDataBound event which is working for "Target=_blank", since I see the target property and able to set in event. But how can I add second css class. If add second css class to DynamicMenuItemStyle-CssClass property, which applies to all menu items.
<asp:Menu ID="mnu1" runat="server" DataSourceID="smdsMenu1" Orientation="Horizontal"
DynamicMenuStyle-CssClass="MenuStyle" ItemWrap="true" DynamicMenuItemStyle- CssClass="MenuItem"
DynamicHoverStyle-CssClass="MenuItemHighlight" OnMenuItemDataBound="Menu_MenuItemDataBound" >
Protected Sub Menu_MenuItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.MenuEventArgs)
If CType(e.Item.DataItem, SiteMapNode)("urltarget") <> "" Then
e.Item.Target = CType(e.Item.DataItem, SiteMapNode)("urltarget")
End If
End Sub
In Event function, I accomplish the external links opening in new windows, by "e.Item.Target", but there is no property for setting CssClass.
Related
I have a custom section, with a custom tree.
I'm having a bit of trouble understanding how you set the correct behavior when:
You click a node in your tree to edit it.
You click a menu item on a node like "Create"
In my solution I'm using the same view to edit and create a record.
In my tree this is how a node is generated.
var routeToView = "rewards/rewardsTree/editcampaign/campaign-" + campaign.Id.ToString();
var campaignNode = CreateTreeNode("campaign-" + campaign.Id.ToString(), id.Split('-')[1], queryStrings, campaign.CampaignName, "icon-folder color-yellow", true, routeToView);
This is producing the route I want: (the name of my html file is editcampaign.html) and it is also passing "campaign-6"
/umbraco#/rewards/rewardsTree/editcampaign/campaign-6
When a user clicks the create 'menu Item' on the node - I want to send them to the same URL but just with a diffrent Id for example:
umbraco#/rewards/rewardsTree/editcampaign/brand-1
and I don't want it to pop up out of the side
This is what I have tried so far:
//This finds the view, but it comes up in a dialog also how do I pass the Id (brand-1)
MenuItem mi = new MenuItem("editcampaign", "Create Campaign");
menuItemCollection.Items.Add(mi);
//Also Tried this finds puts a whole another umbraco UI inside a dialog
mi.LaunchDialogView("#rewards/rewardsTree/editcampaign/brand-1", "TITLE GOES HERE");
Can anyone point me to the fullest documentation for Menu's trees and navigation around the back office in general?
I believe there is an option to set view path on the "Create" menu item, which makes it open normally? Also, wouldn't it make more sense to have your path like /view/path/here/id ? Then when you create a new item just send 0 as id. Umbrangular on Github is a project with great examples of custom sections and views.
EDIT: Here's an example
protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
{
var menu = new MenuItemCollection();
MenuItem createCategory = new MenuItem("createcategory", "Create Category");
createCategory.AdditionalData.Add("ParentCategoryId", id);
createCategory.NavigateToRoute("/path/to/view/category/0");
createCategory.Icon = "add";
menu.Items.Add(createCategory);
return menu;
}
I'm trying to make a radiobutton component in AngularDart.
So it would be used as follows:
<radio_component currentIndex="0" selectedIndexZ="{{cmp.selectedIndexZ}}"
textLabel="Label A"></radio_component>
<radio_component currentIndex="1" selectedIndexZ="{{cmp.selectedIndexZ}}"
textLabel="Label B"></radio_component>
If someone clicks on one of the radio button components I want the other radio button components to change their state to change a CSS class.
When someone clicked on it, I changed selectedIndexZ inside one of these and it didn't update the other ones.
class RadioComponent extends AttachAware with ShadowRootAware {
#NgTwoWay('currentIndex')
int currentIndex = 0;
#NgTwoWay("selectedIndexZ")
String selectedIndexZ = "0";
If someone clicks on one radio button component, how can it cause the others to update ?
Since I have a lack of time, i.e., I have to get it working absolutely NOW, I just copied this method and this works Creating an Angular.Dart Cube component with 6 template arguments
If I get free time in future I'll get back to this question.
You need to use a controller on an ancestor element and bind the selectedIndexZ of both elements to this controller (in the future there will be only one root controller)
You can also embed both elements into another component (which is implicitly a controller) and bind to a field of this component.
#Component(selector: 'parent-element', publishAs: 'par', template: ...)
class ParentComponent {
#NgTwoWay("selectedIndexZ")
String selectedIndexZ = "0";
}
template
<parent-element>
<radio_component currentIndex="0" selectedIndexZ="{{par.selectedIndexZ}}"
textLabel="Label A"></radio_component>
<radio_component currentIndex="1" selectedIndexZ="{{par.selectedIndexZ}}"
textLabel="Label B"></radio_component>
</parent-element>
I'm writing a firefox addon and I'm trying to use an xul overlay to insert a canvas element. The problem is, the parent xul node of where I want to insert the canvas element has no id. Is it possible to do if there's no id? I also tried using the anonid for elements that had no id as you can see below, but had no luck with that either.
My xul overlay:
<?xml version="1.0"?>
<overlay id="myOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml">
<tabbrowser id="content">
<tabbox anonid="tabbox">
<tabpanels anonid="panelcontainer">
<notificationbox>
<stack anonid="browserStack">
<html:canvas id="myCanvas" height="100%" />
</stack>
</notificationbox>
</tabpanels>
</tabbox>
</tabbrowser>
</overlay>
I would like the canvas element to be inserted after each browser element in each tab like this: http://img.photobucket.com/albums/v215/thegooddale/80eae9ee.jpg
There are multiple issues with the attempt to use overlays for this:
Overlays don't work without an ID, they simply don't have another way to address an element.
Overlays cannot apply to something that isn't there when the window loads - they are a one-time thing and cannot consider dynamic elements that are created later.
Overlays cannot apply to anonymous elements (displayed in red in DOM Inspector). These elements are injected by an XBL binding and are not part of the XUL document.
You will have to use JavaScript and inject your canvas "manually" each time. You can use the TabOpen event to get notified whenever a tab is opened. Something like this should work (untested code):
// Always wait for the window to initialize first
window.addEventListener("load", function()
{
function initTab(tab)
{
var browser = window.gBrowser.getBrowserForTab(tab);
var canvas = document.createElementNS("http://www.w3.org/1999/xhtml",
"canvas");
canvas.setAttribute("anonid", "myCanvas");
canvas.setAttribute("height", "100%");
browser.parentNode.appendChild(canvas);
}
// Init all existing tabs first
var tabs = window.gBrowser.tabs;
for (var i = 0; i < tabs.length; i++)
initTab(tabs[i]);
// Listen to TabOpen to init any new tabs opened
window.gBrowser.tabContainer.addEventListener("TabOpen", function(event)
{
initTab(event.target);
}, false);
}, false)
Note that this code sets anonid attribute rather than id - an ID is supposed to be unique, you shouldn't assign the same ID to a dozen elements.
This won't work without an id. You could insert a piece of Javascript in the XUL document, that uses document.querySelector to find the tabpanels inside your XBL binding, and then would append the dynamically-created canvas to id.
However, since a new notificationbox is created every time a new tab is opened, you should have your javascript watch for new tabs and insert the canvasses accordingly.
In a Firefox add-on built with the Add-on SDK, how can I disable and re-enable JavaScript for a single tab?
The SDK itself doesn't provide this functionality, you will have to work with the XUL directly. What you need to do is accessing the docShell property of the XUL <browser> element corresponding to the tab. The docshell has an allowJavascript property that lets you switch JavaScript on and off. Something like this should work:
var window = require("window-utils").activeBrowserWindow;
var tabBrowser = window.gBrowser;
var browser = tabBrowser.selectedBrowser; // or: tabBrowser.browsers[n]
browser.docShell.allowJavascript = false;
Unfortunately, it doesn't seem possible to take a Tab object and find the corresponding XUL element - you have to work with the XUL window from the start.
Relevant documentation:
window-utils package (the properties activeWindow/activeBrowserWindow are undocumented for some reason).
<tabbrowser> element
<browser> element
nsIDocShell interface
I have a page made of custom components. In that page I have a button. If I click the button I have to call another page (page.mxml consisting of custom components). Then click event handler is written in Action-script, in a separate file.
How to make a object of an MXML class, in ActionScript? How to display the object (i.e. the page)?
My code:
page1.mxml
<comp:BackgroundButton x="947" y="12" width="61" height="22"
paddingLeft="2" paddingRight="2" label="logout" id="logout"
click="controllers.AdminSession.logout()"
/>
This page1.mxml has to call page2.mxml using ActionScript code in another class:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
}
Your Actionscript class needs a reference to the display list in order to add your component to the stage. MXML is simply declarative actionscript, so there is no difference between creating your instance in Actionscript or using the MXML notation.
your function:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
}
could be changed to:
static public function logout():StartSplashPage {
return new StartSplashPage();
}
or:
static public function logout():void {
var startPage:StartSplashPage = new StartSplashPage();
myReferenceToDisplayListObject.addChild( startPage );
}
If your actionscript does not have a reference to the display list, than you cannot add the custom component to the display list. Adding an MXML based custom component is no different than adding ANY other DisplayObject to the display list:
var mySprite:Sprite = new Sprite();
addChild(mySprite)
is the same as:
var startPage:StartSplashPage = new StartSplashPage();
myReferenceToDisplayListObject.addChild( startPage );
Both the Sprite and the StartSplashPage are extensions of DisplayObject at their core.
You reference MVC in the comments to another answer. Without knowing the specific framework you've implemented, or providing us with more code in terms of the context you are trying to perform this action in, it is difficult to give a more specific answer.
I assume that you are on a page with a set of components and want to replace this set of components on the page with a different set of components. My apologies in advance if this is not what you are trying to do.
You can do this using ViewStacks and switching the selected index on selection -- this can be done either by databinding or by firing an event in controllers.AdminSession.logout() and listening for that event in the Main Page and switching the selectedIndex of the view stack in the handler function.
MainPage.mxml
<mx:ViewStack>
<views:Page1...>
...
<comp:BackgroundButton x="947" y="12" width="61" height="22"
paddingLeft="2" paddingRight="2" label="logout" id="logout"
click="controllers.AdminSession.logout()"/>
</views:Page1...>
<views:Page2 ...>
...
<comp:Comp1 .../>
<comp:Comp2 .../>
</views:Page2>
I think you may use state to do you work.
You may take a look at http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/#more-221
Edit:
I am not sure I fully understand your case.
As I know, you may make a new state in page1.mxml, and name it, eg. secondPageState, and then put the custom component page2.mxml in the secondPageState.
In the controller, you need an import statement to import the page1 component and make a public var for the page1 component, eg. firstPage.
Then, the code will similar to:
public function logout():voild
{
firstPage.currentState = "secondPageState";
}
Another solution:
If you don't like the change state solution, you may try to use the addchild, to add the custom component to your application.