How do I copy ExtJS 5 examples with sencha cmd? - extjs

I want to make a web app that is very similar to the extj5 portal example: http://dev.sencha.com/extjs/5.0.0/examples/portal/index.html
I would like to copy it to a different directory and start coding.
Here are the steps I am taking:
1) Copy portal directory to my working directory.
2) Cd into portal
3) Run the following on the command line.
sencha app upgrade ext-5.0.0 // Ext 5 and this app should be in the same directory
But when I do so, I get:
$ sencha app upgrade ext-5.0.0
Sencha Cmd v5.0.2.270
[WRN] Did not locate framework package
[WRN] Failed to resolve package ext-theme-neptune
[WRN] Failed to resolve package sencha-charts
[ERR] Theme "ext-theme-neptune" not found
[ERR] Required package "ext-theme-neptune" not found
Any advice on the proper way to do this? Ruby is properly installed and I was able to successfully go through the extjs 5 tutorial (generate app, watch app, etc.)

Sencha Cmd uses a lot of metadata, so your best bet is to generate a brand-new app in a blank folder first. Delete everything EXCEPT the /.sencha/ folder.
Then copy/paste the portal example (everything EXCEPT the /.sencha/ folder) into your new app.
You will also need to copy the /examples/ux/ folder, and then update the app.json file -- pointing classpath to the correct ux folder.
Normally this process would be easier, but the Ext JS download is essentially a "workspace", so copying one of the examples into a new place will miss a lot of the workspace's assumed structure (namely, the framework!)

Related

Azure pipeline Command Line Script error showing - mv: cannot stat No such file or directory

I'm using sample template project of ASP Dot NET MVC Core and inside the project React was installed. I need to deploy this project to Azure using CI/CD Pipelines.
I can able to success all jobs except command line script. In command line script job, just want to move my react "build" folder to "wwwroot" folder for navigating react index page.
This is the tutorial I've used.
Package.json
Code Structure
Repos
Pipeline - npm build
Pipeline - Command Line Script
Command Line Script
According to the blog tutorial, you are not successful because the blog is not talking about SPA.
He created two projects using two commands. I have personally tested and found that when using VS2022 to publish a SPA project, the project structure is as follows.
We can find that after the release, the React project in ClientApp will be automatically added to the wwwroot in the Asp.net Core project after compilation.
So I think, if you use two separate projects, like in the blog, then we need to use mv command to copy the file content.
If we are using a SPA project, the same project you created now, you can omit these steps and publish it normally.

Configuration on Ionic Framework?

I have recently wanted to a create mobile apps so I decided to use a Mobile App framework that allows the use of web technology.
I decided to install Ionic and it went pretty well, until I hit the 'Configuration' section of its installation documentation.
https://docs.ionic.io/setup.html#configuration
It says that I have to do something related to 'src/app/app.module.ts' but I can't find that file anywhere, I have installed Angular and Zone using npm install but I still can't find this file.
Can anyone help me out finding out where this file is, or how I even get to it?
Currently, this is my project root folder structure:
I have a folder called node_modules, then I have 3 json files: .io-config.json, ionic.config.jon and package.json.

How to add Scandit barcode plugin to custom build of Phonegap developer ios app?

