Its code below that I use to show map in my page.
ts file
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
CameraPosition,
MarkerOptions,
Marker
} from '#ionic-native/google-maps';
export class MapPage {
constructor(private googleMaps: GoogleMaps){}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
map.one(GoogleMapsEvent.MAP_READY).then(() => {
console.log('Map is ready!');
});
}
}
Html code block
<div #map id="map" style="height:100%;"></div>
Since you're using Google Maps from Ionic Native, it won't work on the browser. Ionic Native/Cordova plugins work only in a simulator / real device only
Related
Hey guys I am trying out emberjs and want to integrate goJS to it. I did an npm install of the package https://www.npmjs.com/package/gojs
But I can't find any good documentation on this.. so if anyone can point out my error that will be great
import Component from "#glimmer/component";
import go from "gojs";
import { action } from "#ember/object";
import { tracked } from "#glimmer/tracking";
export default class GraphComponent extends Component {
#tracked iconName = "check-circle";
$ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv");
#action
changeIcon() {
if (this.iconName == "check-circle") {
this.iconName = "sync-alt";
} else {
this.iconName = "check-circle";
}
}
}
This is my ember component graph.js and In graph.hbs I have the corresponding div but some how nothing shows up on the screen. am I missing something ?
And would also appreciate any links to a goJS with emberJS docs.TY
I would recommend to utilize the didInsert render modifier.
With this you can do
<div id="myDiagramDiv" {{did-insert this.insertDiagram}}></div>
and then you can have an action that will run after the div was inserted to the DOM:
#action
insertDiagram() {
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "myDiagramDiv");
}
otherwise you will run this code before the <div> is avaliable.
Try to run sample ionic tabs app using Unit testing of Jasmine & Karma Getting Error Executed 0 of 0 ERROR (0.002 secs / 0 secs)) After execution of karma start unit-tests.conf.js
Testing controller of test case :
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) { // With the new view caching in Ionic, Controllers are only called // when they are recreated or on app start, instead of every page change. // To listen for when this page is active (for example, to refresh data), // listen for the $ionicView.enter event: // //$scope.$on('$ionicView.enter', function(e) { //});
$scope.chats = Chats.all(); $scope.remove = function(chat) {
Chats.remove(chat); }; })
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats,$state, $ionicPopup) { $scope.chat = Chats.get($stateParams.chatId); })
.controller('AccountCtrl', function($scope) { $scope.settings = {
enableFriends: true }; });
App controller :
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('ChatsCtrl', function($scope, Chats) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
};
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats,$state, $ionicPopup) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});
Please help how for solve this.
Thanks in Advance,
Lokesh Patel
My question is somewhat similar to followin unanswered question. (Not sure though)
Sitecore 8 SPEAK: Getting an Error When calling a Method in JS File
I am using Sitecore8
On my page there is a button and on its click event I want to call add() of custom datasource component.
Layout:
JS Code for the Page:
define(["sitecore"], function (Sitecore) {
var JsonListPage = Sitecore.Definitions.App.extend({
initialized: function () {
alert('Inside Json PageList Init');
},
loadData: function () {
alert('Button clicked');
app.add();
}
});
return JsonListPage;
});
JS Code for the custom datasource component:
define(["sitecore"], function (Sitecore) {
var model = Sitecore.Definitions.Models.ControlModel.extend({
initialize: function (options) {
this._super();
this.set("json", null);
alert('Inside Jsondatasource Init');
},
add: function (data) {
var json = this.get("json");
if (json === null)
json = new Array();
// this is done because array.push changes the array to an object which then do no work on the SPEAK listcontrol.
var newArray = new Array(json.length + 1);
for (var i = json.length - 1; i >= 0; i--)
newArray[i + 1] = json[i];
newArray[0] = data;
this.set("json", newArray);
}
});
var view = Sitecore.Definitions.Views.ControlView.extend({
initialize: function (options) {
this._super();
this.model.set("json", null);
}
});
Sitecore.Factories.createComponent("JsonDatasource", model, view, ".x-sitecore-jsondatasource");
});
.cshtml for Custom component:
#using Sitecore.Mvc
#using Sitecore.Mvc.Presentation
#using Sitecore.Web.UI.Controls.Common.UserControls
#model RenderingModel
#{
var userControl = Html.Sitecore().Controls().GetUserControl(Model.Rendering);
userControl.Requires.Script("client", "JsonDatasource.js");
userControl.Class = "x-sitecore-jsondatasource";
userControl.Attributes["type"] = "text/x-sitecore-jsondatasource";
userControl.DataBind = "Json: json";
var htmlAttributes = userControl.HtmlAttributes;
}
<div #htmlAttributes>
am here again
</div>
When the page loads:
It shows alert from Custom components Init
Then shows alert from host page's Init
On button click it shows the alert and after that gives error on "app".
There is some bit which I am missing.. any help would be appreciated.. Please let me know if you need anymore inputs.
Thanks in advance!
app is only available in debug mode so id avoid using that, use "this" instead.
From your code example it appears that you are calling app.Add(), There is no Add function on your pageCode, this is what your code is doing. Instead you need to access your components's Add Method.
Instead to access events within your component you want to call the function like this:
this.ComponentID.Add();
I have an example of a custom SPEAK component here you can refer to for how to create the component. https://github.com/sobek1985/MikeRobbinsSPEAKRichTextEditor
From the code is seems your creating a JSON datasource, there is an example by Anders here http://laubplusco.net/creating-simple-sitecore-speak-json-datasource/
There isn't much documentation insofar on web-ui testing in Dart. Two methods are available : a) run through Chrome's DumpRenderTree or b) a trick that consists of loading the app as is and running the test code on top of it. For trivial cases, the first option seems to be a bit tedious. So the latter option -- which in my case, doesn't work when it comes to load components.
With the following file structure:
test/
main_test.html
main_test.dart
web/
main.html
app.html
(all the files are listed in this gist)
The following test set hangs on the second step.
main() {
useShadowDom = true;
test('Inline element is initially present.', () {
var story = () => expect(query('#hdr'), isNotNull);
Timer.run(expectAsync0(story));
});
test('Component is loaded.', () {
var story = () => expect(query('#globe'), isNotNull);
Timer.run(expectAsync0(story));
});
}
How could the app component be loaded? More broadly, is there another method of testing web components?
For web-ui test you have to query the shadow dom or the xtag (this) of the webcomponent that you whant to test instead of the "classic" dom.
Based on TodoMVC code sample
With your code:
A working version of this test is :
main() {
useShadowDom = true;
test('Inline element is initially present.', () {
var story = () => expect(query('#hdr'), isNotNull);
Timer.run(expectAsync0(story));
});
test('Component is loaded.', () {
var root = query("span[is=x-app]").shadowRoot;
var story = () => expect(root.query('#globe'), isNotNull);
Timer.run(expectAsync0(story));
});
}
and a test version without expectAsync should be:
main() {
useShadowDom = true;
Timer.run(() {
test('Header element is initially present.', () {
var hdr = query('#hdr');
expect(hdr, isNotNull);
});
test('EchapApp component is loaded.', () {
var root = query("span[is=x-app]").shadowRoot;
var globe = root.query('#globe');
expect(globe, isNotNull);
});
});
}
and finaly a version without shadow dom :
main() {
//useShadowDom = true;
Timer.run(() {
test('Header element is initially present.', () {
var hdr = query('#hdr');
expect(hdr, isNotNull);
});
test('EchapApp component is loaded.', () {
var root = query("span[is=x-app]").xtag;
var globe = root.query('#globe');
expect(globe, isNotNull);
});
});
}
For me this 3 codes are 100% pass on Dartium with
Dart Editor version 0.5.20_r24275
Dart SDK version 0.5.20.4_r24275
You can try using the karma-dart runner: https://github.com/karma-runner/karma-dart
It even has a web components example.
library click_counter_test;
import 'package:unittest/unittest.dart';
import 'dart:html';
import '../web/out/xclickcounter.dart';
main() {
test('CounterComponent.increment', () {
var hello = new DivElement();
var component = new CounterComponent.forElement(hello);
expect(component.count, equals(0));
component.increment();
expect(component.count, equals(1));
});
}
Although it is not Dart specific, you can use Selenium for testing the UI. I believe some members of the Dart team have used Selenium as well to do UI testing.
I have a question on pagination module in Play Framework ( ver 1.x),
i have setup pagination to only show one object per page, and some other customized settings,
in the controller:
import java.util.ArrayList;
import java.util.List;
import play.modules.paginate.ValuePaginator;
import play.mvc.Controller;
public class Application extends Controller {
public static void index() {
List<String> strings = new ArrayList<String>();
strings.add("Kalle");
strings.add("Karin");
strings.add("Dixie");
strings.add("Edvin");
strings.add("Gustav");
strings.add("Axel");
int pos = 0;
for(String str : strings){
if(str.equals("Axel")){
pos += strings.indexOf(str);
break;
}
}
ValuePaginator namePaginator = new ValuePaginator(strings);
namePaginator.setPageSize(1);
namePaginator.setBoundaryControlsEnabled(false);
namePaginator.setPagesDisplayed(0);
renderArgs.put("pos", pos);
renderArgs.put("namePaginator", namePaginator);
render();
}
And in the template:
#{extends 'main.html' /}
#{set title:'Home' /}
*{#{welcome /}}*
${pos}
#{paginate.controls items:namePaginator /}
#{paginate.list items:namePaginator, as:'name'}
${name}
#{/paginate.list}
*{#{list items:strings[pos], as:'string'}
${string}
#{/list}}*
Now, as you might see in the last part of the template, there is a commented part, using the usual groovy list tag, and since it has an actual list i can force the list to start at a given position "pos", this is however not possible in the case of using the pagination.
In the case of the "items:namePaginator" it is merely a name placeholder for the underlying list and not really iterable, is there possibly a way of making the pagination start at a specified position within the wrapped list?
Thanks a lot !
I managed to solve the problem using JQuery instead of using Play Frameworks pagination module for this special case of pagination.
Principle goes like this, in the controllers action a normal Java ArrayList consisting of objects to my liking, this ArrayList is then converted to a jsonObject using the included Gson library (in Play Framework).
Gson gson = new Gson();
String jsonObj = gson.toJson(objects);
By using
renderArgs.put("jsonObj", jsonObj);
in the controller action to pass the json to the template, by the way my reason for doing all this in the first place was to be able to start "paginating" thru the objects clientside from any position in the list of objects, and to a hidden div in the template.
Next on i use JQuery to pick up the list,
$.parseJSON($('#myhiddenlist'));
And then again using JQuery to step back and forth (catching click events on anchor tags for prev and next) thru the list, and displaying the respective object per page.
Another upside of using JQuery (or javascript for that matter), is that i don't have to worry about page reload, as is the case with Play Frameworks pagination module.
JQuery-part
$(function(){
var ourlist = $('#ourlist').text();
var jsonOur = $.parseJSON(ourlist);
var length = jsonOur.length;
var pos = parseInt($('#ourpos').text());
var showList = $('#showlist');
showList.append(jsonOur[pos].name);
initControls();
function hasPrev(){
if(pos > 0){
return true;
}else{
return false;
}
}
function hasNext(){
if(pos < (length - 1)){
return true;
}else{
return false;
}
}
function showItem(pos){
showList.empty();
showList.append(jsonOur[pos].name);
}
$('.previous a').click(function(e){
if(hasPrev()){pos--;}
if(hasPrev()){
$('li.next').removeClass('off');
$('li.next a').css('color', 'blue');
}else{
$('li.previous').addClass('off');
$('li.previous.off a').css('color', 'grey');
}
showItem(pos);
});
$('.next a').click(function(e){
if(hasNext()){pos++;}
if(hasNext()){
$('li.previous').removeClass('off');
$('li.previous a').css('color', 'blue');
}else{
$('li.next').addClass('off');
$('li.next.off a').css('color', 'grey');
}
showItem(pos);
});
function initControls(){
if(hasNext()){
$('li.previous').removeClass('off');
}else{
$('li.next').addClass('off');
$('li.next.off a').css('color', 'grey');
}
if(hasPrev()){
$('li.next').removeClass('off');
}else{
$('li.previous').addClass('off');
$('li.previous.off a').css('color', 'grey');
}
}
//for testing only
function showPos(pos){
console.log(pos);
}
});
HTML part
#{extends 'main.html' /}
#{set title:'Home' /}
#{content.rightside Pos: pos /}<!-- loads the side content -->
<div id="ourlist" class="hide">${jsonOurList}</div>
<div id="ourpos" class="hide">${pos}</div>
<ul class="pagination">
<li class="previous">Prev</li>
<li class="next">Next</li>
</ul>
<div id="showlist"></div>
CSS part
ul.pagination li {
display: inline;
}
ul.pagination li a {
outline: none;
text-decoration: none;
}
li.previous.off a,
li.next.off a {
color: grey;
cursor: default;
}
li.previous a,
li.next a {
color: blue;
cursor: pointer;
}
.hide {
display: none;
}
Ok, so this is not really a solution for tweaking the Play module, but a more pragmatic approach, using JQuery.
Hope this might help anyone having a similar problem.
//Kalle