Well I've been working with some GWT code...
I'm trying to apply some Style to my Template, but when I apply CSS to Hyperlink on it, I find that a:focus method is acting as a:active, I mean it's just lasting while I press on Hyperlink but if I double click on the same Hyperlink it magically works!, I've tried with Anchor widget, but if I do this I must rewrite a lot of code and can't use History with it
I made an hypothesis about what's happening, not sure if wrong or right, I believe that as GWT uses AJAX it simply refreshes the page
.Template-link
{
COLOR: #ab1e2c;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}
.Template-link a:focus
{
COLOR: green !important;
}
So, do you have any idea of what's happening in here?
thanks in advance
More code (from Public Template)
package com.test.web.ui;
import com.foboa.fbwt.user.client.Page;
import com.foboa.fbwt.user.client.Template;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.inject.Inject;
import com.google.inject.Singleton;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Anchor;
import com.test.web.client.Item;
import com.test.web.client.css.TestCssBundle;
import com.test.web.client.constants.TestConstants;
import com.test.web.client.images.IconBundle;
#Singleton
public class PublicTemplate extends Template {
private final DockPanel main = new DockPanel();
private final IconBundle iconBundle;
private final TestConstants constants;
private final TestCssBundle cssBundle;
#Inject
private PublicTemplate(IconBundle iconBundle, TestConstants constants,
TestCssBundle cssBundle) {
this.iconBundle = iconBundle;
this.constants = constants;
this.cssBundle = cssBundle;
}
#Override
public final void loadPage() {
Page page = getPage();
main.add(page, DockPanel.CENTER);
main.setCellHorizontalAlignment(page,
HasHorizontalAlignment.ALIGN_CENTER);
}
#Override
public final void loadTemplate(){
main.setWidth("100%");
setWidget(main);
loadHeader();
loadFooter();
}
private void loadFooter(){
//create footer panel
HorizontalPanel footerPanel = new HorizontalPanel();
footerPanel.setWidth("100%");
//include footer content
main.add(footerPanel, DockPanel.SOUTH);
}
private void loadHeader(){
HorizontalPanel headerPanel = new HorizontalPanel();
HorizontalPanel linkPanel = new HorizontalPanel();
headerPanel.setWidth("950px");
headerPanel.setHeight("86px");
Hyperlink contact = new Hyperlink(Item.CONTACT.getLabel(),
Item.CONTACT.getTarget());
contact.setWidth("94px");
contact.addStyleName(cssBundle.testCss().testTemplateLink());
linkPanel.add(contact);
linkPanel.setHeight("43px");
headerPanel.add(linkPanel);
DOM.setStyleAttribute(linkPanel.getElement(), "backgroundImage","url(menu.png)");
headerPanel.setCellVerticalAlignment(linkPanel,
HasVerticalAlignment.ALIGN_BOTTOM);
main.add(headerPanel, DockPanel.NORTH);
}
}
What i think happening here is this,
If we use give "focus" to the Hyperlink, it now enters its :focus state(navigate to it using "Tab"). On clicking (or press space when has focus), the Hyperlink enters its (:active) state.
When you click (or press space on focus) on an element, you give it focus, which also gives the allusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.
I see a missing declaration in the code that you have provided
.Template-link a:focus{}
Also try adding
.Template-link a:focus a:active{}
SOLVED
I added the following code to my Public Template
home.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event){
home.addStyleName(cssBundle.testCss().
contact.removeStyleName(cssBundle.testCss().
testTemplateLink2());
}
});
contact.addClickHandler(new ClickHandler(){
public void onClick(ClickEvent event){
home.removeStyleName(cssBundle.testCss().
testTemplateLink2());
contact.addStyleName(cssBundle.testCss().
testTemplateLink2());
}
});
for each link and also my styles are:
.Template-link
{
COLOR: #808080;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}
.Template-link a
{
COLOR: #808080;
TEXT-DECORATION: none;
VERTICAL-ALIGN:text-middle;
}
.Template-link2
{
COLOR: #AB1E2C;
FONT-FAMILY: Tahoma;
FONT-SIZE: 10pt;
LINE-HEIGHT: 43px;
TEXT-ALIGN: center;
TEXT-DECORATION: none;
}
.Template-link2 a
{
COLOR: #AB1E2C;
TEXT-DECORATION: none;
VERTICAL-ALIGN:text-middle;
}
I leave these methods and my solution just in case someonelse has the same problem.
Related
I have a button web component built that I am trying to style using CSS parts. In my web component below you can see that the button is colored tomato because I have used exportparts and then in my consumer CSS I have styled it using btn-comp::part(btn) { ... }.
However, I would prefer to not have to style it using btn-comp, instead I would like to just use :root to style it like this author does.
For example I should be able to do this:
:root::part(btn) { /* my styles here */ }
But that does not work, it only works when I use the component name. How can I style my CSS parts using :root?
const template = document.createElement('template');
template.innerHTML = `<button part="btn">I should be a green button</button>`;
class BtnComp extends HTMLElement {
connectedCallback() {
this.attachShadow({mode: 'open'});
this.shadowRoot.appendChild(template.content.cloneNode(true));
const button = this.shadowRoot.querySelector("button");
button.addEventListener("click", () => alert('Clicked'));
}
}
window.customElements.define('btn-comp', BtnComp);
:root::part(btn) {
background-color: green !important; /* I want this color to be applied! */
}
btn-comp::part(btn) {
background-color: tomato;
color: white;
padding: 1rem 2rem;
border: 0;
cursor: pointer;
}
<btn-comp exportparts="btn" />
I'm building a library and I have a <my-card> component. It's a component that will often have a (click) handler on it.
What I'm looking to do is to add cursor: pointer automatically when the component has (click) attached to it.
So for example, <my-card> would have the default cursor, and <my-card (click)="onClick()> would apply cursor: pointer to the component element.
Any clean way of doing this?
If you're able to change (click) to click then you could do this using CSS.
HTML:
<my-card>Look at me</my-card>
<my-card click="onClick()">Click me</my-card>
CSS:
my-card {
border-radius: 3px;
display: inline-block;
padding: 5px;
}
[click] {
background-color: red;
color: white;
cursor: pointer;
}
The [click] part in the CSS references an attribute of an element. So, this will target any element you use with the click attribute. If you only want to target any <my-card> element with the click attribute then you would change your CSS to my-card[click].
Here's a fiddle for you to reference: https://jsfiddle.net/8w9Lqxr4/1/
The Angular way to do this is to use a directive, take a look at this example:
import { HostBinding, Directive } from '#angular/core'
#Directive({
selector: '[myClick]'
})
class MyClickDirective {
#HostBinding('class.mousepointer') private isClick: boolean;
constructor(private el: ElementRef,
private renderer: Renderer) {
}
#HostListener('click') onMyElemClicked() {
this.isClick =!this.isClick;
}
}
I've not tested this example but this is the way you must investigate.
I am new to iTextSharp, currently working on conversion of HTML to PDF using Html2pdf (iTextSharp extension). I am able to generate pdf but not able to add logo to pdf on every page.
Image coming but I can't change width of images.
CSS what I am using for pdf logo is below:
#page {
#top-left {
content:"test ";
background:url(../images/template/test_logo_pdf.jpg) no-repeat 0px 0px;
border:1px solid red;
background-color: #cccccc;
margin-top:10px;
}
#top-right {
content: flow(header);
}
#bottom-right {
content: "Page " counter(page) " of " counter(pages);
font: 8pt Arial, sans-serif;
}
#bottom-left {
content: string(repname);
font: 8pt Arial, sans-serif;
}
}
It's indeed not entirely easy to control dimensions of images added to the page margin boxes. One possible approach that I can suggest is to add image as a content (rather than as background-image) and make use of custom tag worker, that would specify height and width as desired for page margin box children images:
HTML:
#top-left {
content: url(../images/template/test_logo_pdf.jpg);
border:1px solid red;
background-color: #cccccc;
margin-top:10px;
}
This is Java code, however .NET version has exact same API, only differing in code style (captial letters in the beginning of method names, etc.):
private static class PageMarginBoxImagesTagWorkerFactory extends DefaultTagWorkerFactory {
#Override
public ITagWorker getCustomTagWorker(IElementNode tag, ProcessorContext context) {
if (tag.name().equals(PageMarginBoxContextNode.PAGE_MARGIN_BOX_TAG)) {
return new PageMarginBoxImagesWorker(tag, context);
}
return super.getCustomTagWorker(tag, context);
}
}
private static class PageMarginBoxImagesWorker extends PageMarginBoxWorker {
public PageMarginBoxImagesWorker(IElementNode element, ProcessorContext context) {
super(element, context);
}
#Override
public boolean processTagChild(ITagWorker childTagWorker, ProcessorContext context) {
if (childTagWorker.getElementResult() instanceof Image) {
// Or set fixed dimensions via setWidth/setHeight
((Image) childTagWorker.getElementResult()).setAutoScale(true);
}
return super.processTagChild(childTagWorker, context);
}
}
And make use of the PageMarginBoxImagesTagWorkerFactory by specifying it in ConverterProperties:
HtmlConverter.convertToPdf(htmlSrc, pdfDocument,
new ConverterProperties()
.setTagWorkerFactory(new PageMarginBoxImagesTagWorkerFactory()));
I have created my first web application and have .html, .dart, and .css files. I want to create a modal page that will a bit smaller than my page and be centered on it. I don't really want any visible borders. The function of this page is to allow the user to display, using clickable elements, 'Help' and 'About' pages and a page that allow the user to see a list of the data files that have been collected.
I've found a couple of examples of modal pages but they are old. One appears to be easy to understand but the Dart editor flags a couple of errors and has a line that I don't understand at the head of the .dart file.
#import('dart:html'); // OK just remove the '#"
#resource('modal.css'); // ???
This example is in a blog DartBlog that does not appear to be active and did not allow me to leave a comment.
I would appreciate an help understanding the example or pointing me to working examples.
This import statement is outdated Dart syntax.
use instead
import 'dart:html';
I never saw the #resource thing and I'm sure this is not available anymore as well.
You can either put a style tag to your HTML file like
<html>
<head>
<style>
.black_overlay{
display: block;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: block;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
</body>
</html>
or put the CSS content in a file like styles.css and import it to your HTML
<html>
<head>
<link rel='stylesheet' href='styles.css'>
</head>
<body>
</body>
</html>
I tried to update the code to current syntax (not tested though) and I added some comments
import 'dart:html';
void main() {
//setup the screen elements...
ButtonElement button = new ButtonElement();
button.text = "click me";
//add an event handler
button.onclick.listen((event) {
ModalDialog dialog = new ModalDialog("This is a <strong>message</strong>
with html formatting");
dialog.show();
});
//add the button to the screen
document.body.append(button);
//add the modal dialog stylesheet
document.head.append(getStylesheet());
}
/**
* Our modal dialog class
*/
class ModalDialog {
final DivElement _content;
final DivElement _blackOverlay;
final ButtonElement _button;
//Constructor
ModalDialog(String message) :
//constructor pre-init
_content = new DivElement(),
_blackOverlay = new DivElement(),
_button = new ButtonElement()
{
//constructor body
_content.id = "modalContent";
_content.classes.add("white_content"); //set the class for CSS
_blackOverlay.id = "modalOverlay";
_blackOverlay.classes.add("black_overlay"); //set the class for CSS
//Our message will go inside this span
SpanElement span = new SpanElement();
span.innerHTML = message;
_content.append(span);
//This is the button that will "clear" the dialog
_button.text = "Ok";
_button.onClick.listen((event) {
hide();
});
_content.append(_button);
}
//remove the modal dialog div's from the dom.
hide() {
//find the element and remove it.
//there is no list.remove(x) statement at present,
// so we have to do it manually. - UPDATE: now there is
_content.remove();
_blackOverlay.remove();
}
//add the modal dialog div's to the dom
show() {
document.body.append(_content);
document.body.append(_blackOverlay);
}
}
/**
* Utility method to get a stylesheet object
*/
getStylesheet() {
LinkElement styleSheet = new LinkElement(); // maybe
styleSheet.rel = "stylesheet";
styleSheet.type="text/css";
styleSheet.href="modal.css"; // UPDATE: you don't need to add your CSS to your HTML as shown above because it's done in this code
return styleSheet;
}
Is there a way of setting the selected tab of a TabBar so that it contains a gradient background color? I would have thought that combining fillColors and fillAplhas would be the styles to use but this sets the other non selected tab background colors as you can see if you run the code below.
The goal is to get end users to choose the background color of the selected tab instance (by using a ColorPicker for example). And I want to apply some gradient effect on this color.
Any help would be appreciated as I have been trying to get this working for far too long. I have searched endlessly on google for this but still can't get a working solution.
private function updateTabColor():void {
var selectedTabIndex : int = tabBar.selectedIndex;
var tab:Tab = Tab(tabBar.getChildAt(selectedTabIndex));
/* this works but not on the selected tab */
tab.setStyle("fillColors", ["#000000", "000000"]);
tab.setStyle("fillAlphas", [1.0, 0.4]);
/* when not commented and as expected, tab is red */
//tab.setStyle("backgroundColor", "red");
/* when not commented, doesn't work as it appears it's deprecated in 3.0 */
//tab.setStyle("selectedFillColors", "red");
}
<mx:TabBar id="tabBar" dataProvider="viewStack" width="100%" itemClick="{updateTabColor()}"/>
<mx:ViewStack id="viewStack" width="100%" height="100%">
<mx:Box id="tab1" label="tab1" width="100%" height="100%"/>
<mx:Box id="tab2" label="tab2" width="100%" height="100%"/>
<mx:Box id="tab3" label="tab3" width="100%" height="100%"/>
</mx:ViewStack>
http://userflex.wordpress.com/2008/02/14/skin-tabnavigator-tabs/
^ describes using a skin for the tab instead of using the styles provided
Copied here for history
CSS
.tab
{
up-skin: ClassReference("TabSkin");
down-skin: ClassReference("TabSkin");
over-skin: ClassReference("TabSkin");
selected-up-skin: ClassReference("SelectedTabSkin");
selected-down-skin: ClassReference("SelectedTabSkin");
selected-over-skin: ClassReference("SelectedTabSkin");
background-color: #FFFFFF;
font-weight: normal;
color: #000000;
text-roll-over-color: #000000;
corner-radius: 0;
border-style: solid;
border-thickness: 1;
border-color: #000000;
}
.selectedTab
{
background-color: #000000;
font-weight: bold;
color: #FFFFFF;
text-roll-over-color: #FFFFFF;
corner-radius: 0;
border-style: solid;
border-thickness: 1;
border-color: #000000;
}
AS3
package
{
import mx.containers.Canvas;
public class TabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = "tab";
super.updateDisplayList (w, h);
}
}
}
package
{
import mx.containers.Canvas;
public class SelectedTabSkin extends Canvas
{
override protected function updateDisplayList
(w : Number, h : Number) : void
{
this.styleName = "selectedTab";
super.updateDisplayList (w, h);
}
}
}
MXML
<mx:TabNavigator id="tabs"
tabStyleName="tab" selectedTabTextStyleName="selectedTab" />