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

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

Expand Messages
  • iskitzdev
    Omar, Good to hear. Glad you found the problem and solution. Good luck! Michael
    Message 1 of 12 , Nov 24, 2009
    • 0 Attachment
      Omar,
      Good to hear. Glad you found the problem and solution.

      Good luck!
      Michael


      --- In ajile@yahoogroups.com, "destroyer019" <omarotieku@...> wrote:
      >
      > Hey Michael,
      > I found my problem. I was mistakenly trying to use the Import directive
      > for a non namespaced script. Uize uses its own method to create and
      > associate modules. I instead had to use Load to pull the appropriate
      > scripts into my definied namespace. I can now create my prototype
      > classes.
      >
      > Thanks for your help.
      >
      > --- In ajile@yahoogroups.com, "destroyer019" <omarotieku@> wrote:
      > >
      > > Okay, so if I was to import from three other frameworks in this way,
      > > would I then create a namespace for each of them to grab specific
      > > functions from them? Then create a name space that brings them all
      > > together? My goal is to create one package that abstracts the use the
      > > other four javascript frameworks under one namespace.
      > >
      > > --- In ajile@yahoogroups.com, "mikeizworkin" mikeizworkin@ wrote:
      > > >
      > > > Hi Omar,
      > > >
      > > > Looking at the code you're using I'd recommend altering your
      > index.js
      > > file as follows:
      > > >
      > > > Namespace ("com.newschool.piim");
      > > >
      > > > // Define the Uize namespace's path:
      > > > Namespace ("Uize", "lib/UIZE_js/");
      > > >
      > > > // Import Uize modules without needing to specify each path:
      > > > Import ("Uize.Widget.Page");
      > > > Import ("Uize.Widget.Calendar");
      > > > Import ("Uize.Templates.Calendar");
      > > >
      > > > If you prefer to use Import with specific paths you should only
      > > specify the directory not the full file path and filename. Your import
      > > statement should look similar to:
      > > >
      > > > Import ("Uize.Widget.Page", "lib/UIZE_js/");
      > > >
      > > > Basically you can set the default path for an entire namespace using
      > > the Namespace function with a directory path. For details see:
      > > >
      > > > http://ajile.net/docs/api/Directives.htm#Namespace
      > > >
      > > > Using Namespace in this way sets the default path for all modules
      > > within the specified namespace to the value you supplied. Later on
      > when
      > > you use Import, Include or ImportAs without specifying a directory
      > path,
      > > they will default to the location specified in the Namespace call.
      > > >
      > > > Hope that helps. Are you using the debug log to observe the paths
      > > being used to load the Uize modules? I find it helpful when modules
      > > don't seem to be loading as expected.
      > > >
      > > >
      > > > Michael
      > > >
      > > > --- In ajile@yahoogroups.com, "destroyer019" omarotieku@ wrote:
      > > > >
      > > > > Hello Michael,
      > > > > I am trying to get Ajile to pull resources from the Uize
      > > > > <http://www.uize.com> library so I can then setup a prototype
      > > class
      > > > > that uses some methods from Uize and some custom methods in one
      > > > > function. I have setup a namespace in the index.js file where i
      > have
      > > > > imported a few modules from the Uize framework. As a test, I have
      > > setup
      > > > > a calender widget from the Uize example page in my index.html,
      > which
      > > > > calls on these Uize modules. Ajile is pulling in the Uize modules
      > > but
      > > > > the calender widget is not being generated. Firebug gives me the
      > > > > following warning…
      > > > >
      > > > > reference to undefined property BE[BF[BD]](function(AO){var
      > > > > Ax,B,b,Z;if(typeof Ag!...,An=new AT(),AV=new AT();Ag()})("1.2.1")
      > > > >
      > > > > Am I wrong in using Ajile in this way? Here is the code I have
      > > > > setup…
      > > > >
      > > > > <!-- index.html -->
      > > > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      > > > > "http://www.w3.org/TR/html4/strict.dtd">
      > > > > <html>
      > > > > <head>
      > > > > <title>PVT</title>
      > > > > <link rel="stylesheet" href="css/page.css"/>
      > > > > <link rel="stylesheet" href="css/page.example.css"/>
      > > > > <link rel="stylesheet" href="css/widget.calendar.css"/>
      > > > >
      > > > > <script type="text/javascript"
      > > > > src="js/com.iskitz.ajile.js?cloakoff,debug"></script>
      > > > >
      > > > > </head>
      > > > > <body>
      > > > > <script type="text/javascript">
      > > > >
      > > > > Uize.module ({
      > > > > required:[
      > > > > //'UizeDotCom.Page.Example.library',
      > > > > 'Uize.Widget.Page',
      > > > > 'Uize.Widget.Calendar',
      > > > > 'Uize.Templates.Calendar'
      > > > > ],
      > > > > builder:function () {
      > > > > /*** create the example page widget ***/
      > > > > var page = window.page = new Uize.Widget.Page
      > > > > /*({evaluator:function (code) {eval (code)}})*/;
      > > > >
      > > > > /*** add the calendar child widget ***/
      > > > > var calendar = page.addChild (
      > > > > 'calendar',
      > > > > Uize.Widget.Calendar,
      > > > > {
      > > > > built:false,
      > > > > html:Uize.Templates.Calendar
      > > > > }
      > > > > );
      > > > >
      > > > > /*** wire up the page widget ***/
      > > > > page.wireUi ();
      > > > >
      > > > > /*** some code for demonstrating the widget's
      > programmatic
      > > > > interface ***/
      > > > > function displayCalendarState () {
      > > > > page.setNodeValue ('calendarValue',calendar.get
      > > > > ('value'));
      > > > > page.setNodeValue ('calendarMonth',calendar.get
      > > > > ('month'));
      > > > > page.setNodeValue ('calendarYear',calendar.get
      > > > > ('year'));
      > > > > }
      > > > > calendar.wire ('Changed.value',displayCalendarState);
      > > > > calendar.wire ('Changed.month',displayCalendarState);
      > > > > calendar.wire ('Changed.year',displayCalendarState);
      > > > > displayCalendarState ();
      > > > > }
      > > > > });
      > > > >
      > > > > </script>
      > > > > </body>
      > > > > </html>
      > > > >
      > > > > <!-- The index.js file -->
      > > > > Namespace ("com.newschool.piim");
      > > > >
      > > > > Import('Uize.Widget.Page', 'lib/UIZE_js/Uize.Widget.Page.js');
      > > > >
      > > > > Import('Uize.Widget.Calendar',
      > > 'lib/UIZE_js/Uize.Widget.Calendar.js');
      > > > >
      > > > > Import('Uize.Templates.Calendar',
      > > > > 'lib/UIZE_js/Uize.Templates.Calendar.js');
      > > > >
      > > > >
      > > > > --- In ajile@yahoogroups.com, "iskitzdev" <yahoo@> wrote:
      > > > > >
      > > > > > Omar,
      > > > > > Great to have a name ;-)
      > > > > >
      > > > > > Glad I could help you better understand Ajile.
      > > > > >
      > > > > > Best of luck,
      > > > > > Michael
      > > > > >
      > > > > > --- In ajile@yahoogroups.com, "destroyer019" omarotieku@ wrote:
      > > > > > >
      > > > > > > 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
      > > > > ]");
      > > > > > > > > > > }
      > > > > > > > > > >
      > > > > > > > > >
      > > > > > > > >
      > > > > > > >
      > > > > > >
      > > > > >
      > > > >
      > > > >
      > > > >
      > > > > [Non-text portions of this message have been removed]
      > > > >
      > > >
      > >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.