vaadin: integrate angular js using custom layout - javascript

I tried to integrate angular js application in vaadin by using custom layout like this:
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setMargin(true);
mainLayout.setWidth("1380px");
setCompositionRoot(mainLayout);
Panel panel = new Panel();
CustomLayout layout = null;
try {
String dynamicHtml = "<div ng-app=\"app\">..........</div>";
layout =
new CustomLayout(new ByteArrayInputStream(dynamicHtml.getBytes()));
} catch (IOException e) {
logger.error("could not create custom layaout", e);
}
panel.setContent(layout);
mainLayout.addComponent(panel);
importJs();
public void importJs() {
String PATH_TO_JS_SCRIPT = jsURL+"?tata=" + new Date();
String script = "try{var fileref=document.createElement('script');";
script += "fileref.setAttribute(\"type\",\"text/javascript\");";
script += "fileref.setAttribute(\"src\", \"" + PATH_TO_JS_SCRIPT +
"\");";
script += "document.getElementsByTagName(\"head
\")[0].appendChild(fileref);}catch(e){alert(e);}";
Page.getCurrent().getJavaScript().execute(script);
}
I import the script js using importJs method.
The first time i access the page, the js file is loaded and it works.
The second time, it does'nt work.
As if the script is not imported.
I don't see what is wrong in my code?
Using Javascript annotation i have the same problem.
I use
vaadin 7.6.5
java 7

Inserting angular code inside CustomLayout is bad idea.
I would recommend to read text: Vaadin and AngularJS - happy together.
There is an add-on available that lets you combine the best of Vaadin and AngularJS: Vaangular

The Js file was only included once and only once during lifecycle of the page.
To excecute this script each time we display the page i use:
if(typeof angular != 'undefined'){
angular.bootstrap(document.getElementById('swdId'), ['app']);"
}
The issue is fixed

Related

How To remove unwanted section in kotlin Webview Android Studio

I am converting my wordpress website in to android application using webview in kotlin, and i want to remove(hide) the header of the website in the app version, I have try so many search and i found a way to did it by injecting javascript in the
onpagefinish function, but it didnt work, this is my code with the options i have try
**val v: View = inflater.inflate(R.layout.fragment_home, container, false)
val webView = v.findViewById<View>(R.id.webview) as WebView
webView.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
// the first code i try for hiding the header
// webView.loadUrl("javascript:(function() { var a= document.getElementsByTagName('menu-pusher');a[0].hidden='true';a=document.getElementsByClassName('menu-pusher');a[0].style.padding='0px';})()")
// the second code i try for hiding the header
// webView.loadUrl("javascript:if (typeof(document.getElementsByClassName('menu-pusher')[0]) != 'undefined' && document.getElementsByClassName('menu-pusher')[0] != null){document.getElementsByClassName('menu-pusher')[0].style.display = 'none';} void 0");
/* The Third Code i have try for hiding the header
webView.loadUrl("javascript:(function() { " +
"var head = document.getElementsByClassName('menu-pusher')[0].style.display='none'; " +
"})()");*/
//The Last Code i have try
webView.loadUrl("javascript:document.getElementsByClassName('menu-pusher')[0].style.display='none'");
}
}
//the webpage i am trying to load and hide the header
webView.loadUrl("https://sadeeqtech.com.ng/stech")
return v
}
}
But please guys if there is another better way to convert my wordpress website into an Android app apert from webview, please help me with it but using kotlin

To get all the static hyperlinks from another view

Currently, I am able to get all the hyperlinks from the loaded page in the application. I have added the below code to the shared _Layout page in javascipt.
'''
var links = document.getElementByTagName("a");
var urls=[];
for (var i = 0;i<links.length;i++)
{
var datalink = new Object();
datalink.label=links[i].text;
datalink.value=links[i].getAttribute("href");
if (datalink.value.startswith("https://")) {
urls.push(datalink);
}
}
'''
What I want is that I should also be able to fetch the hyperlinks or the content from the other views (for example /Accounts/Index.cshtml) of the MVC application at the startup.
Any suggestions?

Cannot add external JavaScript file to React application

