How to control what Worklight changes in auto generated html file? - ibm-mobilefirst

How do I keep Worklight from making changes in the .html file that break things in the iPhone app? Or at least, how can I control what it changes?
I'm using IBM Worklight 6.1. After generating an iPhone environment I do the following:
"Run as-> Build iPhone Environment"
Then Worklight copies myApp.html from the common directory to the iPhone/native/www/default directory
Then Worklight makes changes to the original myApp.html file that causes my iPhone app to fail.
I've tried deleting all the code in /native, then do a "run as...build...", but still there are changes made to the html file that break the app.
Example of some things that get changed from the original /common/app.html file:
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
gets changed to this:
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META content="text/html; charset=UTF-8" http-equiv="Content-Type">
It also adds an extra (redundant) line of this:
<link href="worklight/worklight.css" rel="stylesheet">
So I end up with:
<link href="worklight/worklight.css" rel="stylesheet">
<link href="worklight/worklight.css" rel="stylesheet">
Using Eclipse Keplar with Worklight6.1

I'm not able to reproduce this problem in my environment (Eclipse Kepler (4.3.1.v20130911-1000), Worklight Studio 6.1 (6.1.0.00-20131126-0620) ).
Can you tell us what version of Worklight Studio you are using, and what version of Eclipse you are using?
The direct answer to your question is that there are no controls that let you influence what Worklight Studio changes in the HTML file when it copies it to the native environment - but, it should not be necessary to do this.

Related

Ace HTML Editor - Making resource internal

I've implemented the Ace Editor using the recommended CDN I've seen in their official documentation and it works great.
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js" type="text/javascript" charset="utf-8"></script>
However, being an external resource, it requires internet, which the user may not always benefit of, as in my case, the application could run on the internal server of an embedded device.
Simply copying the code from the cdn link into a JavaScript plugin starts the editor without any features.
Is there any way to manage this library using bower or npm ?
You need to include mode, theme, and worker files in addition to ace.js, copy the whole https://github.com/ajaxorg/ace-builds/tree/master/src, or use npm install ace-builds

Trying to understand how to use and develop using bootstrap

