I have created a main class which has got 5 states:
<s:State name="loginState" />
<s:State name="librariesState"/>
<s:State name="createState"/>
<s:State name="profilesState"/>
</s:states>
Each state is created in a new MXML component file and is called in the main class as following:
<components:Homepage includeIn="homeState"/>
<components:LibrariesPage includeIn="librariesState"/>
<components:CreatePage includeIn="createState"/>
<components:ProfilesPage includeIn="profilesState"/>
In homeState I have three buttons which by clicking take me in librariesState, createState and profilesState. My problem is how to call the state view (defined in the main class) in the Homepage MXML component. I tried to write click="currentState='librariesState', but the state LibrariesState is not viewed in Homepage. How can I call a state from the main class in the MXML component?
Are you sure you need some type of ViewStack instead ? Generally, when you use a State, its because you want relatively small changes for the same view. Something such as an 'adminState' contrasted with a 'userState'; whereby certain buttons are disabled or inactive in the userState are enabled in the adminState.
I have discovered: it is very simple! In the component class one can use this.parentApplication.currentState="createState";
This is the way in which every method from main can be accessed from a components:
this parentApplication.method()
I hope it can save time for other people who are beginners like me.
Related
I'm still learning GWT, yet already have to face some kind of challenge for a work I have to do. Can't show any specific code so I'll try to explain it well.
Here's the situation: A certain class "Navigator" creates and save the Presenter instances of my architecture to allow reusing them. There is a method show() inside that same class that actually displays the view related but that system only works full screen by calling RootPanel.get().
What i'd like to do is showing that presenter instance's view inside of a flex panel element declared in a class myView (related to a class myPresenter) that basically uses Flex Panel to structure it's content.
To make it maybe more clear:
class myView{
...
flexPanel.setWidget(firstWIdget)
flexPanel.setWidget(secondWidget) //secondWidget to be replaced by a "thirdWidget"
...
}
I'd like the secondWidget to be replaced by another one, let's call it thirdWidget, that consists of a specific presenter instance's view.
To resume, I'd like my presenter instance's view to not go full screen but only occupy a certain area of the screen.
The displaying is managed almost entirely programmatically, means very limited use of css files and no use at all of xml ui files.
How can I manage this ?
Thanks
Use a SimplePanel as a container for your views returned by your Navigation class instead of adding them directly to root panel, and use that instance of SimplePanel where ever you want.
I have many layouts that extends VerticalLayout. I am removing all of them from a main layout add adding one of them to the main layout, to change the "page". First, is there a better option to this ?
My main question is, since I am adding the same component created in another scope, the content of the layouts doesn't change until I refresh. I want it to change after I click the icon in the menu bar.
So what I am looking for is a method like component.refresh() or something like this.
How can I achieve this ?
What your missing is this:
1. You can not add one component to two or more parents. The moment you add a component to parent2, its removed from parent1 (You get to see this when you hit refresh)
2. You are not using #PreserveOnRefresh on your UI class
I am trying to make a single page application in which I have 3 components : Index, BluePage and GreenPage
I'm trying to use React and React router to switch through them. The layout is as follows:
This view is supposed to be like a sliding page and can be better visualized like this following diagram:
In order to do these transitions, I am currently using ReactCSSTransitionGroup and CSS classes, however it is becoming difficult as the direction the page must animate depends on the page that was being viewed before.
For example, if the BluePage was in view, and the user pressed the "back", button, the Index should move into view from the right.
On the other hand, if GreenPage was originally in view, the Index should move into view from the left.
The Question
How can I use React Router to send the existing path to the next component, so I can animate the components properly?
Should I continue to use ReactCSSTransitionGroup or should I handle animations in the componentWillMount and componentWillUnmount callbacks?
If so, how does adding CSS classes to objects after initial rendering work?
I apologize if these questions seem somewhat novice - I am still a beginner to ReactJS. Thanks for all the help!
If any clarification is necessary, let me know.
I would recommend you to check react-swipeable-views.
In this component, you just need to add all of your views (components) as children of the SwipeableView component. The currently active view is defined by index prop of the SwipeableView. You switch the view with buttons, you simply need to create a state in the main component (App, for example) and update this state in onClick handler. It would look like this:
class MainComponent extends Component {
state = {
index: 0,
}
onBlueButtonClick() {
this.setState({ index: 1 });
}
render() {
return (
<div>
<div onClick={() => this.onBlueButtonClick()}>Click me!<div />
<SwipeableView index={this.state.index}>
<BlueView />
<GreenView />
<RedView />
<SwipeableView />
</div>
);
}
}
Hope it helps! ;)
EDIT: I have added a button in the example to explain how to use this component when there is no swipe effect. This is a React component and not a React Native, so it was made to work on a website, therefore without a swipe. I use it in one of my projects. Here's a GIF of it.
What I would suggest you is tu use swiper.js. Why?
performant (desktop, mobile)
no jquery needed
huge api, with very usefull features for your use case
change slide programmatically: swiper.slideTo(2) or swiper.nextSlide())
Hash/History Navigation: sync between hash and slides
you can disable touch gestures
etc..
Setup
npm install swiper --save
Import
const Swiper = require('swiper');
or
import Swiper from 'swiper';
Usage
see demos with example
There is a lot of questions about this but I cannot find any answer that works with the latest durandal version (2.1.0).
I am showing a child viewmodel inside my page using this:
<div data-bind="compose: { model: activeScreen, activationData: {id:selectedId}}"></div>
activeScreen is an observable to which I pass an string like this: viewmodels/child
It works, and the child viewmodel gets activated and shown on the screen. But when I change activeScreen, I need the child viewmodel to run deactivate. Is it possible? How?
So long as your child views are instance modules and not singleton modules, you can move that code to the detached handler. That's what we do as well: All of our child views are managed through dynamic composition, not child routing (which just doesn't work for the enterprise-style app). The deactivate handler comes into play in the context of routing.
By dynamic composition I'm referring to the swapping in and out of child views/viewModels through an observable.
But, again, the key to making this work is that the child views must be instance modules. That way they'll actually get unloaded from memory. If you go with singletons, the modules will never get detached (although there are ways to force this to happen).
I've created a sandbox with a demonstration of binding UI components to both data and state: http://dojo-sandbox.net/public/51073/1
It's my plan to generate code from a page definition creating a page-level widget which is templated. This widget will have its own scope, where the model and state will reside, which I am trying to simulate in the sandbox by way of the Page object.
The sandbox is working because the Page object is in the global state, which appears to be the default context for object resolution in mvc binding.
However the plan is to have a view widget supporting each page with both the Model and State contained within the widget's scope. The generated template for the view would be bound to both the Model and the State. I can establish the source via the 'target' property, but when the same UI component must be bound to two different models, one for value and one for state, the single source doesn't support this.
The Model data will come to me from the back-end, and the State data is derived via the State.Execute method once the Model data is present.
I've taken a look at the 'rel:' parameter of at(), but don't see how to leverage this syntax within a specific context, ie my view widget's scope. It seems to be working fine for the default global scope.
Is there a standard way to direct the data-dojo-props value binding at one source, and the data-mvc-bindings for attributes at another? Or, more precisely, what is the at('rel:') syntax which will support specifying the context of the relation, and not rely on the 'target' of the widget or containing widget?
If there is no way to specify the 'target' at this level, I will generate more logic in the Execute method to specifically set the html attribute on the component during state compilation.
data-mvc-bindings is for allowing non-widgets use dojox/mvc/at. If a widget is declared for an element data-dojo-props is the one for use instead.
If target is specified via data-dojo-props or data-mvc-bindings, it’ll be set eventually to the widget.target. ”rel:” syntax looks for a widget having .target up in DOM tree.
It means that one “group” cannot have more than one "relative binding target”, in case it’s one of your questions. You can have a “scope object” that contains pointers to more than one models and use it as a “relative binding target”, that may serve a similar purpose:
<div data-dojo-type="dijit/_WidgetBase"
data-dojo-props="target: {model0: model0, model1: model1}">
<input type="text"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="value: at('rel:model0', 'value'),
disabled: at('rel:model1', 'disabled')" />
</div>
A working example can be found at http://jsfiddle.net/asudoh/M3bRC/. Hope these help.
Best, - Akira