I am trying to show Loading animation using Ionic2 for long service progress report:
this.loading = this.loadingCtrl.create({
content: 'Please wait...',
spinner: 'ripple' // <<------ Is that correct?
});
this.loading.present();
The result is a text box without any spinner.
This is 09/22/2016 Ionic2 using latest beta (11) and I cannot actually find any example like above anywhere. Could this be a future feature documented but not yet implemented?
I am talking about the Ionic2 LoadingController documentations here
Is ripple a custom spinner? Otherwise, you can check the by default available spinners here:
ios
ios-small
bubbles
circles
crescent
dots
The spinner name should be passed in the spinner property, and any
optional HTML can be passed in the content property. If you do not
pass a value to spinner the loading indicator will use the spinner
specified by the mode. To set the spinner name across the app, set the
value of loadingSpinner in your app's config. To hide the spinner, set
loadingSpinner: 'hide' in the app's config or pass spinner: 'hide' in
the loading options
So another option, would be to just use the specified spynner according to the mode like this:
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loading.present();
Thing is it might be that the Ionic team just put a way of extending the Loading control using a custom spinner, meaning that you have to put a SVG file name to the property.
It just looks obvious that you can put there one of the built-in spinner names.
Then again, it is reasonable to keep the app's design straight with the same spinner in all loaders. Guess that could be more bolded in the docs...
Related
I have an attribute directive that adds hidden input after host element and displays it when clicked on host element, it also hide it when input lose focus (blur event). It is basically used to edit values of some models without need to create forms/inputs for every single field.
Code: Plunker
I have a problem with 1 test case:
click on host element should clear inline display style
blur should set display style to none
it('should display input when clicked and hide on blur', () => {
i.click();
fixture.detectChanges();
expect(input.style.display).not.toBe('none');
input.blur();
fixture.detectChanges();
expect(input.style.display).toBe('none');
});
While running karma locally this test sometimes passes and sometimes fails, it fills like .blur() have some async behavior. I tried with fakeAsync and tick but with no luck. Maybe I am doing it in a completely wrong way.
I try to atomize my tests for a given UI5 application. Therefore I created a folder under WebContent called test-resources. In that folder I placed two files for first tests.
First file: experimental.qunit.html that contains some first working unit test code.
Second file: experimental.opa.html which contains an example code from the documentation.
The testing part looks like this:
opaTest("Should find a Button with a matching property", function(Given, When, Then) {
// Act
Given.iStartMyAppInAFrame("index.html");
When.waitFor({
viewName : "view.master.Master",
controlType : "sap.m.Button",
matchers : new sap.ui.test.matchers.PropertyStrictEquals({
name : "icon",
value : "sap-icon://show"
}),
success : function (aButtons) {
debugger;
ok(true, "Found the button: " + aButtons[0]);
},
errorMessage : "No button with property icon equal to sap-icon://show"
});
Then.waitFor({
// not implemented
});
Then.iTeardownMyAppFrame();
});
First of all I assume that I can search a button also with icon property.
Second assumption is, that viewName is the name and folder of the view file? In the app, the view is the master view of a split app.
I start the test like this:
* In Eclipse mark the project and choose run as "Web App Preview"
* Than of course I see my normal app
* I replace the index.html part with test-resoruces/experimental.opa.html
* Now I can see the test and my app is shown in an iframe
But:
1. The button selection is not working, anyone an idea what's wrong?
2. If I change the html code I have to restart the "Web App Preview" all the time, a reload seems not working. Is there a "better" way to run the tests after updating test code?
The app itself is defined as a component, and the main view is a SplitApp xml file that contains nothing than:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<SplitApp id="idAppControl" />
</mvc:View>
Meanwhile I detect the problem and fixed it. My syntax of PropertyStrictEquals was wrong.
The restart problem (of Web App Preview) still exists.
I also detected a helpful example:
https://openui5beta.hana.ondemand.com/test-resources/sap/m/demokit/cart/test/BuyProductJourney.qunit.html
It is mentioned here:
http://scn.sap.com/community/developer-center/front-end/blog/2014/10/16/javascript-based-integration-tests-for-sapui5-apps-with-opa
(Have a look at the testing Tutorial in the developper guide)
First of all, in your example you are mixing the levels of abstraction. Directly in your jurney (the order of steps for your tests) there should not be any code like waitFor(), because that is page specific code. So you should create pages, on where your actual arrangements, actions and assertions take place. In the jurney you only call them. like this (source):
opaTest("Should see the post page when a user clicks on an entry of the list", function (Given, When, Then) {
// Arrangements
Given.iStartMyApp();
//Actions
When.onTheWorklistPage.iPressOnTheItemWithTheID("PostID_15");
// Assertions
Then.onThePostPage.theTitleShouldDisplayTheName("Jeans");
});
Those objects onTheWorklistPage and onThePostPage are your actual test steps, wher you search for objects and trigger a click or check the displayed text you create them like that:
Opa5.createPageObjects({
onTheWorklistPage: {
baseClass: Common,
actions: {...},
assertions: {...}
}
})
Now in those actions and assertions you put your waitFor() to get elements and do something with them. This function is described in the API
PS: Your question is very unstructured and I am not shure if I answered your question, if not, please comment.
I have a simple cycle2 slideshow with a pager. The slideshow proceeds automatically (ie. with set speed and timeout). What I want to achieve is, that once the user clicks a link in the pager, the slideshow becomes "manual" (the automatic transitioning stops) and from that point it is controllable solely by the pager.
The cycle2 API documentation says that there is the 'continueAuto' option which should serve the purpose. So I made a handler to the cycle-pager-activated event like this:
$('#fp_slideshow').on('cycle-pager-activated', function(event, opts ) {
$('#fp_slideshow').cycle({continueAuto: false});
});
The event gets called as I expect (upon clicking a link in the pager), but calling cycle({continueAuto: false}) does nothing and the slideshow goes on indefinetely.
What am I doing wrong?
The pause command might work better for you in this instance. I tried using the cycle-pager-activated event but couldn't get it to work consistently so instead attached a click handler directly to the pager links. Here's the JavaScript:
var $fp_slideshow = $('#fp_slideshow');
$fp_slideshow.cycle({
pager: '#fp_slideshow_pager',
pagerTemplate: '<li>Slide {{slideNum}}</li>'
});
$('a', '#fp_slideshow_pager').on('click', function() {
$fp_slideshow.cycle('pause');
});
And here's a fiddle: http://jsfiddle.net/N43KH/1/
I don't know, if you have seen this demo-app yet: http://www.johnpapa.net/hottowel/ but once you start it, you see a really nice loading screen at the beginning like you would in any bigger desktop application/game.
So I haven't had the chance to go through the code properly myself, but I have started recently with Emberjs and I have the feeling that loading all the js-code for the whole SPA that I am building could be in the seconds area.
My question now, how would such a loading screen be possible with emberjs?
Or would there be a better way to go about that? (I somehow don't think requirejs would be a solution, though I could be wrong)
I'd like to contribute an alternate answer to this. By default, ready fires when the DOM is ready, and it may take some time to render your application after that, resulting in (possibly) a few seconds of blank page. For my application, using didInsertElement on ApplicationView was the best solution.
Example:
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
$("#loading").remove();
}
});
Please note that Ember also offers the ability to defer application readiness, see the code for more information.
Maybe it's my lazy way of doing things, but I just solved this by adding a no-ember class to my div.loading and in my CSS I added
.ember-application .no-ember {
display: none;
}
(Ember automatically adds the ember-application to the body.)
This way, you could also add CSS3 animations to transition away from the loading screen.
you can do something like this:
App = Ember.Application.create({
ready: function () {
$("#loader").remove();
}
});
in your body you set something like this
<img src="img/loading.gif" id="loader">
Alternative to using didInsertElement, the willInsertElement is a better event to perform the loading div removal since it will be removed from the body tag "before" the application template is rendered inside it and eliminates the "flicker" effect ( unless using absolute positioning of the loading div ).
Example:
App.ApplicationView = Ember.View.extend({
willInsertElement: function() {
$("#loading").remove();
}
});
Ember has an automagic loading view logic.
By simply setting App.LoadingView and its template, Ember will show that view while application loads.
This feature is likely to change in next release, in favor of a nested loading route feature which looks promising. See below:
Draft documentation
Feature proposal and discussion
In Ember 2.0 there is no more View layer, but you can do the same with initializers:
App.initializer({
name: 'splash-screen-remover',
initialize: function(application) {
$('#loading').remove();
},
});
General Problem
Problems can arise, when one trys to integrate DOM Manipulating 3rd Party libraries. In this particular case, a jQuery Lightbox plugin caused problems.
Original Question
Currently i am trying to integrate the following Lightboxplugin into an Ember View: http://codecanyon.net/item/jquery-lightbox-evolution/115655
This is my current code for the View:
App.LightboxView = Ember.View.extend({
templateName : 'whatever',
isVisible : false,
willInsertElement : function(){
var that = this;
$.lightbox(this.$(),{
width : 600,
height : 850,
onOpen : function(){
that.$().fadeIn(400);
that.set("isVisible", true);
},
});
},
});
This approach is working quite fine as it is starting the plugin in the moment the View is inserted into the DOM and everything is displayed fine. Ember seems to insert the resulting html of the View into the DOM and the lightbox plugin fetches the DOM Element and places it into the place where it is needed for the lightbox to work.
But this is where the problems start. Actions do not work anymore in my view. I have some {{action}} helpers in my view and none of them works (they are working when i don't use the lightbox). I assume this is because the plugin makes manipulations to the DOM, but Ember wants to be the only one to manipulate the DOM.
Can anyone offer some guidance here? This is the first time i am developing/utilizing a lightbox, so this could cause additional problems :-)
This is the solution i found with help of sly7_7:
What caused the problem?
As outlined in my question i wrote a new View that should get displayed as a Lightbox with the the help opf a Lightbox plugin. That meant the DOMElement hat was inserted by EmberJS would be moved inside of the DOM by the plugin. The problem was that my Application was declared this way:
App = Ember.Application.create({
rootElement : "#ember-application-root",
});
And the corresponding HTML was:
<html>
<body>
<div id="ember-application-root" />
</body>
</html>
The root of the application just referred to a part of the DOM. The Lightbox plugin inserted its content at the end of the DOM, which meant that the Ember View was pulled outside of div for the Ember App and therefore lost its event listeners.
The solution:
Make the body element the root of the Ember Application. As sly7_7 outlined in his comment, this is the default case for the Ember Application.
App = Ember.Application.create({
// rootElement : "#ember-application-root", - defaults to body now
});