On the Getting started page for bootstrap it says if I want to develop using bootstrap source I need bower (which needs node.js and npm)> So on Windows I installed node.js & npm then did npm install -g bower which apparently installed bower in my user profile AppData\Roaming\node_modules\bower (due to the -g option).
The I ran bower install bootstrap and went looking for it in the user profile only to find out that it got installed in the folder bower_components in my current folder (or node_modules\bower in the current directory if I use the npm install command without the -g options).
Before I embark in using bootstrap for my development activities I would like to understand more how I am supposed to use it.
I have a project maven spring based web project opened in eclipse (let's call it msb for maven spring based and assume the location is ~/workspace/bs-sample/msb for the path where the project resides) and I am wondering) and I need to understand:
What do I need to install on my desktop to develop with bootstrap beyond the bower and node.js and npm I have already installed and what commands do I need to use?
How do I add bootstrap to my msb web project in eclipse? What folder and what tools need to be installed?
What customization do I need to perform to start using bootstrap in my web project. I actually am trying to use bootstrap-treeview in my web project.
When changing to the bootstrap folder and running npm install in what folder will the npm command put the dependencies? I ask this because I cannot run this command as npm installs its stuff using the git command/ssh and I cannot use ssh because I am behind an HTTP authenticated proxy. I have to add the dependencies manually.
Any clarification would be much appreciated here and in the getting started page for bootstrap for people unfamiliar with this combination of tools.
You can get started with Bootstrap in one of their three mentioned ways:
Adding it to your project
Building from source
Using the SASS port
If all you want to do is add it to your project, you can use the first option.
For this, you just download the files and add them to your web pages like any other CSS or JS.
The minimized version is best for production, while the non-minimized version is best for debugging issues.
How you include them into your project depends on which framework you are using for you web project (i.e. template engines, tiles, pure JSPs, etc).
You can start with a basic template for a given page and add components (including your treeview) as you see fit.
Template below from Bootstrap's site.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

'F12' Tool of IE11 did not recognize conditional stylesheets

I have a site which should compatible with multiple browsers, like IE7 & IE8 & others.
I choose to use conditional stylesheet to deal with different version of IEs.
Like this, only include ie7.css if current browser is ie7.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/resources/css/ie7.css" />
<![endif]-->
I use IETester to test the performance of my site and make change for specific version of ie.
Everything look fine and consistent in IETester.
But, when I use the 'F12' tool of IE11 and change the version of IE, the appearance of my site scared me, element's position are disordered and looks ugly.
It seems that my conditional stylesheets(like ie7.css) do not loaded cause I do not see the ie7 styles displayed in the DOM Explorer.
Is this a IE11 bug ? or something else?
anybody knows?
There was a bug in F12 where conditional comments aren't respected when using F12 to set the document mode. This bug was fixed in the April update to IE11. If you run Windows update to get the latest patch you shouldn't see this issue any more.
http://connect.microsoft.com/IE/feedback/details/806767/conditional-comments-do-not-work-when-emulating-document-modes-via-f12-developer-tools

Unable to get Twitter.Bootstrap.Mvc4.sample working in empty MVC4 project

I've installed Twitter.Bootstrap.MVC4 into an Asp.Net MVC Empty project template and when I start the application there are issues with the style sheets. It looks to me like they aren't linked in. Screen grab below.
And the head section is below
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/content/css?v=o7EqNjjD8FotmTy6On6adamUxH559LswOFRclfNrDPM1" rel="stylesheet"/>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
In the BootstrapBundleConfig.cs file, there is a path error.
"~/Content/bootstrap.css" should be "~/Content/bootstrap/bootstrap.css"
bootstrap-responsive.css is also missing.
Have fun ;-)
I had similar problem, this happens because when you install nuget package it installs the latest bootstrap which is now 3.0, while Twitter.Bootstrap.Mvc4.sample has configured itself for 2.x.
If you don't need 3.0, than you can download 2.x version and copy scripts and content in their respective folders.
For 3.0 move css files from ~/Content/bootstrap to ~/Content.
If you are just looking for a sample project illustrating ASP.NET MVC with Twitter Bootstrap, you can download visual studio 2013 preview for Web and create a new MVC project. Bootstrap is available in MVC template. New addition to MVC 5. This template will enable you to see the folder structure and make the necessary adjustments in the above project.

Where's the source code to the native PDF viewer in Google Chrome?

Can't seem to find it in trunk. Is this actually part of the open-source Chromium project? Or is the source to this not actually released? Only mention I could find:
http://www.listware.net/201007/chromium-discuss/93274-chromium-discuss-chrome-pdf-viewer-source.html
Fetch it with Git:
$ git clone https://pdfium.googlesource.com/pdfium
View and contribute:
https://pdfium.googlesource.com/pdfium/+/master (Source browser)
https://pdfium.googlesource.com/pdfium/+/master/LICENSE (BSD 3-clause)
https://code.google.com/p/pdfium/ (Bug-tracker)
Chromium just automatically embeds a page with PDF, the custom plugin is bundled up with Chrome. Adobe and Google has some mutual agreement:
You can right click and inspect the PDF Native Viewer to see yourself, you will see something like the following:
<html>
<body marginwidth="0" marginheight="0" bgcolor="rgb(38,38,38)">
<embed width="100%" height="100%" name="plugin" src="http://path/to/file.pdf" type="application/pdf">
</body>
</html>
I just cite a snippet of the Chromium wiki (last updated on Nov 20, 2012):
The Chrome PDF plugin uses 3rd-party non-free code; no Free Software PDF plugin exists that supports all the PDF features we'd like (such as filling in forms). :(
It is closed-source, just as native Flash plugin.