DART somo la 22: Jinsi ya kutumia html library kwenye Dart

Somo letu litakuwa katika njia mbili, ya kwanz ani ya online na ya pili ni ya offline. Kwanza tutaanza na njia ya online. Hapa tutakwenda kutumia Dart pad ambayo ni text ediroe iliyoandaliwa na waanzilishi wa Dart. editor hii ina feature zote.

Kwanza tutatengeneza mafaili yetu ya html, la css, na html. Kisha tutakwenda ku pest code hizo kwenye pad editor ya online.

Ili uweze ku run html code kwenye dart kwanza tutatakiwa ku import html . hivyo basi ingia kwenye dart pad, anza ku import dart library

import 'dart:html';

void main()

{

}

Kisha kwenye hiyo dart pad kwa juu kuna palipo andikwa html bofya hapo kisha pest code za html.

<!DOCTYPE html>

<html>

<head>

<title>Bongoclass</title>

<link rel = "stylesheet" href = "styles.css">

</head>

<body>

<h1 id="header"></h1>

<p>Karibu bongoclass</p>

</body>

</html>

Kisha angalia palipoandikwa CSS pesa code hizo za css

body {

background-color: black;

}

h1 {

color: ForestGreen;

font-family: Arial, Helvetica, sans-serif;

}

Baada ya hapo bofya palipoandikwa run kwa juu upande wa kulia. Kama umefuata vyema maelekezo utaona upande wa kulia kuna palipoandikwa karibu bongoclass

Kwama unatumia simu kutakuwa na utofauti kidogo lakini maelezo hayo niliotoa yanatosheleza.

Mpaka kufikia hapo umeona faili letu la html limesoma. Sasa tunataka output za dart zionekane kwenye html. Mfano tunataka tukiprint text kwenye dart zisome kwenye html file. Kufanya hivi kwanza utatakiwa kuweka id kwenye html zako wapi unataka kuona hizo output.

Tuseme tunataka kuweka title mafunzo ya Dart na tunataka title hii isome kwenye <h1> tag. Hii tag itaitwa selector hivyo basi hii selector tutaiita wneye code za dart kw akutumia id yake. Mfano <h1 id="header"></h1> hapo id ya selector yetu ni header. Rejea mafunzo yetu ya css kujifunz zaidi kuhusu selectors.

Unaweza kuwa na selector zaidi ya moja kwenye faili na zote zikawa na id zao. Kumbuka id haitakiwi kufanana. Pia kwenye Dart unaweza kuita selector zaidi ya moja. Sasa function inayotumika kuita hizo selector kwenye dart ni querySelector() ndani ya hiyo function utaweka hiyo id ya selector yako.

Mfano

querySelector(‘#header’)

Hivyo basi tutatengeneza variable kwa ajili ya ku access hiyo selector yetu

var header = querySelector('#header');

Kisha tutakwenda kuitumia variable yetu ili kupeleka data zetu kwenye faili la html

header.text = "Mafunzo ya Dart";

Code nzima zitaonekana hivi:-

import 'dart:html';

void main()

{

var header = querySelector('#header');

header?.text = "Mafunzo ya Dart";

}

Unaweza kuongeza function nyingibne na hata click event. Rejea mafunzo yetu ya javascript utajifynza mengine jinsi ya kutumia id ili kucheza na html. Sasa ngoja turudi kwenye njia yetu ya offline.

Kwa kutumia webstorm IDE

Hii ni software kwa ajili ya kutengeneza web app. Watengenezaji wa software hii ni jetbrain. Unawez aku download free kwenye website yao ya jetbrain. Link nimetoa kwenye somo la kwanza. Rejea jinsi ya kuitumia, kwanz autatakiwa ku download dart plugin. plugin hii ni free. kisha utachaguwa Bare-bones Web App kama inavyoelekewa kwenye picha namba tatu hapo chini:-

Ukishafunguwa software hii tengeneza project mpya kw akuboofya palipoandikwa new project. Kwenye list chaguwa Dart kama inavyo onueshwa kwenye picha namba 1 hapo chini. kisah weka jina la project yako kama inavo onyeshwa kwnye picha namba 2 hapo chini.

Kwenye list kwa chini chaguwa web App namba 3 hapo kwenye picha. Weka tiki kwenye generate sample code. Kisha bofya create kwa chini upande wa kulia. Kuwa na subira hadi imalize kuchakata mafaili. Ikiona imetulia basi upo taari kutumia.

Utaona kuna mafaili matatu yamefunguka kwenye IDE yako ambayo ni

pubspec.yaml
index.html
main.dart

Halafu kwa upade wa kushoto utaona kuna mafolda haya

Sasa bofya hapo kwenye folda lililo na jina la project yako. Kwa mimi hapo nitabofya course-ya-dart. Ukifanya hivyo utaona kuna list kubwa ya mafaili na mafolda.

Hapo bofya hilo folda lililoandikwa web, hapo ndipo kwenye code zetu abazo tutakwenda kuzitumia. Funguwa hapo kisha fungua faili la index.html ambalo tayari limeshafunguka. Hivyo bfya run batani iliyopo uande wa kulia kwa juu kama tulivyokuwa tukifanya toka mwanzoni.

Utaona hapo kuna link http://127.0.0.1:60746 hapo ndipo utaweza kuifunguwa project yako kwenye browser. Kama hiyo link itasumbuwa rudi kwenye hilo gaili lako la html kisha upande wa kulia kwa ndani ya code za html utaona kuna browser. Hapo chaguwa browser unayotaka kufunguwa