I'm working on a SAPUI5 application with XML-Views.
Now I want to arrange my buttons for example. They should be arranged so they form a numberpad like on a keyboard.
I only know the layout managers from Java or the layouts of a SAP Web Dynpro where I also used transparent containers.
So how can I arrange my elements in HTML? How can I use layout managers and is there such a thing as a transparent container?
Thanks for any hints! :)
Arranging HTML elements in SAPUI5 is how you would in normal HTML. SAP does emphasize that code in index.html is to be minimal, however, so do your best to keep your coding done inside of your views. Your elements are likely to be contained in <div>, </div> tags, which, like any other HTML tag, can be manipulated using CSS.
You'll need to create a CSS file and reference it in your index.html file like so:
<link rel="stylesheet" type="text/css" href="css/style.css" />.
Additionally, you should be aware of the native SAPUI5 layout controls and use them when you can as opposed to writing up your own solution.
You might find this post useful as well.
Related
I'm trying to optimalize web for speed and wanna ask about Eliminating render-blocking CSS and JS.
by JS 'm only using async attr. - lets say, throwin' it at plugins like flexslider, lightbox.. but should I also use this with the base scripts like ?:
<script src="https://cdnjs.cloudflare.com/.../4.5.3/js/bootstrap.min.js" async></script>
<script src="js/script.js" async></script>
Whenever i add async on some script and test it, that .js script won't just operate - as if not linked. What am I doing wrong? And is this enough ... ?
-by CSS - tring to impove it like this :
<link rel="preload" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" media="print" as="style" onload="this.onload=null;this.rel='stylesheet'" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"><noscript><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"></noscript>
This cuts down the time of rendering CSS resources, but again when using it on e.g fontawesome - icons are not loaded as if link was't there...So, is this a good way of rendering CSS please ?
JavaScript
When using async you have to ensure that load order does not affect your implementation.
Async basically says "load everything as quickly as you can, I don't care about load order".
If you haven't accounted for this then the easiest fix is to use defer on your JavaScript instead of async. This basically says "load everything after the HTML has loaded but please keep the order as some scripts depend on others".
This will be slightly slower overall but still fix the JavaScript being render blocking.
You should defer all scripts, except any scripts that are essential for above the fold operations (and then you should inline those scripts in a <script> tag in the <header>, obviously keep this to a minimum).
CSS
Render blocking CSS is anything sitting in an external file that relates to content "above the fold".
To understand this fully you need to understand how the browser render things but in essence anything that is visible without scrolling ("above the fold" content) is delayed if your CSS is in an external file as it needs that information to know how to present and lay things out.
What you need to do is find all the styles that apply to your above the fold content and inline them in a <style> tag in the page <header>. Yet again this needs to be kept to a minimum so you may need to make the above the fold CSS custom rather than using bootstrap....including the whole of bootstrap inline would not be good!
Then all other styles can sit in external style sheets.
This way the second the page's HTML is downloaded it has everything it needs to layout the page without waiting for any other requests.
Font Awesome
Ah fonts for icons. I won't go into why that is a bad practice from an accessibility and performance perspective as I have covered that numerous times before.
Instead I will simply say that for any "above the fold" icons you should instead swap them for inline SVGs. This is for the same reason as inlining your CSS, inline SVGs do not need a network request to render so the second the HTML is loaded your page can be displayed.
just a suggestion, have no way of testing atm but try putting 'async' before the source attribute. also, try adding a copied line with the attribute defer instead of async for wider browser support.
I have a quick question regarding implementation of a small change in our system, and I want to hear your opinion about my little disagreement with another developer in our company.
Our working environment:
Laravel
AdminLTE
Two laravel guards for 'partner' and 'staff'. Each type of user (partner/staff) has access to a different set of pages, using a different set of controllers and a different subdomain.
Admin LTE comes with some skins that you can apply to your <body>, for example 'skin-blue' theme. This is what our page looks like. Just for a comparison, if you remove the 'skin-blue' class, our website looks like this.
We were asked by our client to change the color of the top navbar for the Staff side. So, because the colors at the moment are being added by an adminLTE skin, I thought it was better to create a second theme for the staff side, calling it "skin-staff", and then in our base blade file, check for which guard is being used, and add the class accordingly.
<body class="#if(get_guard() === 'partner') skin-blue #else skin-staff #endif" ...>
I made a copy of the original skin-blue file, renamed it to skin-staff, and just changed the color of the necessary elements. I thought this was the best way to go about it, but the developer which had to review my github Pull Request said that because this was such a small change, it wasn't necessary to create a new skin. His proposed solution was to simply add the css classes in the blade file, something like:
<head>
…
<style type="text/css">
#if (get_guard() === 'staff')
.skin-blue .main-header .navbar{
background-color:#bdac3c
}
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color:#ac9b2b
}
.skin-blue .main-header .logo{
background-color:#bdac3c;
}
… // and other classes
#endif
</style>
Now, to me this is not correct, because we are mixing the logic for staff and partner side without a clear way to differentiate them. If we use skins, we can simply say something like "The top navbar is yellow because we are using class skin-staff". And "We are using class skin-staff because we are on the Staff guard". The propositions are clear and simple. However, by adding raw CSS to our blade file, we end up with something like "The top navbar is yellow because we are using skin-blue and also we are on the Staff guard and also we have added some custom CSS for the Staff guard". The extra changes we introduce to the system don't follow the pattern used by adminLTE, to me they just look like noise. If we had to for example do this five more times, we would end up with a lot of CSS in our base blade file, which I think would look bad and would force us to eventually decide to use the skin system of adminLTE, something we could just do right away.
But, being as stubborn as I know I am, I don't know if I have the right idea or if I just want to do things my way.
What do you guys think? Is it better to create a new skin, even if most of the CSS code inside the skin file will be duplicated, but it allows us to stick to the existing way of doing things, or is it better to just add the code in the blade file and don't think more about it?
Thanks for your ideas
This is very much an opinion based question, there is no clear right or wrong answer here.
Personally, I agree with your coworker, why copy the whole theme, that is hundreds of lines long, just to change a handful of classes?
That said, I don't personally like the styles living in the DOM under a style tag.
Why not create a new CSS file that contains the styles:
.skin-blue .main-header .navbar{
background-color:#bdac3c
}
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color:#ac9b2b
}
.skin-blue .main-header .logo{
background-color:#bdac3c;
}
… // and other classes
And then as long as you include this file after the base skin-blue CSS theme, your updated staff skin changes will take precedence.
Something like this:
<link rel="stylesheet" href="{{ asset('css/skin-blue.css') }}">
#if (get_guard() === 'staff')
<link rel="stylesheet" href="{{ asset('css/skin-staff.css') }}">
#endif
This keeps the abstraction of your CSS inside CSS files (and out of the DOM), yet only overwrites exactly what it needs to.
It also means that if you need to update a common style between the two themes, you don't need to make the change in two different files; you just need to modify the skin-blue.css file.
Actually the question is in the subj...
Is it possible to make handlebars template framework, to recognize templates within a div tag and not in script tag?
For example I would like to create template with this markup:
<style>
div.text-x-handlebars {display:none;}
</style>
<div class="text-x-handlebars-template">
<h2>I'm template</h2>
<p>{{welcomeMessage}}</p>
</div>
Yes you can put your templates in <div>s rather than <script>s, for example:
http://jsfiddle.net/ambiguous/RucqP/
However, doing so is fraught with danger. If you put your template inside a <div> then the browser will interpret it as HTML before you've filled it in; so, if your template's HTML isn't valid until after it has been filled in, the browser may attempt to correct it and make a mess of things. Also, if you have id attributes in your templates, then you will end up with duplicate ids (one in the template <div> and a repeat in the filled in template that you put in the DOM) and that will cause all sorts of strange and interesting bugs. The browser will also try to download any images inside the templates in a <div>, this may or may not be a problem (if might even be desirable but probably not desirable if the image uses a template variable in its src attribute).
Basically, you can do it but you shouldn't, you should put your templates in <script id="..." type="text/x-handlebars-template"> elements instead.
trying to learn the Resources plugin
From my understanding, it helps to define 'resources' such as css and javascript files and automatically pull them into your gsp's when needed. I understand how to create modules that can then be loaded in using tags etc.
The part im not understanding is this: http://grails-plugins.github.com/grails-resources/guide/4.%20Using%20resources.html#4.2%20Linking%20to%20images
So ive created a module called 'images' in Config.groovy as follows:
grails.resources.modules = {
images {
resource url:'/images/view.jpg', attrs:[width: 1280, height:720 , alt: 'my view']
resource url:'/images/breakfast.jpg', attrs:[width: 1280, height:720, alt: 'breakfast']
}
}
The resources are included in the .gsp page in the head section as follows:
<head>
<r:require modules="jquery-ui, blueprint"/>
</head>
i know the resources have been successfully added to the head section because when i inspect the page source i see them there:
<link href="/ResourceTest/static/Aa7jV0N2qZjOz7TLZ9cl5cREIh2y5jJYV0ytn4nQg9r.jpg" rel="shortcut icon" width="1280" height="720" alt="my view" />
<link href="/ResourceTest/static/IpQBSjrYeLDdSUBGbP3jhf6Kkhvu1zV3XRtwWfKOIMn.jpg" rel="shortcut icon" width="1280" height="720" alt="breakfast" />
My question is this: how are the image resources then used? i mean i know if it was javascript, the importing of the resource gives you access to use the functions in the html code, but with regards to images, the site says "Once you have done this, using to reference them would automatically set the width, height and other attributes."
How? I've tried the following:
<r:img module="images">
<r:img alt="breakfast">
and a handful of others with no success
what does work is:
<r:img uri="/images/breakfast.jpg">
but this works regardless of whether or not you add the module with the r:require tag.. So whats the point of using this plugin for images then and how would i use it?
The <r:img> tag works just fine with our without <r:require>; it even works with undeclared image resources.
The point of the require tag is to prevent resource duplication. So, for instance, suppose you have multiple javascript resources that rely on jQuery, and they're all required. Add another layer of complication: say you're actually pulling together different gsp templates via sitemesh, and they each have their own resource dependencies. If you just put the normal HTML code to reference those resources in the head of each gsp layout, you might get multiple instances of them in your page header, which could prove problematic. Using the resources plugin makes sure you only get one instance of the required resource.
See http://grails-plugins.github.io/grails-resources/ref/Tags/require.html and http://grails-plugins.github.io/grails-resources/ref/Tags/layoutResources.html.
With images, though, this is not really necessary. If you have an image more than once on a page, it's probably because you wanted it, or because you're applying redundant layouts and need to refactor a bit. So, you are correct that the require tag doesn't really do much for images called via <r:img>. This is simply because images are a different sort of resource, so they're treated differently. Don't sweat it. :)
Our group needs to have a standard Common Look and Feel (CLF) for all our web applications. the base line for them all is the same, and certain items like the css references can have customization.
We want to find a way to create either one full layout file or partials that can be shared by all.
I have read many postings and the layout variable on views do not have the ability to read absolute paths.
Can we get a razor method to read XML and render to our layouts, much like the renderbody() does?
EDIT:
We would like to have items like the css, standard layouts etc in one project. Then this could become a distributable package for development teams.
Example of the final output we are looking for:
_base.cshtml example.
#model CLFModel
#CLF.Header(...)
#CLF.LeftMenu(...)
#CLF.OptionalRightMenu(...)
#CLF.Body(...)
#CFL.Footer(...)
The CLF.Header would contain something like below, and would be render from either a file or a pre compiled reference.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#Model.dcLanguage" lang="#Model.dcLanguage">
<head>
<meta charset="utf-8" />
<title>#Model.PageTitle</title>
meta tags.....
CSS required links ....
CSS section for custom link references ...
script tags(required)
optional section for script tags
</head>
You can create as many partial view as you want and just include them into the view you are rendering using #Html.Partial("YourPartialView"). You can create a _MasteLayout, which contains various partial views and #RenderBody for maintaining a consistent feel