{"id":13744593,"url":"https://github.com/krange/AS3-Bootstrap","last_synced_at":"2025-05-09T03:32:34.967Z","repository":{"id":1171838,"uuid":"1066275","full_name":"krange/AS3-Bootstrap","owner":"krange","description":"Bootstrap utility for ActionScript 3 and Flex","archived":false,"fork":false,"pushed_at":"2011-12-03T17:23:43.000Z","size":7639,"stargazers_count":8,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-15T16:41:01.291Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"ActionScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krange.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-11-09T20:33:01.000Z","updated_at":"2018-11-30T09:34:11.000Z","dependencies_parsed_at":"2022-08-16T12:25:14.519Z","dependency_job_id":null,"html_url":"https://github.com/krange/AS3-Bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krange%2FAS3-Bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krange%2FAS3-Bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krange%2FAS3-Bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krange%2FAS3-Bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krange","download_url":"https://codeload.github.com/krange/AS3-Bootstrap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253183221,"owners_count":21867384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T05:01:12.409Z","updated_at":"2025-05-09T03:32:34.529Z","avatar_url":"https://github.com/krange.png","language":"ActionScript","readme":"Bootstrap\n=======\n\n# Introduction\n\nBootstrap is a Flex 3/4 and AS3 utility which accelerates development when loading common startup load processes within an application. It was initially built in an agency environment with the purpose of simplifying localized application startup development. It is available currently as either integrated into multi-core PureMVC application or as a standalone utility. Robotlegs is intended to be fully supported but is not quite completed as of this writing. \n\nBootstrap uses AS3 Signals for dispatching of all events. The PureMVC version is also built upon the PureMVC Fabrication utility which adds many useful features to typical PureMVC programming syntax as well as simpler integration when building modular applications.\n\nIn the Downloads section you will find SWCs built currently for the 3.6.0 and 4.1.0 Flex SDKs. I will be adding additional SDK builds once I get a chance to test. If you require a different SDK, you can download the source and add SDKs via the ANT script.\n\n## Dependencies\n\nThe following dependencies are required and not directly built into the release SWCs to provide the user the ability to use different versions if needed.\n\nAll versions:\n\n* [AS3 Signals](https://github.com/robertpenner/as3-signals/) -  version 0.8 or higher\n\nFor PureMVC applications, the following are required:\n\n* [PureMVC](http://trac.puremvc.org/PureMVC_AS3_MultiCore) - Multi-Core\n* [Fabrication](http://code.google.com/p/fabrication/)\n* [Pipes](http://trac.puremvc.org/Utility_AS3_MultiCore_Pipes)\n\n## What does Bootstrap provide?\n\nThe main function of Bootstrap is to simplify the process to load common external resources through an XML file. It also provides the user with a few helpful additional utility classes like integrating preloaders in Flex as well as progress classes integrated with the load.\n\nThe following resources can be loading via XML:\n\n* external CSS (AS 3.0) and CSS SWF (Flex) files\n* external font files (including bitmap font SWFs via the Flash IDE)\n* external localization XML files\n\n# Configuration Setup\n\n## Flash Vars\n\nThe following Flashvars variables are available for use with Bootstrap:\n\n   - **baseUrl** – The base URL to load all Bootstrap resources from. This allows you to load correctly when moving throughout the lifecycle of your project from development,staging and production environments. If you provide no baseUrl, Bootstrap will load based on whatever URL you provide in the XML.\n   - **configXmlBaseUrl** – The base URL to your configuration XML file. Sometimes this might be on a different location entirely than the rest of your assets. If you provide no configXmlBaseUrl then Bootstrap will load based on the URL you provide as the configXmlUrl.\n   - **configXmlUrl** – The URL to where your configuration XML file lives. This property also supports localized URLs through the flashvars *lang* and *locale* properties.\n   - **lang** - The language specified for the application for localization purposes through specifying a **{lang}** parameter.\n   - **locale** - The locale specified for the application for localization purposes through specifying a **{locale}** parameter.\n   \n## XML Setup\n\nThe Bootstrap utility loads up a configuration external XML file. This file defines all the values that this utility will require to load. The XML can have as many as little of each item as you need. This XML can include other data as well, but the only values that this utility looks for inside the root node are below.\n\nPlease note that if you pass in a *baseUrl* flashVar parameter, Bootstrap will apply it as the base of the URLs for the below resources.\n\n   - **stylesheet** – Reference to your externalized CSS file or SWF-Compiled CSS (Flex) file. This property also supports localized URLs through the flashvars *lang* and *locale* properties.\n\n```\n\u003cstylesheet url=\"css/styles.css\" /\u003e\n\u003cstylesheet url=\"swf/css/styles.swf\" /\u003e\n\u003cstylesheet url=\"css/styles_{lang}-{locale}.css\" /\u003e\n```\n\n   - **font** – Reference to your externalized SWF compiled font file. The *name* property here **optional** if you are registering the font in your font SWF. If you want Bootstrap to register the font for you, the *name* property is the fully-qualified path of the font class (ex. as3bootstrap.fonts._Arial ). This property also supports localized URLs through the flashvars *lang* and *locale* properties.\n\nYou can also reference a externalized Flash IDE SWF with bitmap fonts embedded using the same method as currently it's impossible to compile bitmap fonts from outside the Flash IDE. \n\n```\n\u003cfont url=\"_AFFuturaBook_{lang}.swf\" /\u003e\n\u003cfont url=\"SomeFont.swf\" name=\"as3bootstrap.fonts.SomeFontName\" /\u003e\n\u003cfont url=\"_ArialBitmap.swf\" /\u003e\n```\n\n   - **localization** – In most cases, projects are updated via the clients. Because of this, localization must be updatable via external resources. Bootstrap can load in external XML files to which the content through a value object in name/value pairs. This property also supports localized URLs through the flashvars *lang* and *locale* properties.\n\n```\n\u003clocalization url=\"xml/bootstrap/locale.xml\" /\u003e\n\u003clocalization url=\"xml/bootstrap/locale-{locale}.xml\" /\u003e\n```\n\n# Getting Started\n\nGetting the basic setup in standalone is as simple as a few lines of code. PureMVC requires writing two classes. See simple examples below. More robust example projects are coming!\n\n## Standalone Mode\n\n```as3\nvar bootstrap:IBootstrap = new Bootstrap();\nbootstrap.bootstrapLoaded.add( onBootstrapLoaded );\nbootstrap.start( loaderInfo.parameters );\n\t\t\t\nfunction onBootstrapLoaded():void\n{\n\t// All bootstrap loading has completed\n}\n```\n\n## PureMVC AS3 Mode\n\n### Main Application\n\n```as3\npackage as3bootstrap.demo.as3\n{\n\timport as3bootstrap.demo.as3.controller.FlStartupCommand;\n\t\n\timport org.puremvc.as3.multicore.utilities.fabrication.components.FlashApplication;\n\t\n\tpublic class Main \n\t\textends FlashApplication\n\t{\n\t\toverride public function getStartupCommand():Class\n\t\t{\n\t\t\treturn FlStartupCommand;\n\t\t}\n\t}\n}\n```\n\n### Startup Command\n\n```as3\npackage as3bootstrap.demo.as3.controller\n{\n\timport as3bootstrap.demo.as3.view.ApplicationMediator;\n\t\n\timport org.puremvc.as3.multicore.utilities.as3bootstrap.flash.controller.BootstrapFlashStartupCommand;\n\t\n\tpublic class FlStartupCommand \n\t\textends BootstrapFlashStartupCommand\n\t{\n\t\toverride protected function getApplicationMediator():Class\n\t\t{\n\t\t\treturn ApplicationMediator;\n\t\t}\n\t}\n}\n```\n\n### Application Mediator\n\n```as3\npackage as3bootstrap.demo.as3.view\n{\n\timport as3bootstrap.common.progress.IProgress;\n\t\n\timport org.puremvc.as3.multicore.interfaces.INotification;\n\timport org.puremvc.as3.multicore.utilities.as3bootstrap.flash.view.mediators.BootstrapFlashMediator;\n\t\n\tpublic class ApplicationMediator \n\t\textends BootstrapFlashMediator\n\t{\n\t\tpublic static const NAME : String = \"ApplicationMediator\";\n\t\t\n\t\tpublic function ApplicationMediator( name:String, viewComponent:Object, progress:IProgress=null )\n\t\t{\n\t\t\tsuper( name, viewComponent, progress );\n\t\t}\n\t\t\n\t\toverride public function respondToBootstrapLoadComplete(notification:INotification):void\n\t\t{\n\t\t\t// All bootstrap loading has completed\n\t\t}\n\t}\n}\n```\n\n## PureMVC Flex4 Mode\n\n### Main Application\n\n```as3\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003ccomponents:FlexHaloApplication\n\txmlns:components=\"org.puremvc.as3.multicore.utilities.fabrication.components.*\"\n\txmlns:fx=\"http://ns.adobe.com/mxml/2009\" \n\txmlns:s=\"library://ns.adobe.com/flex/spark\" \n\txmlns:mx=\"library://ns.adobe.com/flex/mx\"\n\tminWidth=\"955\" minHeight=\"600\"\u003e\n\t\n\t\u003cfx:Declarations\u003e\n\t\t\u003c!-- Place non-visual elements (e.g., services, value objects) here --\u003e\n\t\u003c/fx:Declarations\u003e\n\t\n\t\u003cfx:Script\u003e\n\t\t\u003c![CDATA[\n\t\t\timport as3bootstrap.demo.flex4.controller.FxStartupCommand;\n\t\t\t\n\t\t\toverride public function getStartupCommand():Class\n\t\t\t{\n\t\t\t\treturn FxStartupCommand;\n\t\t\t}\n\t\t]]\u003e\n\t\u003c/fx:Script\u003e\n\t\n\u003c/components:FlexHaloApplication\u003e\n```\n\n### Startup Command\n\n```as3\npackage as3bootstrap.demo.flex4.controller\n{\n\timport org.puremvc.as3.multicore.utilities.as3bootstrap.flex.spark.controller.BootstrapFlexSparkStartupCommand;\n\t\n\timport as3bootstrap.demo.flex4.view.ApplicationMediator;\n\t\n\tpublic class FxStartupCommand \n\t\textends BootstrapFlexSparkStartupCommand\n\t{\n\t\toverride protected function getApplicationMediator():Class\n\t\t{\n\t\t\treturn ApplicationMediator;\n\t\t}\n\t}\n}\n```\n\n### Application Mediator\n\n```as3\npackage as3bootstrap.demo.flex4.view\n{\n\timport as3bootstrap.common.progress.IProgress;\n\t\n\timport org.puremvc.as3.multicore.interfaces.INotification;\n\timport org.puremvc.as3.multicore.utilities.as3bootstrap.flex.common.view.mediators.BootstrapFlexMediator;\n\t\n\tpublic class ApplicationMediator \n\t\textends BootstrapFlexMediator\n\t{\n\t\tpublic static const NAME : String = \"ApplicationMediator\";\n\t\t\n\t\tpublic function ApplicationMediator( name:String, viewComponent:Object, progress:IProgress=null )\n\t\t{\n\t\t\tsuper( name, viewComponent, progress );\n\t\t}\n\t\t\n\t\toverride public function respondToBootstrapLoadComplete( notification:INotification ):void\n\t\t{\n\t\t\t// All bootstrap loading has completed\n\t\t}\n\t}\n}\n```\n\n# Access is everything\n\n## Signals/Notifications\n\nThe following are the types of events/signals/notifications that Bootstrap will dispatch:\n\n### Standalone\n\n* **bootstrapLoaded** - This signal is dispatched once all bootstrap related loads have completed. At this point you have access to any css, fonts or localization data that was loaded via the bootstrap files.\n\n* **dataLoaded** - This signal is dispatched once all data is loaded. This happens after bootstrapLoaded has been sent. This is only useful if you add additional custom loads via the *IProgress* trackers that are external to what bootstrap is loading. More about this coming soon.\n\n* **appLoaded** - This signal is dispatched once everything in your application has loaded. This happens after dataLoaded has been sent. This is only useful if you add additional custom loads via the *IProgress* trackers that are external to what bootstrap is loading. More about this coming soon.\n\n* **configLoaded** - This signal is dispatched once the config XML file is loaded. It allows the ability to retrieve and react to this data before any additional information is loaded in Bootstrap.\n\n* **configErrored** - This signal is dispatched once the config XML file has recieved a load error. The error event is passed as a paramter.\n\n* **bootstrapErrored** - This signal is dispatched once one of the bootstrap resources to be loaded has recieved a load error. The error event is passed as a paramter.\n\n### PureMVC\n\n* **bootstrapLoadComplete** - Same as *bootstrapLoaded* in Standalone mode, just sent as a *INotification* instead.\n\n* **dataLoadComplete** - Same as *dataLoaded* in Standalone mode, just sent as a *INotification* instead.\n\n* **applicationLoadComplete** - Same as *appLoaded* in Standalone mode, just sent as a *INotification* instead.\n\n* **bootstrapConfigLoadComplete** - Same as *configLoaded* in Standalone mode, just sent as a *INotification* instead.\n\n* **bootstrapConfigLoadFail** - Same as *configErrored* in Standalone mode, just sent as a *INotification* instead.\n\n* **bootstrapLoadError** - Same as *bootstrapErrored* in Standalone mode, just sent as a *INotification* instead.\n\n## Accessing Data\n\nSo, now that we've covered the notifications are sent out, how do I really access everything?\n\nIn both Flash and Flex applications, accessing the information is the same except for in relation to CSS data. In Flex, when a CSS SWF is loaded in, it is automatically applied to the StyleManager so no Bootstrap specific hook is provided. Also, note that Fonts are registered (if not done so already by your font SWF), so using them is as simple as using the stylesheet or creating a TextFormat and specifying the font name/family you would like to use.\n\n### Standalone\n\n```as3\nvar stylesheet : StyleSheet = bootstrap.stylesheetModel.stylesheets;\nvar localization : ILocalization = bootstrap.localizationModel.localizations;\ntrace( localization.getLocalizedValue( \"someValue\" ) );\n```\n\n### PureMVC\n\nIn PureMVC, you would just do the following as the *IBootstrap* class is wrapped in a *Proxy*.\n\n```as3\nvar bootstrapProxy : IBootstrapProxy = retrieveProxy( BootstrapProxy.NAME ) as IBootstrapProxy;\nvar bootstrap : IBootstrap = bootstrapProxy.bootstrap;\nvar localization : ILocalization = bootstrap.localizationModel.localizations;\ntrace( localization.getLocalizedValue( \"someValue\" ) );\n```\n\n## Progress\n\nProgress tracking has been hinted at in earlier sections and bootstrap has the ability to report such tracking not just internally but also for your entire application. Simply, Bootstrap internally tracks resource load totals and dispatches load progress updates. Accessing this information is quite easy.\n\n### Retrieving bootstrap progress\n\nThe below example retrieves the progress for bootstrap. *IProgress* instances report progress totals between 0-1. See the class documentation for more information on how they work.\n\n```as3\nvar bootstrap : IBootstrap = new Bootstrap();\nvar bootstrapProgress : IProgress = bootstrap.bootstrapProgress;\nbootstrapProgress.addEventListener( ResourceProgressEvent.PROGRESS, onProgressUpdate );\n\nfunction onProgressUpdate( event:ResourceProgressEvent ):void\n{\n\tbootstrapProgress.getAmountLoaded();\n\t// or\n\ttrace( event.amountLoaded );\n}\n```\n\n### Using bootstrap to track application progress\n\nNow let's say you want to incorporate this into the progress of your application? To start, you could easily take the information above and incorporate it into your own custom setup and not read any further! But, you could also use the mechanisms built into Bootstrap and use it as a progress tracker for your entire application. Let's first look at how that progress tracking is setup. \n\nBootstrap is internally setup to automatically allow tracking for your entire startup load of your application, through resources loaded internally in Bootstrap as well as external data and view assets. Note that we are talking about **tracking only**. You will still need to create your own Loaders to load your content. \n\nBootstrap automatically splits up the load into 2 separate sections: data and view. This is the recommended setup, though you may attach resources however you like.\n\n   * Data resources are reserved for any data related resources that you may want to track. All bootstrap resources are tracked as child *IProgress* instances to the data load. This all happens before the view resources are initialized to be loaded. \n\n   * View resources are any view related assets like images, videos, etc. \n\nEach time Bootstrap is instantiated, the constructor takes 3 optional *IProgress* parameters. These 3 instances can help track custom items you may want to include in your entire application. If you don't pass in any items, Bootstrap will automatically create them for you!\n\n* **progress** - This parameter is your top-level progress tracker. It allows you to retrieve total progress tracking for all child *IProgress* instances. The *IBootstrap* interface has a provided getter of the same name.\n\n* **dataProgress** - This parameter is a direct child instance of *progress* and allows you to retrieve total progress tracking for all **data** related child *IProgress* instances. The *IBootstrap* interface has a provided getter of the same name.\n\n* **viewProgress** - This parameter is a direct child instance of *progress* and allows you to retrieve total progress tracking for all **view** related child *IProgress* instances. The *IBootstrap* interface has a provided getter of the same name.\n\nOk. Ok. Enough talk. Let's see this in action! \n\n```as3\nvar appProgress : IProgress  = new Progress();\nvar customXmlLoadProgress : IProgress = new Progress();\nvar bootstrap : IBootstrap = new Bootstrap( appProgress );\n\nbootstrap.bootstrapLoaded.addOnce( onBootstrapLoaded );\nbootstrap.dataLoaded.addOnce( onDataLoaded );\nbootstrap.appLoaded.addOnce( onEntireApplicationLoaded );\n\nbootstrap.addCustomLoadResource( customXmlLoadProgress );\nbootstrap.start( loaderInfo.parameters );\n\nfunction onBootstrapLoaded():void\n{\n\t// This will be called first once bootstrap is loaded\n\t// Now we will set our custom xml load progress\n\tcustomXmlLoadProgress.setAmountLoaded( 1 );\n}\n\nfunction onDataLoaded():void\n{\n\t// Now all data loading as completed. Since we have not \n\t// added any view progress tracking, we set the main\n\t// progress tracker to complete which will complete our\n\t// entire application\n\tbootstrap.viewProgress.setAmountLoaded( 1 );\n}\n\nfunction onEntireApplicationLoaded():void\n{\n\ttrace( \"application loaded\" );\n}\n```\n\nAbove is an example of adding a custom data load *IProgress* tracker to bootstrap. There is a sugar method called *addCustomLoadResource* which allows adding custom data loads at certain points during the bootstrap process. See the ASDoc for more information on this method. After bootstrap is loaded, we set this custom progress loaded to be completed. This could actually be set at any point, but we will set it here for the purposes of this example. After this is set, the *dataLoaded* Signal is dispatched. Since we are not tracking any view assets in this application, but want to retrieve the progress total of the entire application, we set the main view *IProgress* to be completed. Not setting this will prevent the *appLoaded* Signal from being dispatched. \n\n### Adding child Progress trackers\n\nOne of the core concepts of the *Progress* class and *IProgress* interface is the ability to add as many child instances as needed. Each child instance can also do the same, and so on. Then you can pass these instances out or create them at a later point in your Proxies, Mediators, Views, etc and very simply have tracking setup throughout your entire application. Simply, a *IProgress* instance will save a certain amount of the entire tracking load based on the other children attached. It is up to you to set that amount when ready! Below is a very simple example of how this works:\n\n```as3\nvar progress : IProgress = new Progress();\nvar viewProgress : IProgress = new Progress();\nvar someImageAssetProgress : IProgress = new Progress();\nprogress.addChildLoadable( viewProgress );\nviewProgress.addChildLoadable( someImageAssetProgress );\n\nsomeImageAssetProgress.setAmountLoaded( 1 );\n// Now that we have set the image asset progress to be completed, the \n// total progress loaded in the top-level progress will also equal one since\n// now all progress instances total will equal 1.\ntrace( progress.getAmountLoaded() ); // Equals 1\n```","funding_links":[],"categories":["Utilities"],"sub_categories":["Other Utilities"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrange%2FAS3-Bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrange%2FAS3-Bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrange%2FAS3-Bootstrap/lists"}