I have a top level element <x-app> with nested modal dialogs
<x-app>
<material-content>
...
</material-content>
<x-alert-dialog></x-alert-dialog>
</x-app>
where <x-alert-dialog> contains
<modal [visible]="dlgVisible" dialog-id="alert-dialog-modal">
<material-dialog class="alert-dialog">
....
</material-dialog>
</modal>
Generated HTML contains <x-app> and overlay container div which contains modals as on the image
What I need is to access <div pane-id="default-1"...> to change z-index. and I don't know how. I cannot access it in CSS as any reference via :host is not possible.
I tried to access it programatically in x-app component. I have
class AppComponent implements AfterViewInit {
#override
void ngAfterViewInit() {
var doc = getDocument();
var alertDlg = doc.querySelector(".alert-dialog");
var alertPane = alertDlg.parent;
}
}
But alertDlg is always null. I also tried var alertDlg = querySelector(".alert-dialog");
Is there any way to access the element?
I solved it by adding *ngIf="dlgVisible" to <modal> tag, so it's now
<modal *ngIf="dlgVisible" [visible]="dlgVisible" dialog-id="alert-dialog-modal">
This way the dialog is injected to/removed from DOM by the visibility flag. The reason why I wanted to change z-index was to get the alert and other app wide dialogs above other dialogs created later in other components.
Altering DOM solves this as the dialogs are inserted after (and thus displayed above) other dialogs. Hope this will help someone.
I am trying to develop an UI and the first step is to create CssLayout. Each CssLayout component is added hierarchically with and many CssLayout component.
The problem is when i run the application and inspect the div tags, the class attribute has extra strings that needs to be removed.
<div class="v-csslayout v-layout v-widget .content-container v-
csslayout-.content-container v-has-width v-has-height" style="width: 100%;
height: 100%;"><div class="v-csslayout v-layout v-widget .inner-content-
container v-csslayout-.inner-content-container"></div></div>
and what I need is
<div class=".content-container">
<div class=".inner-content-container">
</div>
</div>
Java Code:
#StyleSheet("{css/spreadjsdefault.css}")
public class SpreadJSWidget extends CssLayout {
/**
*
*/
public SpreadJSWidget() {
super();
addStyleName(".content-container");
CssLayout mainBox = new CssLayout();
mainBox.addStyleName(".inner-content-container");
addComponent(mainBox);
}
spreadjsdefault.css (They are empty for now)
.content-container
{
}
.inner-content-container
{
}
Please advice !
Two things:
In order to be able to properly match the css rules, you have to omit the leading . when adding the style name, i.e. addStyleName("contentContainer"). This way, the css elements will match your style definition.
Css classes like v-csslayout are default classes defined by vaadin used by the default themes to provide a basic layout. They are there by default and can't (and actually shouldnt) be removed entirely. What you can do, however, is to define and overwrite these rules yourself. What's important: Either way, your custom classes will still match when you define them in your style sheet and can overwrite the default theming.
I am using inline frame on jsf page to render different jsff pages liked to various commandMenuItem but the page is not rendering properly its giving the message
This XML file does not appear to have any style information associated with it. The document tree is shown below.
and the displaying the page content as
how to overcome this problem and display the page properly inside the inline frame. I want that the page will display similarly inside the inline frame when we run the jsff page separatly in different window.
You cannot reference to jsff pages using inline frame, you can include jsff pages either by adding them into a task-flow and add the task-flow as a region, or use the jsp:include tag
Check this guide out http://docs.oracle.com/cd/E23943_01/web.1111/b31973/af_reuse.htm#CACHFJDJ
Since jsff page do not contain any css and style information..so it will not get displayed properly inside the inline frame..but instead we can display the complete jsf page inside the inline frame..now to display the dynamic jsf page inside the inline frame upon the commandMenuItem click from the jsf page...the procedure is below..
first create a jsf page(let say welcome.jsf)..add commanMenuItem to it...
Create 2 other jsf pages with any content on them.
In the first jsf page(welcome.jsf) mention the commandMenuItem's id same as the 2 different page created eg. commandMenuItem 1 id = "first" and commandMenuItem2 id = "second" and the name of the 2 other different pages must same as first and second.
now create a action listener bean on commandMenuItem
import javax.faces.event.ActionEvent;
public class PageBean {
String page = "home";//setting default page
public PageBean() {
}
public void getMenu(ActionEvent actionEvent) {
// Add event code here...
String id = actionEvent.getComponent().getId();
System.out.println(" Menu ID : "+id);
page = id;
System.out.println("Value assigned to the page from the menu Id is :"+page);
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
now on the secondCommandMeuItem also register the same actionListner bean
code on the main page containing menu...is
<af:panelGroupLayout id="pgl1">
<af:menuBar id="mb1">
<af:menu text="menu 1" id="m1">
<af:commandMenuItem text="commandMenuItem 1" id="page1" actionListener="#{PageBean.getMenu}">
<a4j:support event="onclick" reRender="if1"/>
</af:commandMenuItem>
</af:menu>
<af:menu text="menu 2" id="m2">
<af:commandMenuItem text="commandMenuItem 2" id="page2" actionListener="#{PageBean.getMenu}">
<a4j:support event="onclick" reRender="if1"/>
</af:commandMenuItem>
</af:menu>
</af:menuBar>
<af:inlineFrame id="if1" source="#{PageBean.page}.jsf" shortDesc="areaMp" partialTriggers="page1 page2"/><!-- getting dynamic page source from the managed bean variable(page) by fetching the menu id which is similar to the corresponding page name
also add the commandMenuId of the menu's in the partial trigger of the inline frame. -->
</af:panelGroupLayout>
You can include and display jsf page inside the inline frame and can use inline frame on jsf page and even on jsff(page fragment) also.
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.
I'm having isues trying to access a PathGeometry resource in a Resource Library in a silverlight 3 app
Ive created a resource file called Geo.xaml
in my app.xaml i link to this file
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Components/Resources/Geo.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
in my resource file i have the following line which has the geometry for a simple box
<PathGeometry x:Key="CloseCross">M0,0 L188,0 L188,161 L0,161 z</PathGeometry>
and then in my MainPage.xaml i have a path trying to use that resource
<Path Data="{StaticResource CloseCross}" Stretch="Fill" Margin="10,10,0,0" Width="100" Height="100" UseLayoutRounding="False" Fill="Red"/>
and in Blend 3 (RC) it all looks fine, the path takes on the geometry and displays fine, the problem is when i build it and view it in browser i get the following error
Attribute {StaticResource CloseCross} value is out of range. [Line: 8 Position: 14]
I discovered a semi work around but even that has issues, i can create a style for target type Path and use a setter to set the Data property of the Path
<Style x:Key="PathStyle1" TargetType="Path">
<Setter Property="Data" Value="M0,0 L188,0 L188,161 L0,161 z" />
</Style>
The problem with this is that when I apply that style, the geometry isnt displayed in blend, the path is there in the hierachy tree but is not visible on the canvas but when i build and view it in a browser, its all good...
can anyone help me understand why I cant seem to put path geometry in a resource file (or in fact anywhere)
One problem is that in Silverlight you cannot store Paths within the ResourceDictionary. I would put the Path coordinates within a string resource, and then use http://StringToPathGeometry.codeplex.com to create the paths.
It is actually possible to store a path in a ResourceDictionary, the trick being to store it as a string.
However, the issue with this is that you get no design time suport if you do this, although at run time, it looks great.
The workaround for getting design time support in SL 5 is to store the path as a string in a code file, then using binding to get to the path data. This is the only way to get your path to show up at design time.
For example, say you have a toolbar button and you want to use a path as it's icon:
<c1:C1ToolbarButton x:Name="SaveChanges">
<Path Margin="5"
Data="{Binding SaveIcon,
Source={StaticResource iconTheme}}"
Stretch="Uniform" />
</c1:C1ToolbarButton>
Now you have your path bound to a class which implements INotifyPropertyChanged:
//A class for storing Paths which are turned into icons.
public class IconTheme : INotifyPropertyChanged
{
private string _saveIcon =
"M10.280033,48.087753L10.280033,54.397381 50.810078,54.397381 50.810078,48.087753z M15.900046,6.4432963E-05L23.693047,6.4432963E-05 23.693047,15.900064 15.900046,15.900064z M3.4200456,0L10.280033,0 10.280033,19.019096 50.810078,19.019096 50.810078,0 58.300069,0C60.190087,0,61.730004,1.5399642,61.730004,3.4298871L61.730004,59.237114C61.730004,61.137043,60.190087,62.667,58.300069,62.667L3.4200456,62.667C1.53003,62.667,1.896733E-07,61.137043,0,59.237114L0,3.4298871C1.896733E-07,1.5399642,1.53003,0,3.4200456,0z";
public string SaveIcon
{
get { return this._saveIcon; }
set { this._saveIcon = value;
NotifyPropertyChanged("SaveIcon");
}
}
void NotifyPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
Lastly, you need to create an instance of the class in your App.xaml file:
<Assets:IconTheme x:Key="iconTheme" />
Now you can bind to this anywhere in your app and see the path at design time. I would prefer to have the path in Xaml, but not being able to see it at design time can be a significant drawback. Furtheremore, if I wanted to customize the Icons at runtime, I could now do so in the IconTheme class and the changes would instantly show up in the app.