Hi Maxim,
To overcome the problem of removing the CSS file, I took the follwing
approch. As I understood the font-awsome CSS file is needed only for the
WysiwygEditor. So I have removed the CSS refernce,
private static final CssResourceReference CSS3=new
CssResourceReference(WysiwygBehavior.class,"css/font-awesome.css");
from WysiwygBehaviour and put it in the WysiwygEditor HTML as follows,
<wicket:head>
<wicket:link>
<link rel="stylesheet" type="text/css" href="
http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css"/>
</wicket:link>
</wicket:head>
The it works fine. Is that way OK ?
Thanks!
On Wed, May 29, 2013 at 11:14 PM, Andun Sameera <[email protected]> wrote:
> Hi Maxim,
>
> On Tue, May 28, 2013 at 12:40 PM, Maxim Solodovnik
> <[email protected]>wrote:
>
>> In the future there should be possibility to add custom buttons: like
>> "add emotion" button
>>
>>
>> On Tue, May 28, 2013 at 1:45 PM, Maxim Solodovnik
>> <[email protected]>wrote:
>>
>>> Hello Andun,
>>>
>>> Here is my review:
>>> 1) font files should be removed from the plugin until legal will approve
>>> its license (as well as related css file)
>>>
>> What is the way to use this CSS file instead of keeping it locally ? Can
> we add a URL reference to the file? Also I saw Alexi is talking about
> getting the compiled file at the build time. I am unfamiliar with that
> process. Can you help me ?
>
>>
>>> 2) public WysiwygBehavior(String selector, String method) constructor
>>> should look like this:
>>> public WysiwygBehavior(String selector, String method){
>>> this(selector, method, new Options());
>>> }
>>>
>> Done and Committed
>
>>
>>> 3) for now all buttons can be hardcoded as in you html above
>>> 4) WysiwygEditor extends Panel should be created with it's own markup
>>> file (maybe it is possible to extend some of the FormComponents (you can
>>> take a look at *DateTextField as an example)*
>>> 5) It should have at least 2 constructors: WE(String id), WE(String id,
>>> IModel<T>) I guess it should be generic as other Wicket components.
>>>
>> Done and Committed. Please review the code in
> https://github.com/andunslg/Wysiwyg-Wicket. Also I have changed the
> sample to use the changed code in
> https://github.com/andunslg/Wysiwyg-Wicket-Sample.
>
>>
>>> Thanks!
>>>
>>>
>>> On Mon, May 27, 2013 at 8:49 PM, Andun Sameera <[email protected]>wrote:
>>>
>>>> Hi Maxim,
>>>>
>>>> Thank you for the instruction. I have corrected the problem by adding
>>>> those fonts as resources. But there was a small issue. I had put following
>>>> code segment to the Sample application's init() method to load font
>>>> resources to run time. Is it the correct way of doing the thing ? Can I
>>>> move this code segment to the Behavior itself to make users life easy ?
>>>>
>>>> IPackageResourceGuard packageResourceGuard =
>>>> getResourceSettings().getPackageResourceGuard();
>>>> if (packageResourceGuard instanceof SecurePackageResourceGuard)
>>>> {
>>>> SecurePackageResourceGuard guard =
>>>> (SecurePackageResourceGuard)
>>>> packageResourceGuard;
>>>> guard.addPattern("+*.eot");
>>>> guard.addPattern("+*.woff");
>>>> guard.addPattern("+*.ttf");
>>>> }
>>>>
>>>> I found this instructions in the mail thread given at [1].
>>>>
>>>> I have gone through the OFL and found this. I think we can use this
>>>> under AL.
>>>>
>>>> Permission is hereby granted, free of charge, to any person obtaining
>>>> a copy of the Font Software, to use, study, copy, merge, embed, modify,
>>>> redistribute, and sell modified and unmodified copies of the Font
>>>> Software, subject to the following conditions:
>>>>
>>>> 1) Neither the Font Software nor any of its individual components,
>>>> in Original or Modified Versions, may be sold by itself.
>>>>
>>>> 2) Original or Modified Versions of the Font Software may be bundled,
>>>> redistributed and/or sold with any software, provided that each copy
>>>> contains the above copyright notice and this license. These can be
>>>> included either as stand-alone text files, human-readable headers or
>>>> in the appropriate machine-readable metadata fields within text or
>>>> binary files as long as those fields can be easily viewed by the user.
>>>>
>>>> 3) No Modified Version of the Font Software may use the Reserved Font
>>>> Name(s) unless explicit written permission is granted by the
>>>> corresponding
>>>> Copyright Holder. This restriction only applies to the primary font
>>>> name as
>>>> presented to the users.
>>>>
>>>> 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
>>>> Software shall not be used to promote, endorse or advertise any
>>>> Modified Version, except to acknowledge the contribution(s) of the
>>>> Copyright Holder(s) and the Author(s) or with their explicit written
>>>> permission.
>>>>
>>>> 5) The Font Software, modified or unmodified, in part or in whole,
>>>> must be distributed entirely under this license, and must not be
>>>> distributed under any other license. The requirement for fonts to
>>>> remain under this license does not apply to any document created
>>>> using the Font Software.
>>>> Also I found this site [2]. What is your opinion ?
>>>>
>>>> Also If the things works fine, I can move to the step of creating the
>>>> component to reuse following code which needed to create the tool-bar and
>>>> the editor. Can you give me some instructions regarding the process of
>>>> creating a component and it's best practices.
>>>>
>>>> <div class="container">
>>>> <div class="btn-toolbar" data-role="editor-toolbar"
>>>> data-target="#editor">
>>>> <div class="btn-group">
>>>> <a class="btn dropdown-toggle" data-toggle="dropdown"
>>>> title="Font Size"><i class="icon-text-height"></i> <b
>>>> class="caret"></b></a>
>>>> <ul class="dropdown-menu">
>>>> <li><a data-edit="fontSize 5"><font
>>>> size="5">Huge</font></a></li>
>>>> <li><a data-edit="fontSize 3"><font
>>>> size="3">Normal</font></a></li>
>>>> <li><a data-edit="fontSize 1"><font
>>>> size="1">Small</font></a></li>
>>>> </ul>
>>>> </div>
>>>> <div class="btn-group">
>>>> <a class="btn" data-edit="bold" title="Bold
>>>> (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
>>>> <a class="btn" data-edit="italic" title="Italic
>>>> (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
>>>> <a class="btn" data-edit="strikethrough"
>>>> title="Strikethrough"><i class="icon-strikethrough"></i></a>
>>>> <a class="btn" data-edit="underline" title="Underline
>>>> (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
>>>> </div>
>>>> <div class="btn-group">
>>>> <a class="btn" data-edit="insertunorderedlist"
>>>> title="Bullet list"><i class="icon-list-ul"></i></a>
>>>> <a class="btn" data-edit="insertorderedlist" title="Number
>>>> list"><i class="icon-list-ol"></i></a>
>>>> <a class="btn" data-edit="outdent" title="Reduce indent
>>>> (Shift+Tab)"><i class="icon-indent-left"></i></a>
>>>> <a class="btn" data-edit="indent" title="Indent (Tab)"><i
>>>> class="icon-indent-right"></i></a>
>>>> </div>
>>>> <div class="btn-group">
>>>> <a class="btn" data-edit="justifyleft" title="Align Left
>>>> (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
>>>> <a class="btn" data-edit="justifycenter" title="Center
>>>> (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
>>>> <a class="btn" data-edit="justifyright" title="Align Right
>>>> (Ctrl/Cmd+R)"><i
>>>> class="icon-align-right"></i></a>
>>>> <a class="btn" data-edit="justifyfull" title="Justify
>>>> (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
>>>> </div>
>>>> <div class="btn-group">
>>>> <a class="btn dropdown-toggle" data-toggle="dropdown"
>>>> title="Hyperlink"><i class="icon-link"></i></a>
>>>>
>>>> <div class="dropdown-menu input-append">
>>>> <input class="span2" placeholder="URL" type="text"
>>>> data-edit="createLink"/>
>>>> <button class="btn" type="button">Add</button>
>>>> </div>
>>>> <a class="btn" data-edit="unlink" title="Remove
>>>> Hyperlink"><i class="icon-cut"></i></a>
>>>>
>>>> </div>
>>>>
>>>> <div class="btn-group">
>>>> <a class="btn" data-edit="undo" title="Undo
>>>> (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
>>>> <a class="btn" data-edit="redo" title="Redo
>>>> (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
>>>> </div>
>>>> <input type="text" data-edit="inserttext" id="voiceBtn"
>>>> x-webkit-speech="">
>>>> </div>
>>>>
>>>> <div id="editor">
>>>> Go ahead…
>>>> </div>
>>>> </div>
>>>>
>>>> Thanks!
>>>>
>>>> [1] -
>>>> http://apache-wicket.1842946.n4.nabble.com/Wicket-1-4-20-error-message-quot-Access-denied-to-static-package-resource-quot-td4491886.html
>>>> [2] -
>>>>
>>>> http://www.tldrlegal.com/compare?a=Apache+License+2.0+%28Apache-2.0%29&b=Open+Font+License+%28OFL%29
>>>>
>>>>
>>>> On Mon, May 27, 2013 at 3:04 PM, Maxim Solodovnik <[email protected]
>>>> > wrote:
>>>>
>>>>> According to this css file:
>>>>>
>>>>> @font-face{
>>>>> font-family:'FontAwesome';*
>>>>> src:url('../font/fontawesome-webfont.eot?v=3.0.2');
>>>>> src:url('../font/fontawesome-webfont.eot?#iefix&v=3.0.2')
>>>>> format('embedded-opentype'),
>>>>> url('../font/fontawesome-webfont.woff?v=3.0.2') format('woff'),
>>>>> url('../font/fontawesome-webfont.ttf?v=3.0.2') format('truetype');*
>>>>> font-weight:normal;
>>>>> font-style:normal }
>>>>>
>>>>>
>>>>> I guess you need font files (in bold above as well)
>>>>>
>>>>> Could you also check if
>>>>>
>>>>> - The Font Awesome font is licensed under the *SIL Open Font License* -
>>>>> http://scripts.sil.org/OFL
>>>>>
>>>>> is compatible with AL?
>>>>>
>>>>>
>>>>> Thanks in advance
>>>>>
>>>>>
>>>>>
>>>>> On Mon, May 27, 2013 at 4:19 PM, Andun Sameera <[email protected]>wrote:
>>>>>
>>>>>> Hi Maxim,
>>>>>>
>>>>>> I am in the final step of creating the Wysiwyg behavior. I have
>>>>>> update the sample also. When I run the sample all the Wysiwyg
>>>>>> functionality
>>>>>> is working fine. You can see the attached screen of that.
>>>>>>
>>>>>> But I am facing a weired problem. To show the Icons of the buttons it
>>>>>> need following CSS file,
>>>>>>
>>>>>> <link href="
>>>>>> http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css";
>>>>>> rel="stylesheet">
>>>>>>
>>>>>> What I did is download the CSS file and included it as a resource
>>>>>> reference for the behaviour. But the icons are not shown properly. Then
>>>>>> what I did was put the url reference of the CSS file. It also not work.
>>>>>>
>>>>>> Then I created a html file outside wicket. I put the CSS reference as
>>>>>> this,
>>>>>>
>>>>>> <link href="
>>>>>> http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css";
>>>>>> rel="stylesheet">
>>>>>>
>>>>>> Then all the things work well. But when I download the file and put
>>>>>> the reference as this,
>>>>>>
>>>>>> <link href="font-awesome.css" rel="stylesheet">
>>>>>>
>>>>>> Icons are not shown. What is going wrong here ? I have attached the
>>>>>> html project which was create out side wicket here.
>>>>>>
>>>>>> Thanks!
>>>>>>
>>>>>>
>>>>>> On Mon, May 27, 2013 at 12:21 PM, Maxim Solodovnik <
>>>>>> [email protected]> wrote:
>>>>>>
>>>>>>> great! thanks!
>>>>>>>
>>>>>>>
>>>>>>> On Mon, May 27, 2013 at 1:45 PM, Andun Sameera
>>>>>>> <[email protected]>wrote:
>>>>>>>
>>>>>>>> Hi Maxim,
>>>>>>>>
>>>>>>>> I have created two git repos for component
>>>>>>>> https://github.com/andunslg/Wysiwyg-Wicket and sample
>>>>>>>> https://github.com/andunslg/Wysiwyg-Wicket-Sample.
>>>>>>>>
>>>>>>>> I have created the WysiwygBehaviour first. After scefully creating
>>>>>>>> that I will create the component to add the Wysiwyg buttons.
>>>>>>>>
>>>>>>>> Thanks!
>>>>>>>>
>>>>>>>>
>>>>>>>> On Mon, May 27, 2013 at 9:31 AM, Andun Sameera
>>>>>>>> <[email protected]>wrote:
>>>>>>>>
>>>>>>>>> OK Maxim. Will look in to that.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Mon, May 27, 2013 at 9:29 AM, Maxim Solodovnik <
>>>>>>>>> [email protected]> wrote:
>>>>>>>>>
>>>>>>>>>> I would like it as a plugin for wicket-jquery-ui
>>>>>>>>>> I guess this plugin will require both Behavior and Component
>>>>>>>>>> (probably extending TextArea) with configurable buttons
>>>>>>>>>> I believe small number of buttons can be added in initial version
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Mon, May 27, 2013 at 10:55 AM, Andun Sameera <
>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>
>>>>>>>>>>> Hi Maxim,
>>>>>>>>>>>
>>>>>>>>>>> I accept this. What I have to do is creating another wicket
>>>>>>>>>>> module which wraps the bootstrap-wysiwyg plugin. Do I have to
>>>>>>>>>>> create it as
>>>>>>>>>>> a separate project or under wicket-jquery-ui ?
>>>>>>>>>>>
>>>>>>>>>>> Thanks!
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> On Mon, May 27, 2013 at 9:19 AM, Maxim Solodovnik <
>>>>>>>>>>> [email protected]> wrote:
>>>>>>>>>>>
>>>>>>>>>>>> Hello Andun,
>>>>>>>>>>>>
>>>>>>>>>>>> since Sebastian already implemented
>>>>>>>>>>>> emoticons<https://github.com/sebfz1/wicket-jquery-ui/tree/master/wicket-jquery-ui-plugins/src/main/java/com/googlecode/wicket/jquery/ui/plugins/emoticons>
>>>>>>>>>>>> plugin
>>>>>>>>>>>> I propose you to implement additional component: WYSIWYG editor
>>>>>>>>>>>> plugin
>>>>>>>>>>>> based on http://mindmup.github.io/bootstrap-wysiwyg/
>>>>>>>>>>>> as described here:
>>>>>>>>>>>> https://issues.apache.org/jira/browse/OPENMEETINGS-558
>>>>>>>>>>>>
>>>>>>>>>>>> Would you accept that?
>>>>>>>>>>>>
>>>>>>>>>>>> --
>>>>>>>>>>>> WBR
>>>>>>>>>>>> Maxim aka solomax
>>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> --
>>>>>>>>>>> Regards
>>>>>>>>>>> Andun S.L. Gunawardana
>>>>>>>>>>> Undergraduate
>>>>>>>>>>> Department of Computer Science And Engineering
>>>>>>>>>>> University of Moratuwa
>>>>>>>>>>> Sri Lanka
>>>>>>>>>>>
>>>>>>>>>>> Blog - http://www.insightforfuture.blogspot.com/
>>>>>>>>>>> LinkedIn -
>>>>>>>>>>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
>>>>>>>>>>> Twitter -http://twitter.com/AndunSLG
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> --
>>>>>>>>>> WBR
>>>>>>>>>> Maxim aka solomax
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> Regards
>>>>>>>>> Andun S.L. Gunawardana
>>>>>>>>> Undergraduate
>>>>>>>>> Department of Computer Science And Engineering
>>>>>>>>> University of Moratuwa
>>>>>>>>> Sri Lanka
>>>>>>>>>
>>>>>>>>> Blog - http://www.insightforfuture.blogspot.com/
>>>>>>>>> LinkedIn -
>>>>>>>>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
>>>>>>>>> Twitter -http://twitter.com/AndunSLG
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> Regards
>>>>>>>> Andun S.L. Gunawardana
>>>>>>>> Undergraduate
>>>>>>>> Department of Computer Science And Engineering
>>>>>>>> University of Moratuwa
>>>>>>>> Sri Lanka
>>>>>>>>
>>>>>>>> Blog - http://www.insightforfuture.blogspot.com/
>>>>>>>> LinkedIn -
>>>>>>>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
>>>>>>>> Twitter -http://twitter.com/AndunSLG
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> WBR
>>>>>>> Maxim aka solomax
>>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> Regards
>>>>>> Andun S.L. Gunawardana
>>>>>> Undergraduate
>>>>>> Department of Computer Science And Engineering
>>>>>> University of Moratuwa
>>>>>> Sri Lanka
>>>>>>
>>>>>> Blog - http://www.insightforfuture.blogspot.com/
>>>>>> LinkedIn -
>>>>>> http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
>>>>>> Twitter -http://twitter.com/AndunSLG
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> WBR
>>>>> Maxim aka solomax
>>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> Regards
>>>> Andun S.L. Gunawardana
>>>> Undergraduate
>>>> Department of Computer Science And Engineering
>>>> University of Moratuwa
>>>> Sri Lanka
>>>>
>>>> Blog - http://www.insightforfuture.blogspot.com/
>>>> LinkedIn - http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
>>>> Twitter -http://twitter.com/AndunSLG
>>>>
>>>>
>>>>
>>>>
>>>>
>>>
>>>
>>>
>>> --
>>> WBR
>>> Maxim aka solomax
>>>
>>
>>
>>
>> --
>> WBR
>> Maxim aka solomax
>>
>
> Thanks!
>
> --
> Regards
> Andun S.L. Gunawardana
> Undergraduate
> Department of Computer Science And Engineering
> University of Moratuwa
> Sri Lanka
>
> Blog - http://www.insightforfuture.blogspot.com/
> LinkedIn - http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
> Twitter -http://twitter.com/AndunSLG
>
>
>
>
>
--
Regards
Andun S.L. Gunawardana
Undergraduate
Department of Computer Science And Engineering
University of Moratuwa
Sri Lanka
Blog - http://www.insightforfuture.blogspot.com/
LinkedIn - http://www.linkedin.com/pub/andun-s-l-gunawardana/34/646/703
Twitter -http://twitter.com/AndunSLG
