For a very special situation I want to store Dojo classes (i.e. the sources) that I load from remote in the localStorage to have access to them in offline situations (we are talking about a hybrid mobile app). I got everything running but dojo.eval won't let me create the class from a string like this
var data = 'define(["dojo/_base/kernel",...'; // class definition as string
dojo.eval(data);
Any idea how to accomplish this?
If you need to have your app run offline, store the resources (css, images, js) in the app manifest. The manifest file looks like the following.
{
"name": "My App",
"description": "My elevator pitch goes here",
"launch_path": "/",
"icons": {
"128": "/img/icon-128.png"
},
"developer": {
"name": "Your name or organization",
"url": "http://your-homepage-here.org"
},
"default_locale": "en"
}
Your app could require hundreds of modules so for performance and manageability of the manifest, you'll want to create a Dojo build which will reduce the number of js files to one or maybe a couple depending on how you create the build.
I finally managed what I was trying to accomplish. However, I found no way to use the localStorage and to load the classes from a string.
The trick is to load the Dojo class source file from remote using XHR, store it using the Cordova File APIs, getting an URL to the stored file and using this URL in the require().
Does what I want and gives me full control over the cached files.
Related
I'm not sure what to call the files, but the context is that I have a bunch of data that I would like to ship with my app. I need to find a way to store this data so that I can load it into the database. (Or better yet, just ship it with a prefilled db)
Here are the solutions that I've seen:
Storing the data in code as a json blob I can't do this because I have quite a lot of data, a few MB or so and I would like to be able to compress it.
Load a file from the public folder
I think this is a create-react-app specific API and I did not use that. But if there's a way to get a public or static folder to read arbitrary files from, that'll be great.
Read a file using react-native-fs
I'm not sure where to put the file in my application so that I can access it. This seems to give me an empty folder to write files to. I don't know where in my app directory I can put the files if I want it to be read by this.
I would also like to have these files compressed, and only loaded when I need them to be. I think using a require('path/to/file.json') loads the file every time I use the app.
How would I go about reading a file from my app?
I'm coding for android if that matters and the database I'm using is watermelondb.
You need to use react-native-asset to put files to your project and access them with require keyword.
Example for file with path ./assets/files/some-file.mp3:
Add or modify react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
dependencies: {
},
assets: [
'./assets/files'
],
};
Run npx react-native-asset
Use the file:
const file = require('./assets/files/some-file.mp3')
I have got two components in vue, one with lightbox for images and one for playing audio. I got relative links to the assets but either the images or the audio is being displayed and played. First I thought it was an issue with the component itself but since it doesnt work on either of these it might be something else.
If I provide an absolut url it works however fine for some reason
This doesnt work either when I build the application or locally:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "../assets/music/myfile.mp3",
// LITEBOX
images: [
".../assets/img/myimage.jpg",
This works fine:
export default {
components: {
VueLitebox,
"vue-audio": VueAudio
},
data() {
return {
// AUDIO
file1: "http://mypage.com/music/myfile.mp3",
// LITEBOX
images: [
"http://mypage.com/img/myimage.jpg",
I can of course upload the images and music separate and make it work but it feels a bit inconvenient.
What can be wrong?
UPDATE:
Thanks for the answers. Now I got two methods. And both actually works.
One is to put all my assets in the public folder. That solved it with a link like:
"/assets/img/myimage.jpg",
The other way is to using require.
require("../assets/img/myimage.jpg"),
Both works but is there a prefered way?
You should use require when using assets
file1: require("../assets/music/myfile.mp3")
Without require webpack won’t know that you want to bundle that asset and your path will remain unchanged. Actually webpack knows how to handle this kind of files thru the use of plugins and not out of the box.
Regarding the fact that it works with absolute path and not relative ones.
Your relative path is valid in the local file system on your dev server. When deploying the app you are not running in the local file system, but on the web. Even though relative paths are resolved using a similar algorithm, your results will depend on the URL where the component is used and not on the path of the vue file.
For example if the component is rendered on a URL of the form
https://example.com/list/
The relative path would resolve to https://example.com/assets which is probably what you want. But on the following URL
https://example.com/list/1/
Will resolve to https://example.com/list/assest which isn’t what you’d expect.
Webpack takes care of this problems (to some degree, you need to be sure that you don’t mess up the base tag).
So far I haven't been able to find any information on how to create project documentsets on my Sharepoint environment using the Graph API. I've tried both Sharepoint's 'Create item' and OneDrive's 'Create Folder'. The Sharepoint API says:
"Files and folders should only be added to a DocumentLibrary via the OneDrive API"
The OneDrive API says:
"Either 'folder' or 'file' must be provided, but not both."
As you can tell from the responses, it seems limited to only having the options to create either a folder or a file. Is this correct? Is there any way to mutate a folder to a document set using a different API call?
I have tried to add the content type ID to the different request bodies, in every case providing no further solution.
Hope someone here knows a possible solution and can help me. Thanks!
I've dealt with the same issue today. I needed to create a Document Set in the root level of a Document Library after some business logic.
Here's how I've achieved to do so:
1- Get the document library's Drive Id:
GET https://graph.microsoft.com/v1.0/sites/${siteId}/lists/${listId}?$expand=drive
2- Create the folder:
POST https://graph.microsoft.com/v1.0/drives/${library.drive.id}/root/children
Remember to set the body as:
{
"name": ${nameOfTheFolder},
"folder": {},
}
3- Get the folder's SharePoint item id:
GET https://graph.microsoft.com/v1.0/sites/${siteId}/drives/${library.drive.id}/items/${folder.id}?expand=sharepointids
4- Update the item in the Document Library so that it updates to the desired Document Set:
PATCH https://graph.microsoft.com/v1.0/sites/${siteId}/lists/${listId}/items/${sharepointIds.listItemId}
Don't forget to set the body to:
{
"contentType": {
"id": "content-type-id-of-the-document-set"
},
"fields": {
//whatever fields you want to set
}
}
Hope it helps
I have been looking into this myself aswell and walked into the same wall.
At the moment, unfortunately, there is no combined method.
You can use them both to combine it to your own documentset.
Kind regards,
R Schouten
Follow up to this question:
apply downloaded CSS on windows 8 metroUI app
So, yes, Windows says "for security reasons, you cannot navigate to HTML you have downloaded to this location and you cannot run any executable or potentially executable code, such as script or CSS. It is intended for media such as images or videos and the like."
But I really, really want to use that css file from my local storage. Shouldn't I be able to use the execUnsafeLocalFunction method to bypass this restriction like this?:
MSApp.execUnsafeLocalFunction(function () {
el["href"] = "ms-appdata:///local/style.css"
});
It still throws "An app can’t load remote web content in the local context."
I also tried just reading the file with localFolder.getFileAsync and readText, but nothing seems to help. Is there really no way to work around this?
I think I found a way to get the CSS to load.
I tested the code below by adding a css file that sets the body background to red in the local storage folder.
The code reads the contents of the file, creates a style tag in the head and adds the content of the css file to the style.
var url = new Windows.Foundation.Uri(filename);
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(url).then(function (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function(text) {
var style = document.createElement("style");
style.innerText = text;
document.getElementsByTagName("head")[0].appendChild(style);
});
});
I'm using Worklight Studio 6.0.0.20130917-1749 in 64 bit Eclipse Juno on OSX Lion.
I'm finding that if I put a call to WL.Client.invokeProcedure(), or even WL.Logger.debug() in a jQueryMobile (1.3.1) pagebeforeshow handler, it causes the design portion of the rich page editor to hang when I try to switch to that page.
$("#myPage").on("pagebeforeshow", function(){WL.Logger.debug("loading myPage...");});
If I double click on myPage in the Mobile Navigation view, the page doesn't display, and I am unable to switch to any other page in the app, or do anything with he design pane. The refresh button doesn't fix it (it just tries to load the same page and I am right back where I started) The only thing I can do is to close the html file and re-open it.
This seems to be caused by a missing definition for WL.StaticAppProperites in the code that is run in the RPE. If I look at the html source of the common resources for the app under chrome I see a definition:
<script>
// Define WL namespace.
var WL = WL ? WL : {};
/**
* WLClient configuration variables.
* Values are injected by the deployer that packs the gadget.
*/
WL.StaticAppProps = {
"APP_DISPLAY_NAME": "MyApp",
"APP_ID": "MyApp",
"APP_SERVICES_URL": "\/MyApp\/apps\/services\/",
"APP_VERSION": "1.0",
"ENVIRONMENT": "preview",
"LOGIN_DISPLAY_TYPE": "popup",
"LOGIN_POPUP_HEIGHT": 610,
"LOGIN_POPUP_WIDTH": 920,
"PREVIEW_ENVIRONMENT": "common",
"WORKLIGHT_PLATFORM_VERSION": "6.0.0",
"WORKLIGHT_ROOT_URL": "\/MyApp\/apps\/services\/api\/MyApp\/common\/"
};</script>
There are similar definitions in the generated HTML for the various environments. But looking in weinre, I see that there is no corresponding script injected into the html that is displayed in the RPE. The lack of a definition for WL.StaticAppProperties is causing the code in worklight.js to fail just before the definition of WL.Utils.
Is there any way for me to add WL.StaticAppProps = {} so that this would come before the code that gets injected to load worklight.js?
Is there any other workaround for this problem?
The editor is defining that WL.StaticAppProps property under-the-covers but it is in an additional injected .js file, not in an inline script block like in the running page. It's possible that the location of that script in the editor's markup is incorrect and we will investigate that.
However there's a larger issue here, which is that a page in the editor is not able to make calls to the Worklight server. Because the editor always needs to operate independently of whether a preview server has been published and started, it uses its own mechanism to load web resources into the Design pane. Therefore the origin server is not the Worklight development server and attempted calls to server-side logic will go unanswered. I believe this is more likely the reason for the hang scenarios you see.
A general recommendation is to use the editor to construct the page's UI markup and then start to wire in service calls after the UI is generally complete. At that point previewing the application should likely shift over to the Mobile Browser Simulator and/or native device testing. In order to continue to do incremental UI work in the editor you can also add some temporary conditional logic to avoid (or mock-up) server calls while doing design work, such as:
var designMode = true; // switch to false for real server preview
if(!designMode) {
// your service invocations here
}