JSF component that enables usage of Ace v1.4.2 editor for JSF applications.
- out of the box support for 162 modes
- out of the box support for 38 modes
- key bindings for emacs and vim
- persists Ace session to JSF backing bean:
- code folds
- scroll
- set options
- supports
<f:ajax/>
In your facelets page import the namespace https://www.webarity.com/custom-comps/aceui. For ex:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="#{siteLocales.getCurrentLocale().getLanguage()}" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h5a="http://xmlns.jcp.org/jsf/passthrough" xmlns:h5e="http://xmlns.jcp.org/jsf"
xmlns:ccs="https://www.webarity.com/custom-comps/aceui">
...
</html>Above we use the css namespace, but that can be arbitrary. Now add the component:
<h:form>
<ccs:AceUI theme="textmate" mode="html" minLines="5" maxLines="20" value="#{someBean.code}">
<f:ajax/>
</ccs:AceUI>
</h:form>There is support for ajax, but the tag is purely optional. The component essentially behaves like UIInput so it must be put inside a h:form element.
If using ajax, component will automatically synch with the backing bean 1.5 seconds after last detected input (Ace change event). Component will also monitor changeScrollTop
changeScrollLeft, changeFold, changeBackMarker, changeFrontMarker, changeWrapMode, changeWrapLimit Ace events and will automatically update after 2.5 seconds after they've been triggered; for ex., a code block has been folded or you've scrolled - after 2.5 seconds client will issue ajax post request to JSF with the new Ace state. If your backing bean is @SessionScoped, on a page reload the same state will be observed, along with scroll position, marked selection, folded blocks of code. For description of those events, refer to Ace Documentation.
Component comes with a custom type com.webarity.ace.model.AceModel. The backing bean in the example above - #{someBean.code}, the code field is of type AceModel. This is a deserialized view of the Ace Session. The actual code is reachable via code.content as a java.lang.String. There are no getters/setters for brevity; all fields are public and are directly accessed as of this initial version of the component.
NOTE: the field of your backing bean can be String. It will receive a JSON value of AceModel. Look below for Serialization/deserialization - which can be integrated with your own converter.
Provided are JSON serializer/deserializer:
com.webarity.ace.model.json.AceModelDeserializercom.webarity.ace.model.json.AceModelSerializer
Both of them implement javax.json.bind.serializer.JsonbSerializer<AceModel>.
Can be used as follows:
static final Jsonb j = JsonbBuilder.create(new JsonbConfig()
.withDeserializers(new AceModelDeserializer())
.withSerializers(new AceModelSerializer())
);
String jsonVal = j.toJson(aceModel);
AceModel aceModel = j.fromJson(jsonVal, AceModel.class);mode, optional, defaults toplain_text. Provided is a${AceModes}of typejava.util.HashMap<String, String>whose keys is ajava.util.Setof all available modes. Amodecan be:
abap,abc,actionscript,ada,apache_conf,apex,applescript,asciidoc,asl,assembly_x86,autohotkey,batchfile,bro,c_cpp,c9search,cirru,clojure,cobol,coffee,coldfusion,csharp,csound_document,csound_orchestra,csound_score,csp,css,curly,d,dart,diff,django,dockerfile,dot,drools,edifact,eiffel,ejs,elixir,elm,erlang,forth,fortran,fsharp,fsl,ftl,gcode,gherkin,gitignore,glsl,gobstones,golang,graphqlschema,groovy,haml,handlebars,haskell,haskell_cabal,haxe,hjson,html,html_elixir,html_ruby,ini,io,jack,jade,java,javascript,json,jsoniq,jsp,jssm,jsx,julia,kotlin,latex,less,liquid,lisp,livescript,logiql,logtalk,lsl,lua,luapage,lucene,makefile,markdown,mask,matlab,maze,mel,mixal,mushcode,mysql,nix,nsis,objectivec,ocaml,pascal,perl,perl6,pgsql,php,php_laravel_blade,pig,plain_text,powershell,praat,prolog,properties,protobuf,puppet,python,r,razor,rdoc,red,redshift,rhtml,rst,ruby,rust,sass,scad,scala,scheme,scss,sh,sjs,slim,smarty,snippets,soy_template,space,sparql,sql,sqlserver,stylus,svg,swift,tcl,terraform,tex,text,textile,toml,tsx,turtle,twig,typescript,vala,vbscript,velocity,verilog,vhdl,visualforce,wollok,xml,xquery,yaml
theme, optional, defaults tomonokai. Provided is a${AceThemes}of typejava.util.HashMap<String, String>whose keys is ajava.util.Setof all available themes. Athemecan be:
ambiance,chaos,chrome,clouds,clouds_midnight,cobalt,crimson_editor,dawn,dracula,dreamweaver,eclipse,github,gob,gruvbox,idle_fingers,iplastic,katzenmilch,kr_theme,kuroir,merbivore,merbivore_soft,mono_industrial,monokai,pastel_on_dark,solarized_dark,solarized_light,sqlserver,terminal,textmate,tomorrow,tomorrow_night,tomorrow_night_blue,tomorrow_night_bright,tomorrow_night_eighties,twilight,vibrant_ink,xcode
keybinding, optional, defaults tovim. Provided is a${AceKeybindings}of typejava.util.HashMap<String, String>whose keys is ajava.util.Setof all available keybindings. Akeybindingcan be:
emacs,vim
-
maxLines,java.lang.Integer, when Ace editor grows to that many lines, scrollbars will appear. -
minLines,java.lang.Integer, Ace editor will at least span that many lines. -
changeListenerPassthrough,java.lang.String, a JavaScript function that will be attached to Ace change event. Will receive two arguments - the Ace change event and the id of the input element.
- Java EE8
- JDK >= 11
- Maven >= 3.5.x
mvn clean package- copy
jarfile toWEB-INF/lib/for.wardeployments - copy
jarfile to/lib/for.eardeployments
- WildFly 15 with jre v10.0.2