In my GWT project, I have a widget "composition(? not 100% sure about the term)", called MenuItem. This has the following structure:
<div class="some invariable class">
<div class="first-child"><!-- something --></div>
<div class="middle-element"><label /></div>
</div>
I want to create widgets, which all have this structure, but in place of <!-- something -->, for instance an IconMenuItem would put a FontAwesome icon, or ImageMenuItem would put a small thumbnail there.
I'm kind of new to GWT and reading the documentation and some topics here at SO, I suspect that MenuItem should extend Composite and *MenuItem should extend this MenuItem.
However, I'm not sure how I would enforce the HTML structure above without duplicating it. I'm also unsure about what the best practice would be to allow different types of elements, like I said about the image and icon example.
What would be the good class structure, which class should inherit/compose which class?
Related
If class 'hello' visible then apply some css to 'banner2' class. is it possible? Looking for CSS solution not Javascript.
<div id="banner">
<div class="hello"></div>
</div>
<div class="banner2">
</div>
It's not possible to select a div based on visibility in CSS alone. You can easily use jQuery / JS, but since you don't want that I'd suggest trying out some trickery with CSS combinators and the checkbox hack, depending on how you are planning on changing the visibility of "hello".
The option doesn't exist yet in CSS.
When Selectors 4 will be available you could do it this way:
.banner:has(> .hello) + .banner2
But as of this moment, you can only do it with javascript
When using ionic framework for building apps, there are two ways how UI elements can be defined:
using div tags:
<div class="bar bar-header bar-positive">
...
</div>
using directives:
<ion-header-bar class="bar-positive">
...
</ion-header-bar>
In the documentation, the first variant (using div) is used. But in a course I was watching, the second one was used (and it seemed cleaner to me).
What are the differences between the two ways shown above? Is there a preferred or recommended way of defining UI elements?
I recommend you to use Directives instead of Div if you need to access to corresponding APIs. For example for a list : http://ionicframework.com/docs/api/directive/ionList/
Using the directive will allow you to use APIs options.
BUT, if you just want a beautiful UI, and you don't need APIs, you can use div which will render templates fastly.
ion-header-bar tag is just Directive written by ionic with some fantastic attribute which you will not get in div tag
attribute like :
align-title
no-tap-scroll
this both comes with ion-header-bar tag so if you want to perform any action on the view so u can use ion tag or only for view purpose you can use div tag.
im newbie in zk´s world, so i have a doubt... i read already zk 8 documentation (almost all). At the office some partners are using ViewModel but inside some components are using Composer (selectorComposer) to bind some elements like this:
<div apply="org.zkoss.bind.BindComposer" viewModel="#id('vm') #init('com.some.package.SomeViewModel')">
<vbox>
... SOME ANOTHER ELEMENTS ....
<div apply="com.some.package.SomeComposer">
<hbox>
<vbox>
<checkbox ... more code...
</checkbox>
</vbox>
</hbox>
</div>
</vbox>
</div>
i read that if you apply SelectorComposer you lost coupling... so what is the reason of taking SelectComposer within a ViewModel? or how it works?
Thanks a lot for any help.
From my point of view SelectComposer allow you to reuse java code in a very traditional way. For example you can defined an AbstractController with functionality that will be reused in other controls of the same type with an slightly different functionality and extend the AbstractController. In this approach you can control the lifecycle of the componente by implemented the methods of SelectComposer like doAfterCompose.
But actually you can do the same thing with pure MVVM, but instead of implement methods of SelectComposer you should use the annotations like #AfterCompose or #Init and you can extend the base class as well, to use your view you just have to change the tag in the zul file with something like:
<include src="/artifacts/componente_to_reuse.zul"/>
I think is just a matter of preferences, I preferred (and I always recommend) to use pure MVVM since it was available, and I haven't found any functionality that I couldn't reuse with MVVM approach.
References:
Include,
Zk annotations
I am having a problem with my XSLT, I am using SharePoint 2010 and I am building a custom front-end that will pull data from lists and render the data in a nice manner. I have figured out how to use XSLT with HTML to render a SharePoint list, I wasn't able to add an image of my news feeds because my rep is too low but I will get it up!
Now here is where my problem starts:
I am using jQuery toggle to show/hide the body paragraph of this news feed. The Continue Reading button is where my issue is, every time I click on the "Continue Reading" button in the lower right of each news post, it show/hides all the news items, not just the one I click on.
I have tried using Bootstrap collapse and now I am using jQuery Toggle() however I run into the same issue! Take a look at my XSLT code snippet to display thee body paragraph and the corresponding jQuery code snippet that actives the show/hide toggle:
XSLT:
<tr class="spacer">
<td valign="top" class="td-newscontent">
<div class="news content">
<!-- start excerpt -->
<xsl:value-of select="#BodyExcerpt" disable-output-escaping="yes" />
<div class="moving">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- end news excerpt -->
<!-- start continue reading link -->
<xsl:text disable-output-escaping="yes"><![CDATA[<br class="continue-br" />]]></xsl:text>
<a class="butt pull-right continue-right">Continue Reading</a><br /><br />
<!-- end continue reading link -->
</div>
</td>
</tr>
Javascript (jQuery)
$(".moving").hide();
$(".butt").click(function() {
$(".moving").toggle("slow", function() {
});
});
.moving is the actual #body being shown/hidden
.butt is the "continue reading" button (I know butt was a bad name to use)
I have read a few things on the net about "this" but I am not sure how to use it.
First time posting so I couldn't post any images, but when you click on "continue reading" all the body news articles expand then you click it again and all the body news items contract, what I would like it to do is open just the one I am clicking on!
I have a lot going on, everything is housed in SharePoint, using HTML5, Css3, jQuery and XSLT. I started by using IDs but I switched to classes, not sure if that was a good idea but it functions, but not as intended.
Any help would be appreciative, I have been researching this issue for almost 2 weeks so I finally decided to ask some experts :) (Feel free to ask any questions or ask for more information, I will answer with everything I got!)
You are close, so well done for getting this far! Your problem lies in your JavaScript. If you look at the rendered code using your browser's developer tools (F12), you will find that all of the different body texts have the same class (moving) and all of the buttons have the same JavaScript onclick, which is to toggle everything of class .moving.
Thus the solution you are looking for is to match each button with its respective body text. There are two main ways you can do this.
You can give each text div and each button a unique ID by assigning it to some unique feature of the list item (SharePoint list items already have a unique identifier as the field ID). Using xsl:value-of within HTML attributes would violate XML rules, so you can use something called an Attribute Value Template, which is the bit in the curly braces:
<div id="newstext_{#ID}">
<xsl:value-of select="#Body" disable-output-escaping="yes" />
</div>
<!-- etc... -->
<a onclick="$('#newstext_{#ID}').toggle('slow', function() {});">Continue reading</a>
Modify just the JavaScript to target the parent of the button. The following code selects the parent DOM element of the button, which should be the div of class .news, then finds the child of class .moving, then applying your toggle:
$(".butt").click(function() {
$(this).parent().find(".moving").toggle("slow", function() {
});
});
The second method is easier but can get complicated if you end up running a lot of JavaScript. It is easier (and more efficient) to select elements by ID, so personally I think the extra effort is worth it. I haven't tested this code so let me know if it doesn't work. On some of your other points:
no, butt is not a good name for a class - remember, you can use element types in your jQuery selectors, so there is no need to duplicate the type as the class. For example, $('a') selects all the anchor tags on the page.
IDs should be used when elements need to be uniquely identified (e.g. for scripts), classes when you are grouping elements together (e.g. for styles).
I'm new in the usage of CSS, and i'm still in the learning curve
Basically, i want to display a section using the class col-xs-12 when i select the media print instead of a col-xs-9 in all other medias.
Is there an easy way in CSS to do that ?
Using Bootstraps built-in classes you can either use jQuery, plain javascript or #media queries. If you're using Less or something you can use mixins. Since you mentioned you're new to CSS I'm going to assume it's plain old CSS.
You mentioned that you want col-xs-12 and col-xs-9. You can chain sizes together as well. Eg. class="col-xs-12 col-lg-9", etc..
As noted in the .visible-print and .hidden-print classes you can have the following...
<div id="sectionContainer">
<div class="col-xs-12 hidden-print">
<!-- Add the content to see if your viewing on a web page -->
</div>
<div class="col-xs-9 visible-print">
<!-- Content to show in print -->
</div>
</div>
You cannot change classes in CSS -
A viable workaround that does not involve JavaScript would be to make a third class print and copy+paste the css rules from col-xs-12 to it --
Add this new class to everything that is col-xs-9 which you want to be displayed as col-xs-12 on media print,
and finally, to keep things smooth, put whatever styles you need and your new .print styles into a separate .css file and link it in the head:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
(or, if it isn't a gigantic file at that point, #media only print{} is acceptable )
Alternatively, if you won't be using the col-9 class, you can just swap their classnames in your #media section.
Or, if you're comfortable with a javascript solution, you could add a "Print" button to your page that would do something like
$("#printButton").click(function(){
$(".col-xs-9").addClass("col-xs-12").removeClass("col-xs-9");
});
A media query can only change what the selectors' rules are from size to size, it can't change the selectors you've put into the markup. To change the class in the markup would require the use of Javascript.
YOu oould restyle you col-xs-12 specifically for print to match that of col-xs-12 , or similarly, add a new class, col-xs-12-print and style it to match col-xs-9
when using twitter bootstrap they have classes to hide and show certain elements for print
.visible-print and .hidden-print
http://getbootstrap.com/css/#responsive-utilities-print