How to build GWT standalone offline application? - javascript

I need to design SPA with GWT technology, but I do not understand clearly how to make (compile) only one page with all JavaScript code in it.
So, for example my task is to make simple page with button and div. You click on button and div appears on page. Simple.
When I did this on GWT, I can not find a way to compile this page in simple index.html with all JS code inside (or in one .js file). Page should work in offline mode.

GWT do it for you. compile it to one .js file?
Here is simple tutorial http://code.google.com/intl/en/webtoolkit/doc/latest/tutorial/gettingstarted.html
If you have any other question, please ask
and have a look at this.allyou need is here
http://www.vogella.de/articles/GWT/article.html

Try Gears with GWT from google here the specs:
http://www.slideshare.net/tom.peck/going-offline-with-gears-and-gwt

Related

Blazor Javascript Drop-In Script Not Working

I am working on integrating Chargebee into a Blazor app. The way the drop-in script for Chargebee works is I need to include a javascript script, which I am doing in my index.html file.
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="sitename-test"></script>
Then, in theory I should be able to just include a drop in link in one of my razor views like this.
Subscribe
But when I do this and run the site, click the link, nothing happens, no error, no drop-in popup. Is there something about Blazor that doesn't allow this action to work the way it would work with another framework? I have tested this with plain HTML files and it works fine.
Thanks in advance for any help.
You will need to call Chargebee.init(options); via JSInterop. See the documentation linked below for more details on the Chargebee JS API.
https://www.chargebee.com/checkout-portal-docs/api.html#chargebee-object

Tool to analyse files using in a website

A web site project was given to me. There is many CSS and JS files, but I'm not sure that everything is useful.
Do you know if there is a tool able to analyze what and for what are used this type of files, or directly a tool which optimize this files in a web project?
Thank you.
Go to inspector
click audit tab.
click web page performance check box
Click Run Button
You can find what css files are not used

How can I reverse engineer my JavaScript files with js/uml?

Goal
My goal is to get an UML model out of my JavaScript project (consisting of several .js files) and store it as XMI.
How far I've come
I searched the internet and found out js/uml is the first place to go.
I've managed it to get the js/uml plugin running with Eclipse 3.7.1 (Win32) and a local installation of my pre-downloaded additional plugins:
mdt-uml2tools-Update-incubation-I201103290512.zip (installs required org.eclipse.uml2.diagram.clazz 0.10.0)
jsuml-eclipse-0.8.4.zip (only works with Eclipse 3.7.1 (Indigo))
I loaded the provided example project jsuml-example-yui-0.8.4.zip into Eclipse and added all my .js files to this project also.
Problem
Now I'm stuck and do not get it how to call the reverse engineering of my .js files. I can call 'New'->'Other'->'UML 2.1 Diagrams'->'Class Diagram' from the project's context menu, but I don't get the following steps of that assistant dialog, nor do I get it if this is the right way at all. Please, could you help me with an easy understandable click tutorial? The js/uml homepage does not explain it well enough IMHO. Thanks for your help in advance.
Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.
https://www.npmjs.org/package/wavi
Well, I think I have come quite close.
There's a command-line tool called Code2Flow. which uses GaphViz to generate graphs for Python and JavaScript sources.
I tried it, it does generate the graphs but somehow i can't make to do right.
I hope this will help you or someone.

Organizing Javascript w/ jQuery

I am tinkering around with jQuery and am finding it very useful and almost exciting.
As of now, I am referencing the jQuery script via Google's CDN and I store plugins I use locally in a static/scripts directory.
Naturally, each page has its own individual implementation of components that are required for the features it currently offers. I.E. the main page has the Twitter plugin whereas the login page has form validation logic and password strength metering. However, certain components (navigation bar) for example use the same script across multiple pages.
Admittedly so, I am not a fan of putting javascript code in the header of a page, but I rather prefer to have it in an external file (for caching, re-usability, and optimization purposes).
My question is, what is the preferred route for organizing the external files. I wanted to try and keep it to one javascript file for the entire site to reduce IO requests. However, I am not sure how to implement document ready functions on a conditional per page bases.
$(document).ready(function () { ... }
Is there some way to reference a page by some method (preferably id based and not a url conditional).
Thank you in advance for your time!
You should try REQUIRE JS.
This will allow you to load only those plugins the pages where you need them, and unload them again if they are not needed anymore.
Then again, it might be overkill. It really depends on the size of your project.
Paul Irish:
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
This will allow you to block your scripts by body class/ID and execute them automatically.
First you might want to use YUI Compressor or some other JS compressing tool. Then perhaps creating a resource file (resx) for your JavaScript is the way to go. Then just reference the resource within your code. This is the approach Telerik took for their RadControl ASP.NET AJAX control framework.

How to work on Javascript projects?

I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?
I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.
I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.

Categories

Resources