Hello,

I would like to use as a component template that returns a string containing the HTML value of a component.

Is there a method like this?

i'm using the Quadient DC and i want to importing libraries to component that i build
but that give me error "Require is not defined" when its compile to js
there is a way to import libraries like material?

I copy and pasted hello world code example from http://bobril.com/#/getStarted and it does not work. There are syntax errors.

When I accidently call transation.Store() on KeyValuePair, instead of on his value. I get Verification Exception, operation could destabilize runtime. It's difficult to find the right spot where tr.Store on struct is called.

IBobrilMouseEvent contains page positions x and y.
I need element postion.

My current solution:

const position = b.convertPointFromPageToNode(ctx.me, x, y);
const scroll = b.getWindowScroll();
let cell = ctx.cellPositonConverter.getCellFromPositon(position[0] + scroll[0], position[1] + scroll[1]);

Is there any better way to convert it to element position with scroll support?

THX
Pepa

Hello,

I use Bobril for the first time and I'm looking for documentation. You soon a complete documentation ?

• Into the video he use b.createComponent(...) but I dont find this method!

Thank you.

Hello,

I just want to know what is the difference between those 2 ways to create a component :

1. declaration :

const myComponent: IBobrilComponent = {
     init(ctx: IBobrilCtx) {...},
     render(ctx: IBobrilCtx, me: IBobrilNode) {...}

use :
{ component: myComponent, data: { model: model, passenger: passenger } }

2. declaration :

const myComponent= b.createComponent({
     init(ctx: IBobrilCtx) {...},
     render(ctx: IBobrilCtx, me: IBobrilNode) {...}

use :
myComponent( {...} )

thank you.

png use sprite , but when use gif , the build is just png file, the gif not work

After recently starting a new project with Bobril (within the last 30 minutes), I am getting the the above error against this line of code:

After fishing around for a bit, waitingForPopHashChange is a numeric where setTimeout is a timer. Is this a legit error or something perhaps I messed up when installing the project?

Hi Bobris,
i update the desginer to 14.4 and when i build component with gulp
its give me error on export
and when i click on js file its give me this row
exports.textBoxFactory = void 0;

Hi,

I have 2 different models :

model1: {}
model2: {}

When I click on a button, I'd like to change model.

Could u, plz, tell me what's the best way.

Best regards,

Richy

i create a textbox input and the validation work only on:

• Submit
• Always

and i want with first focus

 <reference path='../../Libraries/bobril/library.d.ts'/>

  <reference path='../../Libraries/dc-helpers/library.ts'/>
 <reference path='../../Libraries/bobril-onchange/library.d.ts'/>
 <reference path='../../Libraries/validation/library.ts'/>
  <reference path="../../Libraries/bobril-focus/library.d.ts"/>

declare let textboxStyle: IBobrilStyleDef;
declare let textboxInvalidStyle: IBobrilStyleDef;
declare let labelStyle: IBobrilStyleDef;

const enum TextboxType { TEXT = "text", PASSWORD = "password", SEARCH = "search" }

const enum Autocapitalize {
NONE = "none",
SENTENCES = "sentences",
WORDS = "words",
CHARACTERS = "characters"
}

interface IData {
datactx: IDataCtx;
id: string;
placeholder: string;
type: TextboxType;
maxlength: number;
autocapitalize: Autocapitalize;
}

interface ICtx extends IBobrilCtx {
data: IData;
firstFocus: boolean;
}

interface IDataCtx {
setValue(value: string): void;
getValue(): string;
}
let applyInvalidStyle: boolean = true;
const divComponent: IBobrilComponent = {

id: "DivComponent",
init(ctx: ICtx, me: IBobrilCacheNode): void {
    initValidatedInput(ctx, me, "Value");
},
render(ctx: ICtx, me: IBobrilNode): void {
    me.tag = 'div';
    applyInvalidStyle = !isValid(ctx)
        && ctx.cfg
        && ctx.cfg.shouldShowValidation(ctx);
    me.children = [createInputComponent(ctx), b.style!({ tag: 'label', children: ctx.data.placeholder, attrs: { for: ctx.data.id } }, labelStyle)]
},
onChange(ctx: ICtx, value: string): void {
    ctx.data.datactx.setValue(value);
},
onBlur(ctx: ICtx): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
}

};
function createInputComponent(ctx: ICtx): IBobrilNode {
return {
data: ctx.data,
component: inputTextComponent
}
}
const inputTextComponent: IBobrilComponent = {
id: "TextBoxComponent",

render(ctx: ICtx, me: IBobrilNode): void {
    const d = ctx.data;
    me.tag = "input";
    me.attrs = b.assign(
        me.attrs || {}, {
        id: d.id,
        name: d.id,
        placeholder: ' ',
        value: d.datactx.getValue(),
        maxlength: d.maxlength
    },
        getReadOnlyStatus(ctx) ? { readonly: true } : {}
    );

    b.style!(me, textboxStyle, applyInvalidStyle && textboxInvalidStyle)
},
onChange(ctx: ICtx, value: string): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
    ctx.data.datactx.setValue(value);
},
onBlur(ctx: ICtx): void {
    if (!ctx.firstFocus) {
        ctx.firstFocus = true;
        b.invalidate();
    }
}

}
var getID = (): string => {
return Math.random().toString(36).substr(2, 9);
}
export function textBoxFactory(
type: TextboxType,
placeholder: string,
maxLength: number,
autocapitalize: Autocapitalize,
dataCtx: IDataCtx
): IBobrilNode {
const ID = getID();
return {
data: {
placeholder,
type,
id: ID,
maxlength: maxLength >= 0 ? maxLength : null,
autocapitalize,
datactx: dataCtx
},
component: divComponent
};
}

I have problem with local built, I am using for built bb

PS E:\Other_projects\VSC_ESP\testBobril> bb
Bobril-build core running C:\Users\rmysk.bbcore\1.34.0
Listening on http://localhost:8080/
Build started E:/Other_projects/VSC_ESP/testBobril
Npm install
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

audited 1 package in 0.717s
found 0 vulnerabilities

during local built I received this error

Main file E:/Other_projects/VSC_ESP/testBobril/index.js not found
Using TypeScript version 4.1.2
JS Bundle length: 11758 SourceMap length: 517 T:28ms
package.json(1,1): Unused dependency bobril in package.json (-13)
Build done in 3.2s with no errors and 1 warning and has 3 files
Semantic check done in 4.3s with no errors and 1 warning

Hello,

I have implemented a select box this way :

    const cePaxSelect = b.createComponent({
        render(ctx: IBobrilCtx, me: IBobrilNode) {
            me.tag = "select";
            me.className = "natural-select";
            me.children = this.createOptions(ctx.data);
        },
        onChange(ctx: IBobrilCtx, value: string) {
            // process value here ...
            b.invalidate();
        },
        createOptions(model: IBookingModel): IBobrilChildren {
        ...

The issue occured when we click on the select box, there is an onChange event that is launched, so, the first value in the list is selected. When a element is selected, I need to update the values inside this select box, but it create the issue of the click again.
This does not appear on your exemple : http://bobris.github.io/Bobril/input/index.html

I have tried to create a event component to handle the onChange event inside it :

            me.component = {
                onChange(ctx: IBobrilCtx, value: string) {
                    console.log("select change : " + value);
                }
            };

but nothing occured.

thank you.

Float was reserved keyword till ECMAScript 3 and reserved words actually only apply to Identifiers, so it's use as an object property is legal.
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar

I need to use optGroups in Selects but the label attribute is not rendered...
How could I do it? thank you !

fact is it's perfecty working... sorry for that

Hi,

Is it possible to add the definition into typings ?

Thank you ;o)

At the moment, the bobril NPM package doesn't contain compiled output. It only contains index.ts. What is worse is that the package.json references main: 'index.js' which doesn't exist in the package (I'm surprised NPM let you publish like this).

If it is possible, it would be nice to be able to use this without having to use the custom tooling. I believe at the least this requires publishing NPM packages with pre-compiled index.js (this may require other changes as well, not sure).

I call b.invalidate(ctx) in postinitDom and render is not called then.

fix: add finishUpdateNodeWithoutChange(c, createInto, createBefore); to updateNode In case there is no component and source is same reference it is considered not changed

Can we reander a Inspire Desinger Bobril output in a WebComponent inseat of a iframe?

there a way to style children with selectors like focus?

something like below...
b.styleDef({
color:'red';
p:{
color:'blue'
}
}}

Hi,
I have an issue with loader of nodejs modules. I have created a sandbox project to visualize the problem
The problem occurs, when I import typescript file, that is not in the hiearchy of the project directories.

The project structure:

There are two projects. The one is located in src and the second in otherProject. Each of this projects has own package.json.

I want to import an utils.ts class in src project.

If I run bb command in src project, than bobril sources in the browser looks like:

The problem is, that the loader wants to load the module bobril through the key: "node_modules/bobril/index"
From this map:

It will fall to this exception:

So, in the chrome browser console this exception occured:

Uncaught Error: Module bobril in src/index not registered
    at Function.R.r (loader.js:27)
    at loader.js:31
    at index.ts:1
    at Function.R.r (loader.js:31)
    at (index):16

I need this, to create a sandbox (example) project, to test the core functionality of another project.

Sandbox code to see the error:
bobril-issue-sandbox.zip

Any idea?

Thanks :)

Hi,
I have a problem to apply !important to CSS property.

It occurs only if the CSS property name is composed by two words.
For example: box-shadow, min-width, min-height, etc..

If I do not use "!imporant", than the property is correctly displayed in browser (debugg view), but if I apply this keyword, than the property completly disappear.

b.styledDiv(...., {minWidth: "200px !important"})

First I want to say, great work on Bobril, it's something I've been utilising for a framework I'm currently designing.

The only lacking feature I see is isomorphic support for NodeJS? So, like React, components can be rendered on the server and, upon the client loading the rendered output, initialise from the pre-rendered DOM. React makes use of data-reactid to link up the nodes to their respective virtual dom counterparts, so I'd imagine something similar could be applied to Bobril.

I believe this a key feature that would certainly add massively to Bobril and its uptake in the community.