addImage: function() {
var success = function(data) {
$("#images")
.data("kendoMobileListView")
.prepend(["data:image/jpeg;base64," + data]);
};
var error = function() {
navigator.notification.alert("Unfortunately we could not add the image");
};
var config = {
destinationType: Camera.DestinationType.DATA_URL,
targetHeight: 400,
targetWidth: 400,
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(success, error, config);
}
11 Answers, 1 is accepted
Thank you for posting to the Telerik Developer Forums.
The code provided in the tutorial should be working. Could you please check on your side if there are any errors provided in the Developer Console (F12) of the AppBuilder simulator? For example, this could by any JavaScript errors that prevent the UI from rendering.
Here is how the code should look like after adding the code snippet:
(
function
() {
document.addEventListener(
"deviceready"
,
function
() {
window.listview = kendo.observable({
addImage:
function
() {
var
success =
function
(data) {
$(
"#images"
)
.data(
"kendoMobileListView"
)
.prepend([
"data:image/jpeg;base64,"
+ data]);
};
var
error =
function
() {
navigator.notification.alert(
"Unfortunately we could not add the image"
);
};
var
config = {
destinationType: Camera.DestinationType.DATA_URL,
targetHeight: 400,
targetWidth: 400,
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(success, error, config);
}
});
var
app =
new
kendo.mobile.Application(document.body, {
skin:
"flat"
});
$(
"#images"
).kendoMobileListView({
dataSource: [
"images/01.jpg"
,
"images/02.jpg"
,
"images/03.jpg"
,
"images/04.jpg"
,
"images/05.jpg"
,
"images/06.jpg"
,
"images/07.jpg"
],
template:
"<img src='#: data #'>"
});
navigator.splashscreen.hide();
}());
});
Also, you can switch between steps from the drop-down list in the tutorial pane and double-check them.
For your convenience, here is the template in the initial state and the completed app. You can clone the repositories by creating a new AppBuilder Hybrid Project and choose Clone. After that enter the address of the repository.
I hope that this helps. Let me know if you have further questions.
Regards,
Anton Dobrev
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Also thanks for the code you gave me, but it does not work! I have copied it to app.js file his lesson and ran the simulator for Android Phone. The screen is still white. If you don't believe me, check for yourself!
Thanks for reporting this.
Here is the correct one (I misplaced the brackets for the function invocation) in my previous reply.
The JavaScript:
(
function
() {
document.addEventListener(
"deviceready"
,
function
() {
window.listview = kendo.observable({
addImage:
function
() {
var
success =
function
(data) {
$(
"#images"
)
.data(
"kendoMobileListView"
)
.prepend([
"data:image/jpeg;base64,"
+ data]);
};
var
error =
function
() {
navigator.notification.alert(
"Unfortunately we could not add the image"
);
};
var
config = {
destinationType: Camera.DestinationType.DATA_URL,
targetHeight: 400,
targetWidth: 400,
encodingType: Camera.EncodingType.PNG
};
navigator.camera.getPicture(success, error, config);
}
});
var
app =
new
kendo.mobile.Application(document.body, {
skin:
"flat"
});
$(
"#images"
).kendoMobileListView({
dataSource: [
"images/01.jpg"
,
"images/02.jpg"
,
"images/03.jpg"
,
"images/04.jpg"
,
"images/05.jpg"
,
"images/06.jpg"
,
"images/07.jpg"
],
template:
"<img src='#: data #'>"
});
navigator.splashscreen.hide();
});
}());
The index.html:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
meta
charset
=
"utf-8"
>
<
link
href
=
"kendo/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
>
<
link
href
=
"styles/main.css"
rel
=
"stylesheet"
>
<
script
src
=
"cordova.js"
></
script
>
<
script
src
=
"kendo/js/jquery.min.js"
></
script
>
<
script
src
=
"kendo/js/kendo.mobile.min.js"
></
script
>
<
script
src
=
"scripts/app.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"view"
data-title
=
"Photos"
data-model
=
"listview"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
<
button
data-role
=
"button"
data-align
=
"right"
data-bind
=
"click: addImage"
>Add</
button
>
</
div
>
<
ul
id
=
"images"
></
ul
>
</
div
>
</
body
>
</
html
>
Let me know if this works.
Regards,
Anton Dobrev
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Thank you!
What am i doing wrong? =)
@Aiham
Thanks for posting your question and the solution that worked.
Indeed, the View declaration should include the ViewModel name (data-model="listview") that controls the view. In the tutorial this ViewModel is specified as window.listview in app.js.
Let me know if further questions arise.
Regards,
Anton Dobrev
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hello Anton
I was trying it today and found out the code in the tutorial still isn't changed to how it should be just to remember to you
Gr. Sander
Thanks for your input. I went through the tutorial and seems that the binding of the view to the window.listview object is explained in Step 4 - action d. And I quote:
Bind the view to the listview object by adding a data-model="listview" attribute to the <
div
data-role
=
"view"
> element (<
div
data-role
=
"view"
data-model
=
"listview"
>).
Could you please specify if this is the instruction in question? Or the error is in the snippet provided? I went again through the steps and completed them as expected. However, perhaps I am very used to the tutorial. That is why we would appreciate your fresh angle on it.
I look forward to your reply.
Regards,
Anton Dobrev
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hi Anton!
the code seems to be OK, however when I take a test picture the app does not show it.
I am using Andorid 4.4.4
regards,
Leonardo.
Could you please post the code (JS and HTML) you are having at the current stage? The tutorial is supposed to capture the image and show it in the list view. For your convenience, here is the completed app if you need to check your code against it.
Regards,
Anton Dobrev
Telerik
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.