Loading ...
Sorry, an error occurred while loading the content.

254Re: Import modules from javascript frameworks like Uize and Vegui?

Expand Messages
  • destroyer019
    Nov 2, 2009
    • 0 Attachment
      Thanks Michael
      My name is Omar, don't know why I didn't start with that. I will try out your suggestions, you are really good at clearing things up for me.

      --- In ajile@yahoogroups.com, "mikeizworkin" <mikeizworkin@...> wrote:
      >
      > Hi,
      > Do you have a name I can use when answering, it feels a bit strange just saying hi every time :-)
      >
      > I understand the problem you're having and will go into how to get past that but as a first step please set Ajile's script tag's src attribute to the following in your web page:
      >
      > src="js/com.iskitz.ajile.js?cloakoff,debug,mvcshareoff"
      >
      > That will do the following things:
      >
      > 1. Disable Ajile's functionality that removes loaded
      > scripts from the page after they're no longer needed.
      >
      > 2. Turn on Ajile's debug mode. You can then use Ajile.ShowLog()
      > within your code to see what's occurring as your code executes.
      >
      > 3. Disable Ajile's automatic loading of the index.js file
      > that may exist in the same directory as the Ajile script.
      >
      > Next, take a look at:
      >
      > http://ajile.net/docs/api/Functions.htm#Ajile.AddImportListener
      >
      > When Importing scripts from within other script files you should use Ajile.AddImportListener to trigger the code that depends on your imported scripts.
      >
      > The reason is that in browsers other than Opera, external scripts that load other scripts must complete their execution before the imported scripts can be executed. This limitation is the reason why the Ajile.AddImportListener function exists. The function allows delaying execution of logic that depends on your imported script until the imported script has been executed.
      >
      > Requesting an external script then immediately trying to use it as follows will fail without using the Ajile.AddImportListener function:
      >
      > Import ("my.cool.script");
      >
      > my.cool.script.DoSomething();
      >
      > Instead try the following:
      >
      > Import ("my.cool.script");
      >
      > Ajile.AddImportListener ("my.cool.script", function (module)
      > {
      > my.cool.script.DoSomething();
      > });
      >
      > The listener approach guarantees that the code that depends on the imported script will only be executed after that script has been loaded *and* executed.
      >
      > If you're someone who learns by example, I recommend taking a look at: the source code for:
      >
      > http://ajile.net/examples/Examples.htm
      > http://ajile.net/examples/Examples.js
      >
      > Within those files you'll see a real world example of how Ajile is used to dynamically load external script files.
      >
      > Ajile's Overview and Documentation at the following links should also provide good information:
      >
      > http://ajile.net/docs/Ajile-Overview.htm
      > http://ajile.net/docs/Ajile-Help.htm
      >
      > I hope these explanations help you better understand how Ajile works and how it can be used.
      >
      >
      > Michael
      >
      >
      > --- In ajile@yahoogroups.com, "destroyer019" <omarotieku@> wrote:
      > >
      > > Thanks for the reply Michael, I am beginning to work my way around Ajile now. I am trying to successfully import a module but I am still experiencing a problem. I am following the import demo put forth in the documentation but after the alert telling me that the namespace has been created comes up the page seems to get stuck and does not finishing loading, ever. I know that the imported module and its functions will not be available to me until it loads, but I can't seem to reach that state. Firebug is giving me this message…
      > >
      > > Failed to load source for sourceFile scriptTag file://index.js script.tags( )
      > >
      > > Failed to load source for sourceFile scriptTag file://js/com.visualization.test.example.ImportModule.js script.tags( )
      > >
      > > my source code looks like this…
      > >
      > > <!-- index.html -->
      > >
      > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      > > <html>
      > > <head>
      > > <title>PVT</title>
      > > <script type="text/javascript" src="js/com.iskitz.ajile.js"></script>
      > >
      > > </head>
      > > <body>
      > >
      > > </body>
      > >
      > > </html>
      > >
      > > /* index.js */
      > >
      > > Namespace ("com.visualization.test");
      > >
      > > var msg = typeof com.visualization.test == "undefined"
      > > ? "Failed to create"
      > > : "Successfully created";
      > >
      > > alert(msg + " the [ com.visualization.test ] namespace!");
      > >
      > > com.visualization.test.Test = function() {
      > > document.write("I do not know why you don't work.");
      > > }
      > >
      > >
      > > Import ("com.visualization.test.example.ImportModule.*");
      > >
      > > function testImportModule()
      > > {
      > > // Test if showContents method has been imported.
      > > var imported = "undefined" != typeof showContents;
      > >
      > > if(imported)// Test if imported showContents is ImportModule.showContents.
      > > if("undefined" != typeof com.visualization.test.example.ImportModule)
      > > if(showContents == com.visualization.test.example.ImportModule.showContents)
      > > imported = true;
      > >
      > > if(imported) showContents();
      > >
      > > else alert( "ImportModule test was unsuccessful :-(\n\n Failed to "
      > > + "Import [ com.visualization.test.example.ImportModule.* ]");
      > > }
      > >
      > > com.visualization.test.Test();
      > >
      > > /* com.visualization.test.example.ImportModule.js */
      > >
      > > Namespace ("com.visualization.test.example.ImportModule");
      > >
      > > com.visualization.test.example.ImportModule = function()
      > > {
      > > var THIS = this;
      > >
      > > // Constructor :: Creates public members.
      > > function $ImportModule()
      > > {
      > > this.aNumber = 1;
      > > this.aString = "member 5";
      > > this.aFunction = function(){ alert("member 1"); };
      > > this.anArray = ["member3"];
      > > this.anObject = { member:"member 2" };
      > > this.aRegularExpression = (/member 6/);
      > > this.showContents = showContents;
      > > }
      > >
      > > function showContents()
      > > {
      > > var contents = ".:{ com.visualization.test.example.ImportModule }:.\n\n";
      > >
      > > alert(contents + (THIS.constructor.toString ? THIS.constructor : ''));
      > > }
      > >
      > > $ImportModule();
      > > };
      > >
      > > Does anyone see why the script tags are failing to load correctly? I have edited the path to the js files but ajile seems to locate them just fine. I am at a loss?
      > >
      > >
      > > --- In ajile@yahoogroups.com, "iskitzdev" <yahoo@> wrote:
      > > >
      > > > Hi,
      > > > Thanks for writing.
      > > >
      > > > I'm not sure what type of example you're looking for but I'll give an explanation of how Ajile works so you can decide if it will meet your needs.
      > > >
      > > > When Ajile's Namespace function is used it creates a set of objects linked as properties of each other. For instance:
      > > >
      > > > Namespace ("my.name.space");
      > > >
      > > > Creates a global object "my" with a property called "name". The name property points to another object called "space".
      > > >
      > > > The my object and the name and space properties contained within are immediately availble after calling the Namespace function.
      > > >
      > > > To load external script files you can use the Load, Import, ImportAs, or Include functions depending on your specific need.
      > > >
      > > > All of these functions will create a script tag within your HTML page when called, however the objects within the script loaded via that tag won't be available for use until the code that called the Ajile function completes. If that's confusing, consider this example:
      > > >
      > > > Load ("some/script.js"); // contains var a=true;
      > > > alert (a); // displays "undefined"
      > > >
      > > > To use the contents of script.js as soon as possible either use:
      > > >
      > > > Ajile.AddImportListener ("a", function(){
      > > > alert (a); //displays "true";
      > > > }));
      > > >
      > > > or if your code is in a script block in the HTML page use separate script blocks for the loading and use of the external script's objects:
      > > >
      > > > [script]
      > > > Load ("some/script.js"); // contains var a=true;
      > > > [/script]
      > > >
      > > > [script]
      > > > alert (a); // displays true
      > > > [/script]
      > > >
      > > > Hope that gives you a better idea of how Ajile works.
      > > >
      > > > Michael
      > > >
      > > > --- In ajile@yahoogroups.com, "destroyer019" <omarotieku@> wrote:
      > > > >
      > > > >
      > > > >
      > > > > --- In ajile@yahoogroups.com, "destroyer019" <omarotieku@> wrote:
      > > > > >
      > > > > > Hello,
      > > > > > I have intermediate javascript skills and I am new to ajile. I am working on a project that will reference multiple javascript frameworks, such as Uize and VegUI, under one namespace to mix and match useful modules. Is it possible to use ajile to do this? If so could someone give me a quick explanation of the process or an example?
      > > > > >
      > > > > Sorry, I meant to include this the first time. Here is what I have so far.
      > > > >
      > > > > Namespace ("com.visualization.test");
      > > > >
      > > > > var msg = typeof com.visualization.test == "undefined"
      > > > > ? "Failed to create"
      > > > > : "Successfully created";
      > > > >
      > > > > alert(msg + " the [ com.visualization.test ] namespace!");
      > > > >
      > > > > document.write('You are almost there!');
      > > > >
      > > > > Load ("lib/UIZE_js/Uize.Widget.Calendar.js");
      > > > >
      > > > > function testLoad()
      > > > > {
      > > > > if( "undefined" != typeof Uize.Widget.Calendar) {
      > > > > alert("File was successfully loaded.");
      > > > > }
      > > > >
      > > > >
      > > > > else alert( "Load test was unsuccessful :-(\n\n"
      > > > > + "Failed to Load [ Uize.Widget.Calendar.js ]");
      > > > > }
      > > > >
      > > >
      > >
      >
    • Show all 12 messages in this topic