CSS Style in Samsung Smart TV App - css

Hi am new to Samsung Smart TV App,
I want to create some rich user interface with CSS and Javascript. I think Twitter Bootstrap is a good choice for this. But i cannot use bootstrap's class properties in my application. Guide me how to use twitter bootstrap framework in Samsung Smart TV App.

I have successfully used bootstrap in one of the apps I created. Just add the bootstrap code to the project's directory and reference it from the index.html like you would with any style sheet.
Also make sure that you include the following at the top of all of the individual scene style sheets
#import url("<PATH TO BOOTSTRAP>/bootstrap.css");

I think you should use sf.core.loadCSS(); in your application. Just see guide. There is analogous method for JS including too.
If you're using AppsFramework 2.0 app structure (Basic App Project) you should place it in your app/init.js like this:
function onStart() {
sf.core.loadCSS([
"app/stylesheets/file1.css",
"app/stylesheets/file2.css"
], function () {
// callback on file loading
});
}
Callback function isn't mentioned in documentation, but it works (I'm sure for JS, CSS should work same way).
But if you're using "Javascript App Project" template (the old one), then you can place mentioned <style>#import url();</style> in your root index.html.

Related

PyCharm: How to disable certain CSS file code complete?

Django REST framework uses Bootstrap and has its own CSS files in it. It seems like PyCharm imports those files for code completion popups. The things is, I don't want those as I use different CSS framework and in fact, it's confusing me because all those Bootstrap autocomplete popups when I'm trying to set CSS classes and so on.
So my question is, is there any way I can disable code completion popups from certain CSS files?
I did not face with this problem until now,but I think you should disable these folders is Pycharm, try this :
Settings|Directories -> Use Exclude button on folder

Using Angular 2 components on existing ASP.NET web pages

I am trying to move the front-end part of a website to Angular 2.
Currently I have really big ASP.NET 4.5 website.
I would like to create a separated Angular 2 project as it will be growing with time (and hopefully replace the asp.net)
For now I would like to create this project in Visual Studio (2015) and use some angular components or modules in the actual ASP.NET website.
Does the angular AppModule as to be in the ASP website?
I made some research but could not find answers or examples.
Am I gonna be able to do this relying on npm and system.js ? I saw that a lot of people are using gulp for copying file.
Is there a "right" way of doing this?
Any help would be highly appreciated
This question is not specific to Visual Studio, but yes, you can certainly accomplish this.
As you have suggested you can and should maintain the Angular application as a separate project.
The only additions that you need to make to your .aspx page are
including SystemJS and its configuration via script tags in that page or in its Master Page (You can also do this dynamically for CMS pages and using all sorts of other strategies). For example
<script src="loction-of-systemjs.js"></script>
<script src="loction-of-systemjs.config.js"></script>
Adding a markup tag with the selector corresponding to the app's root element, say 'my-embeddedable-widget', to your .aspx markup. For example
<my-embeddedable-widget>Loading...</my-embeddedable-widget>
Importing your application via SystemJS.import from a script tag embedded in the page containing the component selector above. For example
<script>
SystemJS.import('my-embeddedable-widget')
.catch (function(e) {
console.error(e);
}); // not using .bind or => here since aspx tends to imply older browser support
</script>
Note that this presupposes two things
that the 'my-embeddedable-widget' is set up in your SystemJS configuration. For example
SystemJS.config({
packages: {
'my-embeddedable-widget': {
main: 'main.ts' // just an example, could be main.js or anything really
}
}
});
If it is not you can add the config entry above as appropriate for your app (strongly recommended) or just import it directly from the path to the app's entry point such as e.g. my-embeddedable-widget/main.ts or my-embeddedable-widget/main.js.
That the entry point of your widget declares all of its platform level dependencies, such as zone.js and likely various polyfills. For example
my-embeddedable-widget/main.ts
import 'zone.js';
import 'core-js';
// ...
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
// ....
This means that SystemJS will automatically load them when your widget is requested. While you could bring them in via separate script tags as we do with the loader itself, making them explicit dependencies of our widget by using ES Modules improves maintainability and allows us to defer loading them until they are required. Furthermore it helps further decouple the widget from the .aspx page. However, if other JavaScript on the page requires these polyfills, you may need to adjust this approach (especially with respect to zone.js because it monkey patches window.Promise)

Dynamic styles with bootstrap and css modules

I have a React project that is using CSS modules (for components) + React-Bootstrap with CDN-hosted CSS.
I have a requirement that when my app loads (per user), I make a call to an endpoint to get a dynamic style guide.
For simplicity, it would be something like this:
{
"color_background": "#edeae3",
"color_error": "#9e2d2d",
"color_highlight": "#69b5ce",
"color_success": "#498e49",
}
The app should then be rendered in those colors. I know there is the ability to customize static Bootstrap styling (e.g. http://getbootstrap.com/customize/), but I'm not sure how to do it dynamically.
Any guidance would be appreciated.

Flash Builder 4.6 : Design view not working with flatspark theme

After switching to Apache Flex 14, I tried to implement the Flatspark theme by adding this kind of rules to my CSS :
s|Panel
{
skinClass: ClassReference("flatspark.skins.PanelSkin");
}
To make the SDK work with Flash Builder 4.6, I changed the SDK description file. From here, everything's fine.
I was able to see the new theme, create component in the design view and edit already existing MXML files.
But after restarting Flash Builder, I've got this little icon in the design view :
I cannot see or edit an existing file.
The design view works again after removing the theme from the CSS rules.
Why did it works the first time and now only display this when I add a custom CSS rule to change the skinClass parameters ?
Design view has never really worked correctly for any use case that is even remotely complex.
This is why it was removed in the next version (Flash Builder 4.7).

CSS in vaadin plugin for grails

I am using the vaadin plugin for grails, and am trying to define some custom styles. Where within my grails appliction should I put the .css? My Vaadin application is in /vaadin/ I have tried creating a /vaadin/themes/mytheme/ folder and then putting my styles.css file in there, but still had no luck. Any help would be greatly appreciated. New to grails and new to vaadin, and am pulling my hair out over small stuff like this and can't get any of the actual legwork done until I can figure these things out..
Any way of doing inline styling would be fine with me too, at this point. I really just need some way to write explicit style..
Thanks
You need to put it into /web-app/VAADIN/themes/mytheme
You can have a look at the completed addressbook tutorial (with added Gorm and Spring Security Core support)
With the latest version of the plugin:
The name of the file must be styles.css (or styles.scss, which will then be compiled to styles.css by the command grails prod war)
The file must be located in /web-app/VAADIN/themes/mytheme , where the last part is the name of your style
In your UI file, use the #Theme annotation, for example
#Theme("mytheme")
#VaadinUI(path = '/')
class MyUI extends UI {
// ...
In VaadinConfig.groovy, specify the styles used by the application:
themes = ['mytheme']

Resources