We have a component that has a child component, within that, there is another child (child-2) component added. When in author ui, child-2 component does have style icon (in component action toolbar); however clicking on that renders a blank list.
If that child-2 component is added as independent component style icon as well as list (when clicked on) is also visible (with all styles variation as defined in policy).
We tried various ways to debug it but can not. Can anyone please help us here
AEM style system works by defining the styles in the policies. These policies should use the exact path where the component can potentially be placed.
Example: If the component's path is
/apps/project/components/content/myheader then the policy will be defined at path similar to below
/conf/project/settings/wcm/policies/project/components/content/myheader/policy_xxx.
But this policy definition will be used in a path in a template where you would use your component. For example if your template name is templateA and the name of the responsivegrid where your component myheader will be placed is headerGrid then myheader's policy will be used here:
/conf/project/settings/wcm/templates/templateA/policies/jcr:content/headerGrid/project/components/content/myheader <cq:policy property>.
The styles defined in policy will then only be visible in the above responsive grid (parsys in old language). To allow this styles in any other path, in your temlate create the path as required and use the policy there.
Following the above example, if you want your stlyes to be available in a componentA in the TemplateA where componentA is placed in bodyGrid then use the policy here:
/conf/project/settings/wcm/templates/templateA/policies/jcr:content/bodyGrid/componentA/project/components/content/myheader <cq:policy property>.
This should resolve your problem as tested in my system. Unfortunately there is no sandbox public to show you an example.
Related
I'm working on a project for school where one is able to create HTML elements by using Selection.js (visual selection turns into an HTML element). Currently, the user is able to write CSS in a CodeMirror editor. After the user applies the CSS by clicking a button, the styling is directly inserted onto the created React component trough props.
My main goal is to allow the user to create multiple elements with multiple styling rules, to then (in the end) export the created elements along with their styling.
I've imported JSS, because of the createStyleSheet function that generates styling based up on a JavaScript CSS object (which comes from the CodeMirror input) and because of the fact that the directly injected style trough props is not reusable (because it doesn't contain classes, just properties). The problem with JSS is that it generates styling in the form of .mySpecialClass-0-1 {...}
This is the code that I'm using when the user applies the style (on click).
onStyleInput(e) {
e.preventDefault();
try {
let style= cssToObject(this.codeMirror.getValue(), {camelCase: true});
this.styleSheet = jss.createStyleSheet(style, {link: true}).attach();
console.log(this.styleSheet);
}
catch (exception) {
// console.log("Something went wrong, check your css syntax");
console.log(exception);
}
}
The result I expected from JSS was styling in the form of .mySpecialClass {...}, without the unique id's.
I've been looking trough the JSS API, but there doesn't seem to be an available boolean to toggle the unique id generation.
Is there a better way of achieving my goal?
Thanks in advance!
The easiest way to have JSS classes without ID is, make it as "Global" styles. It is mean, we have global CSS styles which not attached individually to the elements. Rather than just put/set HTML className without really utilizing JSS result. They call it "Global selectors" at "plugin" section at their documentation pages.
You can find documentation here: https://cssinjs.org/jss-plugin-global?v=v10.0.0-alpha.7
In gwt how to get a widget's default style(CSS Selector).For example, gwt button has style name "gwt-button" which is referenced in gwt theme css file.
How to got that programmatically.
Is there any,
DOM.getStyleAttribute();
to accomplish this. GWT experts please help.
In your example of button (or any object that is a child of UIObject) can call getStyleName()
UIObject documentation
String com.google.gwt.user.client.ui.UIObject.getStyleName()
Gets all of the object's style names, as a space-separated list. If you wish to retrieve only the primary style name, call getStylePrimaryName().
Now as to why you need this information is the real question. It is my guess that you want to change the styling of an object (add or remove). This would best be done by either of the following methods.
1) Supplying a custom resources file to the object that has your styling
2) creating a class that extends Composite and create a custom UIBinder class with all of your styles within it.
I need to change the title of a grid header, and add a custom component to it. I use a .properties file to set the title, and this template code to add the custom component:
<table class="table table-striped" t:type="grid" t:source="data" t:rowsPerPage="50" t:pagerPosition="bottom">
<p:specialHeader>
<t:tooltip tip="tipData"></t:tooltip>
</p:specialHeader>
</table>
When viewing the grid in a browser, the component appears but there is no title.
If I set a title in the template, like so, then it loses the sort functionality:
<p:specialHeader>Title
<t:tooltip tip="tipData"></t:tooltip>
</p:specialHeader>
How can I get the title, sort and custom component to appear?
As I said here you can't combine the default header block and your own custom header block, it's either one or the other.
I think you're best bet is a mixin. Take a look at Taha's blog post here where he creates a HelpText mixin which applies to a Label component. His mixin looks at the message catalog for a "propertyName-help" entry and adds a "title" attribute to the DOM. The blog post takes it one step further and uses a ComponentClassTransformWorker2 to atach the HelpText mixin to every label (even the ones inside the BeanEditor component).
You could do the same thing but you would create a mixin for either Grid or GridColumns (Grid delegates to GridColumns to draw the headers). If you'd like some examples of Grid mixins, take a look at my tapestry-stitch demo's here and here.
So, you won't be reusing the tooltip component, you will be copying the behaviour. This will most likely involve adding a "data-tooltip" attribute to the th DOM elements serverside. You can then fire some javascript on the client to find all elements with a "data-tooltip" attribute and do some UI magic.
I want to change style of textbutton like i want to add background image and i want to change background color using GXT 3.0
someone help me plzzz
Thanks in advance
GXT 3 has a cleaner way to handle these kind of requirements. You have to use Appearance API which is provided in Sencha 3. Here is the key points which is involved in this process.
Appearance Interface, implementation and substitution
Styling with CssResource
Use ClientBundle to fetch css resources
XTemplates to apply styles/properties to mark-ups
In this case what you need to do is to implement an appearance for TextButtonCell (because TextButton uses TextButtonCell as the appearance) and provide required styles using css Style resource (annotating actual .css file path as source) . For example
public interface TextButtonResources extends ClientBundle
{
#Source("TextButton.css")
Style style();
}
Then substitute the built-in TextButtonCell appearance with your one.
<replace-with class="fullyQualifiedNameToYourButtonCellAppearanceClass">
<when-type-is class="com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance" />
</replace-with>
This blog post has a comprehensive details on this concept
Ext GWT 3.0 Appearance Design
First you set this style in your client side java code:
aButton.addStyleName("my_button_style");
Alternatively, you can use setStyleName() method or even change specific style attributes with setStyleAttribute().
After you've done that in your client side java code, you can define the style in a css file that's loaded for the page.
You can also change the style after component's been rendered. It should properly refresh appearance of your button.
I need to create an application in which we are changing the style of the application that is theme of the application based on the button click.
I have download the theme that all contains different CSS file. I need to dynamically declare the CSS for the application to apply that theme.
I have file name Theme1.css, Theme2.css, Theme3.css, Theme4.css, Theme5.css.
when I click on the Theme 1 Button then I need to apply Theme1.css file as source of style. similar like that when I click on the Theme 2 Button then I need to apply Theme2.css file as source of style.
Note : css file contains Style for both application and component of the Application.
Have a Nice DAY....
You would have to use the facility within eclipse/flex builder to compile the CSS into SWF so that the styles can be changed at runtime.
You would also have to maintain the instance variable of the current theme id.
Is this what you are looking for?
public function switchTheme(theme:int):void {
StyleManager.unloadStyleDeclarations("assets/styles/Theme"+currentTheme+".swf");
StyleManager.loadStyleDeclarations("assets/styles/Theme"+theme+".swf");
this.currentTheme = theme;
}
You would then assign the click handlers for each button to the switchTheme function - passing the theme id as a parameter.
I think you have to loop all control one by one and set theme on control.
for Eg.
If you set default theme RED and button is red then you change theme to Blue then you set button color to blue using looping of control.
May be this help to you....
Please ask me if you not getting what i am saying...
Thanks.
You need to compile your CSS files as SWF. You can right-click the CSS files in Flash Builder's explorer window and select "Compile CSS to SWF" from the menu.
Then you use the loadStyleDeclarations() method from StyleManager to load the SWF file with your CSS info.
The previous step will only add the new styles to your style subsystem. If you want to clear the old styles, you need the unloadStyleDeclarations() method first.
If you unload the currently active CSS declarations, use false as the second parameter so StyleManager does not invalidate the styles and rebuilds the style declaration chains/cache for the components on stage. This is not only be slow, but will also result on a screen refresh with the default styles before applying the new styles.
You could have something similar to this, and call applyTheme('url/to/theme.swf') with the appropriate URL whenever you want to change the theme:
private var currentThemeURL:String = 'themes/default.swf';
public function applyTheme(themeURL:String):void
{
StyleManager.unloadStyleDeclarations(currentThemeURL, false);
StyleManager.loadStyleDeclarations(themeURL);
currentTheme = themeURL;
}