Tutorial 2: Create a new widget about aikau HOT 29 CLOSED

Hi,

First of all, thanks for taking the time to try out the tutorial - I'm very grateful for the feedback and I'm sorry that you've hit an issue so early on. Quite a few people within Alfresco have run through it successfully already so in principle it should be correct but it's possible that I've missed something when moving it from the GoogleDocs version to GitHub markdown - or maybe something just isn't explained clearly enough.

I just want to confirm that when you say you're testing with Alfresco 5.0.c that you're just referring to the repository - if so, this will be fine... most versions of the repository will work perfectly well - but I just wanted to make sure you weren't trying to build the example into Alfresco Share.

With Tutorial 2 the most important things to get right are to ensure that you've updated the surf.xml file to add the package declaration and that you've restarted the server after making any changes.

You also need to make 100% sure that you've created the JS, HTML, CSS and properties files in the right locations (making sure to take note of the sub-folder structure!).

If you're still experiencing issues then go through the steps under "What to do if things go wrong" here: https://github.com/Alfresco/Aikau/blob/master/tutorial/chapters/About.md (e.g. try clearing caches, refreshing WebScripts and adding the logging service)

If you're still hitting issues after trying those steps then please let me know!

Many thanks,
Dave

from aikau.

Hi,
thanks for the fast prompt. After checking the jetty output i can see there's something wrong in the home.get.js

SEVERE: Exception from executeScript - redirecting to status template error: 02110000 Failed to execute script 'org.springframework.extensions.webscripts.ResourceStore$WebApplicationStoreScriptContent@3653eb8c': missing ] after element list (/WEB-INF/webscripts/pages/home.get.js#128)

and this bit, from line 127 to 139 is:

 },
            {
                name: "tutorial/HelloWorld"
            },
               // Add more widgets here !!!
            {
                name: "alfresco/buttons/AlfButton",
                config: {
                    label: "Go to parent folder",
                    iconClass: "alf-folder-up-icon",
                    publishTopic: "ALF_DOCLIST_PARENT_NAV"
                }
            },

Hope it's useful,
Salvatore

from aikau.

