how to access navigationOptions or title from child component - react-navigation

I'd like to access a route's title, as defined in navigationOptions, from a component on my screen, and I don't see how. Am I going to have to shunt it through navigationOptions.params, and retrieve it with props.navigation.getParam()?

Related

Access data from another element in vuejs

I'm trying to get the data "course_name" from a component view.
I have a component . This component comes from element-ui.
In my component, I have an event object that contains thecourse_name data.
I would like to use the name of the event to use it as a title. I can not access it. I tried by doing in my file "header.blade.php":
<el-header>
#{{ event.course_name }}
</el-header>
but I get an error :
Property or method "event" is not defined on the instance but referenced during render.
How to access the title of the event?
Thank you very much

Make a label a global element

I have some code to make global variables that I can use to access variables across multiple .swift files. It looks like this:
struct globalValues {
static var test:Double = 1
}
And then I call it using
globalValues.test = 2
Can I do something similar to an #IBOutlet label?
A label cannot be global because it belongs only to one view controller. Moreover, it is very wrong to talk directly to a label (e.g. to read its text, or even worse to write to its text) from outside the view controller that owns it. Only a view controller should be in any way aware of its views as views.
Instead, your other code needs to figure out how to get a reference to the view controller that has the label. And then the view controller must have accessor functions or public properties that allow other code to talk to it about the data underlying the label in a coherent manner. If the view controller wants to respond by changing the label in some way, that is its business.

How to dynamically change the "title" of "app", based on login info (i.e. after login succeeds or logout)?

I have this code, please see the title prop:
const App = () => (
<Admin
theme={theme}
customRoutes={customRoutes}
menu={Menu}
dataProvider={loopbackRestClient(window.apiUrl)}
authProvider={authClient()}
dashboard={Dashboard}
locale="en"
i18nProvider={i18nProvider}
title={`Dashboard - ${window.accountData ? window.accountData.accommodation.name : ''}`}
>
// more code here...
This tries to change the rendered title when login succeeds and therefore we get different accommodation.name value from there.
I was expecting that the component may re-render with this event, since login affects the REDUX state, so the window variable (which changed after login) should render a different title.
It did not work.
How may we do it the proper way (react-redux way)?
You can make a custom and connected Title component and pass it as the title prop.
https://codesandbox.io/s/1072ry6rl7
Note that my custom Title component has to support a className prop. This is a material-ui requirement.
You should save that accountData you currently have on the window object in the Redux store in its own Reducer. And when your LOGIN Action is fired I would update that accountData with the new data.

Show specific presenter instance to flex panel gwt mvp

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.

Ember JS best way to show a full screen loading screen button press

I'm new with Ember and I would like to show a full screen overlay when a user presses a "get stuff from the server" button.
What is the best way to achieve this?
Does Ember already provide something built-in? Or is it that the only way is to have a piece of HTML in one of my templates, to show/hide it when the promise where I make the AJAX call returns?
You have a few options available to you.
The first concerns a route change. Conventionally speaking, if the user is hitting a button that transitions to another route, a separate route can be created to handle this in-between loading experience.
To describe this briefly, if you have a route named foo, creating a sibling route named foo-loading with an associated template, will show a "foo-loading" page state while things are being fetched, and then dismiss it once things are good.
Alternatively, as you've hinted, if the call to action for a user intends an updated result on the same route, a loading service could be useful. In your application template, you could have a loading div that is hidden by default. Prior to initiating an AJAX request, you could turn the loading state on and reveal the loading div. Then, once the AJAX call is settled, the finally block could include a call to conceal the loading div.
This latter approach would involve a conditionally loaded block in the primary application template, a loading service handling show and hide, and a loading template.
You could use ember-modal-dialog to create a loading screen component that gets rendered when you're waiting for your ajax request.
For example:
// view.js
showLoadingScreen: true
// view.html
{{#if showLoadingScreen}}
{{loading-screen}}
{{/if}}
// loading-screen.html
{{#ember-modal-dialog}}
<div class="loader-full-screen-class"></div>
{{/modal-dialog}}
The advantage of the component/ember-modal-dialog is that this pattern is usually implemented as a modal, and this library is the standard in ember. The component then allows you to put it anywhere you need it to be.

Resources