I use Phonegap Desktop and Phonegap Developer app for a while now. This is really interesting for quickly testing my development.
But I'm facing a limitation with the embedded barcode scanner which is displaying the camera display in full screen.
I need to embed the camera display into a container so I have space for displaying information in the same time.
After searching for a while, I've discovered the Scandit SDK for PhoneGap was the only plugin which allows cropping the camera display.
I spent a lot of time trying to implement Scandit, but no success. At least I can build the app, but when using it, scanner is not working...
Here are the steps I've followed:
clone the PhoneGap Developer project from Git
Install using npm
add ios platform
open the xcode project file
build the application and run it on device
=> At this time the PG Dev is running well and my application is working fine
Then, i continued:
remove all reference to the default barcode scanner plugin
build the application and run it on device
==> PG Dev still working fine and my application is working fine
Next steps:
clone the Scandit phonegap plugin from Git
download the Scandit SDK from my scandit account
put the SDK into the cloned scandit phonegap plugin
modify the plugin.xml to change the path to the bundle and framework (mismatch of version name in the path)
<resource-file src="src/ios/scanditsdk-community-ios_4.16.1/ScanditBarcodeScanner.bundle"/>
<framework src="src/ios/scanditsdk-community-ios_4.16.1/ScanditBarcodeScanner.framework" custom="true"/>
copy bundle and framework into the correct folder of scandit
modify the config.xml to include reference to Scandit and set the spec attribut to the version of the SDK
build the application and run it on device
==> PG Dev still working fine and my application is working fine (it doesn't use scandit for the moment)
Next steps:
Remove my project from PhoneGap desktop
add Scandit Sample project to PG Desktop
I used the "Continuous Scaled/Cropped" example from there: http://docs.scandit.com/4.12/phonegap/cordova-examples.html
add my App Key for the license
launch my PG Dev app on my device and download the project files
==> PG Dev is running fine and download the Scandit Sample App.
But the app doesn't work. When clicking on the scan button, nothing happends..
After some investigation, I found that I ran through an exception on Scandit class.
Adding a try on the command 'Scandit.License.setAppKey' allowed me to report in the PG Desktop log the following error:
ReferenceError: Can't find variable: Scandit
Adding this try/catch made the app raising an exception at the next line:
var settings = new Scandit.ScanSettings();
After searching the web about my error, and some posts were suggesting to manually add the framework and bundle into xcode.
So I did it by drag&droping the framework and bundle into the framework folder of the xcode project.
But when I try building my project, it is failing with many errors...
To solve it, I had to had manually all the scandit plugin files (*.h and *.m) into my xcode project.
All previous errors have been solved, but new ones appeared.
This was due to some other missing native ios frameworks...
Once these framework added, all errors were solved and I managed to successfully build the application.
But when running it, I'm still having the error: "ReferenceError: Can't find variable: Scandit"
I'm now running out of idea..
What did I do wrong?
Is there anyone having managed to build a PG Desktop with Scandit embedded?
Thanks.
Sorry for this long post, just tried to be the more precise I could be.
The issue here is two fold. First you need to be aware that the Scandit Barcode Scanner plugin makes use of native code and can therefore not be used in the Phonegap Developer app, as the only thing transmitted to it is your html/css/javascript and the javascript part of the plugin. To also include the native parts of the plugin you have to build and deploy the project yourself. As you are trying to build the XCode project it seems like you are now doing this.
The second part is that you are way overcomplicating the adding of the plugin. There is no need for you to manually clone the git repo, add our libraries, adjust paths in the plugin.xml etc. You can directly download the entire plugin as a zip from your account at scandit.com where the library is contained and the plugin.xml is correct. After that you can simply add the plugin to your project through the CLI (also see our documentation for this at http://docs.scandit.com/stable/phonegap/cordova-integrate.html) and there is no need to do anything manually unless you are using a very outdated Phonegap version that fails to properly handle the plugin.xml. Doing it the automated way with our properly prepared plugin zip will remove most error sources, please try it that way.
Thanks #moritzha. It helped me finding the solution.
I followed this doc at the beginning but it was not working.
After adding the plugin and building the application, I never managed to see it in my xcode project.
I took the opportunity of changing my mac to restart everything from scratch, and after many tries I found where I was wrong.
In fact, the documentation provided by scandit is missing one step.
The command ' phonegap plugin add < path to downloaded and unzipped plugin > ' is doing half of the job.
The command is correctly copying the plugin files to my project but it is not updating the config.xml.
So before building your application, you have to edit the config.xml located at the root of your project folder.
You need to manually reference the plugin with the following:
and replace the x by the version of the sdk you will use.
Once the config.xml updated, you will be able to build the app for your targeted platform.
I now have my own version of the Phonegap Developer App with the Scandit plugin in place of the default barcode scanner plugin. And it works perfectly.
This plugin is awesome!
PhoneGap Developer App version: 1.7.2 (taken on Github)

How can I use Angular 2 with NetBeans?

I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)

Sencha Touch Generate App on mac doesn't work

I know Sencha is hard to learn, but I can't even get to first base and generate a starting App and I'm sure I'm not the only one!!! I have downloaded Sencha Touch SDK 2.3.1 (latest version) and Sencha CMD 5.0.1 (latest version). I have navigated to the Sencha Touch directory and typed in the command EVERYONE says to use to generate an app which is: sencha generate app MyApp ../MyApp On my mac I get errors as Sencha CMD tries to install the working directory and the SDK files. Is this a mac problem or am I missing something here?
Here is what I get:
[ERR] Directory /Users/Adam/Documents/Websites/touch not recognized as a framework
[ERR] Directory /Users/Adam/Documents/Websites/touch not recognized as a framework
[INF] Processing Build Descriptor : default
[INF] Loading app json manifest...
[INF] Concatenating output to file /Users/Adam/Documents/Websites/build/temp/production/myApp/sencha-compiler/cmd-packages.js
[INF] writing content to /Users/Adam/Documents/Websites/MyApp/bootstrap.js
[INF] appending content to /Users/Adam/Documents/Websites/MyApp/bootstrap.js
[INF] appending content to /Users/Adam/Documents/Websites/MyApp/bootstrap.js
[INF] appending content to /Users/Adam/Documents/Websites/MyApp/bootstrap.js
[INF] Appending content to /Users/Adam/Documents/Websites/MyApp/bootstrap.json
Also, the build and touch directories don't end up in the MyApp directory but instead one level up. So frustrating. Any help from anyone familiar with Sencha would be greatly appreciated. Thank you
I totally understand your frustration - 2 days is a long time to be stuck. Sencha can be so confusing....big learning curve!
In this situation you are better off changing your generate app command to specify the path to the touch directory and before generating the app, I would suggest you ensure you haven't already accidentally created an app in the websites folder, as this will throw you another error.
So, assuming your directory structure has websites/touch and you want your application generated in websites/myapp, I would suggest the following:
Ensure you are in your websites directory
check for hidden .sencha folder by typing ls -a
if it exists, remove it by typing rm -r .sencha
Create the folder you wish to generate your app into (eg: myapp)
change to that directory (cd myapp)
generate your app (sencha -sdk ../touch generate app MyTestApp .)
note: "../touch" is pointing to the touch directory in the parent folder
note: "MyTestApp ." is telling the system to generate an app called MyTestApp in the current folder.
See how you go with this - hope it helps!

Resources