OK, this suggests that there is something wrong with the JSON in the WebScript controller - can you paste the complete file (or put it in pastebin or somewhere) to help me spot what the issue is? (it's not possible to tell from just that snippet)

from aikau.

Yes of course, that's the complete file, https://pastee.org/9xyb2
Thanks

from aikau.

OK, I've tried that exact file in my own application (created following the tutorial) and it works fine - I'm not getting that "missing element" exception - indeed, it now looks like perfectly valid JSON. Are you still seeing that same error?

Are you seeing any other errors? e.g. in the console? I'm a bit confused here.

from aikau.

That's weird...yes I still see it, I will check for further errors. Do you know of any tools to validate JSON?

from aikau.

I normally do most of my editing in Sublime which is pretty good at picked up errors in JSON and JavaScript if you use the JSHint related plugins. For online tools I've used http://json.parser.online.fr/ and http://jsbeautifier.org/.

I know that I was definitely picking up the code you pasted because I was seeing the additional SearchBox that isn't added as part of the tutorial.

I'm assuming you've done all the usual things, like restarted the server, refreshed WebScripts, etc.

from aikau.

Thanks, yes I just added the SearchBox because I want to change the innerHTML. The idea was that to be able to log the innerHTML and later to override just the placeholder. Thanks for the links I will take a look. And yes..I followed the steps, I will try again everything and let you know.
Thank you

from aikau.

No problem, I'm sorry I haven't been able to help out more. One other thing you could try is to just strip the WebScript controller file right down so that it contains nothing other than your custom widget... that would be a much simpler JSON structure to verify and will also reveal if there are any issues in the rest of the steps you've followed.

from aikau.

Hi Dave,
I can't see that error anymore..so maybe it was related to some old log. The only thing I see now is:
org.springframework.extensions.surf.DependencyAggregator getCompressedFile
SEVERE: Could not find compressed file: components/preview/PdfJs.css

That file is there though in the that folder share/components/preview

from aikau.

That error message is unfortunately something that we need to live with temporarily. The missing file refers exists when Aikau is used in the context of Alfresco Share... as soon as we get to the point where we can switch out the Aikau standalone PDF.js previewer plugin for the current version (that uses a prototype hack to render the YUI2 based PDF.js previewer plugin then that error will go away for standalone clients.

Hopefully we'll be able to resolve this in the near term, I'm just waiting to get sign-off on using the Aikau independent plugin in future Share releases.

Presumably though the rest of the tutorial is now working ok?

from aikau.

OK I though it was not related.
Oh..no I still can't see the div in the page. The error is gone though. I open the HTML page and last thing I can see is:

<body id="Share" class="claro alfresco-share">
   <div id="content">
   <script type="text/javascript">//<![CDATA[
Alfresco.logging = true;
require(['surf/727f854fbba07ce37079129013579d21','dojo/domReady!'], function(Page) {
 var p = new Page({services:[{"config": {"loggingPreferences": {"all": true, "enabled": true}}, "name": "alfresco\/services\/LoggingService"}, "alfresco\/services\/NavigationService", "alfresco\/services\/LogoutService", "alfresco\/services\/DocumentService", "alfresco\/services\/ActionService", "alfresco\/services\/UploadService"],widgets:[{"id": "MAIN_VERTICAL_LAYOUT", "config": {"widgets": [{"id": "HEADER_BAR", "config": {"widgets": [{"id": "APP_MENU_BAR", "config": {"widgets": [{"id": "HOME", "config": {"targetUrl": "ap\/ws\/home", "label": "Home"}, "name": "alfresco\/menus\/AlfMenuBarItem"}]}, "align": "left", "name": "alfresco\/header\/AlfMenuBar"}, {"id": "USER_MENU_BAR", "config": {"widgets": [{"id": "USER_MENU", "config": {"label": "User Menu", "widgets": [{"id": "HEADER_USER_MENU", "config": {"widgets": [{"id": "LOGOUT", "config": {"publishTopic": "ALF_DOLOGOUT", "iconClass": "alf-user-logout-icon", "label": "Logout"}, "name": "alfresco\/header\/AlfMenuItem"}]}, "name": "alfresco\/menus\/AlfMenuGroup"}]}, "name": "alfresco\/header\/AlfMenuBarPopup"}]}, "align": "right", "name": "alfresco\/header\/AlfMenuBar"}]}, "name": "alfresco\/header\/Header"}, {"id": "HEADER_TITLE_BAR", "config": {"semanticWrapper": "header", "widgets": [{"id": "HEADER_LOGO", "config": {"logoClasses": "alfresco-logo-only"}, "align": "left", "name": "alfresco\/logo\/Logo"}, {"id": "HEADER_TITLE", "config": {"label": "Welcome to Aikau Development!", "setBrowserTitle": "Home"}, "align": "left", "name": "alfresco\/header\/Title"}, {"id": "HEADER_SEARCH", "config": {"linkToFacetedSearch": true, "site": null, "id": "HEADER_SEARCH_BOX", "repository": false}, "align": "right", "name": "alfresco\/header\/SearchBox"}]}, "className": "share-header-title", "name": "alfresco\/layout\/LeftAndRight"}, {"name": "tutorial\/HelloWorld"}, {"config": {"publishTopic": "ALF_DOCLIST_PARENT_NAV", "iconClass": "alf-folder-up-icon", "label": "Go to parent folder"}, "name": "alfresco\/buttons\/AlfButton"}, {"config": {"rootNode": "alfresco:\/\/user\/home", "widgets": [{"name": "alfresco\/documentlibrary\/views\/AlfSimpleView"}], "rawData": true}, "name": "alfresco\/documentlibrary\/AlfDocumentList"}]}, "name": "alfresco\/layout\/VerticalWidgets"}],publishOnReady:[],webScriptId:"webscripts/pages/home.get"
}, 'content');
});
//]]></script>
   </div>

Clearly the document is not terminated as tags are missing

from aikau.

OK, what do you see in the page? If it's completely blank then it suggests that there is an error in the JS somewhere. Have you tried setting your browser developer tools to break on exceptions to see what if any errors are occurring?

from aikau.

I've pasted the http://localhost:8090/aikau-sample/page/ap/ws/home stripping the header section. Last thing to show is the div content and there's no body and html termination. So must be something wrong in between. I will try to use browser devtools and see if there's anything new.

from aikau.

So the exceptions are in the jquery 1.11.1-min.js message: An invalid or illegal string was specified.
I will try on a different browser (actually iceweasel, [edited] I also tried with chromium and I still can't see it)
Do you test against this version of jquery as well?

from aikau.

I think you'll find that those are caught exceptions, in Chrome Web Developer tools there's a box that you can uncheck to only capture uncaught exceptions. Those JQuery exceptions are to be expected and are handled internally by JQuery - sorry, I should have mentioned that.

from aikau.

Okok, I've set the devtools as you said and it just runs without breaking. And still no div...strange. Do you want me to send you the whole folder just to test it on your environment? It's weird.

from aikau.

At this point I can only imagine that you've not created the widget files in the correct place... one other thing you can test is to search for the custom widget code.

In the browser developer tools you can go to the "Sources" tab and look under "aikau-sample/res/js/lib/surf" and there should one one JS file... look in that file for your widget code and see if it is present.

from aikau.

My structure is like:
aikau-sample/src/main/webapp/js/tutorial/
and here I have:

HelloWorld.js
css/HelloWorld.css
html/HelloWorld.html
i18n/HelloWorld.properties
i18n/HelloWorld_it.properties

When I go to "Sources" I cannot see anything related to "aikau-sample/res/js/lib/surf"
I see home, which is basically the HTML page I posted before, which breaks on

from aikau.

I've uploaded a screenshots of both my browser and dev tools here: https://www.dropbox.com/s/89dbecw7s5dd6hq/AikauTutorial2.png?dl=0

You should be able to see the custom widget (rendering "Hello" in orange) and the source from the widget in the developer tools "Sources" tab. Obviously your view of the browser source files will look different if you're using a different browser.

Your file locations look correct though, so I'm really confused about what might be happening. Have you tried jumping ahead to Chapter 4 (as described in the "What to do if it all goes wrong section") to add in the LoggingService to see if any errors are being logged?

At this point I'm not really sure what to suggest!... we do have plans to provide the complete solution files for reference, but we haven't got around to doing that yet. I might try and set up another GitHub project with the completed tutorial for you to take a look at.

from aikau.

Thanks Dave,
I just found out it was a typo :| I wrote

"dijit/_TemplateMixin", 
instead of
"dijit/_TemplatedMixin", 

Weird that in iceweasel devtools I got no clear view of this, but with chromium I discovered instantly as it was showing as an error with red, because of file missing.
Sorry for taking your time for a typo,
thanks for your kindness!
Salvatore

from aikau.

Hi Dave,
as I said I'm trying to override the placeholder in the SearchBox widget, so the way I'm thinking I can achieve this is by overriding the i18nRequirements to point to custom properties defined in an extension.

I put in share-header.get.js:

var search = widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH");
search.config.i18nFile = "./i18n/SearchBox.properties";
to get the widget and eventually override the i18nFile.

There's something wrong in that, is it the wrong approach?

Thanks in advance
Salvatore

from aikau.

No problem, glad you got the issue resolved in the end - I'm going to close this issue now.

In terms of your other question, the properties files don't quite work like that... each widget in the page is processed by Surf to work out what dependency files to include (including the i18n files). For the i18n and CSS dependencies this is based off the original source file of the widget (not including any configuration updates).

The SearchBox was actually written for a very specific use case and we are in the process of making it more abstract so that it is much more configurable (e.g. that you can customize the placeholder text)... but in the meantime in order to override the search text you would need to extend the widget (e.g. "tutorial/SearchBox" extending "alfresco/headers/SearchBox") and that extension would contain nothing except a reference to a new i18n properties file, e.g

define(["dojo/_base/declare",
        "alfresco/header/SearchBox"], 
        function(declare, SearchBox) {
   return declare([SearchBox], {
      i18nRequirements: [{i18nFile: "./i18n/SearchBox.properties"}],
   });
});

Then in the tutorial/i18n/SearchBox.properties file you'd set the new placeHolder text with the key:

search.instruction=Search placeholder

That's the only message you'd need to include - everything else would be inherited.

I hope that makes sense.

from aikau.

Hi Dave,
ah..yes that makes sense to me now. There's just one thing which is not clear and it's related to maven. I've seen the extension is deployed as a war (I've edited the pom.xml file to switch it to jar but it doesn't have all files, so I suppose the only way is war). I'm not very familiar with that so right now I'm lost about how to deploy that into alfresco. I don't think I can drop the war in the share/WEB-INF/lib that's why I was looking at jar.
Apart from that I'm really grateful from your tutorials and the further explanations here, it makes me to better understand the full picture

from aikau.

The Maven archetype provides a standalone client, e.g. a WAR - it's not intended to provide an extension module to be deployed into Share as a JAR. The tutorial works on this principle, but the concepts that the tutorial covers can be used in an extension if required (e.g. new pages, custom widgets, etc).

from aikau.

I see, thanks for making it clear

from aikau.

Hi again Dave,
I was trying to extend the widget but I cannot get it to work.
I'm basically following the same idea seen in the aikau.jar and also in this post of yours http://blogs.alfresco.com/wp/developer/2013/09/18/how-to-add-amd-packages-to-share-via-extension-modules/ but I'm not lucky with it.

my extension file looks like this:

<extension>
    <modules>
        <module>
            <id>Custom Search properties</id>
            <version>1.0</version>
            <auto-deploy>true</auto-deploy>
            <configurations>
                <config evaluator="string-compare" condition="WebFramework" replace="false">
                    <web-framework>
                        <dojo-pages>
                            <packages>
                                <package name="searchbox" location="js/aikau"/>
                            </packages>
                        </dojo-pages>
                    </web-framework>
                </config>
            </configurations>
        </module>
    </modules>
</extension>

and inside the META-INF/js/aikau I've put the SearchBox.js extended widget together with the i18n folder with the properties.
[EDIT] I've also created a separated folder SearchBox where I put all inside but still I can't see the changes. When I see the page source I can see at the very beginning that the package is included

{ name: "searchbox", location: "js/aikau"},

but changes are not visible
Am I missing something?

from aikau.

Is "searchbox" actually a package? If so, what widget are you trying to include from that package? Are you doing this in Share or in the tutorial application?

from aikau.

I carefully followed your instructions to change the searchbox placeholder text. It does not work. I reached out to other developer forums and everyone states that you can change the placeholder text but no one has indicated that they were successful. All my other amps work so I am not sure why this one does not. I am running Alfresco 5.1.e with the latest Aikau 1.0.39.8. Any and all help will be appreciated.

from aikau.