How can I make React Component Structure in Idea Intellij 15? - java

I'm new to IntelliJ Idea and working with IntelliJ Idea 15. I'm working on a react project. I want something which can generate a react component by the direct click in that folder. e.g.
Now there should be an option for making a new React Component. Upon clicking that a pop-up should open which should ask what files I want to add in the Component's Directory. e.g. the structure should be :
e.g.
Component
Component.js
index.js
component.scss
test Directory
Component.test.js
These should be configured according to the need of user. I don't know java and anything about IntelliJ plugins development. How can I do it?

Go to the template settings:
Windows and Linux: File | Settings | Editor | File and Code Templates
macOS: IntelliJ IDEA | Preferences | Editor | File and Code Templates
Click on the plus button and add a new template:
Name: React Component
Extension: js
This template works well for me:
import React, { PropTypes, Component } from 'react';
class ${NAME} extends Component {
render() {
const { } = this.props;
return (
<div>
</div>
);
}
}
${NAME}.propTypes = {
};
export default ${NAME};
You can also PureComponent or add some default props if you like.

I don't think so that you need such a structure of the component. React components are pretty much straight forward. You just create a JavaScript file and write like that.
import React, {Component} from 'react';
class YourComponent extends Component {
render() {
return(
<h1>Hello React</h1>
)
}
}
export default YourComponent;

Related

Implementing the Ace Code Editor in JavaFX

