### Manually Start CodeParadise Source: https://github.com/erikonbike/codeparadise/blob/master/README.md This Smalltalk code snippet shows how to manually start the CodeParadise environment. This action initiates both HTTP and WebSocket servers, allowing multiple applications to run. ```smalltalk CpDevTools start. ``` -------------------------------- ### Smalltalk in Browser with SqueakJS Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Background.md Utilizes a tiny Smalltalk image running on SqueakJS for client-side UI logic. The server-side Smalltalk image sends UI components (HTML, CSS, and code) to the browser, which are then installed in the tiny image to create and manage the UI. This ensures synchronization between server and client. ```Smalltalk UI component (HTML, CSS and code) is transferred to the web browser and installed in the tiny image. It will create the same UI component (class) inside the browser and it can/will only do the displaying and event handling. If the server side code changes, these changes are sent to the web browser as well. This keeps the UI components in sync. If an exception occurs in the tiny image, it will be send back to the server as an event. The server can handle it or show a debugger (which of course gets displayed in the web browser just like everything else). ``` -------------------------------- ### Start Node.js Application Source: https://github.com/erikonbike/codeparadise/blob/master/README.md This snippet shows how to start a Node.js application using CP-Node. It involves setting environment variables for the application name and server URL, and then executing the 'cp-node.js' script with a client environment argument. ```bash APP="http-server-example" SERVER_URL="ws://localhost:8080/io" node cp-node.js client-environment.image ``` -------------------------------- ### CP-Node Setup for Node.js Applications Source: https://github.com/erikonbike/codeparadise/blob/master/README.md Instructions for setting up the CP-Node repository for developing Node.js applications with CodeParadise. It involves cloning the repository or copying specific files. ```Shell # Clone the CP-Node repository git clone https://github.com/ErikOnBike/CP-Node # Or copy the required files manually: # cp-node.js # client-environment.image ``` -------------------------------- ### ClientEnvironment Files for Manual Installation Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Implementation.md Details the essential files required for manually setting up the ClientEnvironment in a browser. These files include the HTML entry point, the bundled JavaScript VM with plugins, and the Smalltalk image. ```APIDOC ClientEnvironment Files: * `app.html`: HTML file to initiate the Squeak JS VM and specify the Smalltalk image. * `webapp_bundle.min.js`: Contains the Squeak JS VM (headless) and plugins like Large Integers, System (with WebSocket support), and DOM wrappers. * `client-environment.image`: A compact Smalltalk image (approx. 225Kb). ``` -------------------------------- ### Open Application in Browser Source: https://github.com/erikonbike/codeparadise/blob/master/README.md This Smalltalk code snippet demonstrates how to open a CodeParadise application in the browser. It assumes the CodeParadise environment has already been started. ```smalltalk CpPresentationWebApplication openInBrowser. ``` -------------------------------- ### SqueakJS and Amber for Browser Smalltalk Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Background.md SqueakJS and Amber are mentioned as existing Smalltalk development environments for the web browser. SqueakJS allows running a 'regular' Smalltalk image, while Amber focuses on client-side development with a distinct implementation. ```Smalltalk [SqueakJS](https://squeak.js.org) or [Amber](https://amber-lang.net) can already be used as Smalltalk development environment in the web browser. ``` -------------------------------- ### PharoJS for Browser Smalltalk Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Background.md PharoJS is identified as a potential option for integrating Smalltalk into the browser, similar to SqueakJS, but with a different focus. It might be useful for handling the UI logic in the browser. ```Smalltalk [PharoJS](https://pharojs.github.io) might be useful option here as well as SqueakJS, but both focus on a different use case. ``` -------------------------------- ### Web Components Integration Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Background.md The UI components for the CodeParadise platform are based on the Web Components standard. This allows for encapsulated, reusable UI elements that can be managed by the Smalltalk environment running in the browser. ```HTML The UI components are based on the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) standard. ``` -------------------------------- ### Render Current Slide and Carousel Source: https://github.com/erikonbike/codeparadise/blob/master/docs/MVP.md Example of rendering the current slide, a slide carousel, and the browser tab title from a presenter. ```Smalltalk renderView "Render the current slide" sself renderChildViewForModel: self currentSlideModel atSlotNamed: #slide. "Only render the carousel if it is present" self slidesCarouselPresenter ifNotNil: [ :slidesCarouselPresenter | slidesCarouselPresenter renderView ]. self view renderTitle: self model title ``` -------------------------------- ### Smalltalk Implementations and Toolkits Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Introduction.md Details on specific Smalltalk implementations like Pharo and Cuis, and the Glamorous toolkit built on Pharo. Pharo is noted for its active community and rich features, while Cuis is praised for its clean and simple implementation suitable for learning. Glamorous showcases the possibilities of moldability. ```Smalltalk Smalltalk Implementations: - Pharo: Active community, feature-rich. - Cuis: Clean, simple implementation, good for learning. Toolkits: - Glamorous (built on Pharo): Demonstrates moldability possibilities. ``` -------------------------------- ### Listing Pre-installed Classes in ClientEnvironment Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Implementation.md This snippet demonstrates how to retrieve a list of pre-installed classes within the CodeParadise ClientEnvironment. This is useful for understanding the base set of classes available in the client-side Smalltalk image. ```Smalltalk CpClientEnvironment preInstalledClasses ``` -------------------------------- ### Loading CodeParadise with Metacello Source: https://github.com/erikonbike/codeparadise/blob/master/README.md This snippet demonstrates how to load the CodeParadise framework using the Metacello package manager in a Pharo Smalltalk environment. It specifies the repository and baseline for loading. ```Smalltalk Metacello new repository: 'github://ErikOnBike/CodeParadise'; baseline: 'CodeParadise'; load. ``` -------------------------------- ### Define Root Application Model Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Applications.md This instance method should return the root Model for the application, which serves as the entry point for rendering, updates, and interactions. The application instance itself can also serve as the root Model. ```Smalltalk MyWebApplication >> #applicationModel "Answer a Model which acts as your root Model or entry point for the application." ^ aModelInstance ``` -------------------------------- ### Smalltalk Object-Oriented Principles Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Introduction.md This section discusses the core principles of Object-Oriented programming as implemented in Smalltalk, focusing on message passing and live, moldable environments. It highlights the simplicity of the model and the ability to modify the development environment itself. ```Smalltalk Object-Oriented Principles: - Communicating objects using messages - Live moldable environment (direct changes and changing the development environment itself) ``` -------------------------------- ### Server Components in CodeParadise Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Implementation.md Describes the server-side components of CodeParadise, including the HTTP server for static files and the WebSocket server for interactive communication, both leveraging Zinc HTTP Components. ```APIDOC ApplicationServer Components: * HTTP Server: Serves static files, built using Zinc HTTP Components. Can be replaced with other web servers. * WebSocket Server: Facilitates interactive communication between ClientEnvironment and ServerEnvironment, also using Zinc HTTP Components. ``` -------------------------------- ### CodeParadise WebApplication Development with MVP Source: https://github.com/erikonbike/codeparadise/blob/master/README.md CodeParadise enables the creation of WebApplications using an MVP (Model View Presenter) pattern. This pattern is built upon WebComponents and HTML templates, providing a set of components and widgets for developing full-featured web applications, all managed by a Smalltalk application. ```Smalltalk "Example of MVP pattern usage in CodeParadise (conceptual)" "Define a Model" Object subclass: #MyModel instanceVariableNames: 'data' classVariableNames: '' poolDictionaries: '' category: 'CodeParadise-Examples'. MyModel >> initialize data := 'Initial Data'. MyModel >> updateData: newData data := newData. MyModel >> getData ^ data. "Define a View (using HTML templates and WebComponents)" HTMLTemplate subclass: #MyView instanceVariableNames: '' classVariableNames: '' poolDictionaries: '' category: 'CodeParadise-Examples'. MyView >> renderContentOn: html div: [ html text: self model getData ]. "Define a Presenter" Object subclass: #MyPresenter instanceVariableNames: 'model view' classVariableNames: '' poolDictionaries: '' category: 'CodeParadise-Examples'. MyPresenter >> initializeWithModel: aModel view: aView model := aModel. view := aView. MyPresenter >> displayData view renderContentOn: (HTMLWriter new). MyPresenter >> updateAndDisplay: newData model updateData: newData. self displayData. "Usage Example" | model presenter view | model := MyModel new. view := MyView new. presenter := MyPresenter newInitializeWithModel: model view: view. presenter displayData. "Update data and re-display" presenter updateAndDisplay: 'Updated Data'. ``` -------------------------------- ### CodeParadise Server Application Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Implementation.md Represents a server-side application in CodeParadise. Developers need to create any interaction with the browser themselves. ```Smalltalk CpServerApplication ``` -------------------------------- ### CodeParadise Web Application Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Implementation.md A plain vanilla web application flavor in CodeParadise. It provides DOM functionality for interaction with the browser. ```Smalltalk CpWebApplication ``` -------------------------------- ### CodeParadise MVP Web Application Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Implementation.md A full monthly web application flavor in CodeParadise, offering Model View Presenter (MVP) functionality. It manages application sessions and presenters, with views created as WebComponents in the browser. ```Smalltalk CpMvpWebApplication ``` -------------------------------- ### Render Child Views Using a Block Presenter Source: https://github.com/erikonbike/codeparadise/blob/master/docs/MVP.md Demonstrates rendering a collection of child views using a block to specify the presenter, useful for rendering items as cards. ```Smalltalk renderView "Render all employees as cards/items" sself renderChildViewForModel: self model employees usingPresenter: [ :each | each preferredItemPresenterClass ] atSlotNamed: 'items' ``` -------------------------------- ### Presenter: Handling Link Activated Announcement Source: https://github.com/erikonbike/codeparadise/blob/master/docs/MVP.md This Smalltalk code demonstrates how a Presenter sets up a listener for a `CpLinkActivated` announcement from its View and handles it by selecting a linked slide from its model. ```Smalltalk viewCreated super viewCreated. self view when: CpLinkActivated send: #linkedSlideSelected to: self linkedSlideSelected "Tell the parent presenter the linked slide is selected" self parent slideSelected: self model linkedSlide ``` -------------------------------- ### View: Announcing Link Activation on Click Source: https://github.com/erikonbike/codeparadise/blob/master/docs/MVP.md This Smalltalk code shows how a View handles a primary click event by announcing a `CpLinkActivated` event, which can then be caught by a Presenter. ```Smalltalk initialize super initialize. self when: CpPrimaryClickEvent send: #handleClickEvent: to: self handleClickEvent: aClickEvent self serverAnnounce: CpLinkActivated ``` -------------------------------- ### CodeParadise Compatibility with Pharo and SqueakJS Source: https://github.com/erikonbike/codeparadise/blob/master/README.md CodeParadise ensures compatibility by transmitting bytecode to the ClientEnvironment (SqueakJS VM). It requires that both the Pharo server and ClientEnvironment share the same bytecode set. Currently, Pharo 10 to 13 are supported, with active development on Pharo 12. Support for Pharo 8 and 9 is discontinued due to changes in the tiny Smalltalk image creation process. ```Smalltalk "Conceptual representation of bytecode compatibility check in CodeParadise" "The system verifies that the bytecode version of the ServerEnvironment (Pharo) is compatible with the ClientEnvironment (SqueakJS)." "PharoVersion := self getPharoVersion. " "ClientVMVersion := self getClientVMVersion. " "if (PharoVersion >= 10 and PharoVersion <= 13) and (ClientVMVersion == 'SqueakJS') then " "Compatibility is maintained." "else " "Incompatibility detected. Handle error or warning." "end." "Note: This is a simplified illustration. The actual checks are integrated within the CodeParadise framework." ``` -------------------------------- ### Presenter Rendering Methods Source: https://github.com/erikonbike/codeparadise/blob/master/docs/MVP.md Lists and describes various methods available on a presenter for rendering child views, including options for specifying models, slots, and presenters. ```APIDOC Presenter Rendering Methods: #renderAllChildViewsForModels: Renders a collection of Views for the specified models in the default (unnamed) slot. #renderAllChildViewsForModels:atSlotNamed: Renders a collection of Views for the specified models in the specified slot. #renderAllChildViewsForModels:usingPresenter: Renders a collection of Views for the specified models using explicitly defined Presenters in the default (unnamed) slot. #renderAllChildViewsForModels:usingPresenter:atSlotNamed: Renders a collection of Views for the specified models using explicitly defined Presenters in the specified slot. #renderChildViewForModel: Renders a View for the specified model in the default (unnamed) slot. #renderChildViewForModel:atSlotNamed: Renders a View for the specified model in the specified slot. #renderChildViewForModel:usingPresenter: Renders a View for the specified model using an explicitly defined Presenter in the default (unnamed) slot. #renderChildViewForModel:usingPresenter:atSlotNamed Renders a View for the specified model using an explicitly defined Presenter in the specified slot. ``` -------------------------------- ### Ionic Framework CSS Import Source: https://github.com/erikonbike/codeparadise/blob/master/README.md This CSS snippet demonstrates how to import the Ionic Framework's bundle CSS. This is recommended when using Ionic components within a shadow DOM to ensure global styling is applied correctly. The import is designed to be cached by browsers. ```css @import url("https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"); ``` -------------------------------- ### Conditional Presenter Selection Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Applications.md For state-based presenters, this method (or `applicationModel>>#preferredPresenterClass`) allows specifying a different presenter based on application state, such as whether a user is logged in. ```Smalltalk MyWebApplication >> #applicationPresenterClass "Answer a different Presenter based on the presence of a logged in user." ``` -------------------------------- ### Define Application Identifier Source: https://github.com/erikonbike/codeparadise/blob/master/docs/Applications.md This class method should return a unique symbol representing the application's identifier. This identifier is used in the URL to access the application. ```Smalltalk MyWebApplication class >> #app "Answer a Symbol representing the identifier of the application." ^ #myapp ``` -------------------------------- ### CodeParadise Standalone Application Sealing Source: https://github.com/erikonbike/codeparadise/blob/master/README.md CodeParadise allows applications to be 'sealed', enabling them to run independently without a Pharo server image. This is useful for creating mobile apps or standalone Node.js server applications and CLI tools. However, this feature is not compatible with MVP-based applications as they rely on communication with the Pharo server. ```Smalltalk "Conceptual example of sealing an application in CodeParadise" "Assume 'MyApp' is a class representing your application logic." "CodeParadise provides mechanisms to package and seal applications." "Example: Packaging a non-MVP application for standalone execution" "CodeParadise >> sealApplication: MyApp " "This process would involve bundling the necessary Smalltalk image and application code." "The resulting artifact could be a Node.js executable or a mobile application package." "Note: This is a conceptual representation. Actual implementation details are within the CodeParadise framework." ``` -------------------------------- ### Manually Stop CodeParadise and Garbage Collect Source: https://github.com/erikonbike/codeparadise/blob/master/README.md This Smalltalk code snippet shows how to manually stop the CodeParadise environment and perform garbage collection. It's recommended for cleaning up sessions and ensuring better memory management. ```smalltalk CpDevTools stop. "Garbage collect works better in triples ;-)" 3 timesRepeat: [ Smalltalk garbageCollect ]. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.