Develop Reference

I want to fetch some info from a webpage in android studio

I want to fetch sometitle and somelink from HTML code below for my android app ...
HELP ME :(
<div class="proper-list list-group page-cat-wrap">
<figure class="col-md-12 thumb-vertical">
<div class="col-xs-4 thumb-image">
<a href="/somelink.html" class="image-hover">
<img alt="SomeTag" src="/storage/images/100/2382.jpg">
</a>
</div>
<figcaption class="col-xs-8">
<h3>
<a href="/somelink.html">
SomeTitle
</a>
</h3>
<p>
<a href="/secondlink.html">
SomeText
</a>
</p>
</figcaption>
<div class="clearfix"></div>
<div class="mobile-only icon-right">
<a href="/somelink.html">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
I heard of jsoup but won't able to get links with jsoup.

Jsoup is the best library to parse any of HTML content or document,
Here is the link and example,
http://jsoup.org/
Example
private void parsehtmlPage(){
File input = new File("/yourFolder/home.html");
Document doc = Jsoup.parse(input, "UTF-8", "http://example.com/");
Element elementId = doc.getElementById("elementId");
Elements ankerLinks = elementId.getElementsByTag("a");
for (Element link : ankerLinks) {
String linkHref = link.attr("href");
String linkText = link.text();
}
}

JSON load issue with angular.js in phonegap

I'm trying to load JSON from my wordpress-based website. I'm using phonegap to create an app on android, ios and windows. I'm using this js for the JSON, calling for business hours (shours1, shours2, shours3):
(function(){
'use strict';
var app = angular.module('app', ['onsen', 'angular-images-loaded', 'ngMap', 'angular-carousel']);
app.controller('restaurantController', function($http, $scope, $compile, $sce){
$scope.getHours = function(){
$scope.isFetching = true;
$scope.shours1 = '';
$scope.shours2 = '';
$scope.shours3 = '';
$http.jsonp('http://signsrestaurant.ca/api/get_posts/?post_type=restaurant&posts_per_page=-1&callback=JSON_CALLBACK').success(function(response) {
// Get's the first restaurant
$scope.restaurantJson = response.posts[0];
$scope.isFetching = false;
console.log( $scope.restaurantJson.custom_fields.shours1[0] );
$scope.shours1 = $scope.restaurantJson.custom_fields.shours1[0];
$scope.shours2 = $scope.restaurantJson.custom_fields.shours2[0];
$scope.shours3 = $scope.restaurantJson.custom_fields.shours3[0];
});
}
});
})();
Here is my html:
<ons-page ng-controller="restaurantController" ng-init="getHours()">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Location</div>
<div class="right" ng-show="isFetching">
<ons-toolbar-button><ons-icon icon="ion-loading-c" fixed-width="false" ></ons-icon></ons-toolbar-button>
</div>
</ons-toolbar>
<div class="app-page">
<div class="app-page-photo">
<ons-row class="app-map">
<ons-col>
<map center="[43.664639, -79.384649]">
<marker
position="[43.664639, -79.384649]"
title="Signs Restaurant & Bar"
animation="Animation.BOUNCE"
visible="true" ></marker>
</map>
</ons-col>
</ons-row>
<ons-list class="app-photo-buttons">
<ons-list-item modifier="action-buttons">
<ons-row class="action">
<ons-col class="action-col">
<div class="action-icon"><ons-icon icon="ion-ios-star-half"></ons-icon></div>
<div class="action-label">Rate</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon"><ons-icon icon="ion-bookmark"></ons-icon></div>
<div class="action-label">Favorite</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')"><ons-icon icon="ion-ios-telephone"></ons-icon></div>
<div class="action-label" onclick="window.open('tel:647-428-3076', '_system', 'location=yes')">Call</div>
</ons-col>
<ons-col class="action-col">
<div class="action-icon" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')"><ons-icon icon="ion-map"></ons-icon></div>
<div class="action-label" onclick="window.open('http://maps.google.com/maps?q=43.664639,-79.384649', '_system', 'location=yes'), window.location('maps://maps.apple.com/?q=43.664639,-79.384649')">Directions</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ons-list modifier="inset" style="margin-top: 10px">
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Monday <span class="label label-danger">{{ shours1 }}</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Tuesday-Thursday <span class="label label-default">{{ shours2 }}</span>
</div>
</ons-list-item>
<ons-list-item>
<div class="app-open-desc">
<ons-icon icon="ion-android-clock"></ons-icon>
Friday-Sunday <span class="label label-default">{{ shours3 }}</span>
</div>
</ons-list-item>
</ons-list>
</div>
</div>
</ons-page>
It seems to be working partially. The shours do load, but only after I rotate my android or click on the menu. It doesn't load off-hand immediately. It basically needs some sort of a refresh to get it to load. I would appreciate it if someone can help me out with this.

Thanks a lot to Andreas Argelius. I wrapped the
$scope.shoursX
in
$scope.$evalAsync(function() { ... })
and that did it.
EDIT: I spoke too soon. It worked and it didn't. The issue still persists.

Extract Image source from nested div and a tag in JSOUP

<div class='ym-gbox adds-header'>
<a href='javascript:(void);' >
<a href="http://epaper.thedailystar.net/" target="_blank">
<img src="http://epaper.thedailystar.net/images/edailystar.png" alt="edailystar" style="float: left; width: 100px; margin-top: 15px;">
</a>
<a href="http://www.banglalink.com.bd/celebrating10years" target="_blank" style="display:block;float: right;">
<img width="490" height="60" src="http://bd.thedailystar.net/upload/ads/2015/02/12/BD-News_490x60.gif" alt="banglalink" >
</a>
</a>
</div>
This is the html portion. From here I want to extract the image source of image tag with source address src="http://epaper.thedailystar.net/images/edailystar.png" using jsoup in android. But I failed. If anyone give the answer I will be thankful to him.
Here is my code
Document document = Jsoup.connect(url).get();
Elements img = document.select("div[class=ym-gbox adds-header]").first().select("a[href=http://epaper.thedailystar.net/] > img[src]");
String imgSrc = img.attr("src");

Since you didn't mention url, i assume url is http://epaper.thedailystar.net/index.php
Document doc = Jsoup.connect("http://epaper.thedailystar.net/index.php").timeout(10*1000).get();
Elements div = doc.select("div.logo");
Elements get = div.select("img");
System.out.println(get.attr("abs:src"));
Output :
http://epaper.thedailystar.net/images/edailystar.png

You have to iterate through elements to choose the element that suits your needs. Like so:
Elements elements = document.getElementsByTag("img");
for (Element element : elements) {
if (element.attr("src").endsWith("png")) {
System.out.println(element.attr("src"));
}
}

get img src with jsoup

This is my html
<script src="/ClientScripts/swfobject.js" language="javascript" type="text/javascript"> </script>
<div class="contentDetails">
<div id="ctl00_MainContentPlaceHolder_ContentDetailsBodyDivision" class="body">
<div align="justify">
<p align="center"><img width="500" height="352" alt="MVM315" src="/UserUpload/Image/1(825).jpg" /></p>
<p align="center"><img width="500" height="352" alt="MVM315" src="/UserUpload/Image/2(598).jpg" /></p>
How can i get {src="/UserUpload/Image/1(825).jpg"} with jsoup ?
I have this code but not working
Document doc = Jsoup.parse(html);
Elements mElements = doc.select("div[id^=ctl00_MainContentPlaceHolder_ContentDetailsBodyDivision]");
Result = mElements.get(0).tagName("img").toString();

try this:
Element imageElement = document.select("img").first();
String absoluteUrl = imageElement.absUrl("src"); //absolute URL on src
String srcValue = imageElement.attr("src"); // exact content value of the attribute.
More info here: http://jsoup.org/cookbook/extracting-data/working-with-urls

What about:
Element img = document.select("img").first()
String src = img.attr("src");
For more info see this: http://jsoup.org/cookbook/extracting-data/attributes-text-html

How to display a MapView and a StreetView simultaneously?

I want to display a MapView that may be used to select a point to be displayed by StreetView in a separate area. I know that the API disallows multiple MapViews in a single process.
How can I cause StreetView to display in a different area than that which displays MapView?
I have been able to grab a static streetview without any problems, but I want to have dynamic StreetView and MapView.
aTdHvAaNnKcSe (THANKS in ADVANCE)

You can load 360 degree panoramic Google street-view in your WebView.
Try following activity in which both google-street-view and google-map can be navigated simultaneously in single Activity :
public class StreetViewActivity extends Activity {
private WebView webView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mappingWidgets();
}
private void mappingWidgets() {
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setSupportZoom(false);
// If you want to load it from assets (you can customize it if you want)
//Uri uri = Uri.parse("file:///android_asset/streetviewscript.html");
// If you want to load it directly
Uri uri = Uri.parse("https://google-developers.appspot.com/maps/documentation/javascript/examples/full/streetview-simple");
webView.loadUrl(uri.toString());
}
}
You can place this as static HTML page in assets folder of your application and then you can modify it's java-script according to your needs using Google street-view API.
Here I am posting sample streetviewscript.html that you can put in assets folder of your application and customize it according to your needs :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Layer</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map_canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 800px"></div>
<div id="pano" style="position:absolute; left:810px; top: 8px; width: 800px; height: 800px;"></div>
</body>
</html>
Edit : For simultaneously navigating two street views, load following HTML from assets :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Events</title>
<STYLE type="text/css">
body, html { height:100%; padding:0; margin:0;}
#pano { float:left }
#pano1 { float:right }
</STYLE>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var cafe = new google.maps.LatLng(37.869085,-122.254775);
var heading_value = 270;
var pitch_value = 0;
var zoom_value = 1;
function initialize() {
var panoramaOptions = {
position: cafe,
pov: {
heading: heading_value,
pitch: pitch_value,
zoom: zoom_value
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
var panorama2 = new google.maps.StreetViewPanorama(document.getElementById('pano1'), panoramaOptions);
google.maps.event.addListener(panorama, 'pano_changed', function() {
var panoCell = document.getElementById('pano_cell');
panoCell.innerHTML = panorama.getPano();
panorama2.setPano(panorama.getPano());
});
google.maps.event.addListener(panorama, 'links_changed', function() {
var linksTable = document.getElementById('links_table');
while(linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
};
var links = panorama.getLinks();
panorama2.setLinks(panorama.getLinks());
for (var i in links) {
var row = document.createElement('tr');
linksTable.appendChild(row);
var labelCell = document.createElement('td');
labelCell.innerHTML = '<b>Link: ' + i + '</b>';
var valueCell = document.createElement('td');
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
var positionCell = document.getElementById('position_cell');
positionCell.firstChild.nodeValue = panorama.getPosition();
panorama2.setPosition(panorama.getPosition());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
var headingCell = document.getElementById('heading_cell');
var pitchCell = document.getElementById('pitch_cell');
headingCell.firstChild.nodeValue = panorama.getPov().heading;
panorama2.setPov(panorama.getPov());
pitchCell.firstChild.nodeValue = panorama.getPov().pitch;
});
}
</script>
</head>
<body onload="initialize()">
<div style="width:100%; height :100%; background-color:Lime;">
<div id="pano" style="width:50%; height:100%; background-color:Blue;">
</div>
<div id="pano1" style="width:50%; height:100%; background-color:Gray;">
</div>
</div>
<div id="panoInfo" style="width: 425px; height: 240 px;float:left; display: none;">
<table>
<tr>
<td><b>Position</b></td><td id="position_cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td><td id="heading_cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td><td id="pano_cell"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
</body>
</html>

How can I cause StreetView to display in a different area than that which displays MapView?
Street View is only available on the device as its own activity (from its own application) and therefore cannot be displayed alongside any of your own widgets.

On Android have a look at the sample Street View Panorama and Map available at https://developers.google.com/maps/documentation/android/code-samples. But i am not sure if it will also do for custom street views.