I'm creating a log-in box for my Flex application. However, I'm required to apply a specific design to this box that I have to change the title bar height.
The component I'm using is spark.components.Panel. I just can't find the property of this 'Panel' component to change the feature.
Any suggestions?
You cannot do this through styling; you'll have to create a custom skin. In order to do this in Flash-Builder: right-click in the project tree on the package where you want to create your skin. Select 'New', then select 'MXML Skin'. Fill out the wizard and choose to make a copy of the spark PanelSkin. This will copy the entire code of the default spark Panel skin into your custom skin class and you can now start adjusting it to your will.
Look for the group called 'topGroup': it contains all the elements of the top part of the Panel component. You can play around with this as you wish, but the easiest answer to your question is to locate the Label called 'titleDisplay'.
<s:Group id="topGroup" mask="{topGroupMask}">
<!-- some other elements -->
<s:Label id="titleDisplay" maxDisplayedLines="1"
left="9" right="3" top="1" bottom="0" minHeight="30"
verticalAlign="middle" textAlign="start" fontWeight="bold">
</s:Label>
...
Do you see that 'minHeight' property? That's the one that is defining the height of the title bar. Just give it some more and you're ready to go.
You can apply the custom skin like so:
<s:Panel skinClass="path.to.my.CustomPanelSkin" />
Related
If we want to add an Id to an AEM Core component such as image, there is this field:
.content.xml
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML ID attribute to apply to the component."
fieldLabel="ID"
name="./id"/>
which gives this textfield in the dialog.
But what if we want to create the same textfield, but for CLASSES instead? The core components only seems to use the "./id" name, and nothing for classes.
As you can see I am an absolute beginner, so any pointer or help is much appreciated.
--- Edit (June 17, 2022):
Following Vlad's answer, I needed to narrow down where I am having issue:
I don't know how to "add a textfield for classes". For example, the id field has name="./id" in the xml, which can be accessed as "${image.id}" in the html. But the same doesn't exist for Classes.
How would the Textfield look like if I am adding it for Classes? Like this one obviously wouldn't work as "./class" is not connected to anywhere.
<class
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldDescription="HTML CLASS attribute to apply to the component."
fieldLabel="CLASS"
name="./class"/>
I guess that the name="./id" of the Textfield is tied to some Java logic so we can retrieve it via "${image.id}". I have looked at image's java code, but don't see how they tied together.
I would need to understand the Java code in order to override it. Or am I missing anything and there is an easier way? Again, absolute beginner here.
You can override the dialog and add a textfield for classes, then overlay the HTL script and inject the classes in the markup. However, I recommend you look first into the OOTB Style System. It allows you to define classes in the component’s policy and then use them in the editor (they will be added on the component wrapper element).
I need to create a page division in Alloys XML, like a <div> tag in HTML
Basically it needs to be able to be variable size, have attributes like font, colour, border ETC and most importantly it needs to have sub tags such as label and button inside
I've tried using sperate views from this and requiring them into the current window. I've also tried using modules, but I'm not sure if I did it correctly.
My question is, what would be the best way to go around this?
You can create a Widget for this: https://wiki.appcelerator.org/display/guides2/Alloy+Widgets
It is basically a reusable component which you can pass parameters into and it has a own controller, style and view file.
In your XML file you can use it like this:
<Widget src="foo" name="button"/>
I create a configurable product, but the dropdwon option is located below the image:
And I want to put it like this one:
How can I achieve this?
You have to edit your css. Inspect that div with firebug or whichever you wish and see the class apply the width you want in your browser first if it works then make changes to your css. If you want to add another class to div, then apply the changes. Then turn on template path hints and see from which template file it is coming and do changes there.
Is there a way to add a tag to the format dropdown that would wrap the text in <small></small> tags?
Editing config.js as follows causes a runtime error:
config.format_tags = 'small;p;h1;h2;h3;pre';
probably because <small> is not block level?
The reason of the runtime error is, that js can not find CKEDITOR.config.format_small.
You have to do two things:
Search for CKEDITOR.config.format_h6 in ckeditor.js and add CKEDITOR.config.format_small={element:"small"};. Then the error is gone, but you can not see the entry yet.
open the languagefile you want (e.g. en.js) and add "tag_small":"small text".
now CKEditor supports the small tag.
This works for me, I hope it works for you too.
If I want to add a custom section tag to format tags, this work for me:
1. Go to config.js, add
config.format_tags = 'h1;h2;h3;h4;h5;h6;section';
config.format_section = { element : 'section' };
2. Then open the languagefile you want (e.g. en.js) -> lang/en.js
search for "tag_pre":"Formatted", and add "tag_section":"Section".
If you're looking to wrap text in a certain tag, you can also achieve this with the Style dropdown as well.
First, configure your editor to allow styles at /admin/config/content/formats/manage/full_html. Replace full_html with whatever editor version you want to modify
Drag the Styles button to the active toolbar if it isn't already there
Add items to "Styles Dropdown" tab under CKEditor plugin settings
Each option takes the form css_selector | Human Visible Name so in your case, you'd add small.my_element_class | Super Special Small or something similar.
Instructions abbreviated from this post: https://www.axelerant.com/resources/team-blog/drupal-8-custom-styles-in-ckeditor
I have a basic app I'm creating with a Top Nav button Bar a bottom button Bar and a Viewstack for content in the middle. The catch is the content, and skins are completely dynamic based on XML I'm loading. Therefore I have to create the ViewStack dynamically (because I don't know how many children it could have) and the same goes for the top and bottom Nav button bars. Now, I could handle this very neatly with Flex 3 , however I want to to do this with Flex 4 and would like to take advantage of its new logic and skinning separation architecture. I have seen many tutorials on this as far as components known at compile time but not for custom class creation. Can anyone list some good tutorials? thx - Mike
I could not find any tutorials , so I figured I would create my components dynamically as I would in Flex 3, the only difference would be that if I have a component I need to skin, in my case a button, and I'm creating it dynamically I would use :
btn_nav.setStyle("skinClass",skins.NavMainToggleButtonSkin);
Where the host component is : [HostComponent("spark.components.ToggleButton")]
I also am using custom Spark Viewstack that a developer wrote:
spark Viewstack
Also this article helped me with creating a custom component and connecting wih a skin class and how it relates to the component lifecycle:
http://flexguruin.wordpress.com/2010/12/08/flex-4-spark-component-life-cycle/
-Mike