I have read all advices how to add external JavaScript file to React application but no one works for me. I'll describe my situation. I have created a tutorial React project and it works fine. Now I want to show a data that I get from server side in some grid , say, jqgrid. I have a JavaScript file that has a function showGrid() to show the grid. So I need to add this file to the project. More precisely I have a React component ShowInGrid and in
render()
method of it I write
let contents = this.state.loading
? <p><em>Loading...</em></p>
: ShowInGrid.renderGrid(this.state.data);
and then
static rendersGrid(data) {
return (
showGrid(data)
);
where showGrid is a function from JavaScript file. To reference to this file I used several ways:
in componentDidMount method I added
var script = document.createElement('script');
script.src = // path of external javascript file.
script.class = "external-script
document.body.appendChild(script);
I get a message
'showGrid' is not defined no-undef
I tried to use
import ScriptTag from 'react-script-tag';
with
< ScriptTag isHydrating={true} type="text/javascript" src="http://my path to js-file">
but I get the same result.
So I really need to know what's wrong and how properly to add JavaScript file to app. A real working example will be really appreciated.

Running over ENVDTE Solution Projects

I'm writing a C++ Project template in VS 2010 using the Custom Wizard technique.
In the default.js, the file which holds the behind JavaScript code, I want to take the current generated project, and locate it in an existing VS solution, in a specific "apps" subfolder.
I have a C# working code which does the above, but I have to rewrite it in JavaScript.
My C# code is:
Projects ps = solution.Projects;
var item = ps.GetEnumerator();
while (item.MoveNext())
{
var project = item.Current as Project;
string name = project.Name;
if (name == "apps")
{
SolutionFolder folder = (SolutionFolder)project.Object;
p = folder.AddFromFile(newProjDir + "\\" + projName + ".vcxproj");
}
}
In JavaScript, I wrote:
var ps = Solution.Projects;
But now I don't succeed to iterate over the projects, as I did in c#.
When I'm trying to write in the JS file:
var item = ps.GetEnumerator();
I'm getting the run time error:
Object doesn't support this property or method
Do you know about any way to iterate over the Projects collection? Is there a JS function which behaves like GetEnumerator()?
As you of course know, JS is a client side language.
You cannot get information from the server (like Solution.Projects).
But you can write a web service and use it from the your web page to get the information.
I found my way:
for (var i = 1; i <= solution.Projects.Count; i++)
{
if(Solution.Projects.Item(i).Name == "apps")
{
appsFolder = Solution.Projects.Item(i);
project = appsFolder.Object.AddFromFile(newProjectPath + "\\" + strProjectName + "\\" + strProjectName + ".vcxproj");
break;
}
}
Thanks you all for trying help :)

How do I use jQuery in Windows Script Host?

I'm working on some code that needs to parse numerous files that contain fragments of HTML. It seems that jQuery would be very useful for this, but when I try to load jQuery into something like WScript or CScript, it throws an error because of jQuery's many references to the window object.
What practical way is there to use jQuery in code that runs without a browser?
Update: In response to the comments, I have successfully written JavaScript code to read the contents of files using new ActiveXObject('Scripting.FileSystemObject');. I know that ActiveX is evil, but this is just an internal project to get some data out of some files that contain HTML fragments and into a proper database.
Another Update: My code so far looks about like this:
var fileIo, here;
fileIo = new ActiveXObject('Scripting.FileSystemObject');
here = unescape(fileIo.GetParentFolderName(WScript.ScriptFullName) + "\\");
(function() {
var files, thisFile, thisFileName, thisFileText;
for (files = new Enumerator(fileIo.GetFolder(here).files); !files.atEnd(); files.moveNext()) {
thisFileName = files.item().Name;
thisFile = fileIo.OpenTextFile(here + thisFileName);
thisFileText = thisFile.ReadAll();
// I want to do something like this:
s = $(thisFileText).find('input#txtFoo').val();
}
})();
Update: I posted this question on the jQuery forums as well: http://forum.jquery.com/topic/how-to-use-jquery-without-a-browser#14737000003719577
Following along with your code, you could create an instance of IE using Windows Script Host, load your html file in to the instance, append jQuery dynamically to the loaded page, then script from that.
This works in IE8 with XP, but I'm aware of some security issues in Windows 7/IE9. IF you run into problems you could try lowering your security settings.
var fileIo, here, ie;
fileIo = new ActiveXObject('Scripting.FileSystemObject');
here = unescape(fileIo.GetParentFolderName(WScript.ScriptFullName) + "\\");
ie = new ActiveXObject("InternetExplorer.Application");
ie.visible = true
function loadDoc(src) {
var head, script;
ie.Navigate(src);
while(ie.busy){
WScript.sleep(100);
}
head = ie.document.getElementsByTagName("head")[0];
script = ie.document.createElement('script');
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
head.appendChild(script);
return ie.document.parentWindow;
}
(function() {
var files, thisFile, win;
for (files = new Enumerator(fileIo.GetFolder(here).files); !files.atEnd(); files.moveNext()) {
thisFile = files.item();
if(fileIo.GetExtensionName(thisFile)=="htm") {
win = loadDoc(thisFile);
// your jQuery reference = win.$
WScript.echo(thisFile + ": " + win.$('input#txtFoo').val());
}
}
})();
This is pretty easy to do in Node.js with the cheerio package. You can read in arbitrary HTML from whatever source you want, parse it with cheerio and then access the parsed elements using jQuery style selectors.

Categories