I'm entirely new to Dart so excuse my ignorance.
Lets say I was trying to model a tree which had frames and paragraphs. A frame could hold paragraphs, and other frames (recursive). (Note: These frames are not iframes, just a box to hold content really.)
Frame
Paragraph
Frame
Paragraph
Paragraph
Frame
Paragraph
Paragraph
...
There is no prescribed structure to these trees. Just wondering how one would use dartUI to display a recursive tree structure with mixed types like this. Can you do it via templating/binding?
Edit: This tree structure is dynamic and changed at run time (i.e. users can add frames and paragraphs). So what I'm looking for is a method to generate the view from this model without the calls back to the server to generate new content structures.
I was thinking maybe the template iterate could be used to iterate over all the children of a Frame and somehow switch what element is inserted based on whether the child is a paragraph or frame.
You can use the <content> tag to insert arbitrary HTML into a web component. You can use CSS selectors to restrict the content that appears within the content area. A full implementation of your example of a Frame element that can hold other frames and paragraphs might look something like this:
x-frame.dart:
<!DOCTYPE html>
<html>
<body>
<element name="x-frame" constructor="FrameComponent" extends="div">
<template>
<content select="div[is=x-frame], p"></content>
</template>
<script type="application/dart">
import 'package:web_ui/web_ui.dart';
class FrameComponent extends WebComponent {
}
</script>
</element>
</body>
</html>
Using nested frames:
<x-frame>
<p>Hello There!</p>
<x-frame>
<p>We are nested.</p>
</x-frame>
<x-frame>
<x-frame>
<p>A third level!</p>
</x-frame>
</x-frame>
</x-frame>
You can read the Dart WebUI article for more info.
Note: The content select matches against div is attribute since component tags are converted to that format (in other words, even though we can create frame components through <x-frame>, they will show up in the DOM as <div is="x-frame">
Related
I understand from reading similar posts that the <section> tag in html is meant for semantic and organizational purposes. I was wondering, however, why using the <div> tag with a class attribute wouldn't have a similar effect.
(e.g. <div class = "SectionOne">)
Given these two methods, I could refer to each of them in CSS by using their respective names:
Section
{
color = white;
}
or
.SectionOne
{
color = white;
}
Personally, I think the second method allows for greater versatility in webpage design and I don't see many advantages to the new HTML5 feature. Would anyone care to clear this up for me?
section is usually used for having article like contents whereas div are meant to combine various block elements in order to style them differently. The main difference is just semantics.
Refer https://www.thoughtco.com/difference-between-div-and-section-3468001 for derails
Let me know if you require any further help
The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
Whereas: The <div> tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS.
Maybe you mean section and not Section. Anyway, the semantics is a thing and the selectors another. In CSS it is better to select using classes than tag selectors, because you gain a lot in terms of versatility. So you are right from this point of view. Semantics is another matter: is not given by a class. Even if you give a "section" class to a div, you are not giving semantic meaning to a div.
<div> is simply a generic block-level element which predates the later, semantically-named, document-related elements which arrived with HTML5, such as:
<header>
<nav>
<main>
<section>
<aside>
<footer>
When dividing up a document into its anatomical parts, you could still use:
<div class="header">
<div class="section">
etc.
But... you don't need to anymore.
Of course, even if you still use all of the above in your document you might still want to add other block-level elements and when you do... <div> is general purpose.
Suppose I want to scrape part of a page to reproduce a particular rendering with, at most, a single CSS.
I can copy the full rendering using browser console commands, but that still produces HTML with classes referencing the CSS stack. E.g.,
<h1 class="x">
<span class="y">Here's a header</span>
</h1>
<div class="z">Here's some more text with a different format</div>
Is there a way to either:
Get all styles expanded inline?
Get all referenced styles defined in a single "computed" CSS block?
I am trying to print the href of a html doc, however I am not able to do so.
newurl = 'http://www.heroesfire.com/hots/guide/the-many-ways-of-abathur-1194'
buildpage = Nokogiri::HTML(open(newurl))
#puts buildpage
thistext = buildpage.css("div#wrap div#site-content.self-clear div#guide.view-guide div.col-l div.tab-contents.box div.guide-tab div.chapter-text div.text table.bbcode_columns tbody tr td.bbcode_column a").each do |href|
puts href['href']
end
I am expecting to see '/hots/wiki/talents/pressurized-glands'
I was able to get something similar to work earlier in my script, but I am having zero luck with this.
Invariably, the longer the Node selector, the less likely it will work correctly, especially if you're dealing with HTML you don't control.
Reduce it to find way-points, places that help you drill down instead of trying to define each step.
You're also relying on tbody in the selector. When we see that, the odds are good that it's not in the original HTML source but instead was injected by your browser. Selectors like that smell of using a browser and an inspector to locate a particular item in the page, but the resulting path won't work if the HTML doesn't actually contain tbody. Browsers do a lot of fix-up in an attempt to present something useful, including adding tags. So be careful when you see tbody and confirm it actually exists. In your case, it does, but the concern still exists when navigating through a document.
A simple example of simplifying the path is:
require 'nokogiri'
doc = Nokogiri::HTML(<<EOT)
<html>
<body>
<div id="foo">
<div id="bar">
<p>text1</p>
</div>
<div id="baz">
<p>text2</p>
</div>
</div>
</body>
</html>
EOT
doc.at('body div#foo div#bar p').text # => "text1"
Can be written more easily, while still accomplishing the same thing, using:
doc.at('#bar p').text # => "text1"
or perhaps one of these:
doc.at('#foo div p').text # => "text1"
doc.search('#foo div p').first.text # => "text1"
All scraping requires at least some advance knowledge of the target page's structure, so, while you're nosing around, take note of the important layout tags. id parameters are especially useful, followed by class and/or unique patterns of tags not replicated elsewhere in the document. Those make it easy to reduce the selector. Sometimes we have to step into the document incrementally like I did using first or one of the "sibling" methods after locating a particular node, but using a long selector rarely is needed.
I'm trying to create a component, or a view if that is better suited for this, that binds to given model's computed properties and changes style attributes accordingly. I'm using Ember App Kit if that affects in anyway how this should be done.
The component would be a a meter that has 2 computed properties to bind to: "limitDeg", "currentValueDeg". Every model instance that will use this component can supply those as model computed properties to the component.
The meter has 3 overlapping divs - ".meter-div" being just background with no bindings, and one of which will be rotated with CSS3 transform by X-degrees to show the current "limitDeg". So adjusting the "transform: rotate(###deg);" is the key here. There is a "indicator-div", that is simple indicator that similarly rotates based on the "currentValueDeg" with CSS3 animation loop.
Below is a basic rough outline of how I've thought of having the component/view:
<div class="my-component-container">
<div class="limit-div"></div>
<div class="meter-div"></div>
<div class="indicator-div"></div>
</div>
...and I would use it like this for example:
{{#each}}
...
{{my-component}}
...
{{/each}}
1) I would like the component to bind to the model so, that when the "limitDeg" computed property changes, the ".limit-div" will be rotated by X-degrees with CSS3 transform: rotate(###degrees);.
2) I would like animate the ".indicator-div" with a CSS3 animation that loops infinitely, binding to the currentValueDeg computedProperty.
Is this something I should even try do this with one component/view, or rather do it this multiple components/views inside one partial?
If you're using handlebars, just wrap your component in tags that specify it as such:
<script type='text/x-handlebars' data-template-name='components/component_name'>
<div class="limit-div"></div>
<div class="meter-div"></div>
<div class="indicator-div"></div>
</script>
Then include it in your view like this:
{{component_name objectToPassIn=this classNames='my-component-container' tagName='div'}}
If you wanted the component to display a model property, you could do something like this inside the component (using the variables in my example above):
<span class='property-wrapper'>
{{objectToPassIn.objectProperty}}
</span>
Edit:
For the sake of clarity, objectToPassIn is the model that is passed to the view that calls the component.
This is NOT a question about how to create columns in css - so please dont give me any css for doing that. I've just excluded it here for readability.
I have created two columns in css and I want to place items in them based upon some css class. I think this is possible but I'm not sure how.
<DIV id="col1">
<!-- I want to display everything with 'women' here -->
</DIV>
<DIV id="col2">
<!-- I want to display everything with 'men' here -->
</DIV>
<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
<DIV class="women">
Women's product 1
</DIV>
<DIV class="men">
Men's product 1
</DIV>
<DIV class="men">
Men's product 2
</DIV>
</DIV>
Edit: Just to be sure I don't want to duplicate the product list into col1 and col2. i want to move them. I only want once visible copy of each item.
So I have two columns - or areas on the page - whatever - doesn't matter for this.
I want to use css to take everything under .products.women and put it in column 1.
I want to use css to take everything under .products.men and put it in column 2.
How can I do this. These kinds of things are about my limit to css, but I know theres some cleverness I can use.
Currently I'm rendering into the columns in two separate for loops. I want to get away from this for two reasons :
I dont want to maintain 2 identical for loops - nor move that logic elsewhere
I want to make an 'iphone' friendly version and i figure this will make that easier.
You can't do precisely what you're asking for with CSS. But you can do .women { float: left } .men { float: right}, which may be just about as good.
This is kind of a band-aid on your fundamental problem, though, which is failure to separate your presentation logic from your control logic. Instead of having two identical for loops in your presentation logic, you should have one for loop outside of it that builds two arrays, then your presentation logic should use each the way that would actually be beneficial to it.
CSS it's a language used to describe the presentation of the (existing) content. You are
asking for programaticaly DUPLICATE or COPY some of that content.
You can either use ASP/PHP whatever languaje of choice to generate multiple copies of that content, or use javascript to copy-move-change it.
Actually javascript seems to fit your scenario.
EDIT: you have a similar previous question here: using css to duplicate html elements
Interestingly (but, at this point, completely uselessly), this is not only possible in the current draft of the CSS3 Advanced Layout Module (aka Template Layout), but the spec contains an example showing how to do exactly that (last example in section 3.4). So if you can stand to wait a fifteen years or so...