Sencha Extjs 6 build output directory - Microloader configuration - extjs

Currently i am trying to migrate an extjs 5 application to 6.2.
It was a tough time but after couple of hours it runs fine. Also sencha app build works fine with the default configuration. Application works fine.
But we have to change the path to the generated html file. We are doing some processing in our framework and add variables to the extjs index.html
Our file structure looks like
/
/my/app/index.html (generated by server, should load the bootloader from extjs)
/compiled/extjs-app/X.all-extjs-production-build-files.X // like app.json, cache.appcache etc
The problem is that i can't make the micro loader working with this structure. I tried several setting within the app.json in my application workspace but nothing worked. Was tweaking the output.base, output.page.path variables and so on. Trying with included and external microloader but can't get it to work. Was already having difficulties with extjs 5 but now it seems even more unhandy as the whole caching come into play. The documentation on this topic is poor. I think a lot of people generate their application html page over a server side language and then use the loader to make their app working. Why can't we just specify a local path to store the files and independently define a "path" for loading. This would be used by the micro loader to generate the required paths?!
My impression is that the microloader is not aware of the paths. Based on the html page url he tries to determine the resources paths. I was trying a lot and have no further idea.
Has someone solved this struggle? Any hint would be highly welcome.
Thanks in advance for your help.

Related

Testing AngularJS without having to build?

I'm a beginner to Angular, and am just starting some development.
I've taken the code from https://github.com/angular-app/angular-app, but am having to 'grunt build' every time to see my front end code changes on the browser. I've tried a variety of methods but am failing.
Is there a way to make changes, hit save, refresh your browser and see the changes, without having to build all the time?
Try grunt watch instead of grunt build. The gruntfile for that project seems to indicate that it will run the build task for you automatically by watching targeted files (e.g. .js, .less, etc.) for changes and then firing.
Note that you have to let it continue to run while you work, although you can run it as a background task and either hide the output or log it to a file.
Being a beginner, you might as well start from scratch.
This post
by Leon Revill contains pretty much step-by-step guides on the basics, structure, MVC, data-binding, events and filters. Regarding your build dilemma, just use your favorite IDE. I prefer you use WebStorm or PHPStorm and install the AngularJS plugin. This way, all you need to do is just include the Angular CDN or a local copy of angular.js then you are good to go just by coding and refreshing the browser.
Cheers!

Using qooxdoo desktop without having to "build" it

