I've got a flex project that I'm working on. Currently I've got a popup that consists of another mxml file containing a form.
Once the form is filled in and submitted I'd like to run another function then the popup closes on the main mxml file, but I'm not sure how to go about doing this?
Here's my popup code:
private var weightadd:weight_add; //POP UP ADD WEIGHT FORM
private function weightAdd():void {
weightadd = new weight_add();
PopUpManager.addPopUp(weightadd,this,true);
PopUpManager.centerPopUp(weightadd);
}
Currently in my weight_add.mxml file I'm using a button to close the popup, I'd like have this button close the popup and then call a function in my main.mxml file - I'm just wondering how I go about doing this.
<mx:Button x="186" y="83" label="Cancel" styleName="formbutton" id="cancel_button" click="PopUpManager.removePopUp(this);"/>
I found this example which seem to do the trick
http://bubutripathy.wordpress.com/2007/02/09/popup-login-window
Related
I am using materialize.css and have been trying to programmatically close a modal and then immediately open another.
This is the code I am currently using to open/close:
$('.modal').modal('close', "#modal1");
$('.modal').modal('open', "#modal2");
What actually happens is that when I call these functions, #modal1 closes successfully, but its backdrop remains there as it is.
At exactly the same time, #modal2 opens up and then immediately (in about 200 ms or so) closes back. Again, the backdrop stays unchanged.
Can I please get help to solve this?
The documentation calls jQuery old. So, am I using some depreacated method, and should I use a vanilla JavaScript equivalent for the same? What, if yes?
For Materialize.js version v0.100 and above.
You can call a onClick function() to close/open multiple modals like below:
Button
In below script when OpenCloseModal() function is executed here, it first closes the Modal (#modal1) and then opens the Modal (#modal2)
<script type="text/javascript">
function closeOpenModal() {
$('#modal1').modal('close');
$('#modal2').modal('open');
}
</script>
You can try:
$('#modal1').modal('close');
$('#modal2').modal('open');
No-JQuery way. First you should get an instance of modal that you intend to close. If e.g. on init you write:
var elems = document.querySelectorAll(".modal");
M.Modal.init(elems);
so in elems we have NodeList of all modals, for example we have three modals, to close second one you can say:
elems[1].M_Modal.close();
to open third:
elems[2].M_Modal.open();
function close_modal() {
var elem = document.getElementById("element-id");
var instance = M.Modal.getInstance(elem);
instance.close();
}
I am relatively new to ActionScript (have started with it 2 months ago), and have a little doubt of 'procedure' or 'technique' related to passing information between objects.
I have made a class that Pops-up a window that contains a panel with a textbox and two buttons, one for accepting, other for cancelling. It should work as a prompt in which you enter some text, and then if you like the changes, you accept, else, you cancel and the text you entered is discarded.
The thing I'm not sure how to handle is how to receive the text, once the user presses 'Accept', from the class I want to receive it from.
So, the approach I took is a bit cumbersome: firstly, when launching the popup, I associate with it a function (called onResult() in the code) from the 'class that launches', which will be called after the user presses the 'Accept' or 'Cancel' buttons; secondly, to get the text that the user inserted in the box, I keep a reference to it public from my class.
Please have a look at the code here:
http://pastebin.com/Kmud8rBe
I've also programmed in Android before, and the approach there would be much cleanier, just putting the text result from the popup inside a bundle inside an intent, and receiving it from the launched class. Here, I have to pass functions and such, which I don't like at all (although it works!).
So, my question is, for you ActionScript gurus out there, how would you approach this?
Thanks and regards!
pepillo
good that you created a class for your popup-functionality but why did you make all functions static? normal class with normal methods would be better ... and let the class extend from Sprite so that you can add the instance right to the stage.
package
{
import flash.display.Sprite;
public class Popup extends Sprite
{
public function Popup (label:String)
{
// add text and buttons ...
}
}
}
then you can just say:
var pop:Popup = new Popup("message");
addChild(pop);
and to get the data back after the popup is closed you would do sth like this:
private function onPressedAccept(event:MouseEvent):void
{
var text:String = _label.text;
// dispatch a custom event which saves the text as its data
dispatchEvent(new MyEvent(MyEvent.ACCEPT, text));
// close popup ...
parent.removeChild(this);
// or you would remove the popup in the ACCEPT eventlistener ...
}
listening for accept/cancel:
var pop:Popup = new Popup("message");
addChild(pop);
// add eventlistener
popup.addEventListener(MyEvent.ACCEPT, onAccept);
popup.addEventListener(MyEvent.CANCEL, onCancel);
private function onAccept(event:MyEvent):void
{
trace(event.data);
}
link about creating custom events:
http://www.8bitrocket.com/2007/7/31/Creating-Custom-Events-In-Flash-AS3-ActionScript-3/
I have used a datagrid and one button in control bar. by clicking button the application goes edit state from base state.
My question is how can i use popup for editing selected record of datagrid instead of changing state.
please give me any example with code that describe how pop ups can be used in flex 3 application.
I got answer for above problem.
First we have to create custom component for popup named MyPopup
And in application:
import components.popups.MyPopup;
public var pop:MyPopup;
public function Show_Pop():void
{
pop= PopUpManager.createPopUp(this,MyPopup,true) as MyPopup;
PopUpManager.centerPopUp(pop);
}
calling function:
<mx:Button click="Show_Pop()" id="btn1" label="show Popup"/>
This is probably going to be a simple question, but I can't seem to find my answer online after searching.
I am using the following simple code:
var fileReferenceList:FileReferenceList = new FileReferenceList();
fileReferenceList.addEventListener(Event.SELECT, onSelect);
fileReferenceList.browse();
A big flash button triggers this code, which works perfectly fine. Unfortunately, I don't enforce that the button cannot be clicked while the dialog box to browse file is opened, so I get "Error: Error #2041: Only one file browsing session may be performed at a time." if I click on the button while the pop up dialog box is up.
A solution that I really like is the one that Google Docs has. It does not let you click on their button, above "Select files to upload" while the pop up dialog box is showed. Actually, this dialog box has a sort of priority: You can't click ANYWHERE on the page before you select files or cancel on this dialog box.
I would like to have the same behavior, not let the users click anywhere in my web page until this dialog box is done, just like Google Docs does it, but I can't seem to find how.
Any clue from anyone please?
Thank you very much,
Rudy
You should take a look at the HTML file that embeds the SWF. In Windows/Firefox, the behavior of the "select file" dialog will differ depending on what Window Mode (wmode) you use in the EMBED tag in the HTML page.
If you use wmode="opaque" or wmode="transparent", then the "select file" dialog will not be modal, and you'll be able to click on the browser window itself to bring it to the foreground. (Also, you'll be able to minimize and even the browser window). This only seems to apply to Windows/Firefox; other browsers all appear to keep the "select file" dialog on top.
If you omit the wmode attribute (it defaults to "window"), or set it to "direct" or "gpu", then the "select file" dialog will be modal.
Modal "select file" dialog:
<embed src="Upload.swf"
wmode="window"
quality="best"
scale="noscale"
swliveconnect="true"
salign="lt"
width="220" height="75" bgcolor="#ffffff"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Non-modal "select file" dialog:
<embed src="Upload.swf"
wmode="opaque"
quality="best"
scale="noscale"
swliveconnect="true"
salign="lt"
width="220" height="75" bgcolor="#ffffff"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
The Google Docs browse dialog is "modal" (meaning the focus can't go to anything else while the dialog is up). As far as I can tell, the FileReference dialog box should be modal by default. What browser are you testing this in?
As a workaround, you could put a transparent (or semi-transparent, for a dimming effect) overlay over the entire stage while the dialog is up. This won't prevent the focus changing, but it will prevent other buttons on the stage from being clicked. For example a class like this:
public class Overlay extends Sprite
{
private static const BACKGROUND_OPACITY:Number = 0.40;
public function Overlay(_stage:Stage)
{
graphics.beginFill(0x000000, BACKGROUND_OPACITY);
graphics.drawRect(0, 0, _stage.stageWidth, _stage.stageHeight);
graphics.endFill();
}
}
That would be used like this (from the document class):
private var overlay:Overlay;
public function onButtonClick(e:MouseEvent):void
{
overlay = new Overlay(stage);
stage.addChild(overlay);
// ...
fileReference.browse();
// ...
}
public function onSelect(e:Event):void
{
stage.removeChild(overlay); // Also do this on cancel, and on errors
}
I have a situation where I need to integrate a gwt dialog (which to the best of my understanding is implemented as a div with z-index manipulation) into an existing html page.
There are two scenarios:
1. Which is the preferrable and more complicated is where i give the host html page another page which they embed as an iframe and I work my magic through there (maybe connect somehow to the parent window and plant my dialog I'm not sure).
2. Where I have limited access to the html page and I plant some code there which will load my dialog box.
Any ideas or thoughts on how I can implement these?
I've been working for a few months now with GWT and have found it quite nice although I have stayed far far away from the whole HTML area and until now all my work has been done strictly inside my java classes.
Thanks for any ideas and help handed
Ittai
I'll assume by dialog you mean a popup that is invisible at page load and made visible by, say, a click on something in the existing HTML. A simple strategy to make this happen is wrapping the existing HTML.
I have no experience with option 1. As for 2, all you need to alter in the existing HTML is
adding the JS import, e.g.
<script type="text/javascript" language="javascript" src="/com.your.org.Module/com.your.org.module.client.Module.nocache.js"></script>
then adding an id to some clickable element you want to activate your dialog, e.g.
<button id="launchDialog">Show Dialog</button>
and finally adding an empty div with an id to insert your dialog into the DOM.
<div id="dialog"></div>
Then all you need in your Module is
public class Module implements EntryPoint {
#Override
public void onModuleLoad() {
Button b = Button.wrap(DOM.getElementById("launchDialog"));
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel panel = RootPanel.get("dialog");
Widget w = ... // your dialog widget here
panel.add(w);
}
});
}
}
Lastly, you can play with the visibility of your popup div with the "display: none" style and the show() and hide() methods on the widget.