I have a problem related to Wicket and Ext JS. I have a text field in Ext JS and I want to add a Wicket ID to it. In Ext JS, text fields have limited properties. How can I do this?
There are at least two projects trying to integrate ext js into wicket:
http://code.google.com/p/wicket-extjs-integration/ gpl :(
http://code.google.com/p/wicket-ext/ apache license :)
You'll have to use the DOM to add custom attributes to the markup. See Ext.Element.
If you want to add a wicket:id then I presume that you are wanting to add a wicket component with that wicket:id to your page / component. For this to work that wicket:id will need to be present in the html for your page / component at render time. Therefore adding it to the DOM with javascript wont help you as wicket will never see it.
There are a few ext-js wicket integrations which may help you, but I haven't used them. Try searching on the wicket mail list: http://old.nabble.com/Apache-Wicket-f13974.html
The wicket-extjs-integration project is now available under the Apache license. Licensing is a tricky subject, however, due to the fact that ExtJS code itself is GPL. For details, see http://code.google.com/p/wicket-extjs-integration/wiki/Licensing.
The way we (Hippo) use it mostly is by letting the wicket component
set up the configuration and
implement component-bound services for the Ext component;
e.g. a read/write JsonStore can be implemented in pure java.
It's also easy to subscribe to Ext events with a (java) event listener.
Typically, the Wicket component only needs to bootstrap the Ext component. However, we've also had a few cases where we then needed to wrap a Wicket component in an Ext component. This is also quite easily accomplished. (see our Channel Manager code # http://svn.onehippo.org/repos/hippo/hippo-cms7/addons/addon-channel-manager/trunk/)
Being able to compose the Ext component hierarchy has allowed us to extend our Wicket-based plugin mechanism to the Ext side. E.g. Wicket plugins each instantiate a card/panel Ext component & those are aggregated on the wicket side in a component that instantiates an Ext tab panel.
The method annotation you mention is something we haven't needed; we typically trigger client-side code by emitting javascript code. Probably a cleaner solution would be to fire an event.
The versions of Wicket and ExtJS used are a bit antiquated (1.4.xx & 3.4.x), something we'll be addressing on a short term.
Related
I am working on a React-Python/Flask app which takes input bpmn diagram image from user & through python scripts convert it into bpmn file which then can be downloaded through flask api on user's device. I am working on react UI. Now i have to edit the diagrams & apply some visualization to them. So how can i integrate yFiles for html BPMN editor in my app. I have already downloaded its evaluation package from yworks.com & integrated the pack in React following the demos. But now i am stuck because there are not much tutorials available specifically for yFiles with react. When i searched for it, i found lots of tutorials of bpmn.js with react. Please help me with how can i go about it. I am new to yFiles I have looked into yFiles evaluation pack tutorials and i still dont know how to go about it in react. Also i have to use yFiles only due to client's requirement. Thank you for any help.
yFiles for HTML is not a React component - in fact it's a plain JavaScript component, that is not based on any third party framework or even software.
This doesn't mean that you cannot integrate it into React or Angular or Vue.js or any other well-behaved JavaScript client framework. In fact yFiles has been built to support the integration into all of these frameworks and if it doesn't work with a specific framework, this usually indicates a short-coming or more likely a bug in the third party framework, rather than in yFiles! After all yFiles is just this: plain JavaScript that manages a part of your HTML5 DOM (one div element and all it children, to be precise), a few lines of CSS and the rest is just JavaScript. If your UI library can provide these basic requirements (and React does, of course), yFiles can be made to run with that framework.
As you said, there are these various integration samples available that show how to integrate third party frameworks and yFiles (both with yFiles being a "client" as well as yFiles hosting DOM snippets created and maintained by these third party frameworks: https://github.com/yWorks/yfiles-for-html-demos/tree/master/demos/toolkit
For React, there is actually an additional repo on GitHub (which is not part of the evaluation package): https://github.com/yWorks/yfiles-react-integration-basic
React is very opinionated about the way an application or component should work. yFiles does not follow the React approach (and I honestly believe it would be a bad idea if it did), but the component you build can. The idea is to create a custom React component that internally uses yFiles for HTML for the visualization, the editing, and the handling of the BPMN editor. Just like you would encapsulate a native HTML5 textarea and two buttons into a React component, you encapsulate the "div" that is used by yFiles to manage the BPMN visualization and editor.
The BPMN demo does not use React. In fact it uses plain old HTML and does not use any real framework for the UI. This means you need to (and can) take that code and wrap it into a custom React component.
With the node module version of yFiles for HTML and the es6 style sample code, this should not be too difficult. After all it's just JavaScript without any further dependencies.
There are no additional tutorials for yFiles in the context of React. However that should not be much of a problem as any tutorial that shows how to wrap a generic JavaScript component or how to create a new one from scratch should be applicable.
If you run into a specific issue, post your question here (if it's about React) or contact the support team at yWorks if you are sure this is a problem specific to yFiles and not a generic JavaScript problem. Of course StackOverflow might work, too, in the yFiles case, however there aren't that many yFiles developers that hang around at StackOverflow, I think. Most of the time it's me or someone from the yWorks team, anyway.
I have to integrate an existing UI application to a REST based back end. The UI is a single html page that uses JQuery + CSS to create a sliding tab experience. Both the UI and REST application are Spring Boot apps.
I'm new to Javascript frameworks. AngularJS made a lot of sense to me for data binding and updating the DOM.
However, now that I am trying to do the integration, there is a .js include in the UI that contains a massive set of JQuery plugins (they are just pasted in one after another).
AngularJS functionality like 'ng-repeat' does not work with this file included. The UI application does not work without this include.
I believe the solution is to put all JQuery Plugins into a Angular Directive (Initialising jQuery plugin (RoyalSlider) in Angular JS). This looks like a painful task.
Are there other frameworks that would work with this?
I have found some threads suggesting a ground up approach with Angular ("Thinking in AngularJS" if I have a jQuery background?), but I'm stuck with this current UI app's structure.
Suggestions? I'm thinking of using JQuery to acquire the JSON and inject it into the UI and adding Thymeleaf for its fragments.
After some research I have found that using JQuery is the way to go if your application was built with JQuery. If I could do it again, perhaps Angular should have been the base for the UI application. However,after some exploration, I have found JQuery does a lot of cool things around AJAX and Dom manipulation. When used with ThymeLeaf in Spring Boot, you end up with a power set of UI tools.
Just learning , new to this site.
Is it possible to have ExtJs and AngularJS together in same application ?
or is it worth to have both of them in same application ?
Thanks
Sometimes people use ExtJs components in an AngularJS app.
AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
I am trying to find a solution for an image slider such as Amazing Slider and how to integrate it in my e-commerce web-app which I have developed using Angular JS. I want to have features such as lightbox and a slider with thumbnails underneath, and also video integration. I know its a lot to ask but its a shame that this very strong framework lacks (to my knowledge) a proper image viewer. Has anyone tried this integration before? Are there any other solutions. After doing a google search all I found is bootstrap UI and a gist for lightbox. But these are not anywhere near of what I am asking for. Please advise.
The reason AngularJS does not have such an inbuilt facility is that AngularJS was not meant to address such things. Its an application framework. It is not meant to be a UI framework.
Having said that, I am assuming you have the images you want to render in some sort of collection in AngularJS. So you can just write a very simple directive which will take your collection as a ng-model and render the slider for you. This allows you to reuse this component in multiple places in your app.
If you have only one place in your app that you need the slider, then just a simple ng-repeat will suffice.
I have an extjs application which I embed into an existing HTML template with js plugins/css etc.
Im having CSS conflicts between my template styles and ext's. As a simple solution im wondering whether I can tell ext to only use its own css file when creating its components. I've implemented the following setting before I load my application:
Ext = {
buildSettings:{
"scopeResetCSS": true // Thanks, but I'll do my own scoping please
}
};
Which works to some degree, but the plugins css files are overriding certain ext components (form fields, alignment issues etc).
This is the first time i've tried integrating an ext application into a html template so my knowledge is pretty limited.
Thanks in advance
As far as I know, there is no way to scope CSS in a single page, I wonder how you did it. If you want to avoid conflicts, I'm afraid that you'll have to do some refactoring.
Some advices :
Build your CSS rules with the ExtJS file loaded in the page, which means that you are currently working with the final environnement. Moreover, you can use their own reset rules.
Do not use tag selectors (div, span, input...) - which apply to every element in your page including ExtJS ones - unless the targeted element never host any ExtJS component.
Add a namespace to your own selectors (#my-id, .my-class) as ExtJS does (.x-button, .x-container).
Another solution would be to sandbox ExtJS with iframes, but it depends on the nature of your project. I don't have enough informations to help you more than that.