I am trying to make a code editor using JavaFX and want to use Ace. I saw an earlier post that used WebView to achieve this but I am a little lost on how to set up my project structure beforehand.
The following is a very minimal implementation with JavaFX's WebView and the Ace editor.
To get started, I'll just use a few required js files from the Ace repository:
editor.html, this is the main entry. Download from here, and add it to the resources folder, like: src/main/resources/ace/editor.html.
mode-java.js, download from here, and add it to resources: src/main/resources/ace/js/mode-java.js.
theme-eclipse.js, download from here, and add it to resources: src/main/resources/ace/js/theme-eclipse.js.
Note that the above project structure corresponds with the use of Maven or Gradle build tools. To get started, I used this project as a reference.
Now edit the editor.html file, and replace the existing scripts with:
<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/eclipse");
editor.session.setMode("ace/mode/java");
</script>
Optionally, replace the javascript function with some java code, like:
<pre id="editor">package com.ace.editor;
import java.util.ArrayList;
public class AceEditor {
/*
* This is a demo
*/
public static void main(String[] args) {
System.out.println("Hello World");
}
}</pre>
Finally, in your JavaFX code, add a WebView control, and load the editor:
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.load(getClass().getResource("/ace/editor.html").toExternalForm());
Scene scene = new Scene(webView, 600, 400);
...
Note that you will need to add the javafx.web module. This is using Gradle, but the same could be done with Maven.
javafx {
version = "13"
modules = [ 'javafx.web' ]
}
Build and run the project, and you should get the code editor:
More functionality can be added by modifying the editor.html file, and adding more js files, to extend the editor options. For instance, this shows you can add a statusbar.
EDIT
This is my project structure:
(It uses FXML as well, but doesn't change anything of the above).

Eclipse Plugin: Link MulitPageEditorPart with Navigator

In an Eclipse-Plugin, I have an implementation of a MultiPageEditorPart and it is associated with a file-extension - let's call it f.
When I click on a file f in the standard Package Explorer the Editor is opend. This works fine so far.
But what is not working, is linking this Editor with the Package Explorer. Let's say someone has several open Editors and one of them is the custom MultiPageEditorPart. If the custom Editor becomes selected via the tabs (not the Package Explorer) the corresponding file in the Package Explorer should be selected / marked.
Following the example in "link with editor" for FormEditor I tried to achive this using an ILinkHelper and the Extension Point org.eclipse.ui.navigator.LinkHelper, but it is never called.
How is the ILinkHelper used together with a MultiPageEditorPart?
PS: I'm using Eclipse Oxygen
The MulitpageEditorPart (and other Editors) have an IEditorInput which owns a Method
<T> T getAdapter(Class<T> adapter)
If this Method is called with IResource.class or IFile.class it should return the IResource that is the source for the current Editor. This is then used by Eclipse to link the Editor with the View (Package Explorer).
Like this:
<T> T getAdapter(Class<T> adapter) {
if (IResource.class.isAssignableFrom(adapter) {
return (T) myFile;
}
}

Wicket: Changes to HTML or Java Source is not loaded when browser is refreshed

I am following the Wicket user guide's "Hello World" project.
Wicket is in DEVELOPMENT mode.
When I change the HomePage.html and reload the browser, the change is not shown. If I restart the WicketApplication, then the changes are shown.
My application is at localhost 8080
All my research shows that changes should be loaded automatically when the application is in DEVELOPMENT mode (which it is).
I have not changed any configuration from the default Wicket installation.
No, if you deploy your app into app-server (like tomcat, glassfish, etc.), then the real .html's that shows in browser located somewhere in app-server folders.
For glassfish it can be "/path_to_glassfish/glassfish/domains/domainXX/applications/APP_NAME/WEB-INF/classes/...".
So, even if you change .html's at your project, you must to redeploy this changes.
Wicket JavaDoc says :
if the configuration type is DEVELOPMENT, resources are polled for
changes...
Yes, but is holds for resources located at appropriate folders. I think this wicket forum thread will give you some answers of how to implements behavior you want. This post is actually for old wicket version, but I think it is suitable for newer versions too.
In our company we use firebug or chrome console to stylize components right in browser without redeploying app, and this is enough for us, because static components rarely added on the html page.
Here is the solution I found.
For the class reloading issue, I run the "Start" application through Debug mode in IntelliJ. When in Debug mode, IntelliJ reloads classes that have changed.
For the HTML reloading issue, I put the following code in the WicketApplication init() method:
// add your configuration here
getResourceSettings().setResourcePollFrequency( Duration.ONE_SECOND);
getResourceSettings().setDefaultCacheDuration(Duration.ONE_SECOND);
List list = new ArrayList();
list.add( new IResourceFinder() {
#Override
public IResourceStream find( Class<?> clazz, String pathname ) {
File f = new File( "C:/MyProject/src/main/java/" + pathname );
if ( f.exists() ) {
return new FileResourceStream( f );
}
return null;
}
} );
getResourceSettings().setResourceFinders( list );
getResourceSettings().setUseDefaultOnMissingResource(true);
I came up with a different solution. Because I'm using Google App Engine, when I add the code
getResourceSettings().setResourcePollFrequency( Duration.ONE_SECOND) to my application init() method, the application fails to load pages. It has something to do with the fact that App Engine does not support multiple threads. Because of this I had to find a different solution. Instead I decided that when I was in dev mode I would completely remove the MarkupCache. To do that, I needed to create a new cacheless MarkupFactory.
public class CachelessMarkupFactory extends MarkupFactory {
#Override
public IMarkupCache getMarkupCache() {
return null;
}
#Override
public boolean hasMarkupCache()
{
return false;
}
}
Then in the my WebApplication code, I set my new CachlessMarkupFactory as the default MarkupFactory.
#Override
protected void init()
{
super.init();
//in dev mode, disable markup cache
if(isDevelopmentServer())
{
getMarkupSettings().setMarkupFactory(new CachelessMarkupFactory());
}
}

Intellij: Adding 'Interface' to my context menu in the Project Pane

Currently in IntelliJ, if I right-click a package in the Project pane, I can see things such as:
new > Java class
new > File
new > Package
I want to add some new menu items in the 'new' context menu such as Interface and Enum. Does anyone know how to do this?
I've been playing around in the Settings > Menus and Toolbars without any luck.
Edit: The funny thing is if I right click a package and choose New > Edit File Templates..., I can see the template for an Interface and in the description it actually says:
This is a built-in template used by IDEA each time you create a new Java interface, by selecting New | Interface from the popup menu in one of the project views.
Unless I need to look at a different pane other than Project, I can't seem to find any context menu that lets me choose New > Interface as suggested by the above description.
New | Java Class, Create New Class dialog appears, in this dialog you can choose Kind between one of the following:
Class
Interface
Enum
Annotation
(tested with IDEA 9.0.3)
If you want Interface directly in the New list, then you have to add new template in Settings | File Templates, name it something like Java Interface and copy the contents of the Interface template into this one.
Also you can create a shortcut to save some secs.
Alt+Ctr+S -> Keymap -> in search box type 'create new' and select Java class and then assign any shortcut like Ctrl+N.
It's under the New Java Class menu.
Yes its available in Class menu : New--> Java class --> Interface .
create a package and then select create new class from that select interface and give a name.
enter image description here
then; you need to import the references files.

How can I enable "Mark Occurrences" in a Java editor that is loaded in a multi page editor?

I am working on a multi page editor that loads opens multiple files (e.g. java, html) in separate tabs of a multi page editor. The files get opened with the default editors associated with the file type and these default editors are embedded in the multi page editor as tabs.
Here is how I am determining which editor to load (for a file type):
void createPage() throws PartInitException
{
// get editor registry
IEditorRegistry editorRegistry = Activator.getDefault().getWorkbench().getEditorRegistry();
// loop through mappings until the extension matches.
IEditorDescriptor editorDescriptor = editorRegistry.getDefaultEditor(((IFileEditorInput)getEditorInput()).getFile().getName());
// if no editor was found that is associated to the file extension
if (editorDescriptor == null)
{
IEditorRegistry registry = Activator.getDefault().getWorkbench().getEditorRegistry();
editorDescriptor = registry.findEditor(EditorsUI.DEFAULT_TEXT_EDITOR_ID);
}
IConfigurationElement configuration = ((EditorDescriptor) editorDescriptor).getConfigurationElement();
String className = configuration.getAttribute("class");
IEditorPart editor;
try
{
editor = (IEditorPart) WorkbenchPlugin.createExtension(configuration, "class");
} catch (CoreException e) {
throw new RuntimeException(e);
}
final int index = addPage(editor, getEditorInput());
setPageText(index, "TAB_NAME");
}
The multi tab editor gets created without any problems and the correct editors are loaded within the tabs.
But the ‘Mark Occurrences’ functionality is not working in the Java Editor when loaded in a tab.
I validated that mark occurrences is turned on. When I select a variable in the java editor in my multi page editor tab it does not highlight the other occurrences of the variable.
But if I open the file in my multi tab editor and in a separate java editor at the same time and select a variable in the separate java editor it will highlight the other occurrences in the separate java editor as well as the java editor that is embedded in my multi page editor.
So the functionality seems to be enabled and loaded, it just does not execute the mark occurrences functionality when the selecting happens in the embedded editor.
What needs to be changed so that I can use the mark occurrences functionality from within the java editor that is embedded in my multi tab editor?
My understanding is that Mark Occurences is a central service so I assume I am missing the part that updates this service when something gets selected in my editor. Any idea on what needs to be done so the service gets updated?
Note: This problem only happens if the java editor is embedded in a multi page editor.
This functionality is build into org.eclipse.jdt.internal.ui.javaeditor.JavaEditor of org.eclipse.jdt.ui
As you see it's an internal class. However you can ignore that and subclass it. The org.eclipse.jdt.internal.ui.javaeditor.ToggleMarkOccurrencesAction will work for all open JavaEditors (try opening the same class twice with the standard CompilationUnitEditor and you will see two "mark occurences" markings).This is because a central property PreferenceConstants.EDITOR_MARK_OCCURRENCES is set in the PreferenceStore of the JavaPlugin.
In order to show the ToggleMarkOccurrencesAction Button you will need to provide a IEditorActionBarContributor (Take a look at org.eclipse.jdt.internal.ui.javaeditor.CompilationUnitEditorActionContributor)

Categories