When I have a Vaadin application does it download all the gui widgets to the client or does it download them on demand. I ask because I have some clients that only use some widgets but not others.
The default loading method is eager (EagerWidgetMapGenerator). You have a few choices for loading the widgets. Here are some of them:
Lazy
You can choose to use the LazyWidgetMapGenerator by adding this to your widgetset (.gwt.xml):
<generate-with class="com.vaadin.terminal.gwt.widgetsetutils.LazyWidgetMapGenerator">
<when-type-is class="com.vaadin.terminal.gwt.client.WidgetMap" />
</generate-with>
This will load the widgets only when requested.
Widget-defined
Same as above, but replace LazyWidgetMapGenerator with WidgetMapGenerator. This will use the widgets' loading preference and I believe most of them are DEFERRED.
Custom #1
Create a custom widget map generator by subclassing CustomWidgetMapGenerator and defining it in your widgetset (same as above but replace LazyWidgetMapGenerator with your class).
Custom #2
Create a custom widget map generator by subclassing WidgetMapGenerator (mostly deferred, defined by widgets) or EagerWidgetMapGenerator (every widget loaded EAGERly), setting only some of the widgets LAZY (or DEFERRED, or EAGER) and defining it in your widgetset.
For more info, check the API doc and this out:
http://dev.vaadin.com/wiki/WidgetSet
You can choose which widgets are loaded on start and which on demand. Default is to load them all on start.
Vaadin 14
This page in the manual seems to say that, if marked as invisible, your component is represented only on the server-side (in Java) and is not included on the client-side, does not appear in the DOM in the web browser. That is true if the component has not yet been rendered.
Once made visible the component is created in the DOM on the client. If turned invisible, the component remains in the DOM.
In all cases, while invisible, traffic ceases for events regarding that component. So while invisible, network usage is efficient.
Related
I'm trying to create a sample CRUD application using Dart and Polymers.
One think I noticed is almost all dart polymer examples have only one page. I'm trying to look for samples with multiple pages.
i.e.
Screen contains table of Person objects
Then when an Add button is clicked, it goes to the add view of the Person object
On the add page, there is a link to add some other child object.
This is very doable using only one screen, but am looking for a best practice in implementing multiple screens. In GWT it uses the Activities and Places. What is the dart counter part?
I saw on some other post using routes, but seems does not work on my Dart Editor. And I am not sure if this is still current as that posted almost a year now.
Route Example
ShadowRoot.resetStyleInheritance and ShadowRoot.applyAuthorStyles now deprecated in dart:html.
Please remove them from your code.
Uncaught Error: Illegal argument(s): No handler found for /routes_example.html#one
Stack Trace:
I just published a package for routing with Polymer (see https://github.com/bwu-dart/bwu_polymer_routing)
There are two links to simple demos available online.
I have a SDK dependency on 1.6.0 (dev-channel release) because I haven't tested it with Dart 1.5.x. I might remove this restriction with the next release.
Some highlights:
Hierarchical views are automatically created and inserted depending on the current route.
Route parameter values are automatically passed to the view attributes on route or parameter value change.
Parameter values are updated in the view without creating the view again.
The same code runs no matter if usePushState is enabled or disabled.
Mixin with event handlers for simple go-to-route links or buttons.
Mixin for adding DI support to your Polymer elements.
see also https://stackoverflow.com/a/25228357/217408
I'm working on a Meteor project at the moment that utilises Meteor JS & jQuery Mobile. All is going well apart from certain circumstances where Meteor updates an element.
For example, JQM automagically adds a few surrounding divs to a select box for formatting purposes (.ui-select, .ui-btn, .ui-shadow, etc.) but when Meteor updates this element, whether from a remote or local db change, it reverts the element to a standard select box, in effect ruining the UI.
I was just wondering if there is a easy solution to this issue where Meteor calls on jQuery to make changes prior to updating the element?
Dynamically added jQuery Mobile content must be enhanced.
It can be done in few ways, but most common ones are:
In case you want to enhance only content
$('#page-id').trigger('create');
In case you want to enhance full page (content + header + footer)
$('#page-id').trigger('pagecreate');
It is good to know that these method are performance extensive so you can always enhance widgets (buttons, listviews ...) separately. To find out more take a look at my other ARTICLE, to be transparent it is my personal blog, or find it HERE.
I want to ba able to disable all ui classes and html formatting on every page and still be able to use transitions, load pages via ajax, etc...
I looked through the Jquery Mobile documentation and $.mobile js object but could not seem to find anything.
If anyone knows would be really helpful :)
Download builder: In the works
Now that we’ve decoupled most of the UI widgets, we’ve set the stage
for there to be a download builder. This will let you build a custom
version of jQuery Mobile to only include the parts you need. For
example, you could just use the core files to add Ajax-based
navigation with pushState and leverage some of the touch events and
other utilities with a very lightweight build (roughly 11k). Or, you
could add in specific UI widgets like form elements, listviews, etc.
to create an optimized build. We’re aiming to have a download builder
tool as part of 1.0.
Source:
http://jquerymobile.com/blog/2011/09/08/jquery-mobile-beta-3-released/
I worked with Chrome extensions which have so called background page - an html page that is loaded in background once per browser window. You can store there some javascript variables, can access extension's own localstorage, can communicate back and force with content scripts (scripts injected to pages).
Is there anything similar in Firefox and how do I use it for the tasks listed above?
If you are using the (relatively) new Add-On SDK, then the main javascript file residing in your lib directory is equivalent of a Chrome extension's background page - a persistent script that runs in the background and spawns/creates/inserts panels, widgets and content scripts.
Regarding your specific asks:
1. localStorage: Add-Ons in Firefox cannot access localStorage directly. However, you can use simple-storage for storing data similar to localStorage.
2. Communication with content-script: Add-ons can communicate with content scripts using port or postMessage.
From the point of view of a traditional Firefox extension, the browser itself is just another window containing a document, although this is a XUL document rather than an HTML document. So you can store per-window variables, although you have to be careful not to overwrite other extension variables, which usually means declaring a top-level object and adding all your variables as properties of that object.
Sharing variables between windows used to be a little harder but fortunately JavaScript modules solve that problem in simple cases (primitive types).
Extensions can communicate with content scripts although there are some wrappers in place to prevent you from accidentally doing something silly.
I have a set of jqueryui tabs that, when clicked, load in their content dynamically. It works great, except that one of the pages uses a jquery plugin itself. This results in two issues:
The main page that holds the tabs throws an error when loaded because there is js that refers to elements that haven't loaded yet (those elements are in the external file that contains the code that relies on the plugin).
If I embed the js that triggers the plugin functionality into the external file, it is outside of the document.ready function from the main page and therefore isn't usable.
Basically I am looking for a technique that allows me to ajax load an external html file into the DOM while not crapping out the main page itself because JS that is already there is expecting HTML which is not yet there.
Thanks.
I haven't used it yet, but I think that this is what you are looking for
Listen
This plugin brings a clean, light solution, to websites with dynamic loaded content, or full of event bindings.
Intead of bound, handlers for events, are registered along with matching selectors.
And they'll still work for new added content.
This is achieved, using Event delegation, so the plugin will only work for events that bubble
You need to encapsulate your jquery code inside of the $(document).ready() function. If you're saying the code that's waiting to load via AJAX may or may not be loading at the same time as the parent page (i.e. a user has to click the tab to load it, vs. it being the default load) then you're design is bad and you'll have to rethink the approach. Basically you can't have code in your parent page referencing DOM elements that don't yet exist, and may not exist until your user clicks a tab.