[Moved] Codemirror Component

Community Driven Extensions Project
Post Reply
User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

24 Feb 2012, 16:19

Can anyone tell me when the codemirror component gets released ? I could not find the resources in the repository (http://search.maven.org/#search|ga|1|primefaces)

Regards

=========================================================================

Hi,

I think very soon. Probably in 2 weeks with PF 3.2 release. AFAIK,
CodeMirror is ready-to-use, but a good showcase is missing at the
moment.

Cheers, Oleg.

=========================================================================

Hi,

i think CodeMirror is already finished. Maybe i will do some cosmetics like adding a border. Also the showcase isn't finished. As Oleg already said, it will be deliverd with 0.3 (which will proably relased with PF 3.2).

I would be happy if you could build it from source and try it out. If not, wait for 0.3.

Regards,
Thomas

=========================================================================

Ok. i will try it to build from source

BTW: the showcase " JS Code Completion " points to a wrong direction

=========================================================================

I know, it's not finished yet.

=========================================================================

Any way to get a preview JAR of 0.3?

:)

=========================================================================

I was able to get the code to compile and deploy, a few questions:

1. will the codeMirror support displaying XML? If I hard code XML into the value attribute of the pe:codeMirror I get an error about the "<" character.

2. I have a dataTable that uses a context menu to pop-up a dialog showing the objects XML data, if I use normal tags it displays fine (ugly but works) if I use the codeMirror I get a null error, any idea why that would be?

Here is the dataTable and contextMenu:
<p:contextMenu for="ecommMessageTable">
<p:menuitem value="Inspect" update="display" icon="ui-icon-search" oncomplete="messageDetailDialog.show()" />
</p:contextMenu>

<p:dataTable id="ecommMessageTable" var="ecommMessage" value="#{ecommMessageController.trxs}" rows="10" style="width: 75%;"
paginator="true" paginatorAlwaysVisible="false"
selection="#{ecommMessageController.currentTrx}" selectionMode="single" rowKey="#{ecommMessage.trxId}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,25,50"
dynamic="true"
rowEditListener="#{ecommMessageController.save}"
sortBy="#{ecommMessage.trxId}" sortOrder="ascending">

Here is the dialog that does work:
<p:dialog id="messageDetailDialogId" header="WIP Message Detail" widgetVar="messageDetailDialog" resizable="true" width="400" height="400" showEffect="fold" hideEffect="explode">
<h:panelGrid id="display" columns="1" cellpadding="4">
<h:outputText value="${ecommMessageController.currentTrx.trxXmlData}" />
</h:panelGrid>
</p:dialog>

Here is the dialog that does not work:
<p:dialog id="messageDetailDialogId" header="WIP Message Detail" widgetVar="messageDetailDialog" resizable="true" width="400" height="400" showEffect="fold" hideEffect="explode">
<h:panelGrid id="display" columns="1" cellpadding="4">
<pe:codeMirror id="codeMirror" mode="xml" theme="eclipse" lineNumbers="true" value="${ecommMessageController.currentTrx.trxXmlData}" />
</h:panelGrid>
</p:dialog>

with the error:
[2/21/12 17:35:00:347 EST] 00000031 ErrorPageWrit E An exception
occurred
javax.faces.FacesException:
javax.el.PropertyNotFoundException: /list.xhtml at line 109 and column 140 value="${ecommMessageController.currentTrx.trxXmlData}": Target
Unreachable, 'currentTrx' returned null at org.apache.myfaces.shared_impl.context.ExceptionHandlerImpl.wrap(ExceptionHandlerImpl.java: 241)

why would it be null for one but not the other?

Thanks in advance :)

=========================================================================

Hi,

1) This is not CodeMirror specific. This is normal if you use JSF. JSF will automatically escape if you have a XML string in a backing bean.

2) Could you debug into your currentTrx getter and check if it's really not null with CodeMirror? CodeMirror does not has a "special EL evaluation". This is handled by JSF and inherited from UIOutput, so it should not make any difference :)

Best regards,
Thomas

=========================================================================

Preview JAR? We will release at this weekend.

=========================================================================

@Thomas, thanks for the reply, what is the best way to display formatted XML (ie I want the end user to see the XML data)??

What I have noticed with additional logging is that yes the currentTrxis null. When I use the <h:outputText> the selection object and the setter are called, but when I use the <pe:codeMirror> the setter is not called. This seems odd to me, why would the setter not be called, is that a bug in the dataTable?

@Oleg can't wait thanks!!

=========================================================================

Can you try:
private String test = "<myTag>test</myTag>"; (of course with setter and getter) and bind it to codeMirror with value attribute? This should work.

Could you please create an small test page? If possible, just a plain page, which using already existing beans from the showcase, so that i must just include the page. I have not much time at the moment but i will have a look at if you could create an example :)

=========================================================================

I did a quick test and yes the simple string test works fine. Although the XML is not formatted does the codeMirror support XML mode?

I find that the setter is not called when the value is set to a sub-object that is:

value="${myobj.one}" works
value="${myobj.two}" works
value="${myobj.three.one}" does not.

but it does work in the <h:outputText I will see if I can make a simple test case from the showcsae tomorrow.

is codeMirror the best way to display formatted XML?

=========================================================================

after further testing it would appear that the contents of the codeMirror are called prior to the selection being updated by the dataTable.

