We are using the inside one of our react components which we called "GridViewWrapper" in which i've made all the required css et js ag-grid's related imports (i will share below how i did the imports).
Actually, Since a long time we've been using that "GridViewWrapper" only in one view in the whole app without any problem but then we needed to reuse it somewhere else in the app (in a different view which means that in the runtime that component will never be instanciated more than once in the same time because both views won't be shown together in the same time too)
Now, since i've started to used our "GridViewWrapper" in two views of our app , we started to have css issues in the ag-grid (some looks to be broken , for example checkboxes can't get checked anymore). It looks like there is a mess in the order of loading css files and some css might be overriden by another. https://i.imgur.com/jE8vcSv.gif
When i get started using the ag-grid in our react app , i don't remember i've seen any required webpack specific config for the ag-grid or specifically for typescript (which we are using it in our app too). But now i found this SO thread which talks about a webpack config https://stackoverflow.com/a/56552750/1705922 (they're using react too) and i also found this ag doc also mentionning a webpack config https://www.ag-grid.com/javascript-data-grid/building-typescript/.
Should we implement that in our react app too ?
Here is how i made the css et js ag-grid related files :
import { LicenseManager, RowNode } from "ag-grid-enterprise";
import {
GridApi,
Column,
RowClassParams,
PasteStartEvent,
PasteEndEvent,
CellValueChangedEvent,
CellEditingStoppedEvent,
CellEditingStartedEvent,
ColumnMovedEvent,
ColumnResizedEvent,
DragStoppedEvent,
GridReadyEvent,
RowDragEvent,
} from "ag-grid-community";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridReact } from "ag-grid-react";
Are we missing something ?
These are the ag-grid verions in the package.json
"ag-grid-community": "^26.2.0",
"ag-grid-enterprise": "^26.2.0",
"ag-grid-react": "^26.2.0",
Related
Short version:
I'm updating some old libs to try to get them in AMD/requirejs format for management, but some of them have dependencies on old code.
Main Question:
I'm primarily confused as to what to list in the:
define(['what','goes','here'],function('what','needs','to','be','here'){})
and what goes in the shim dependencies list when dealing with combinations of AMD and non-AMD tools, and things like jquery-ui and jquery plugins.
ADDITIONAL INFO
The problem:
One of the older libraries depends on .draggable() from (and older version of) jquery-ui, some old version of a jquery plugin called 'onScreen', a spinner modal called spin.js -- all of which are not AMD friendly. (I also implemented an update to an AMD friendly new version of dropzone)
Two of the older libraries also use a modal library called vex which requires a dependency of vex.dialog. The existing site has an old version that is uglified.
I'm trying not to completely revamp this code as the longer term goal would be to remove those dependencies entirely, but I may not have to the time now to figure out what they are doing.
I've tried every combination of define(['list','of','stuff']) I can think of, but some of the libraries like spin (class Spinner), vex/vex.dialog and onScreen still don't always load properly. (sometimes I get one, but then lose another)
Can I define a shim AND include a list of AMD modules in the define? And if so, do I include the AMD list of dependencies in the shim in require.config? What goes where and why?
My libraries:
ImageSelector (requires AwsHelper, Utilities and ImageLayout below)
-- uses jquery (AMD), dropzone (AMD) and an old jquery plugin called jquery.onscreen.js (non-AMD)
-- depends on vex and vex.dialog (non-AMD)
-- uses .draggable() from old jquery-ui (non-AMD)
-- calls a global function 'loadSpinner' which uses spin.js (non-AMD -- see Utilities below)
ImageLayout (requires AwsHelper and Utilities - has attached instance of ImageSelector as a property .selector for methods that work in conjunction with the selector)
-- uses jquery (AMD)
-- also utilizes vex/vex.dialog (non-AMD)
Utilities
-- I'm trying to move the loadSpinner() function that requires spin.js (class Spinner, non-AMD) into this
-- I've managed thus far to avoid dependencies on things like jquery in this by refactoring code
Long version:
I'm trying to update some website code to use require.js for dependency management and to make the code more portable. But I'm running into a number of dependencies on old code that don't appear to be AMD-ready. Where possible, I'm trying to replace these with updated code and/or replace their functionality entirely, but in a number of cases, the code is minified and it's difficult to get a quick handle on what it's doing.
Rather than getting mired in minutia of trying to figure out and either replace or update these things, I read about how 'shim' can be used in some cases to handle these types of non-AMD code, but I'm still unclear on how to configure them.
Here's what I have... I have three libraries I have updated and one new one I created. One called 'ImageSelector' builds a web-gui to allow uploading files with dropzone. (My reason for updating it is that I converted it from using a local filesystem to using Amazon AWS S3 storage.) A second one called 'ImageLayout' handles the business logic of creating a product layout of photos selected by the user. (ImageSelector is split into two frames, a left one for uploading and sorting user files into folders, a right one for building the layout. Thus ImageSelector is dependent on ImageLayout)
The third library is one I created just with a number of repeatedly use 'utility' functions used across the website. There is an existing structured-code version of this in global scope with just a list of functions like roundPrecision(), sanitizeFilename(), escapeRegex(), baseName(), etc. I was going to build this with static methods, but then realized I can customize it if I spawn instances of it instead (e.g. I can change the characters 'sanitized' for different applications with global instance parameters)
The new one is the AwsHelper which is not a problem as it's entirely new code and handles all the interaction with Amazon AWS and S3. It was created in a define() AMD format while the others I have converted to define()/export format.
Anyway, some functions of the ImageLayout can be used independently by the order system, but for the most part, it's used as a dependency of the ImageSelector. AwsHelper is used mostly by ImageSelector but there are two functions in ImageLayout that utilize it. All of the above use the Utilities library.
My guess is something like this in the config (using ImageSelector as an example, but I'm wondering if "jquery" an "dropzone" need to be in there or the function define or both?)
shim: {
"ImageSelector": {
deps: ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen"]
}
}
Additional require.js semantic questions:
(I'll post these separately if needed, but they may be short-answer and related)
Is there anything anywhere that shows how require.js searches for files? e.g. I understand about r.js for uglifying, but in some cases I can't track down the original code for these things. Can filenames include .min.js on the end or version numbers and will require.js still find them or should I rename and/or symlink files? e.g. jquery.js vs jquery-1.7.min.js for example.
The spin.js referenced above actually includes a class definition called 'Spinner'. How do I represent that in the config/shim?
Well, I posted that based on my experimenting the last 3 days riddled with failures, expecting more trouble. But apparently, shim was straightforward and having the required libs in more than one place (shim definitions and define([])) wasn't a problem.
I took a blind guess going through the examples on the require.js and came up with this configuration and amazingly it worked first try! (which makes me nervous as this is the first time I've gotten this code to work with no errors since trying to import it to require.js)
Here's what I came up with:
requirejs.config({
"baseUrl": "/js/lib",
"paths": {
"ImageSelector" : "../awsS3/ImageSelector",
"ImageLayout" : "../awsS3/ImageLayout",
"AwsHelper" : "../awsS3/AwsHelper",
"Utilities" : "../awsS3/Utilities"
},
"shim": {
"jquery.onscreen": {
"deps": ['jquery'],
"exports": 'jQuery.fn.onScreen'
},
"jquery-ui" : ['jquery'],
"vex.dialog" : ['jquery','vex'],
"vex" : ['jquery'],
"spin" : {
"exports": "Spinner"
},
"aws-sdk" : {
"exports" : "AWS"
},
"Utilities": ["spin"],
"AwsHelper": ["jquery","aws-sdk"],
"ImageSelector": {
"deps" : ["jquery","dropzone","vex","vex.dialog","jquery-ui","jquery.onscreen","ImageLayout","AwsHelper","Utilities"]
},
"ImageLayout": {
"deps" : ["jquery","vex","vex.dialog","Utilities"]
}
}
});
I also noted that some of the version naming was handled in the paths, thus I just named my libs in the paths and got rid of my "app/" directory reference altogether.
I am currently in the process of migrating a Vaadin 8 application over to Vaadin 12. The look and feel should be used by the user and changed on Login or via a button press.
In Our Vaadin 8 application we had 2 themes (a dark and a light one), each with their own SASS/CSS and some shared properties. The user was able to switch it using the setTheme() Method. When a click to the switching button happened, the Look and Feel just changed. In Vaadin 12 the Theming follows a different approach and I am struggling to find a good way to implement this feature in Vaadin 12.
Let's say we don't want to create a whole new Theme and just want to use customized LUMO. I can set the Theme/Variant through the #Theme Annotation. The Downside: The Theme will be fixed at Runtime.
Also i could just write some code to apply variants to my application and components. (like in the dynamic styling chapter: https://vaadin.com/docs/flow/element-api/tutorial-dynamic-styling.html )
The Downside: It won't be very practicable to iterate through each element and apply the variant.
My question now:
What is the best way to achieve a switch between to themes at runtime? (customized light- and dark variants of Lumo or any other theme).
Would I just create 2 HTML Files (for compatibility) containing CSS and then somehow override the currently used File through a dynamic import?
I hope my question is clear and someone can point me to the right direction.
If you are only interested in toggling between light and dark, then you can just add/remove dark at a very high place in the DOM. E.g. the element of the UI is usually the body or at least very high up.
E.g.:
new Checkbox("Use Dark Theme").tap{
addValueChangeListener{ cb ->
getUI().ifPresent(){ ui ->
def themeList = ui.getElement().getThemeList()
if (cb.value) {
themeList.add(Lumo.DARK)
} else {
themeList.remove(Lumo.DARK)
}
}
}
}
edit
As asked in the comments of another answer:
To change the colors in a theme, you can override the used colors. This is the example how to change the text color for light and dark Lumo theme:
html {
--lumo-body-text-color: red;
}
[theme~="dark"] {
--lumo-body-text-color: yellow;
}
It's relatively easy to switch between two different variants of the same theme, e.g. the dark and light variants of Lumo. To do this, you only need to toggle the corresponding theme attribute on the <html> element. There's no direct access to that element from the server, but you can do it with a small snippet of JavaScript: ui.getPage().executeJavaScript("document.documentElement.setAttribute($0, $1)", "theme", "dark");
Depending on circumstances, you can or must apply the changes to the <body> element instead. In that case, you can either switch out .documentElement for .body in the JS snippet or directly use ui.getElement().setAttribute("theme", "dark") in Java.
Switching between two different base themes, e.g. Lumo vs Material is a much more complicated affair. For each component, there can only be one base theme loaded in the browser at the same time, and reloading the page is the only way of getting rid of the one that is already loaded. For each component that is used for Flow, the framework takes care of loading the right theme import in addition to the base import that doesn't have any styling. To make things even more complicated, the theme designated using #Theme is automatically included in the application's production bundle. To be able to use multiple base themes, you'd also have to somehow produce multiple different bundles and also somehow configure Flow to use the right bundle depending on circumstances.
Many of the samples I have seen for angular2 have the following import statement:
import {bind} from 'angular2/di';
I am working in VS Code (with TypeScript) and it complains about not being able to find the angular2/di module.
However I do see a bind function defined in angular2/angular2.d.ts. If I change the import statement to the following, then the error goes away.
import {bind} from 'angular2/angular2';
Is the question in the title off-base and I am making some erroneous assumption?
If not, why do many samples reference one module to import the bind function from, yet I seem to be able to get it from a different module?
Most likely because you looked at versions from older alphas. Look at the angular2.ts file. Everything is exported from it. Also note that the d.ts is going to contain everything to resolve types in your IDE and at compilation time. What import does is actually importing the .js files.
Here I am, again. With another question concerning cakephp-2.5 and the plugin 'highcharts'.
I've been looking at the demo's an all the different things I could find were the extendings from the controllers. But... that isn't required because it's a plug, am I right?
So, I have included th plugin to my loadings inside the bootstrap file, and when I'm trying to render my HighChart I'm receiving the following error;
Error: Chart: "1" could not be found. Ensure that Chart Name is the same string that is passed to $this->HighCharts->render() in your view.
But the demos are working fine! Any idea what I f*cked up? The names are the same, I even renamed them to 'asd' ( both! ) and it still doesn't work. ^^"
I know this is an incredibly late response but for the benefit of those still experiencing problems with this, the CakePHP 2.* Highcharts plugin has been updated and is compatible up to CakePHP version 2.5.7.
Do note however that in order to maintain product name consistency throughout the repo, all previous references to "HighCharts" have been changed to "Highcharts" and "high_charts" is now simply "highcharts" . So for eg. you now have to call $this->Highcharts->render() where before you would have used $this->HighCharts->render().
The plugin was not yet compatible with CakePHP 2.5. Right now as we speak the developer is working on a new release for 2.5. :)
In CakePHP 2.5, you can avoid the error above and render your chart by calling it.
For example from within index() within your controller, use:
$this->bar();
In this example, bar() is the name of the function containing your chart.
I created an application which loads its UI dynamically from UI files (added to resources of application. I have't translate in with poyside-uic, loading as is. now I want lo localize application, but do not understand how.
I tried to generate TS file using pyside-lupdate widge1.ui widget2.ui ... -ts my.ts and got document with multiple context nodes and linguist does not shows all records (only about 7 records and I do not understand which exact).
So, my question: how to translate dynamically loaded UI files?
Found it. Quite simple, but not always obvious.
Execute pyside-lupdate file1.ui file2.ui .... fileN.ui -ts translations\ru_RU.ts. Got a TS file after that with multiple contexts (it is ok, I was wrong)
Open TS with linguist. Ensure that option 'Context' checked in menu "View->View"
...
PROFIT!!!