The vue3's "KeepAlive" component can cache component by "component name".
Is there any other way to cache component by "key".
Suppose there are 2 pages sharing the same component "A".
But I want the keep alive to cache 2 component instance like "page1" & "page2".
Each of them sharing different data and I can switch to one of them without droping data.
Related
Within an area in Magnolia template, we could create 2 components. We should restrict the user in a way that they don't create duplicate components. Can we achieve this through configurations or this requires a custom property created? Any pointers would be of great help!
areas:
myArea:
availableComponents:
maxComponents: 2
renderType: freemarker
type: list
Component1:
id:
Component2:
id:
When we have created content with component1 then it shouldn't be available for selection later.
You have already limited number of components to 2. What you can do extra is to autogenerate each of the components at area creation time and mark them as not delete-able so that editors can't remove them and can't add more of the same (due to maxComponents restriction either). This effectively limits everyone to use of max 1 component of given type, but also forces exactly 1 component of given type.
If you want anything more sophisticated, you need to code it yourself.
Context (web app)
To store state available to our entire Vaadin app, we can get and set "Attribute" on the VaadinContext object that represents our entire Vaadin-based web app at runtime. These attributes act as a key-value collection, where the key is of type String and the value is of type Object.
We access the context by calling UI.getCurrent().getSession().getService().getContext().
Session (per user)
To store state available to any one user’s session, we can similarly get and set "attributes" on the VaadinSession object.
We access the session by calling UI.getCurrent().getSession().
UI (web browser window/tab)
These two levels of scope, context & session, are wrappers around their equivalents defined in the Java Servlet specification. But Vaadin effectively has a third, finer level of scope. Vaadin supports multi-window apps, where each web browser window (or tab) has its own content handled by a UI object. If a user has three windows open within our Vaadin app, that user has three UI object instances on the server housed within a single VaadinSession object.
So it seems like a common need would be storing state per UI (web browser window/tab). So I would expect to see the same kind of getAttribute & setAttribute methods on UI as seen on VaadinSession & VaadinContext. But, no, I do not see such methods on UI.
➥ Is there an appropriate place to store state per UI object?
In the olden days, in previous generations of Vaadin, we always wrote our own subclass of UI. So we could always store state by defining member variables on our own UI-subclass. Now, in the days of Vaadin Flow (v10+, currently 14), we are discouraged (forbidden?) from writing a subclass of UI.
Before filing a feature-request for such attributes, I want to ask if I missed out on a usual place where folks store their per-UI state in current Vaadin-based apps.
In Vaadin Flow there is ComponentUtil helper class which has methods to store data with components and UI.
See the pair of ComponentUtil.setData methods, one taking a Class as key, the other taking a String as key, just like the getAttribute/setAttribute methods found on VaadinContext & VaadinSession.
I am in reference to the router-store ngrx project (https://github.com/ngrx/router-store).
I am not clear how to use this project...
For instance let's take the following sample from the project documentation:
store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));
Is this meant to be use as a replacement to the angular 2 router: router.navigate(['/path...?
...or should I use the ngrx router-store only in certain circumstances? (if so which ones?)
Also what happens to the ngrx router-store when a angular 2 router html link e.g. <a routerLink="/heroes" is clicked?
More generally, can someone please explain what is achieved by the ngrx router-store project as compared to using the plain angular 2 router?
Or to rephrase, what does ngrx router-store brings in addition to the angular 2 router?
Edit: An interesting source of information and samples about ngrx is of course the ngrx example-app (https://github.com/ngrx/example-app).
I found a dependency to the router-store there but I have not been able to find where the router-store is used within the app...
FYI, here is the comment to be found in the example app about the router store:
#ngrx/router-store keeps router state up-to-date in the store and
uses the store as the single source of truth for the router's state.
The #ngrx/router-store exists so that it's possible for the store to be the single source of truth for an application's routing state.
Without it, there would be application state - the current route - not represented in the store. That means time-travel debugging using the DevTools would not be possible, as there would be no state in the store representing the route and there would be no actions representing route changes.
The router-store does not replace the Angular router; it just wires up listeners for routing actions and for the router itself.
When you emit a routing action using the go action creator, a "[Router] Go" action containing the specifed path is heard by the router-store which then calls the corresponding router method. When the router-store hears - from the router - that the route has changed it emits a "[Router] Update Location" action representing the route change and that action sees the router state in the store updated.
If, instead of using the go action creator, a routerLink is used to effect a route change, router-store will hear the change and will emit a "[Router] Update Location" action that will see the store's router state updated.
So, whether the route is changed via actions or more traditional links, the store always contains the router state.
With the "[Router] Update Location" actions representing route changes, you can undo said route changes via the DevTools - something that would not be possible if the router state were not represented in the store.
If you've not used the Redux DevTools, I would recommend you check them out:
Redux DevTools Extension
#ngrx/store-devtools
#ngrx/store-log-monitor
An example.
Say you have a selected id that you pass in the router state. That id references a customer.
Your url looks something like this: myapp.com/customers/7755664
When you route to the customer edit view, you can write a selector that gets the customer entity using the id from the router state. Say you want to scroll through the customers. You navigate to myapp.com/customers/7755653. The selector returns the customer, the select call emits and your view rerenders with the new customer.
It simplifies selectors and replaces the need to have a selectedcustomer property in your state.
I have used this to chain dynamic data drop downs in an Orbeon application using the following services:
1. /xforms-sandbox/service/zip-states
2. /xforms-sandbox/service/zip-cities?state-abbreviation={../state}
3. /xforms-sandbox/service/zip-zips?state-abbreviation={../state}&city={../city}
I have few questions:
I also want to create the same, so can you please point me the code where this services are present. How I should write the service in this case?
{../state} - How it retrieve the state value when it changed?
What is the use of state-abbreviation?
This specific test service is implemented in XPL and XSL, in zip-states.xpl. But it really just is a service that gets called with an HTTP GET by Orbeon Forms, and returns XML. BTW, you can easily test it from your browser, and it could be implemented with any technology.
Whenever the value of the control named state changes, {../state} will return a different value, so the URL for the service will change, so the Dynamic dropdown will load again that URL to retrieve potentially new data.
In this particular example, we want the "abbreviation" to be stored in the data (e.g. "CA"), and the full name (e.g. "California") to be shown in the UI. Again, in this particular examples, values come from states.xml.
I need the extjs 4 behaviour for new model objects to have a null id rather than a "Model-1" generated value in extjs 5+
Therefore I have created a id generator
Ext.define('Example.data.identifier.Custom', {
extend : 'Ext.data.identifier.Generator',
alias : 'data.identifier.custom',
generate : function() {
return null;
}
});
But now my grid grouping features behave strange. I think it has to do with the id assigned to the additional grouping row to be also null.
Is there a way around?
The ExtJS 4 behaviour of null ids does not work in ExtJS 5+ - you need to have ids, especially for objects in stores.
So accept the fact that all of your Model instances will need to have id values. You can determine if they were created locally or via retrieving from the backend using the phantom property. You can use a custom proxy to strip the id property when saving if you need to. You can use different endpoints with the AJAX proxy, or different HTTP Request Methods with the REST Proxy, so your backend can know if you are making a new record or updating an existing one.
But you can't get away with having duplicate IDs, including null values. Accept that, and move on.