I've got an app I'm building in Sencha Touch 2 then packaging into android. What I want to include is a "defines.js" file which contains all my variables. (This app is to be altered for different people so this makes things easier to change)
I've got it to work fine on the browser by adding the script link to the index.html file, but when I package it up and run it on the android emulator it can't find the variables.
Any ideas? Ask if you need more information.
Currently the file resides under "resources/defines.js"
Edit:
I want to include a file containing variables for use in the app (titles etc)
It is called "defines.js".
I have linked it in the index.html using the following script tag:
<script type="text/javascript" src="resources/defines.js"></script>
I have also added into the to js section of the app.json:
"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
},
{
"path": "resources/defines.js"
}
],
It works in a browser but not when I created a native android app.
You can try a more 'sencha' way.
First, remove the:
<script type="text/javascript" src="resources/defines.js"></script>
and also remove the entry on app.json:
{
"path": "resources/defines.js"
}
Then, in your app.js add the resources path for the loader:
Ext.Loader.setPath({
....
'Resources': 'resources'
});
Require the class:
Ext.application({
...
requires: [
'Resources.defines',
...
]
....
});
Define the class in the file resources/defines.js:
Ext.define('MyApp.resources.defines', {
alternateClassName: 'Defines',
singleton: true,
BASEURL: 'localhost/myapp',
APPVERSION: '0.1',
});
Tehn, you can access the object properties by:
Defines.BASEURL
Defines.APPVERSION
Hope it helps-
How are you creating packaging the android app?
Using Sencha native packaging or the cordova packaging over Sencha touch
Related
I use the typescript+webpack template from electron forge.
For loading a single preload script with webpack, there is a constant called MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY that can be set from the package.json, for example like so: "preload": { "js": "myPreload.ts" }. This constant is then somehow resolved from within the Electron Forge - Webpack Plugin depending on whether the application is run in debug or release mode.
I have this set up, and it works fine if you have single or multiple windows that share the same preload.ts script. However, I can not figure out how I could specify multiple different preload scripts for other windows.
How can I use multiple different preload.ts scripts (for different windows) with the electron forge webpack plugin?
Actually it is pretty simple to add multiple scripts, but as I have not seen this documented anywhere I will answer my own question here. The name field of the config is important, because the name in uppercase will be the prefix of the webpack constant, (e.g. "name": "my_name" will lead to the constant beeing called MY_NAME_PRELOAD_WEBPACK_ENTRY.
If you now want to add multiple preload scripts you will have to add multiple entry points to which you can then refer by their names. Unfortunately each entry point also requires the html and js fields, but if you do not need those you can create empty files with the correct extension and point to these).
Here is an example to better illustrate these points:
"config": {
"forge": {
"plugins": [
{
"name": "#electron-forge/plugin-webpack",
"config": {
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"name": "main_window",
"html": "./src/main_window/index.html",
"js": "./src/main_window/index.js",
"preload": {
"js": "./src/main_window/preload.js"
}
},
{
"name": "extra_preload_main_window",
"html": "./src/empty.html",
"js": "./src/empty.js",
"preload": {
"js": "./src/main_window/preload2.js"
}
},
{
"name": "second_window",
"html": "./src/second_window/index.html",
"js": "./src/second_window/index.js",
"preload": {
"js": "./src/second_window/preload.js"
}
}
]
}
}
}
]
}
}
Which will then give you these (relevant) constants:
// Path to renderer of main window.
declare MAIN_WINDOW_WEBPACK_ENTRY;
// Path to first preload script (of main window).
declare MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;
// Path to the second preload script (of the main window).
declare EXTRA_PRELOAD_MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY;
// Preload and renderer scripts for other window.
declare SECOND_WINDOW_WEBPACK_ENTRY;
declare SECOND_WINDOW_PRELOAD_WEBPACK_ENTRY;
Technically you will of course also get
declare EXTRA_PRELOAD_MAIN_WINDOW_WEBPACK_ENTRY;
but it points to an empty file / webpack output.
I've used Stencil to create a custom web component.
I've set a bunch of CSS variables in /src/global/global.scss:
E.g.:
:root {
--font-family: 'Roboto Condensed';
--font-size: 1.75rem;
... etc ...
}
My stencil.config.ts looks like this:
export const config: Config = {
namespace: 'my-component',
globalStyle: 'src/global/global.scss',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
},
{
type: 'dist-custom-elements-bundle',
}
],
};
If I publish the component to NPM, then install it into my Angular app, it works, except that it doesn't recognize any of the variables defined in the global CSS file.
In my Angular project - the file is here, and does contain the variables:
/node_modules/my-component/dist/my-component/my-component.css
It's just that my Angular project doesn't seem to be aware of that file.
I've read elsewhere that I should include this line in the index.html file of my Angular project:
<link rel="stylesheet" href="/dist/my-component/my-component.css">
However, I've tried that, by when I run ng serve, the browser doesn't find:
http://localhost:4200/dist/my-component/my-component.css
I'm guessing that I'm missing some configuration setting that tells Angular to copy the CSS file from /node_modules/my-component/dist/my-component/my-component.css to dist/my-component/my-component.css, but I don't know how or where to do that.
in angular.json:
"styles": [
"./node_modules/my-component/dist/my-component/my-component.css",
"src/styles.scss"
],
I am using ExtJS 6.2
I have the following line in my app.json:
"requires": [
"font-awesome",
"ux"
],
I am trying to create a simple text view using LiveSearchGrid.js, so I have the following in my app_name=md_registry folder md_registry/app/view/main/ListTest.js:
Ext.define('md_registry.view.main.ListTest', {
extend: 'Ext.ux.LiveSearchGridPanel',
//xtype: 'row-expander-grid',
//store: 'Patients',
xtype: 'mainlisttest',
requires: [
'md_registry.store.Patients',
'Ext.ux.LiveSearchGridPanel'
],
When I try doing a sencha app build, I get the following compiler error:
Failed to resolve dependency Ext.ux.LiveSearchGridPanel for file md_registry.view.main.ListTest
I have verified that this file exists in the path:
md_registry/ext/packages/ux/classic/src
From everything I've read, specifying the above requires in my app.json should be sufficient, but it's obviously not.
You are right now creating a universal app, but not using the correct folders for your code. You should definitely look into either creating a classic-only app, or a universal app with correct folder structure. If you want to make a universal app, but not now, you can compile only classic.
The solution was completely unobvious:
Had to comment this out from the "builds" profile in app.json:
"modern": {
"toolkit": "modern",
"theme": "theme-triton",
"sass": {
"generated": {
"var": "modern/sass/save.scss",
"src": "modern/sass/save"
}
}
}
I hope this helps someone!
I have two projects under a solution, one is my main web project, say MyProject and the other serves for testing purposes, say MyProject.Tests.
Solution
MyProject
MyProject.Tests
I want to have my JavaScript headless tests running to the second one.
On the first project, all the javascript files are under the Scripts directory, like so:
Scripts/
Common.js
Libs/
jquery/
jquery.js
requirejs/
require.js
At the test project, I have my chutzpah.json file on root.
MyProject.Tests
chutzpah.json
Tests/
Specs/
spec.js
The file has this configuration:
{
"Framework": "jasmine",
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"Tests": [ { "Path": "Tests/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": ["*Common.js"],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
But when I try to run the spec file I get an error.
Spec file:
define(["jquery"], function ($) {
//code here. Doesn't matter, the error is because of the jquery module
});
The error, is this:
Error: Error opening C:/Users/g.dyrrahitis/Documents/Visual Studio 2013/Projects/MySolution/MyProject.Tests/Scripts/Libs/jquery/jquery.js: The system cannot find the path specified.
The thing is that chutzpah tries to find my jquery module at the test project rather the main project, where it resides.
Why I'm getting this kind of behavior and how can I solve this please? I've been trying for hours to tackle this with no luck so far.
Note
*The names MySolution, MyProject, MyProject.Tests are used for clarity, rather than using the real names.
I've found it, the chutzpah file hadn't the right configuration options (as expected) for the test harness directory.
I needed the TestHarnessDirectory and TestHarnessLocationMode options to explicitly instruct it to look at my main project directory.
This now is the correct one:
{
"TestHarnessDirectory": "../MyProject",
"TestHarnessLocationMode": "Custom",
"TestHarnessReferenceMode": "AMD",
"Framework": "jasmine",
"Tests": [ { "Path": "JavaScript/Specs" } ],
"AMDBasePath": "../MyProject/Scripts",
"CodeCoverageExcludes": [ "*Common.js" ],
"References": [
{ "Path": "../MyProject/Scripts/Libs/requirejs/require.js" },
{ "Path": "../MyProject/Scripts/Common.js" }
]
}
Just needed to tell chutzpah that the harness location mode is custom, in order to provide a directory for it, which is the root of my main project.
Beware for the right configuration paths then, you may end up struggling for hours like me to find a solution. And read the documentation thoroughly (which I hadn't done).
I'm building multiple applications using Durandal JS. All those applications are located on the same server under the same document root and share some common code. For example they all use the same model & view for login.
How can i reuse/share the login model & view in all those applications without just copy & pasting the files to the projects?
I already tried something with the following folder structure:
ProjectsDir/Project1/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/Project2/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/ProjectsBase/app/models/Login.js
/views/Login.html
This way it would be possible to reference the same login model & view in my ProjectsBase from all other projects by setting the correct route to it in the respective shell.js. This route could look something like this:
router.map([
{
url: 'Login',
moduleId: '../../ProjectsBase/app/models/Login',
name:'Login',
visible: true
},
{
url: 'Main',
moduleId: 'models/Main',
name:'Main',
visible: true
}
]);
This works as expected during debugging but building the production version with the durandal optimizer unfortunately doesn't work.
Actually building does work (it produces the main-built.js just fine) but when i launch the site with the production file referenced i get the following error:
Uncaught Error: undefined missing durandal/../../../MPBase/durandal-app/models/Login
I'd really appreciate any ideas on how I could make the built production file work with the setup I described above.
Of course I'm also open for other ideas on how to make models & views reusable/sharable between multiple projects.
Thanks
With some help from Durandals Google Group I found a solution.
It's not possible to use the provided optimizer.exe but it's quite easy to create a custom r.js config which can handle the setup I described in the question:
First of all I ran the optimizer.exe which created a basic config file (app.build.js) that i used as a starting point.
This config file automatically included all necessary files from the project itself (e.g. Project1).
The only things that are missing in this config file are the references to my shared code (the login files from the ProjectsBase directory). Therefore I added them manually along with a new path.
Custom app.build.js (3 changes highlighted with a comment, the rest is how it was built from the optizimer.exe):
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text",
"projectsbase": "../../ProjectsBase/" // New path to folder with shared files
},
"baseUrl": "ProjectsDir\\Project1\\app",
"mainConfigFile": "ProjectsDir\\Project1\\app\\main.js",
"include": [
"main",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"projectsbase/app/models/Login", // Include for login model
"models/Main",
"models/Shell",
"text!projectsbase/app/views/Login.html", // Include for login view
"text!views/Main.html",
"text!views/Shell.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "ProjectsDir\\Project1\\app\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Now I only had to update my Shell.js to use the correct routes to the Login model & view by also adding a path to requirejs and using it correctly when setting the routes:
Add path at the very beginning of Shell.js:
requirejs.config({
paths: {
'projectsbase': '../../ProjectsBase/'
}
});
Set correct routes in activate method of Shell.js:
router.map([
{ url: 'Login', moduleId: 'projectsbase/app/models/Login', name:'Login', visible: true },
{ url: 'Main', moduleId: 'models/Main', name:'Main', visible: true }
]);
Now i can build my main-built.js which bundles & minifies all relevant files by opening the node js command line, browsing to the directory where the r.js config file is and create the build (the main-built.js) with the following command:
node r.js -o app.build.js
This way everything is included correctly when I'm working with the debug files and it's also working with the build main-built.js which also includes my shared files from the ProjectsBase.