I've got the following problem, my boss wants me to make our app far more responsive without any waiting time between switching views. It used to a "standard" application based on a ViewNavigator but with just one View that was destroyed and re-created with different content based on the user's selection of tabs he created himself. Views were switched with the default SlideViewTransition. I'm down to half a second now with a slightly more lightweight approach as described below, however that half second is still too much.
The app is a tabbed application where the user can create and edit new views himself, so create/edit/delete tabs and their corresponding tabs.
My current implementation is based on a ButtonBar and a Group that is used to display the "views". The group's content is created based on the selected tab. The content is based on XML data that stores all the required information to build the "view". Naturally, removing and creating the component's takes a little while (the half second I talked about), so I'm after another solution.
What I thought about is using the ViewNavigator and create all stored views upon application start.
Very much like this:
for each (var _view:XML in _allViewsConfig.children()) {
var compView:View = new View();
compView.percentHeight = 100;
compView.percentWidth = 100;
compView.name = _view.label;
for each (var _groupElement:XML in _view.vgroup) {
var group:VGroup = new VGroup;
group.percentWidth = 100;
group.percentHeight = 100;
for each (var _windowElement:XML in _groupElement.window) {
var window:WindowContainer = new WindowContainer;
for each (var _componentElement:XML in _windowElement.component) {
var component:UIComponent = _componentManager.create(_componentElement.#type, _componentElement);
window.addElement(component);
}
group.addElement(window);
}
compView.addElement(group);
}
views.addItem(compView);
}
views is an ArrayList that is used to store the created views.
The only problem I've got right now is that I can't use the Views stored in this ArrayList in the corresponding ViewNavigator.
I tried it the usual way, i.e. navigation.pushView(_viewCreator.views.getItemAt(0) as Class);
This, however doesn't work, no error or anything, the ViewNavigatorjust doesn't do anything, so I guess that a View class can't be created like this.
So how can I make this work?
Also, do you guys think that this is a proper solution to the problem, especially considering the whole dynamic nature of the application (being based on tabs)?
Naturally, slide transitions will be completely disabled as they are quite slow with our complex components.
Any help, comments or thoughts would be greatly appreciated!
EDIT:
On second thought, simply using Groups instead of ViewNavigator and View should make this a little more lightweight and solve the issue of views not being pushed.
In fact ViewNavigator pushView() is a mechanism which create an instance of a given Class (method parameter).
For all navigation history purpose, ViewNavigator uses NavigationStack objects to store relevant values (that you can customize too).
I don't have a straightforward answer for you, but I think you'll have to implement your own custom ViewNavigator mechanism (extending ViewNavigator to leverage existing useful methods and override others).
Related
I have a tabbed web page and I would like to place two different instances of mxGraph, one on the 1st tab and the other one on the 2nd tab:
var editor1 = new mxEditor();
var editor2 = new mxEditor();
I would like to configure each instance in its own way, so the two editors should have different behaviours and properties. Unfortunately, mxGraph is based on lots of static constructs:
mxConstants.EDGE_SELECTION_COLOR = '#a8d6e1';
mxGraphView.prototype.updateFloatingTerminalPoint = function (...) { ... };
mxConnectionHandler.prototype.movePreviewAway = false;
...
It seems that placing two graphs on the same page isn't the right thing to do, since the latest configurations would override others and, maybe, one event can conflict with other ones.
What are you suggesting me?
I'm thinking at completely redrawing graph every time a tab gets focused, but: 1. performances? 2. does mxGraph have a global destroy or reset function? 3. any side effect?...
I have a menu with five buttons. Menu is visible all the time. there is click event for each menu item. which slides corresponding movie clip from left to right. each movie clip has different nature events and respective animation and activity. for example tab 1 brings the video page. and within that movie clip I have video events like play pause volume and on complete etc. events and code. tab 2 has button group for Time and another button group Features. depending on user selection code will calculate and show value on a animated counter. tab 3 has button group for Time and button group Source. as per the user selection it will calculate and show the values as animated graph. and so on.
Right now I have all the individual tab movie clip has its own time line code for its own events. and some crossover variables and references with other tabs. Everything is working as expected. No problem. I know time line code is not the best way to do any complex project.
So, I would like to get the entire coding as one class or more classes if that is the correct way.
I am beginner as far as class logic. I have already created Main as document class and could control the general navigation of tabs and their initial look. But stuck at tab specific button events and other such unique events for the specific tab.
Any help is greatly appreciated. Thanks in advance.
any similar example or suggestions.
First of all, thanks a lot for a prompt response. It seems like I am not even a beginner. I need to read a lot and probalbly grasp all fundamental concepts thoroughly. I have gone through both the links suggested in your comments. I am trying to digest the stuff slowly. I do not have any formal informal education regarding OOP or any sort of programming. To be honest, I have hard time understanding the code you have suggeted. Not because of your code but because of my level of caliber. I will have to spend some time to make myself clearer regarding events and sequence etc. different tab contents are as movieclips to main timeline and already placed on stage. It comes and goes to its corresponding tab button click event. I am not marking your answer as yes because I still need to my own homework based on your suggestion. Thanks a lot once again. I am sure I will ask few more questions later.
This is how I would design it:
I'd have a Menu Class, which only contains the buttons and "converts" clicks on them into more specific events. That might look something like this:
public Class Menu extends Sprite {
protected var buttons:Vector. = new Vector.();
public function Menu() {
super();
var loops:int = numChildren;
for (var i:int=0; i<loops; i++) {
var button:SimpleButton = getChildAt(i) as SimpleButton;
if (button) {
buttons[buttons.length] = button;
button.addEventListener(MouseEvent.CLICK, broadcastMenuEvent);
}
}
}
public function broadcastMenuEvent(e:Event):void {
var button:DisplayObject = e.currentTarget as DisplayObject;
dispatchEvent(new Event(button.name, true));//bubbling, can catch at any level
}
}
The way this is built, you can change the events that are being dispatched simply by changing the name you give the instance of the button on stage. Note that you need to apply Menu as the Base Class and not the Class for this to work if you have "declare instances automatically" unchecked, because doing it that way allows the compiler to generate those instance names for you in a way your base Class doesn't have to know about.
At this point, you can then deal with those events in another place--whether it's your main document Class or whether you have a separate Controller.
I would define each of the Views you described as a separate Class as well. If you have objects coming and going on the stage, you can use one of the techniques described here to handle that. Otherwise, it's fairly straightforward to address your timeline instances from the base Class instead of timeline code. Again, you can listen for those events in the main document Class or a dedicated Controller--the main point is to make sure your Views are not making any important decisions and usually they should not be editing data.
You can choose to have your Main Document orchestrate how the tabs get added and removed (I'm a big fan of using the timeline with goToAndStop, but not everyone shares this preference), or, again, you can separate this logic out to a dedicated Controller. I would suggest that if it's possible to generalize how your Views work to have them implement a single Interface. That way, you can give them a single instance name and manage them all with the same getter/setter pair (assuming you go the timeline route).
Note the Flash compiler isn't terribly sophisticated in this regard, so if you do this and your Views extend different parent Classes, you'll get compiler warnings. Just ignore these--they don't mean anything.
The thing you shoud try to root out of your code completely is the part where Views are referencing each other. The only time it's acceptable for one View to know about another is when it's a parent knowing about its child. Even then, try to have as little specific knowledge as possible. Notice in the Menu View I wrote as an example, the parent only knows there may be some SimpleButtons, but it has no specific knowledge of where they are on stage, what, specifically, is in them, or even what there instance names are.
Instead of having your Views know about one another, have a third party (which, again, you can choose to use the main Document Class for or not) that transfers requests for state changes (in the form of events) from one to another.
How would someone go about coding a 'window'? I'm starting to make a GUI, and I want to learn how to code one. One that can be skinnable, and one that actually loops and creates itself at runtime. I understand that this might be a bit vague, so I'll add details.
One that actually 'creates' itself. Most GUI tutorials I've looked on depends on an 'image' that just gets added on the screen. I want to be able to use skins in my windows. One where my 'skin' is just a collection of 'borders'. Then when I insert window.create(50,50) where 50,50 is my height, width, It would just create that window, following the skin.
I understand that it probably follows just like when a language draws a rectangle, it just follows a different set of rules (maybe?). However, for all my Google-fu skills I cannot find a tutorial that teaches me this.
Please Help. I didn't include the language I used as you can see, because I believe I just need to know how to create one. Anyway though, I am using Actionscript 3. A tutorial would be just fine, or even A SINGLE CLASS THAT HAS THIS FUNCTIONALITY, I'll just study the code. Or if you know one, maybe a whole book about GUI and programming it :D
Pure As3.0 GUI coding is quite troublesome. I try to Googling, but not come out well. anyway for my case, i generate using a SWC, and Class Mapping and Customizing. but i'm not sure best way. in other way i use a bit101 library. this is gives me want Window, Charts, Componets easily of high abstraction. see the below image.
It can be pretty hard and complicated to do, or very easy, it just depends on how flexible your solution should be. You need firstly to design a structure of your program and approach to the problem.
I like to go from the image of how it should look like from API point of view. I think I would create a GUI element like this:
var wholeGui:MyGUI = new MyGUI();
var window:IGuiElement = new GuiWindow(dataObject, skinObject);
wholeGui.addElement(window);
So what would you need?
1) Object that would manage all GUI elements. Why? Simply because your GUI elements shouldn't be destroyed by themselves if user will click "X" on your little window. The wholeGui object would manage them and listen for any events including those that would destroy them. You may consider creating custom events for interaction between the wholeGui object and your window object if this interaction is going to be complicated.
2) Interface for your GUI objects. Some problem here is that AS3 actually doesn't have interface for Sprite, and you would like to interact with it like with extended Sprite. The workaround here is to have in this interface a declaration like this:
function asSprite():Sprite;
And your implementation in GuiWindow would look like this:
public function asSprite():Sprite {
return this;
}
And your GuiWindow class should extend Sprite of course. Then you would have access to it's Sprite properties and methods by writing for example: window.asSprite.startDrag();
This interface should give you abilities that you need to operate on your GUI element.
3) Class for your GUI element, in this example GuiWindow.
4) Class for your data that would be injected into your element. If you would load data dynamically, and from some location, you would need to deal with the situation when no data can be provided - but that logic would be inside your window.
5) Class for your skin - so you would be able to dynamically create a skin object and use it to create your window in a way you want.
That's just few thoughts to consider.
PS. It may be good idea to fill GuiWindow object with data AFTER creating it, and not in constructor, as you would be able to visualize loading process then.
if we open lot of popup during browsing(web) or in an AIR application, how remove them at once?
I don't think there's really a call for removing all pop-ups with the pop-up manager. I think you would need to keep a reference to each instance in a list and call PopUpManager.removePopUp for each one. Honestly though it's probably not a good idea to have a ton of pop-ups (in terms of user experience) there may be a case for it but I would definitely take some time to consider if it's the best option really.
EDIT:
You could also consider extending PopUpManager and maintain an internal collection, it looks like PopUpManager uses PopUpManagerImpl and doesn't seem to expose the impl property it uses for delegating the actual work so you'd probably need to extend both. But you could then use the PopUpManagerImpl.mx_internal::popupInfo which is an array that has objects that have a property called owner that seems like it would be what you'd want to supply to the calls to removePopUp.
Add all popups in array when u create it. And remove all popups
var popupCollection:ArrayCollection = new ArrayCollection;
var mypopup:IFlexDisplayObject;
PopUpManager.centerPopUp(mypopup=PopUpManager.createPopUp(this,popupWindow));
popupCollection.addItem(mypopup);
u can remove all popup using loop
PopUpManager.removePopUp(popupCollection[index] as IFlexDisplayObject);
My head is spinning from two days of trying to find an answer to this seemingly simple question.
I'm developing a Flex/AIR application built entirely in ActionScript -- there's no MXML beyond what was originally auto-created.
I need to dynamically generate some kind of editable text-field with high control over formatting. The TLF text fields all seem great, except that I can't get any of them to render on the screen. Due to the nature of the application, they have to be inside a MovieClip, but since I've read that everything must be a descendant of UIComponent, I use UIMovieClip, which is AddChild'ed to the stage.
I'm about to go crazy here, the whole application is in jeopardy over this. I CAN NOT use MXML, and all the 10,000 examples on the internet are MXML. I need to generate these dynamically. I need to generate upwards of 50 fields under one movieclip based on database data. There's no way to hardcode that with MXML. Please don't suggest to change this. The GUI is very specific about this, and it's the right GUI.
In two days of searching, I can't find a single example in ActionScript, only MXML. I've tried everything that smelled like an example.
Is there some obvious general pointer I'm missing? I'll be happy to post code, but it doesn't make sense because I've been through so many examples.
Does anyone have the simplest possible code for creating any kind of TLF text editing field in ActionScript only (zero MXML), which is then added to a MovieClip or UIMovieClip, which is added to the stage of a desktop AIR application?
I will greatly cherish any help here.
Best,
Per
This should get you started:
//create your TextFlow component
var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = "hello world";
p.addChild(span);
textFlow.addChild(p);
//create a Sprite that will contain the text
var textBlock:Sprite = new Sprite();
//create a controller for compositing
var controller:ContainerController = new ContainerController(textBlock);
//set the size of the composition
controller.setCompositionSize(100, 200);
//make the controller control the TextFlow object
textFlow.flowComposer.addController(controller);
//update the composition
textFlow.flowComposer.updateAllControllers();
//add to the stage
addChild(textBlock);
About the size: it is important you use setCompositionSize() instead of the Sprite's width and height properties.
Using addController() you could spread the text over several Sprites. Each Sprite would have its own ContainerController, but all would share the same FlowComposer which would calculate the composition.
warning : using TLF like this can be pretty complicated. Above code is the bare minimum to get things running. I do not know your requirements, but you'll probably hit a few other roadblocks along the way. You have to ask yourself this question: are you really willing to drop all the built-in features of TextArea? It might cost you months of development to get things right, depending on the requirements. You still may want to reconsider your architecture...