Further tweaking of JetBrains WebStorm for UI5 development
While self-studying UI5 development I tried both Eclipse and SAP Web IDE and I must admit neither worked for me as I expected. Not that I would list exact points of each I was completely dissatisfied with; just an overall – probably subconscious – perception. So from time to time I read a review or two of one or another Web development tool. After reading a great post Configuring JetBrains WebStorm for UI5 development of Robin van het Hof I decided to give it a try. And so far I must say it hit the spot.
Robin states in his blog that you have to retrieve two XSD files (sap.m.xsd and sap.ui.core.xsd) from Eclipse UI5 tools installation as they are not present in OpenUI5 SDK. And I did as he told. And then I discovered that actually both files are provided in OpenUI5 SDK archive. They are located in downloads\schemas folder (at least I see them in 1.34.8 version of the SDK). So, if you decided to start with WebStorm from the beginning you don’t need to install Eclipse and its tools for SAPUI5.
It turns out however that not everything is flawless. When implementing some tutorials from OpenUI5 guide in WebStorm you can notice that XML view files sometimes show red marks or report errors which should not be present especially when you copy and paste file contents from the tutorial.
For example, WebStorm reports an error when you mention namespace sap.ui.core.mvc in XML view file. Then you can see red marks under class attribute when implementing exercise Margins and Paddings. The same thing occurs with FragmentDefinition tag when doing tutorial step Dialogs and Fragments. Yes, the code works, but these flaws deprive you of a convenient and helpful code completion feature when designing XML views. Not to tell that superfluous error marks look annoying.
Google only helped to locate the problem and it turned out that WebStorm just cannot find sufficient validation rules in those two XSD files. Actually XSD file contains an XML schema; that is a formal description of a particular XML file format: a set of allowed tags, its attributes, attribute values, etc. Apparently each XSD file is a kind of XML. More details on XSD you can find here.
In our case two XSD files provided with OpenUI5 SDK just tell the WebStorm how to validate XML view files. Unfortunately Google did not helped much in the problem solution and so I decided to dive into XSD and fix it myself.
How to fix the sap.ui.core.mvc namespace
After configuring WebStorm as described in Robin’s post I started implementing tutorials; and when entering XML view I noticed that namespace sap.ui.core.mvc is marked with red. No auto-completion available for View attributes (I wanted to enter controllerName value).
According to API reference a number of View types are present in the name space sap.ui.core.mvc:
- HTMLView – A view defined/constructed by declarative HTML.
- JSONView – A View defined using JSON.
- JSView – A View defined/constructed by JavaScript code.
- TemplateView – A view defined in a template.
- View – A base class for Views.
- XMLView – A View defined using (P)XML and HTML markup.
However there is no specific XSD file and all the views are present in sap.ui.core.xsd file. As we can see in sap.ui.core.xsd each of elements corresponding to views reference other Complex types in sap.ui.core.xsd. As in the example below the element JSView references the complex type n0:_JSViewType. And also we can see that the whole element description is quite short: just a reference to the complex type and annotation.
So the plan would be as follows:
- Create a separate file for sap.ui.core.mvc
- Make a reference to the sap.ui.core XSD file
- Copy the necessary views declaration
The resulting file looks as below (the full file is attached):
Note that we have a namespace declaration in the header: xmlns:n0=”sap.ui.core”. And then we have an import statement to make the parser aware where to find declarations from sap.ui.core name space.
Missing attributes
It appears that original XSD file for sap.ui.core name space does not contain some view attributes, hence WebStorm can not provide a correct auto-completion options when editing XML views. I noticed at least two attributes: controllerName and class.
The controllerName attribute belongs to View and its descendants and all original attributes of base element for views are linked to the _ViewType complex type in sap.ui.core.xsd file. I added controllerName to the _ViewType complex type:
The class attribute (which represents a combination of CSS classes – margin, colors, etc) is a part ofControl and its descendants. So the right place for it is the complex type _ControlType:
To make things more comfortable I also made a specific type for the class attribute. Now WebStorm suggest a list of all margin classes referenced in SAP documentation. However there is a drawback: The type allows only a single value while in reality the attribute accepts a sequence of class names separated by space. And currently WebStorm marks such values with red. Probably some XSD experts could come up with an alternative solution.
FragmentDefinition
WebStorm also marks tag FragmentDefinition with red and apparently there is no such element in any of the original XSD files provided. This tag represents a generic place holder for any type of a Fragment. And the particular type of fragment you select in the code of the corresponding controller (at least so I understand 🙂 ). So it appears that we should add an element FragmentDefinition to the XML schema (our XSD file) which should not extend any other type; and at the same time it should allow the same set of sub-tags as a View. The following definition does the trick:
Bottom line
Tweaking of XSD files is not so scary as it looked at the start. WebStorm now provides the correct auto-completion list. It reports errors with a multi value class attribute but for now I can live with it. I attached both tweaked files to the post. Just note that you should better change their extension to .xsd as SCN does not allow attaching of XSD files.
Hi Sergey,
Great blog! And thanks for the reference to my blog 😉 At the time of my writing, the XSD's weren't part of the OpenUI5 SDK (see one of the early issues at GitHub: xsd files for XML validation not found · Issue #7 · SAP/openui5 · GitHub) and I haven't had the time to update my blog once they were included...
The fix for adding the missing namespaces is pretty neat, but hopefully SAP will do it 'properly' and supply separate XSD's for each namespace
BTW, the Eclipse SDK is still needed in case you want autocomplete functionality for SAPUI5-only namespaces, such as sap.suite.<etc>
Hi Robin,
Thanks for pointing to SAP only name spaces.
Cheers.
Hi Robin,
Sorry for the hasty reply - was on the run and thanks again for your blog. Somehow it delivered the first shove for me 🙂
Folks say it is highly unlikely SAP would come up with complete XSD, so might be a good idea to share WebStorm xsd somewhere (until Web IDE becomes irresistible).
Cheers 🙂
Hi Sergey,
I'm from the product management team of SAP Web IDE.
I'd appreciate if we can talk regarding your expectations from SAP Web IDE and how to make it irresistible.
please drop me an email ([removed by Moderator] and let's try to schedule a call.
Regards,
-- Raz
Shortly after this blog was published we had a great conference call with Raz Korn and his team who currently is working hard to make SAP Web IDE irresistible.
The presentation was really great, guys do lots of amendments to make the development more comfortable. Guys showed the prerelease version of the IDE (which actually by now became current).
In short:
- Web IDE has more semantic controls in place: such as detecting duplicated Id's in XML view, detecting wrong property, aggregation, attributes values (including enumerations). Some of this can be achieved with XSD, however duplication of Id is really valuable as soon as your view becomes complex.
- Code completion in Asynchronous Module Definition (AMD) format both for cross-file methods (so it can detect functions you defined in your project files) and SAPUI5 static and instance methods.
- Deprecation indication in code completion
- Prevents pushing code to repository if the code contains errors (can be tuned)
Actually my current customer has a commitment to use SAP Web IDE as a primary development tool so in next months I would have an opportunity to review the features and make a more detailed post on Web IDE.
Hi Sergey,
Thanks for a good article. Can you please share xsd files as i can not see any attached files here.
I updated sap.ui.core.xsd file but i'm still unable to get code completion suggestion for view.xml file.
Â
Thanks
Â
Hi Muhammad,
Sorry, shortly after my last comment in this thread I started using Web IDE productively and by now I can say it proved usability especially when developing full-stack SAP applications, you should give it a try, surely. And no, I don't have those XSD's from WebStorm anymore. Sorry again.
Thanks Sergey for your response. I think Web IDE provide only online platform for development, without internet you can't access this. Am i right? So what is the best solution for offline development? any guide please.
Thanks
Hi Muhammad,
It appears that there is an offline version of SAP Web IDE. Did not try it myself though.