in qooxdoo desktop you usually have to develop using the SDK and then "build" your app.
Is there a way to generate something like a qooxdoo.js file with the whole library inside so that you can script script it as you like (like jqueryui or dojo)?
Actually it could be nice to have every widget loaded at runtime like dojo's require("dojo.button") but both the approaches would be nice, just avoiding the build phase.
I hope the question is understandable :)
Thank you everybody!
Don't use the output of the build job to run your code as you develop - as among other things - will minify your code and make debugging very difficult.
If you want to code freely without needing to rebuild when you reference new classes then source-all is the build job for you.
In the root directory of your application, type:
python generate.py source-all
If will include the entire framework in the HTML file generated (you'll find it under source/index.html). This would work well if you are composing the UI from scratch and referencing many new qooxdoo widgets with each browser refresh.
If you add a completely new class of your own, you will need to run the source-all job again to include it.
I use the source build job however for a few reasons:
Habit: source-all didn't exist when I started using qooxdoo
Speed: You can notice a bit of lag it when you refresh the browser to view
your app
References: For a mature app, enough of the framework is
included in the application and its rare to add a new reference and
when you do, its probably in a new class of your own which would
require a re-run of the source job anyway.
I suggest you also look at Default Action Jobs as all the possibilities are explained in detail. Hope this helps.
Please check that thread for a detailed answer: http://qooxdoo.678.n2.nabble.com/Using-qooxdoo-desktop-without-having-to-build-it-td7585015.html;cid=1387453759247-228

What is the expected collaboration workflow with Sencha Architect?

I started a trial of Sencha Architect, and the more I use it more questions come to my mind for its actual feasibility usage in a development environment, one of the bigger questions I have is
In an environment that you can't edit the individual files in different editors, how can multiple people collaborate in developing different parts of a site, for example
app/models|components|views/Model1.js <- In charge of developer one
app/models|components|views/Model2.js <- In charge of developer two.
In a regular environment you could use git, for example, to distribute each file but in architect, you are not expected to edit files manually (which sucks because features like profiles are not exposed in architect). If you do edit them manually, it will cause problems or it may overwrite your code back to whatever data is on the project file so I am wondering what is the proper, or expected collaboration workflow with Sencha.
Having read the above posts, I still can't believe that keeping Sencha
metadata files in code repository and generating ALL JavaScript from metadata is suitable for big projects.
The idea of Sencha Architect is to keep the code not in javascript files, but in JSON metadata, and whenever you need to edit a JavaScript code, you have to use IDE and edit metadata. Phil Strong said "We ask that you continue to use Architect as your editor and doing so with 20 engineers is perfectly safe using Git or SVN.". Of course this workflow is very profitable for Sencha, it forces 20 people to use a licensed Sencha Architect, because to change a single line of JavaScript code the developer must use Sencha Architect.
When two people edit the same file, IDE updates metadata. Then they check-in the file into a code repository, and one of them has to resolve conflicts, so the developer has to merge two metadata files, not JavaScript files.
The whole idea of not letting developers to edit JavaScript unless they use Sencha Architect is counter-productive, because the same person can be using his favorite IDE for both Java and JavaScript development, or Python and JavaScript. Doing both client and server programming in the same IDE is faster than switch between two IDE's. The reality of a big project is that you have multiple teams around the globe who work with different IDE's, you also may have a short-term project implemented by a contractor who also has his favorite IDE.
ExtJS is a well designed framework, you don't need SenchaArchitect to modify a single line of JavaScript code.
When coding in JavaScript, I save my JavaScript file and refresh browser, and see the changes immediately. Sencha Archtect adds and additional step, it requires you to publish
javascript (generate JavaScript from metadata), and the bigger the project is, the longer is delay. Often I have to modify JavaScript files in production, sometimes changing a single line fixes the problem, again, I have to use Sencha Architect to re-generate this single line from metadata.
I use Sencha Architect for quick prototyping only, then check-in generated files into code repository and continue to edit JavaScript manually. With this approach I can use a version control system to see the history of JavaScript. If I checked in JSON metadata into
a VCS, then I would not have the history of JavaScript, I would have the history of JSON metadata which is counterintuitive.
I think that having metadata for GUI form is OK, but the limitation that MVC controller level has also to be generated from metadata is not OK.
While I appreciate very much Sencha's effort in creating useful and full-featured dev environment I don't think Sencha Architect is quite ready for relatively big projects and teams of developers.
I original Architect software very useful for quick prototyping and designing complex UI structures, but then again - after you figure out the way your UI elements will lay down in JS file - often it's easier and faster to copy-paste existing JS code.
I don't think this is the answer you were looking for, I just wanted to share my thoughts.
When I had searched for this same topic, I had found that it is the metadata/ directory that is the important meat of the project, and that all of the components are separated out into their own metadata files. This, along with the root level project files, is probably the important part for version control. The app/ is regenerated on save and probably can be excluded from version control.
The main xds project file containers more general references and will probably change less often than the metadata components. But it would change when new components are created or project/app level settings are modified.
Ideally, if you just check in the root files and the metadata folder, it should just work.
Working in a team with source/version control is quite easy with Sencha Architect. An Architect project is all enclosed in a project directory. Inside it's made up of n parts
project file - consists of a small amount of data used by Architect to open and maintain your project. It's the single file you can double click to open it
metadata directory - consists of the files that describe all the pieces of your project. Each class (controller, view, model, store, resource) has it's information stored in it's own file.
app directory - consists of the src of the project you've created. A javascript file for each class.
other root files - an app.html and app.js which is the launchpad for your application and what get's run when you preview your application. This is also where your packager.json, app.json would go.
The point of me describing all of this is to show you that the files generated by Architect are pretty much identical to what you would have created in your favorite editor by hand. The only additional information is the metadata and the project file. The metadata is all JSON.
FOR NOW!!
We ask that you continue to use Architect as your editor and doing so with 20 engineers is perfectly safe using Git or SVN. When a dev makes a change it changes both the metadata and the app for those files.
I asked the same question to Aaron from Sencha in a private message. He suggested to check in the entire project structure including app and metadata.
It works, we did one flow in our team.

Build custom Extjs for panel

I'm using an extjs panel that shows information that the user can show or hide. Everything works smoothly. But ext-all.js's size is too big and I've been looking around and saw that there is a possibility to customize it to just use the parts you need. I tried the site's "Build your own" but says the page is not found.
Anyone knows how to reduce the size of the ext-all.js? Or build a custom one?
You can build your own extjs with jsbuilder, which is a software (exists in java and in python.
You'll have to modify the .jsb file, in order to manage dependencies. You can look at how the pkgs files are built.
This is quite difficult, though, to find your way through the dependencies.
The command line looks like (on linux) :
java -jar /path/to/JSBuilder2.jar --projectFile $BUILDDIR/ext-lsi.jsb2 --homeDir $DESTDIR
I use it often, it's working well now.
But I'm quite sure this will be another adventure for Ext4.
Links
Sencha Forum about jsbuilder
Tutorial
In your download of ExtJS there is a pkgs directory which contains some prebuilt parts.

Can this be done by skinning?

I am working on DNN 4.09.03. I want to modify the look and feel of a links module. I know how to change the outer looks with containers, but I want achieve a mouseover effect for the links itself.
Looking closely it appears that the links are placed into a table datacell. I want to set the background of that cell to and image, and on mouseover swap it for another image. Can this be done with skinning?
If not, I need some assistance in extending/customising the links module source. I need to know how to set up the development environment to do this first. I have the DotNetNuke solution (with source code) working in VS2008. How do I integrate the source of the links module, so i can customise it (and rename - maybe mylinks)?
I don't think you can do this by containers. If you can do it by any chance, I bet doing it by modifying the code is easier. You have to remember that you might have problems upgrading the links module in future if you modify it.
Just add the Links module to DNN VS2008 solution as a web application. You can do whatever change you won't to do in it. And then use a nant script to just package it and copy to DNN/Install/Modules folder. And then hit the DNN installation URL:
http://<dnn_url>/Install/Install.aspx?mode=installresources
Alternatively you can write some post-build commands in VS2008 it self to copy stuff. Have a look at the existing modules and where each different part files of a module (.ascx, .dnn, .sqldataprovider) is stored in DNN after installation.
This is possible with some creative CSS and maybe even a little jQuery - i did a lot of this sort of thing for the Blog module without having to touch the core module -

Resources