That is I can see in my log that the order when use <pe:codeMirror is:
1. load table
2. right click and select inspect on a row
3. the getter of the <pe:codeMirror value is fired
4. the setter of the selection from the dataTable is fired

When I use the <h:outputText the order is:
1. load table
2. right click and select inspect on a row
3. the setter of the selection from the dataTable is fired
4. the getter of the <h:outputText is fired

why is the order different for the <pe:codeMirror any additional debugging I can do??

=========================================================================

With not formatted, do you mean it is not colored? CodeMirror supports XML:
http://codemirror.net/mode/xml/index.html

Can you post a screenshot?

Don't know if it is the best way but i think it's not a bad way. An alternative would be syntaxhighliter - but this is not available as JSF component.

=========================================================================

I uploaded a screen shot: http://flic.kr/p/bjSoKS

Here is the code used to display:
<p:dialog id="messageDetailDialogId" header="WIP Message Detail" widgetVar="messageDetailDialog" resizable="true" width="400" height="400" showEffect="fold" hideEffect="explode">
<h:panelGrid id="display" columns="1" cellpadding="4">
<pe:codeMirror id="codeMirror" mode="xml" theme="eclipse" lineNumbers="true" value="${ecommMessageController.testOne}" />
</h:panelGrid>
</p:dialog>

Here is the backing bean code:

public String getTestOne(){
logger.debug("getTestOne()");
return "<root>this<middle attr=\"true\"> is a </middle>test</root>";
}

Any thoughts on why the order of the getter/setter is different when using the codeMirror versus outputText?

=========================================================================

Thanks, i will check it later.

=========================================================================

Ok, your xml should be colored. Also your lineNumbers are not displayed. Can you check your firebug console if all scripts or styles can be loaded? Maybe this is the root cause of your problem.

Formatting is also possible: http://codemirror.net/demo/formatting.html

you can get the editor instance via: myWidgetVar.instance.

=========================================================================

Yup that was it, forgot to deploy the resource bundle, now I will try to figure out the formatting.

Let me know if there is anything additional you want/need from me for the getter/setter issue.

-Devin

=========================================================================

Could you create a simple maven project which shows this problem and create an issue? Please which both cases. 1 with working h:outputText and 1 with not working pe:codeMirror.

I have not much time the next weeks but i will have a look at it if you provide a exampe project.

Thanks.
Thomas

=========================================================================

Hi,

This WIKI page http://code.google.com/p/primefaces-ext ... ingStarted describes actually that you need to have resources-codemirror JAR file in your classpath. This JAR containes mostly a lot of CSS and JavaScript files.

Cheers.
Oleg.

=========================================================================

@Oleg: thanks, I am not very familiar with maven, and when it finished building I saw the extension JAR but not the resources. As I am using a version of Eclipse for IBM's WebSphere I had to tweak the Deployment
Assembly to include both JARs, now it is working nicely. :)

@Thomas while I am not familiar with maven, would it be enough to create a simple EAR with all source code in it that shows the issue I am encountering?

Thanks to both for all your help!

=========================================================================

A WAR would be better, i don't use any AS :)

=========================================================================

I will email you the WAR, let me know if it works for you.

=========================================================================

email sent.

=========================================================================
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

26 Feb 2012, 12:17

the problem also occurs with h:inputText.
As CodeMirror is a input component, it extends from inputText and not from outputText.
So this is _NOT_ related to CodeMirror.

I have not much time to check your example and why it does not work with inputText.

Maybe you could ask in the PrimeFaces forum if someone faced a similiar problem before?
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

geekosphere
Posts: 37
Joined: 27 Feb 2012, 03:44

27 Feb 2012, 03:46

Thanks for the response I will check over in their forum and if I hear anything I will update this thread.

geekosphere
Posts: 37
Joined: 27 Feb 2012, 03:44

28 Feb 2012, 00:32

When I add

Code: Select all

dynamic="true"
to the <p:dialog the setter is called in the correct order.

However the contents of the <pe:codeMirror only work once. If you try to look at a second item nothing displays but the setter & getter are called.

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

28 Feb 2012, 11:03

Does it work with *inputText?
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

geekosphere
Posts: 37
Joined: 27 Feb 2012, 03:44

28 Feb 2012, 15:18

Boom, good call same issue with inputText.

geekosphere
Posts: 37
Joined: 27 Feb 2012, 03:44

28 Feb 2012, 17:54

I have resolved the issue.

I needed to create a <h:form> in the <p:dialog>

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

28 Feb 2012, 18:17

glad to hear!
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

arunvc
Posts: 20
Joined: 23 Sep 2010, 11:31

10 Jul 2012, 08:58

How do i add auto close of tags using extraKeys with codemirror

This is not working

extraKeys="{
'>': function(cm) { cm.closeTag(cm, '>'); },
'/': function(cm) { cm.closeTag(cm, '/'); }
}" />


<pe:codeMirror id="codeMirror"
mode="#{codeMirrorController.mode}"
widgetVar="myCodeMirror"
theme="eclipse" value="#{codeMirrorController.content}" lineNumbers="true"
lineWrapping="true" matchBrackets="true" completeMethod="#{codeMirrorController.complete}"
extraKeys="{
'>': function(cm) { myCodeMirror.closeTag(cm, '>'); },
'/': function(cm) { myCodeMirror.closeTag(cm, '/'); },
'Ctrl-Space': function(cm) { myCodeMirror.complete(); }
}" />

Any help appreciated

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests