PDA

View Full Version : Understanding what User Extensions are for



Carl.Wagar
16 Mar 2017, 11:00 AM
Am I on the right track:

Instead of just using the XDA 'components' to add to the toolbox one at a time,
Is the reason I should use User extensions is because I can likely package
up multiple components and sass and resources (and themes?) into one XUA file rather than
have to load multiple items from separate XDA and resource JS or CSS files?

Otherwise making a user-extension with the Def files seems like a lot of detailed work.

petr.vecera
20 Mar 2017, 9:54 AM
Yes.

.aux
In aux you can create complex extensions with custom JS code / CSS and everything in SA you will than see only the "small component" in toolbox with configs which you define in the aux but under this component large piece of code could be hidden.

.xdc
Xdc are the component which are saved to the toolbox and then exported. These are just simple components which you can share between projects / users. With these components you are limited with SA interface as what you can define. For example it could be some form view. Form panel with bunch of elements inside etc

.xda
Xda are the project archives. When you look at the templates these templates are in fact just .xda project archives. You can create some project and than share it as .xda, this could be used as template for other projects.


The docs you are looking for are:
http://docs.sencha.com/architect/4.1/guides/extending_architect/creating_user_extensions.html
http://docs.sencha.com/architect/4.1/guides/reference/user_extension_structure.html
http://docs.sencha.com/architect/4.1/guides/extending_architect/using_user_extensions.html

I have seen some very complex and large aux components from some customers. So it's possible. Unfortunately I am not aware of any which would be publicly available.

I personally use the .xdc most to share code between the projects.

--------------------

There is one more thing. Non-official for advanced users. And that's project metadata files "hacking". If you look at your project generated by SA. The app folder is not important, everything can be re-generated from the metadata folder. If you look into the metadata folder of your project you will find the files for each classes and their definitions inside. I have seen that some users are copying these metadata files between the projects to quickly copy some classes code etc. However this is quite "experimental" and not guaranteed to work.

Carl.Wagar
21 Mar 2017, 5:53 AM
In the end, the reason I wanted to use .aux User Extensions was because I thought I could bundle
more than one component, but most especially, because I could bundle a custom css resource and
a 3rd party JS library that provides a network api we require called autobahn.js.

I have battled the extremely limited documentation (the docs you list) to create user extensions
and from what I can see, the CSS file I add to the JSON is accepted but not copied or loaded.
Creating all the right definition and related JS files is very tricky and not obvious.
I have spent days on this to no avail.
I cannot see how to load a JS resources. There are very few decent samples on the net
and the sencha marketplace is defunct.
It seems to me we are going to have to manually add resources and multiple components.
I am very disappointed with this User Extension stuff. Anyone considering using User Extensions, beware.

petr.vecera
22 Mar 2017, 10:31 AM
I guess the documentation can be quite problematic for newcomers to the ExtJS and Sencha Cmd :(

But everything you need is possible with the extensions / ext packages.

I have created example extension and quick guide for you https://github.com/petrvecera/SenchaArchitect-aux
It's using custom CSS file and custom .js files.

Regards
Petr

Carl.Wagar
23 Mar 2017, 6:38 AM
Thanks for this.
Petr's example is good. It works for desktop projects.
This does not work for the Modern projects we are targeting but there are no 'modern' examples on the web.
I changed the package.json to add "modern62" e.g. "compatFrameworks": [ "ext62", "modern62"
But that doesn't help. Trying to use the revised aux complains in the log:
[Ext.createByAlias] unrecognized alias: widget.specialpanel

So it would be nice if there was a Modern version of this SpecialPanel.

When I do load it into a Desktop project:
I see that it is loading the related files under /packages/FooExtension/resources
does work. But it not really integrated with Architect - you can't
add files at the /resources level that would be common to the whole project. Nothing shows in the left navigation pane
of architect.
You are right, the documentation on the web and in user forums is frustratingly limited.
Other than a few examples there is nothing in documentation has nothing regarding best practices.

Petr's example does answer the question that SpecialPanel.js defines the class as Ext.ux.SpecialPanel.
Ext.ux is not obvious from any documentation.

I don't yet know how to bundle multiple containers, panels etc, related controllers or models, etc.
I guess anything is possible.
Just thinking to the future if you ever want to improve this facility, more docs might be all you need.
Although it looks like there is potential in it, it's not obvious to beginners
(perhaps the type of people trying to leverage architect to begin with?).

I guess I have to learn more about packages and plugins that are referenced in the few forum examples.
I guess you expected only people with extensive bottom-up ExtJS knowledge would use AUX.

In summary, a bit more best-practices documentation would be helpful. Your official docs
say how to make the aux file and give a spec for the json and definition files and not much else.
A few tutorial oriented examples building on FooExtension, up to something more extensive with explanations
of what is happening and what the limits are would be great.
I am thinking of an example of multiple related panels, controllers, models, JS, CSS, etc.

I guess it's catch-22. There's not much about this in the forums because no one is using it.
No one is using it because its more more difficult and not that well documented?

I think we'll be ok to end up using XDC and a more manual process for what we need.

Thanks.
Carl

petr.vecera
23 Mar 2017, 10:10 AM
Thanks for this.
Petr's example is good. It works for desktop projects.
This does not work for the Modern projects we are targeting but there are no 'modern' examples on the web.
I changed the package.json to add "modern62" e.g. "compatFrameworks": [ "ext62", "modern62"
But that doesn't help. Trying to use the revised aux complains in the log:
[Ext.createByAlias] unrecognized alias: widget.specialpanel

So it would be nice if there was a Modern version of this SpecialPanel.


Ok I will take a look and try to prepare the Modern version too. Not all components has the same class names between modern and classic so creating "universal" extension might be tricky.




When I do load it into a Desktop project:
I see that it is loading the related files under /packages/FooExtension/resources
does work. But it not really integrated with Architect - you can't
add files at the /resources level that would be common to the whole project. Nothing shows in the left navigation pane
of architect.


Yeah the resources are not shown there. But it should no matter much ? If the resources load is invoked by the extension you should be able to uses code from it anywhere in your app. You will just not see it in the resources panel in SA.

It's by the design, when you are creating some extension you don't want to pollute your project inspector with some js files which are required by the extension. It should work more like a "black box" component for you project.




I don't yet know how to bundle multiple containers, panels etc, related controllers or models, etc.
I guess anything is possible.


Yes, everything should be possible. If I will have more time I might improve the example with more classes.



Just thinking to the future if you ever want to improve this facility, more docs might be all you need.
Although it looks like there is potential in it, it's not obvious to beginners
(perhaps the type of people trying to leverage architect to begin with?).

I guess I have to learn more about packages and plugins that are referenced in the few forum examples.
I guess you expected only people with extensive bottom-up ExtJS knowledge would use AUX.


You are right, usually the beginners are just fine with the basic SA projects and do no tend to dive immediately into the Ext packages and SA extensions



I guess it's catch-22. There's not much about this in the forums because no one is using it.
No one is using it because its more more difficult and not that well documented?


The extensions are still used but I would say that 90% of them are created internally in the companies using the SA for the teams which are working with them, so they do not tend to share them with the rest of the world.

Btw for example company http://www.bryntum.com is offering many of their ExtJS components also as SA extensions.

I will forward the request for more guides on this topic.

Regards
Petr

Carl.Wagar
23 Mar 2017, 10:27 AM
Ok, many thanks for the extensive reply.
I had no idea that www.bryntum.com (http://www.bryntum.com) existed. Partly because the 'sencha marketplace' is dead?
Looks good! Although I assume there code would either be obfuscated or too complex if I bought one as a sample.

So yes, I'll appreciate a 'modern' example AUX. Yes, something that has more than one panel, controller, model would be good.
Somewhere in the blogs I saw something that makes it look like you can specify dependances. It would be nice to drop a panel UE
into a container and have the associated controller and model come with it.

I guess it wasn't so much the 'black box' nature of UE's that I was looking for as the 'bundling'
and the dependency drag-drop onto the design surface. And then have it at least somewhat integrated
with the navigation panel on the left.

Frankly, if the XDC facility left you select multiple components for export, and something from the
resources folder at the same time, and bundle that in one XDC file, that's all I wanted.

I guess you are right.. even though we wouldn't see it at the top level, a JS file loaded in the packages would still work.
Having your example at least shows me how to create a proper package.json file to make that happen.

Thanks.
Carl