I have used the ThemeBuilder to create a theme, but now I need to add an attribute in a CSS class so I can have a different font color in the selected element of a ListView, for example.
Ideally I would expect that the builder have support for specifying such a configuration in the .theme file, specially because font color is something that will not affect the image generation process that is used to support older browsers. In fact the builder should have support for all standard CSS3 attributes that don't affect the generated images.
Obviously it is possible to modify the ThemeBuilder jar to achieve this, but this is not a good idea.
I had a look in the appearance classes that are generated and my first try was to use the following constructor:
public Css3ContentPanelAppearance(Css3ContentPanelResources resources) {
this(resources, GWT.<Css3ContentPanelTemplate> create(Css3ContentPanelTemplate.class));
}
This did not work well, because all components using Css3ContentPanelAppearance are affected regardless of which Css3ContentPanelResources was used. I believe this happens because the CSS class name is based on the appearance class name and on the CssResource class name.
The solution was very simple: create a sub-class of the generated appearance class like this:
public class CustomCss3ListViewAppearance extends Css3ListViewAppearance {
public interface CustomCss3ListViewResources extends Css3ListViewAppearance.Css3ListViewResources {
// Load the original resources first and then the custom one, so the customizations will take precedence.
#ClientBundle.Source({"com/example/client/base/listview/Css3ListView.css","CustomCss3ListView.css"})
#Override
Css3ListViewAppearance.Css3ListViewStyle css();
}
public CustomCss3ListViewAppearance() {
super(GWT.<Css3ListViewAppearance.Css3ListViewResources>create(CustomCss3ListViewResources.class));
}
}
Then, you can create a separate JAR module that depends on the generated theme, specify some bindings in the .gwt.xml file and it will behave exactly as a plain generated theme (just need to add a dependency and import it in the application .gwt.xml file):
<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='myCustomTheme'>
<inherits name="com.example.Theme"/>
<replace-with class="com.example.client.base.listview.CustomCss3ListViewAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
<when-property-is name="gxt.theme" value="myTheme" />
</replace-with>
<source path="myCustomTheme/client"/>
</module>
Related
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 would like to include an MXML file in my MXML file in the same way you can include an external file in AS3 using the include directive. Using the include directive brings the code from the external file into the original file at compile time placing it in the same scope.
For example,
Application.mxml:
<Application>
<source="external.mxml"/>
</Application>
External.mxml:
<Styles/>
<Declarations>
<Object id="test"/>
</Declarations>
I need to keep this code/mxml/xml in the external file in scope with the original. Do not ask me why I want to do this.
Another example. Here is my current code (simplified) all in 1 mxml file:
...
File1.mxml
<Button click="clickHandler()"/>
<Script>
public function clickHandler():void {
}
</Script>
...
Here is what I want:
...
File1.mxml
<Group>
<source="File2.mxml"/>
<Button click="clickHandler()"/>
<Group>
File2.mxml
<Script>
public function clickHandler():void {
trace(this); // File1.mxml
}
</Script>
...
I want to split my code out into a separate file...
~~ Update ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Though NOT what I was asking for using a "code behind" scheme achieves partial credit to breaking the code out of the view. So I create a MXML file, MyGroup.mxml or MyGroup.as and that extends Group that contains the clickHandler code.
The problem with this method is that I am then locked to the class type I'm extending, hardcoding the view. So for example I would have to extend Group if the MXML class I want to split into separate files is a Group.
I've worked on projects where this was done and it is not good. People start setting styles and visual aspects or group / view specific properties in the code behind class and later if or when we need to change it or the layout it we have end up with all these dependencies to the container. It becomes a mess. Plus, using Code Behind you can't reuse it (reuse in the way include styles.as is reused). So this is not a solution but thought I'd mention it.
Here is a code behind example,
MyGroupBehind.mxml:
<Group>
<Script>
public function clickHandler():void {
trace(this); // File1.mxml
}
</Script>
</Group>
MyGroupAhead.mxml:
<MyGroupBehind>
<Button click="clickHandler()"/>
</MyGroupBehind>
MXML is converted into a class by the compiler, so there is no way to do what you are asking.
Personally, I think that is a good thing. Breaking things up into separate files does not equal "more organized". In fact I would say it achieves the exact opposite effect. You would do better to focus on a proper component structure, IMHO.
Just start typing the name of your custom component, then press Ctrl+Space. Code completion will populate a list of possible things you might want to add, including the name of your component. Use the down arrow to select your component's name, then press enter. Code completion will set up the namespace and start the tag for your component. If you go to the end of the line and type "/>" (no quotes), voila! you will have an inline tag that represents your custom MXML component.
First of all, any external mxml should be a valid XML. Now, as long as you have a valid MXML file, you simply add it by its name like below:
<Application>
<external:External/>
</Application>
Where 'external' is the namespace for your External.mxml file.
Say my MXML file is called Example in the views folder. Simply call it within the parent MXML file you want this to be in
e.g.
<views:Example/>
Is it possible to access a regular CSS selector in a regular CSS, imported via module XML, in a GWT widget? Or do I, and should I, create a CssResource?
Edit: I forgot to specify that I want to access the CSS selector in a widget from a UiBinder XML file.
You can use widget.addStyleName("regularoldcssselectorname") and your parameter will come through in the final HTML as a class name.
I would say if the style is used across multiple widgets it's better to use a CssResource. It seems to be the way the google team is moving with everything, and it ensures that the style actually exists - using a arbitrary string allows typos and doesn't keep up with changes to the css file. Also, I believe I read on the gwt google group that including a stylesheet in the module was/is being deprecated, I can't find the posting now though.
So make the CssResource:
package the.package.of.the.client.bundle;
public interface MyBundle extends ClientBundle {
static MyBundle INSTANCE = GWT.create(MyBundle.class);
#Source("myCss.css")
MyCss myCss();
#Shared
public interface CommonCss extends CssResource {
String myStyle();
}
}
Then in the UiBinder:
<ui:with field='myname' type='the.package.of.the.client.bundle' />
<g:Label addStyleNames="{myname.myCss.myStyle}" text="My Label Text"/>
I have an SWC which includes a number of Assets for my project. Within this SWC is also a static AS file which contains Class declarations for each image in the library.
For example, the SWF contains these images:
/assets/foo/bar/img1.jpg
/assets/foo/bar/img2.jpg
And it includes an AS file which is like this:
[Embed(source="/assets/foo/bar/img1.jpg")]
public static const IMG_1:Class;
[Embed(source="/assets/foo/bar/img2.jpg")]
public static const IMG_2:Class;
I would like to create a CSS declaration which uses these two images, but I don't want to embed the full path. Is it possible to do something like this?
<mx:Style>
.mySampleStyle {
upIcon: Assets.IMG_1;
downIcon: Assets.IMG_2;
}
</mx:Style>
At the moment, this particular syntax is invalid -- I'm getting compile errors for the "." character in the style declaration.
Is there another way of doing this without embedding the path (e.g. upIcon: Embed(source="/assets/foo/bar/img1.jpg")) in the CSS?
As stated here in order to reference class member of type Class using ClassReference in CSS, you should used "_" instead of "." in the fully qualified name of the field you want to use.
In your example,
<mx:Style>
.mySampleStyle {
upIcon: ClassReference("Assets_IMG_1");
downIcon: ClassReference("Assets_IMG_2");
}
should works.
Do you know how if you drag an <mx:Label> or <s:Label> component into your Flex project, when you go to design mode you get this panel on the right to set its properties like text etc.
I have a custom component that I can call with actionscript, or with mxml like this:
<comps:TheComp field1="OK" field2="Yes" />
The component takes this input and uses it for its internal operation
private var field1:String;
private var field2:String;
private function initializeit()
{
// component takes the input and lays it out as needed
}
When I go to design mode, I can see the component under custom components, I can drag it to the stage and see it, but can't set its values field1 and field visually on the right like a normal <s:Label> or <mx:Label> would have.
Any idea how I can add that? Do I need to make it inherit something or anything else
Try using the [Inspectable] metatag in your code
[Inspectable]
private var field1:String;
[Inspectable]
private var field2:String;
Not sure if inspectable members can be private. If [Inspectable] alone doesn't do it, try making the vars public or protected.
You need to put any custom components you want to view this way into a library project and make a swc out of it, then use the swc instead of just the source code http://blog.another-d-mention.ro/programming/create-professional-flex-components/ .
HTH;
Amy
Those variables must be public. Variables are accessible from properties panel after setting them public.
public var field1:String;
public var field2:String;