I just wrote the description file for my UI5 application.
Now I have these questions:
Where and how can I embed the manifest.json in my project correctly?
How can I test if it's working fine? (correctly embedded)
Is the "start_url": "" similar to initialPage of the index.html?
Many thanks for your guidance,
Chris
Usually, the manifest.json file (aka. "Application Descriptor") is put into the same folder as where the Component.js file is located. The component will look for the file name "manifest.json" in the same folder. If the descriptor is located somewhere else or has a different file name, assign the relative URL of the file to the manifestUrl in the component factory function like this, which is recommended to do so anyway because it ...
loads the descriptor file before creating the component (same as manifestFirst) allowing us to preload dependencies and model data to improve the initial loading time.
makes specifying the name of the component redundant.
You can either pass the name of the component or the URL of the descriptor file to load [the component] via the descriptor.
To see if the file is correctly embedded, run the app and see if e.g.
the rootView is loaded,
models (for example ResourceModel for i18n) are set to the component instance,
custom resources assigned to sap.ui5/resources are loaded, etc. etc..
→ Make sure to include (or in case of manifestFirst/ manifestUrl, don't be tempted to remove) manifest declaration in the component metadata.
The "start_url" is purely advisory and meant for the web standard rather than for UI5. It's telling the browser where to look for the initial page when the user starts the web app.
To learn more about the descriptor file, take a look at the developer guide such as "Descriptor for Applications" or as a summary, here.
Related
Can we overlay the file to our custom path or we have to overlay the file to exact folder structure location as in libs?
For example, I want to overlay the constants.js (/libs/cq/ui/widgets/source/constants.js) file, in this adobe recommended Copy this file to /apps/cq/ui/widgets/source/constants.js for overlaying, but in my project that folder structure is not there, so I have copied to the custom path in apps folder and tested the changes and overlaying is working fine.
The file needs to have the same path as the one in libs except for replacing 'libs' with 'apps'. It does not work with custom paths*. If the project does not already have the structure, you can always create it. Don't forget to update the META-INF/Vault/filter.xml file to register the new path with projects package definition.
*Technically you can change the configs to add new searchpaths. But do remember that you might have to share the AEM instance with different tenants and sticking to the usual conventions goes a long way in having a predictable setup. I honestly don't see a reason to do this, it is already an acceptable practice to overlay under '/apps'. The filters on package provide enough flexibility to get along with other tenants while modifying similar areas.
I think you want to create the overlay in your custom project under /apps. If my assumption is correct, then you can certainly do it.
Taking your example in consideration, /libs/cq/ui/widgets/source/constants.js can be overlayed to /apps/<your-project>/cq/ui/widgets/source/constants.js by adding an entry in the Apache Sling Resource Resolver Factory configuration.
See this answer for the detailed steps. I hope this helps.
I have already worked using Sails.js. But in that project we used it simply as an API. We had backbone on a client side.
In the new application I am planning to use Sails from bottom to top, and I have some things I do not fully comprehend.
I have views that use templates (EJS). In my controller I can call a view and pass it a model to render. That I understand. What I am dont fully understand is where do I put javascript files for a client in this scenario?
For example, lets assume that I have a view that has a input box and a button. I would want to have some javascript that controls that button and input (validation or whatever). Lets assume I put that code for input box and button in a validation.js:
1. In what location do I put that file? Assets?
2. How do I include that file to be sent to client for execution? Do I include it in a template.ejs using normal < script > tags?
All the client assets should be placed into the assets folder.
All the includes are automatically binded by Grunt (when lifting the server) into the layout.ejs file, if you've put your css files into the assets/styles folder and your js files into the assets/js folder.
I am trying to display results in a web page. I want to link this from the waterfall page of buildbot. But when I useclick , the required web page does not open. I have placed this new web page in the templates directory. Is there something more that needs to be done?
Since the results you want to display are produced by one of your builds,
the waterfall web templates are not relevant, since they are templates
for the whole waterfall, including all builds, whether or not they
are builds that produce these particular results.
If you wish to provide links to some files generated by a build, you select
a buildstep in the build, or create one for the purpose, that will provide
those links within its status box in the waterfall display (e.g. in the
way that a ShellCommand buildstep provides a link to its stdio log).
For example, you might just add a final step to the build with the description
Report or Publish.
You must write a customized BuildStep class to execute the step that you select
or create. Your customized BuildStep class must be derived from LoggingBuildStep,
or from a class, such as ShellCommand, that is already derived from LoggingBuildStep.
The necessary customization is to override the createSummary method with
your own implementation, and in that implementation call the addURL method to adds URL(s)
to the file(s) you want to publish to the buildstep's status box. You can add as
many URLs as you like. Here is an outline example:
class ReportingStep(ShellCommand):
...
command = ['upload','report',to','some','server']
...
def createSummary(self,log):
...
url = "url/to/the/report/on/the/server"
self.addURL("Report", url)
Now, when ReportingStep completes, its status box will contain
a link labelled Report to the report that the step has uploaded to the server.
Google "buildbot buildstep createSummary" for more leads.
What if my files are saved locally and for now I just want the user to have a link to download the zipped files?
From what I understand, the above customization will help provide an external url.
The user clicks a link that is served from your buildmaster. If your
build just saves these files locally, then they're saved on the buildslave.
So unless your buildslave is on the same machine as the buildmaster then the link has to be URL to an "external" file.
On the other hand, if your buildstep uploads the file to the buildmaster,
then the link can be a link to local file - local on the buildmaster, which
is serving the link.
If your buildslave is on the same machine as your buildmaster, then obviously
you don't need to do any uploading:
addURL("Report",file:///path/to/the/zipfile.zip)
But remember, if you want the content at these links to be persistent then
/path/to/the/zipfile.zip had better not be somewhere that gets clobbered
by every build.
I've created a website in AEM and created a design for that website. Initially the design included a folder with images and a css file called static.css. When I specify the cq:designPath on a node in my website's content, the static.css file gets included automatically (/etc/designs/mywebsite/static.css); AEM also tries to include another file (/etc/designs/mywebsite.css). If the static.css file doesn't exist, it will NOT get included, but the mywebsite.css file gets included ('ed to) regardless of whether or not it exists. The documentation I have found (see here) suggests that you can include any number of css files in your design, but when I try to add addition css files to the /etc/designs/mywebsite/ folder, none of them get included. Am I missing something here? Should all the css files under /etc/designs/mywebsite/ be included in the site, or is it intended that only /etc/designs/mywebsite.css and /etc/designs/mywebsite/static.css are included automatically and any additional files need to be included manually?
The .css extension on the design node invokes a servlet (/libs/wcm/core/components/designer/designer.css.java) which dynamically generates CSS based on various nodes from the design's jcr:content node into CSS.
When a content author switches to design mode (WCMMode=Design), the edit dialogs save to the either the currently-applied design or the default (/etc/designs/default) design's jcr:content node. The template used to create the page, along with the path of the component being edited will determine the path under the jcr:content node where the design settings are saved.
For instance, if you edit an out-of-the-box parsys component you will see an option to editing the "Cell Padding"
If you enter a CSS padding value into the text box and click OK, the value will be saved to a div.padding property at the following location:
/etc/designs/mydesign/jcr:content/mytemplate/par/section[div.padding="30px"]
The servlet will then render the following in the design CSS:
.mytemplate .par div.section {
padding: 8px;
}
The class that actually converts the nodes to CSS is the CSSWriter in the cq-wcm-core jar.
For more information, see a similar question I asked a while back:
In Adobe AEM, how does the parsys component inject styles into the design css file?
Just a short correction. Actually it is not: /etc/designs/mydesign/jcr:content/mytemplate but instead /etc/designs/mydesign/jcr:content/my_page_component
That means if two pages have different templates but share the same page rendering component, then they will share the same design configuration and their components will write at the same location in Design Mode.
In Target 8: Define a Custom DOM Tag, the reader is told about custom DOM tags that can be created by extending other tags. A sample is described for an example called "x-converter" before listing the files as "These files implement the app:".
The three files are...
a drseuss.html file (not sure why there's a sudden deviation in the project name and the HTML file, as opposed to the matching names in previous tutorials...),
a converter-element.html file,
and a convertercomponent.dart file.
I tried creating a new application in the latest Dart editor, and replaced the default HTML file contents with that of drseuss.html, replaced the default dart file contents with that of convertercomponent.dart, and added converter-element.html file.
After fixing an include issue (the file from the tutorial refers to drseuss.css and not the default project name's CSS file), I only see the following in the Chromium browser.
As you can see, the element described in the tutorial (converter-element) doesn't show up. Why don't the files provided for the project result in what's shown in the tutorial?
For reference, here's what's shown in the tutorial.
Web UI requires the build.dart script which compiles the various components into the executable output HTML+Dart.
Take a look at the parent folder in the github src that you reference, and you will see the build.dart script.
In addition, you will need the pubspec.yaml from that folder, too, which includes web_ui package, which brings in the dwc tool(Dart Web Components compiler) used by build.dart.
Take a look at the article Tools for Web UI for more information about dwc and build.dart, and Target 6 - Getting Started with Web UI which covers similar ground, but in a tutorial format.