You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/CTG_40_platform/CTG_50_userinterface/CTG_30_externalobjects/LSN_10_basic/basic.md
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,9 +4,9 @@
4
4
5
5
It is an object that allows for customized interactions and behaviors within Simplicité. They are objects that you will implement to serve specific needs.
6
6
7
-
In such objects you will be able to interact with Simplicité by using the [Ajax Library](https://platform.simplicite.io/6.2/jsdoc/index.html) to properly interact with the native part of your solution.
7
+
In such objects you will be able to interact with Simplicité by using the [Ajax Library](https://platform.simplicite.io/current/jsdoc/index.html) to properly interact with the native part of your solution.
8
8
9
-
There are several types of *External Objects*, that all serve a certain use-case of type of need:
9
+
There are several types of *External Objects*, that all serve a certain use-case of type of need:
10
10
- Basic
11
11
-[UI page or component](/lesson/docs/platform/userinterface/externalobjects/uicomponent)
Copy file name to clipboardExpand all lines: content/CTG_40_platform/CTG_50_userinterface/CTG_30_externalobjects/LSN_20_uicomponent/uicomponent.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -337,7 +337,7 @@ There are several keypoints to understand and keep in mind while developing in t
337
337
338
338
### JS behavior
339
339
340
-
In the **CLASS** resource, you will write the JS script for your component's behavior. Here you will have the possibility to use both the [JSDoc](https://platform.simplicite.io/6.2/jsdoc/) for frontend operations direclty in the **CLASS** resource's script, and to make few calls to the *Java* code of your component to add custom server-side operations.
340
+
In the **CLASS** resource, you will write the JS script for your component's behavior. Here you will have the possibility to use both the [JSDoc](https://platform.simplicite.io/current/jsdoc/) for frontend operations direclty in the **CLASS** resource's script, and to make few calls to the *Java* code of your component to add custom server-side operations.
341
341
342
342
> By default the only call from **CLASS** to **Java** is through `render()` that allows for your component's correct display and instantiation. But later on we'll see another method that allow for more custom calls: `service()`.
343
343
@@ -352,7 +352,7 @@ Simplicite.UI.ExternalObjects.TestWebPage = class extends Simplicite.UI.External
352
352
353
353
The key concepts and understanding that you need are:
354
354
- Every instantiation has to be within the ```async render(){ ... }```
355
-
- You can work with Simplicité's API and core library using several entry points such as `$ui`, `$app` or `$grant` (documented in the [Ajax library](https://platform.simplicite.io/6.2/jsdoc/global.html)).
355
+
- You can work with Simplicité's API and core library using several entry points such as `$ui`, `$app` or `$grant` (documented in the [Ajax library](https://platform.simplicite.io/current/jsdoc/global.html)).
356
356
- You can manipulate most of the *BusinessObjects* and elements through the `BusinessObject.search( function() {...} )` method.
357
357
358
358
You may need to implement some behaviors and features specifically on the *server-side* (though in the java code). Such workflow is required when you don't want to share informations with the front (public) or you just want the calculations to be done by the backend.
Copy file name to clipboardExpand all lines: content/CTG_40_platform/CTG_50_userinterface/CTG_30_externalobjects/LSN_50_staticsite/staticsite.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,7 +30,7 @@ The creation process is similar to the one for any *External Object*:
30
30
31
31
## Usage
32
32
33
-
As a *Static Web Page* isn't interacting with Simplicité's API or backend, you only have the 3 resources to worry about. For the development specific to Simplicité refer to the [JSdoc](https://platform.simplicite.io/6.2/jsdoc/global.html).
33
+
As a *Static Web Page* isn't interacting with Simplicité's API or backend, you only have the 3 resources to worry about. For the development specific to Simplicité refer to the [JSdoc](https://platform.simplicite.io/current/jsdoc/global.html).
34
34
35
35
> Specific use case and code examples can be found in the following lessons: [WebPage](/lesson/docs/platform/userinterface/externalobjects/webpage), [UI Component](/lesson/docs/platform/userinterface/externalobjects/uicomponent), [External Objects](/lesson/docs/platform/userinterface/externalobjects/basic).
36
36
@@ -76,5 +76,5 @@ Simplicite.UI.ExternalObjects.TrnStaticPage = class extends Simplicite.UI.Extern
Copy file name to clipboardExpand all lines: content/CTG_50_docs/CTG_25_front/LSN_30_javascript-dev/javascript-dev.md
+22-22Lines changed: 22 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -78,9 +78,9 @@ try
78
78
catch (err) console.error(err.message);
79
79
```
80
80
81
-
The rest of this example is focusing on a Native based web-page using basic web technologies: **HTML**, **CSS**, **JS**.
81
+
The rest of this example is focusing on a Native based web-page using basic web technologies: **HTML**, **CSS**, **JS**.
82
82
83
-
### Basic Setup
83
+
### Basic Setup
84
84
85
85
The first step to create your custom front with the NPM Simplicite library is the same as for most of other **Node.js** projects:
86
86
@@ -92,19 +92,19 @@ The first step to create your custom front with the NPM Simplicite library is th
92
92
93
93
Once the basic setup for your Simplicité-powered project is installed, the next step is to *structure it* like any standard web project using **Node.js**. This typically results in the following file structure:
- Place all *dynamically accessed* resources, such as stylesheets and scripts for specific pages, in the **public** folder (for now, this may only include `index.html`).
105
105
- Store all your `.html` files representing *individual pages* in the **views** folder.
106
106
- Your main javascript code (for project's setting up at least) will be written in the `app.js` file.
107
-
107
+
108
108
> ***Note:*** Properly setting up and understanding why your project directory is organized this way is important to later properly implement your javascript code and ensure consistency throughout your project if you want to scale it.
-`url` defines the url for your Simplicité session, for most of the demos we use `https://demo.dev2.simplicite.io`.
171
171
-`username` sets the username to access the session, ensure this is a valid one.
172
172
-`password` sets the password to access the session, ensure it's the good one for your user and session.
173
-
-`debug` defines if yes or not your session is used in debug mode.
173
+
-`debug` defines if yes or not your session is used in debug mode.
174
174
</details>
175
175
176
176
In the code, you’ll notice that your information can either be hardcoded with *string* values or secured by referencing a `.env` file created in your root directory. For this use case, the `.env` file might look like this:
- `serverHost` and `serverPort` are instanciated either from your **.env** file, **command line arguments**, or **hardcoded values**, and defines the host *IP address* and *Port* where your app should run.
216
-
- `constserver=express()` creates an express application instance, that will handle incoming HTTP requests and also manage routes & responses.
216
+
- `constserver=express()` creates an express application instance, that will handle incoming HTTP requests and also manage routes & responses.
217
217
- `server.disable('x-powered-by');` disables the specified header in HTTP responses, included for security reasons as it prevents revealing that app is runing on express (supposed to make it less vulnerable).
218
218
- `constdir` storesthedirectorypathforcurrentmodule/file, convertingthe `import.meta.url` intoaregularfilepathwith `fileURLToPath()`, andextractingthedirectorypartforthispartusing `dirname()`. Itensurestheproperreferencingof files relative to current **app.js** script.
219
219
-`server.use()` serves static files from `/public` directory, and can be accessed by visiting `/filename`inbrowser. It enables frontend assets (images, stylesheets, additional scripts, ...).
@@ -370,12 +370,12 @@ The Simplicité JavaScript API repositories provide a wealth of examples and dem
370
370
371
371
# Core Javascript usages
372
372
373
-
**JavaScript development** in Simplicité plays a critical role in extending and customizing front-end functionalities. While Simplicité's core architecture is mainly *Java-based*, JavaScript is most frequently encountered in specific contexts, particularly in *External Objects* and *front-end development* scenarios. These use cases arise when there is a need to create specific, client-side behaviors or *integrate external components* into the Simplicité platform.
373
+
**JavaScript development** in Simplicité plays a critical role in extending and customizing front-end functionalities. While Simplicité's core architecture is mainly *Java-based*, JavaScript is most frequently encountered in specific contexts, particularly in *External Objects* and *front-end development* scenarios. These use cases arise when there is a need to create specific, client-side behaviors or *integrate external components* into the Simplicité platform.
374
374
375
-
The *recurring use* of JavaScript in these contexts stems from its ability to:
376
-
- Enhance user interaction with *responsive* front-end elements.
377
-
- Provide flexibility in implementing custom *business logic* at the client level.
378
-
- Seamlessly integrate *external libraries* or *APIs* that complement Simplicité’s core functionalities.
375
+
The *recurring use* of JavaScript in these contexts stems from its ability to:
376
+
- Enhance user interaction with *responsive* front-end elements.
377
+
- Provide flexibility in implementing custom *business logic* at the client level.
378
+
- Seamlessly integrate *external libraries* or *APIs* that complement Simplicité’s core functionalities.
379
379
380
380
By focusing on these key contexts, JavaScript development within Simplicité complements its Java-based backend, enabling a richer, more adaptable, and interactive front-end experience. Whether building custom components, enhancing default UI behaviors, or connecting external systems, JavaScript is an indispensable tool for unlocking the full potential of the Simplicité platform.
381
381
@@ -388,7 +388,7 @@ The main utility for javascript development within Simplicité is the implementa
388
388
The javascript development will happen within the *SCRIPT* resource of your *External Object*, and will allow you to do two things:
389
389
390
390
1) **Customized behaviors:** first, you are gonna be able to apply custom behaviors and interactions for your custom object
391
-
2) **Communicate with Simplicité:** then, you will be able to make your widget even more interactive by allowing it to discuss in various ways
391
+
2) **Communicate with Simplicité:** then, you will be able to make your widget even more interactive by allowing it to discuss in various ways
392
392
393
393
In this case, you can declare all your javascript code within the *SCRIPT* resource, make sure that you respect common rules and methodologies, so define your methods thoughfully, don't make redundant code, don't hesitate to document your code and make reusable functions in case you need it.
394
394
@@ -497,7 +497,7 @@ public class MyExternalObject extends ExternalObject {
497
497
498
498
// Bootstrap page
499
499
BootstrapWebPage wp = new BootstrapWebPage(params.getRoot(), getDisplay());
@@ -537,9 +537,9 @@ var MyExternalObject = (function($) {
537
537
```
538
538
539
539
***Code Overview:***
540
-
-`var MyExternalPage = ...`, here the code is encapsulatied within a local variable in order to avoid polluting the global namespace.
540
+
-`var MyExternalPage = ...`, here the code is encapsulated within a local variable in order to avoid polluting the global namespace.
541
541
-`(function($) {...})(jQuery)` defines an immediately-invoked function expression receiving `jQuery` as an argument.
542
-
-`new Simplicite.Ajax()` declares a new instance for the Simplicité session, with parameters `approot = ""` and `gateway = "uipublic"`. To make sure you are applying the right parameters, refer to [this part](https://platform.simplicite.io/6.1/jsdoc/Simplicite.Ajax.html) of the documentation.
542
+
-`new Simplicite.Ajax()` declares a new instance for the Simplicité session, with parameters `approot = ""` and `gateway = "uipublic"`. To make sure you are applying the right parameters, refer to [this part](https://platform.simplicite.io/current/jsdoc/Simplicite.Ajax.html) of the documentation.
543
543
-`function render(params) {...}` is the method called in the **Java code** to be executed when DOM is fully loaded (by `setReady()` method).
544
544
545
545
To keep on going with your javascript development with this setup, you just have to declare your functions in the encapsulated function, and make sure to call the functions using the correct namespace in your `.html` resource file. In our case if you declare a *sayHello* function in yoir javascript code, then you must call `MyExternalPage.sayHello` inside of your html file.
0 commit comments